.mobile-app-header,.mobile-bottom-nav,.mobile-menu-backdrop,.mobile-filter-toggle,.mobile-map-actions{display:none}
.mobile-evidence-preview{display:none}

@media(max-width:760px){
  body{font-size:15px}
  .app{display:block;min-height:100dvh;padding-bottom:calc(70px + env(safe-area-inset-bottom))}
  .main{width:100%;margin:0;min-width:0}
  .topbar,#pageBreadcrumb{display:none!important}
  .mobile-app-header{position:sticky;top:0;z-index:30;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px;padding:calc(8px + env(safe-area-inset-top)) 12px 8px;background:#fff;border-bottom:1px solid #dbe5ef;box-shadow:0 2px 8px #17314d0a}
  .mobile-app-brand{display:flex;align-items:center;gap:9px;min-width:0}
  .mobile-app-brand img{width:38px;height:38px;border-radius:10px;object-fit:cover}
  .mobile-app-brand div{display:grid;gap:2px;min-width:0}
  .mobile-app-brand strong{overflow:hidden;color:#12375b;font-size:12px;text-overflow:ellipsis;white-space:nowrap}
  .mobile-app-brand span{overflow:hidden;color:#62768b;font-size:11px;text-overflow:ellipsis;white-space:nowrap}
  .mobile-app-account{display:flex;align-items:center;gap:7px;max-width:43vw}
  .mobile-app-account>span{overflow:hidden;color:#51677e;font-size:10px;text-overflow:ellipsis;white-space:nowrap}
  #mobileInstallBtn{min-height:38px;padding:0 10px;border:1px solid #cbd9e6;border-radius:9px;background:#f4f9ff;color:#075ba4;font-weight:700}
  #mobileInstallBtn[hidden]{display:none}
  .mobile-install-help{grid-column:1/-1;margin:0;padding:7px 9px;border-radius:7px;background:#eef7ff;color:#244b6b;font-size:11px;line-height:1.45}
  .page{padding:12px 10px 22px}
  .page>.section-title{align-items:center;flex-wrap:wrap}
  .page>.section-title h3{font-size:16px}
  .mobile-bottom-nav{position:fixed;inset:auto 0 0;z-index:40;display:flex;gap:2px;padding:5px 5px calc(5px + env(safe-area-inset-bottom));border-top:1px solid #d7e1eb;background:#fff;box-shadow:0 -4px 16px #15375612}
  .mobile-bottom-nav button{display:grid;flex:1 1 0;place-content:center;justify-items:center;gap:2px;min-width:0;min-height:52px;padding:3px 1px;border:0;border-radius:9px;background:transparent;color:#64758a}
  .mobile-bottom-nav button[hidden]{display:none}
  .mobile-bottom-nav button>span{font-size:20px;line-height:1}
  .mobile-bottom-nav button>.nav-logo{width:24px;height:24px;object-fit:contain}
  .mobile-bottom-nav button>small{font-size:9px;font-weight:700;white-space:nowrap}
  .mobile-bottom-nav button.active{background:#eaf4ff;color:#075fae}
  .mobile-bottom-nav button:focus-visible,#mobileInstallBtn:focus-visible,.mobile-filter-toggle:focus-visible{outline:2px solid #0879e6;outline-offset:2px}
  .mobile-menu-backdrop{position:fixed;inset:0;z-index:50;width:100%;height:100%;border:0;background:#091a2c88}
  .app.mobile-menu-open .mobile-menu-backdrop{display:block}
  .sidebar,.app.sidebar-collapsed .sidebar{position:fixed;inset:0 auto 0 0;z-index:60;display:flex;width:min(310px,86vw);height:100dvh;overflow-y:auto;overscroll-behavior:contain;transform:translateX(-105%);transition:transform .22s ease}
  .app.mobile-menu-open .sidebar,.app.mobile-menu-open.sidebar-collapsed .sidebar{display:flex!important;transform:translateX(0)}
  .sidebar nav{gap:4px}
  .sidebar .nav-item{min-height:46px;font-size:14px}
  .side-message{font-size:16px}
  .app.mobile-menu-open{overflow:hidden}
  .mobile-filter-toggle{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:42px;padding:8px 12px;border:1px solid #d2deea;border-radius:9px;background:#fff;color:#173d60;font-size:13px;font-weight:700}
  #page-overview>.mobile-filter-toggle{width:100%;margin:0 0 8px}
  #page-overview>.toolbar,#page-mapping>#mappingFilters{display:none}
  #page-overview.mobile-filters-open>.toolbar,#page-mapping.mobile-filters-open>#mappingFilters{display:flex}
  .mobile-map-actions{display:flex;gap:8px;margin:0 0 8px}
  .mobile-map-actions .mobile-filter-toggle{flex:1}
  .mobile-map-actions #mobileMapLocate{background:#eef7ff;border-color:#bfdaef;color:#075ba4}
  #mobileMapNotice{margin:0 0 8px}
  .toolbar,.filter-panel{align-items:stretch;flex-direction:column}
  .filters.wide{display:grid;grid-template-columns:1fr;gap:8px;width:100%}
  .filters.wide select,.filters.wide input,.filters select,.filters input{width:100%;min-width:0;min-height:44px;font-size:16px}
  .toolbar>.btn,.toolbar .actions,.map-filter-actions{width:100%}
  .toolbar .actions>.btn,.map-filter-actions>.btn{flex:1;min-height:42px}
  .map-filter-actions{display:flex;gap:7px}
  .card{min-width:0;max-width:100%;padding:11px;border-radius:10px}
  .card-head,.section-title{gap:8px}
  .card-head h3,.section-title h3{font-size:14px;line-height:1.35}
  .card-head p,.section-title p,.muted{line-height:1.45}
  .news-actions{display:grid;grid-template-columns:minmax(0,1fr);width:100%;min-width:0;max-width:100%}
  .news-actions>*{width:100%;min-width:0;max-width:100%;min-height:42px}
  .performance-banner{grid-template-columns:36px minmax(0,1fr);gap:8px;padding:12px}
  .performance-banner .performance-motto{grid-column:2}
  .dashboard-brief{padding:12px}
  .dashboard-brief p{font-size:12px}
  .kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .kpi-card{min-height:102px;padding:10px}
  .kpi-card strong{font-size:23px}
  .kpi-card.status{grid-column:1/-1}
  .analytics-grid,.rules-grid,.cluster-help-grid,.cluster-page,.grid-2,.evidence-layout,.target-grid{grid-template-columns:minmax(0,1fr)}
  .chart-card,.chart-box{min-width:0;max-width:100%}
  .chart-card{min-height:245px}
  .chart-box{height:190px}
  .chart-box canvas{max-width:100%!important}
  .target-date-panel{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .target-date-panel>div,.target-date-panel>button{grid-column:1/-1}
  .target-date-panel label{min-width:0}
  .target-date-panel input{width:100%;min-height:42px;font-size:16px}
  .table-scroll{max-height:none}
  #recordsTable{display:block;width:100%;min-width:0;border-collapse:separate;border-spacing:0}
  #recordsTable thead{display:block;margin-bottom:9px}
  #recordsTable thead tr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
  #recordsTable thead th{display:none}
  #recordsTable thead th:nth-child(n+6){display:block;min-width:0;padding:7px;border:1px solid #dce6ef;border-radius:8px;background:#fff;position:static;white-space:normal;font-size:9px}
  #recordsTable thead th select{display:block;width:100%;min-width:0;min-height:38px;margin-top:5px;font-size:14px}
  #recordsTable tbody{display:grid;gap:9px}
  #recordsTable tbody tr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));overflow:hidden;border:1px solid #dce6ef;border-radius:10px;background:#fff;box-shadow:0 2px 7px #17314d0a}
  #recordsTable tbody td{display:flex;align-items:flex-start;gap:5px;min-width:0;padding:8px;border-bottom:1px solid #edf1f5;font-size:12px;overflow-wrap:anywhere}
  #recordsTable tbody td:before{flex:0 0 78px;color:#71849a;font-size:9px;font-weight:700;text-transform:uppercase}
  #recordsTable tbody td:nth-child(1){grid-column:1/-1;background:#f5f9fd;color:#123b5e;font-size:15px;font-weight:800}
  #recordsTable tbody td:nth-child(1):before{content:"Nopol"}
  #recordsTable tbody td:nth-child(2):before{content:"Pemilik"}
  #recordsTable tbody td:nth-child(3):before{content:"Samsat"}
  #recordsTable tbody td:nth-child(4):before{content:"Kab/Kota"}
  #recordsTable tbody td:nth-child(5):before{content:"Kecamatan"}
  #recordsTable tbody td:nth-child(6):before{content:"Usia"}
  #recordsTable tbody td:nth-child(7):before{content:"Golongan"}
  #recordsTable tbody td:nth-child(8):before{content:"Cluster"}
  #recordsTable tbody td:nth-child(9):before{content:"Status TL"}
  #recordsTable tbody td:nth-child(10):before{content:"Pembayaran"}
  #recordsTable tbody td[colspan]{grid-column:1/-1}
  #recordsTable tbody td[colspan]:before{content:none}
  #page-records .pager{justify-content:space-between}
  #page-records .pager .btn{min-width:48px;min-height:42px}
  .mapping-map-layout{grid-template-columns:minmax(0,1fr);gap:9px}
  #page-mapping .mapping-map-layout>#map{grid-column:1;width:100%;height:58dvh;min-height:360px;max-height:620px}
  #page-mapping .mapping-map-layout>#mapDetailPanel{grid-column:1;max-height:54dvh;min-height:200px}
  #page-mapping .map-card>.card-head{align-items:flex-start;flex-direction:column}
  #page-mapping .map-view-actions{display:flex;width:100%;justify-content:stretch}
  #page-mapping .map-view-actions>*{flex:1;min-width:0;min-height:42px}
  .map-renderer-controls{justify-content:flex-start}
  .map-detail-record{font-size:12px}
  .map-detail-record-main>b{font-size:14px}
  .map-detail-filters input,.map-detail-filters select{min-height:42px;font-size:16px}
  .map-detail-actions button,.map-detail-pager button{min-height:40px;font-size:12px}
  #waContactsTable{display:block;width:100%;min-width:0;border-collapse:separate;border-spacing:0}
  #waContactsTable thead{display:none}
  #waContactsTable tbody{display:grid;gap:9px}
  #waContactsTable tbody tr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));overflow:hidden;border:1px solid #dce6ef;border-radius:10px;background:#fff}
  #waContactsTable tbody td{display:flex;align-items:flex-start;gap:5px;min-width:0;padding:8px;border-bottom:1px solid #edf1f5;font-size:12px;overflow-wrap:anywhere}
  #waContactsTable tbody td:before{flex:0 0 75px;color:#71849a;font-size:9px;font-weight:700;text-transform:uppercase}
  #waContactsTable tbody td:nth-child(1){display:none}
  #waContactsTable tbody td:nth-child(2){grid-column:1/-1;background:#f5f9fd;color:#123b5e;font-size:15px;font-weight:800}
  #waContactsTable tbody td:nth-child(2):before{content:"Nopol"}
  #waContactsTable tbody td:nth-child(3):before{content:"Pemilik"}
  #waContactsTable tbody td:nth-child(4):before{content:"Samsat"}
  #waContactsTable tbody td:nth-child(5):before{content:"Kab/Kota"}
  #waContactsTable tbody td:nth-child(6):before{content:"Kecamatan"}
  #waContactsTable tbody td:nth-child(7):before{content:"WhatsApp"}
  #waContactsTable tbody td:nth-child(8):before{content:"Nomor"}
  #waContactsTable tbody td:nth-child(9):before{content:"Bayar"}
  #waContactsTable tbody td:nth-child(10):before{content:"Status WA"}
  #waContactsTable tbody td:nth-child(11){grid-column:1/-1;gap:8px;flex-wrap:wrap}
  #waContactsTable tbody td:nth-child(11):before{content:"Aksi";flex-basis:100%}
  #waContactsTable tbody td[colspan]{grid-column:1/-1}
  #waContactsTable tbody td[colspan]:before{content:none}
  .wa-stat-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .wa-stat-card{min-width:0;padding:10px}
  .wa-filter-grid{grid-template-columns:1fr}
  .wa-filter-grid input,.wa-filter-grid select,.wa-filter-actions>.btn{min-height:44px;font-size:16px}
  .wa-filter-actions{align-items:stretch;flex-direction:column}
  .wa-page-heading,.wa-page-actions{align-items:stretch;flex-direction:column}
  .wa-page-actions>*{min-height:42px}
  .wa-template-card textarea{width:100%;font-size:16px}
  .form-grid{grid-template-columns:1fr;gap:12px}
  .form-grid .span-2{grid-column:auto}
  .form-grid input,.form-grid select,.form-grid textarea{width:100%;min-height:44px;font-size:16px}
  .form-grid textarea{min-height:96px}
  .form-grid .btn{min-height:46px}
  .mobile-evidence-preview:not(.hidden){display:grid;grid-template-columns:76px minmax(0,1fr) auto;align-items:center;gap:9px;padding:9px;border:1px solid #dce6ef;border-radius:9px;background:#f8fbfe}
  .mobile-evidence-preview img{width:76px;height:76px;border-radius:7px;background:#e8eef5;object-fit:cover}
  .mobile-evidence-preview span{min-width:0;overflow-wrap:anywhere;color:#526a82;font-size:11px}
  .mobile-evidence-preview .btn{min-height:40px}
  .evidence-list{grid-template-columns:1fr}
  .app-credit{position:static;margin:8px 10px 12px;text-align:center}
  .modal{align-items:end;padding:0}
  .modal-card{width:100%;max-height:92dvh;overflow:auto;border-radius:16px 16px 0 0;padding:16px 13px calc(16px + env(safe-area-inset-bottom))}
  .modal-head{position:sticky;top:-16px;z-index:2;padding:8px 0;background:#fff}
  .mobile-menu-open .mobile-bottom-nav{pointer-events:none}
}

@media(max-width:380px){
  .mobile-app-account{max-width:38vw}
  .mobile-app-account>span{max-width:20vw}
  .mobile-bottom-nav button>small{font-size:8px}
  #recordsTable tbody tr,#waContactsTable tbody tr{grid-template-columns:1fr}
  #recordsTable tbody td:nth-child(1),#waContactsTable tbody td:nth-child(2),#waContactsTable tbody td:nth-child(11){grid-column:1}
  .wa-stat-grid{grid-template-columns:1fr 1fr}
}

@media(max-width:760px){
  #page-mapping>.section-title{align-items:flex-start}
  #page-mapping>.section-title>div{min-width:0}
  #page-mapping #zoneCount{max-width:46%;overflow-wrap:anywhere;font-size:10px;text-align:right}
  #page-mapping .mobile-map-actions{position:sticky;top:56px;z-index:20;gap:5px}
  #page-mapping .mobile-map-actions .mobile-filter-toggle{min-width:0;min-height:40px;padding:6px 7px;font-size:11px}
  #page-mapping .mobile-map-actions #mobileMapListToggle{background:#edf5ff;border-color:#c5d9ee;color:#075ba4}
  #page-mapping.mobile-filters-open>#mappingFilters{display:block;padding:9px}
  #page-mapping #mappingFilters .map-primary-filters{grid-template-columns:1fr}
  #page-mapping #mappingFilters .map-primary-filters>input{grid-column:auto}
  #page-mapping #mappingFilters .map-primary-filters>input,
  #page-mapping #mappingFilters .map-primary-filters>select,
  #page-mapping #mappingFilters .map-advanced-filter-fields>select{min-height:44px;font-size:16px}
  #page-mapping #mappingFilters .map-advanced-filter-fields{grid-template-columns:1fr}
  #page-mapping .map-filter-actions .btn{min-height:42px;font-size:12px}
  #page-mapping .map-card{position:relative;padding:9px}
  #page-mapping .map-view-toolbar{gap:5px;margin-bottom:6px}
  #page-mapping .map-view-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px}
  #page-mapping .map-view-actions>*{width:100%;min-height:40px;font-size:11px}
  #page-mapping .map-accuracy-note{font-size:10px}
  #page-mapping .map-data-note{font-size:10px}
  #page-mapping .mapping-map-layout{grid-template-columns:minmax(0,1fr);gap:0;height:auto}
  #page-mapping .mapping-map-layout>#map{grid-column:1;width:100%;height:58dvh;min-height:360px;max-height:620px}
  #page-mapping .mapping-map-layout>#mapDetailPanel{position:fixed;inset:auto 8px calc(78px + env(safe-area-inset-bottom));z-index:36;display:flex;width:auto;height:min(68dvh,620px);max-height:min(68dvh,620px);min-height:0;transform:translateY(calc(100% + 90px));transition:transform .2s ease;box-shadow:0 12px 36px #10273d35}
  #page-mapping.mobile-map-list-open .mapping-map-layout>#mapDetailPanel{transform:translateY(0)}
  #page-mapping .mobile-map-list-backdrop{display:none}
  #page-mapping.mobile-map-list-open .mobile-map-list-backdrop{position:fixed;inset:0 0 calc(70px + env(safe-area-inset-bottom));z-index:35;display:block;width:100%;height:auto;border:0;background:#10273d42}
  #page-mapping .map-detail-head{padding:10px}
  #page-mapping .map-detail-head h4{font-size:14px}
  #page-mapping .map-detail-filters{grid-template-columns:1fr 1fr;padding:8px}
  #page-mapping .map-detail-search{grid-column:1/-1}
  #page-mapping .map-detail-filters input,#page-mapping .map-detail-filters select{min-height:42px;font-size:16px}
  #page-mapping .map-detail-actions{align-items:center;flex-wrap:wrap;padding:7px}
  #page-mapping .map-detail-actions button,#page-mapping .map-detail-pager button{min-height:40px;font-size:12px}
  #page-mapping .map-detail-record{font-size:11px}
  #page-mapping .map-detail-record-main>b{font-size:13px}
  #page-mapping .map-legend-items{display:grid;grid-template-columns:1fr 1fr;gap:7px}
  #page-mapping .map-renderer-controls{justify-content:flex-start}
  #page-mapping .map-detail-close{min-height:38px;padding:6px 10px}
}

@media(prefers-reduced-motion:reduce){
  .sidebar{transition:none}
}