/*
 * MPT Water Management — gaya front-end dan dashboard.
 * Mandiri terhadap tema: semua warna berasal dari variabel --mptwm-* dan permukaan aplikasi memakai
 * latar sendiri, sehingga terbaca di tema terang maupun gelap. Mode: terang (bawaan), gelap, otomatis (ikuti perangkat).
 * Warna tombol memakai !important + selektor ber-ID agar tidak dikalahkan CSS tema.
 */.mptwm-wrap,.mptwm-admin{
  --mptwm-accent:#0b5c8a;--mptwm-on-accent:#ffffff;--mptwm-page:#f3f6f9;--mptwm-surface:#ffffff;
  --mptwm-text:#1d2733;--mptwm-muted:#56637a;--mptwm-line:#d5dde5;--mptwm-input-bd:#9fb0c1;
  --mptwm-ok-bg:#d9f2e0;--mptwm-ok-fg:#0d5224;--mptwm-warn-bg:#ffe9c2;--mptwm-warn-fg:#6b4200;
  --mptwm-bad-bg:#ffd9d6;--mptwm-bad-fg:#7a120c;--mptwm-neu-bg:#e7e7e7;--mptwm-neu-fg:#333333;--mptwm-info-bg:#e6f1f8;
}
.mptwm-theme-dark .mptwm-wrap,.mptwm-wrap.mptwm-theme-dark{
  --mptwm-accent:#5db4e8;--mptwm-on-accent:#04121d;--mptwm-page:#0f1722;--mptwm-surface:#17222f;
  --mptwm-text:#e9eff6;--mptwm-muted:#a3b3c5;--mptwm-line:#2d3c4e;--mptwm-input-bd:#53667c;
  --mptwm-ok-bg:#16402a;--mptwm-ok-fg:#bdecc9;--mptwm-warn-bg:#4a3510;--mptwm-warn-fg:#ffdca0;
  --mptwm-bad-bg:#521b17;--mptwm-bad-fg:#ffc9c4;--mptwm-neu-bg:#2a3644;--mptwm-neu-fg:#d6dee8;--mptwm-info-bg:#173246;
}
@media (prefers-color-scheme: dark){
  .mptwm-theme-auto .mptwm-wrap,.mptwm-wrap.mptwm-theme-auto{
    --mptwm-accent:#5db4e8;--mptwm-on-accent:#04121d;--mptwm-page:#0f1722;--mptwm-surface:#17222f;
    --mptwm-text:#e9eff6;--mptwm-muted:#a3b3c5;--mptwm-line:#2d3c4e;--mptwm-input-bd:#53667c;
    --mptwm-ok-bg:#16402a;--mptwm-ok-fg:#bdecc9;--mptwm-warn-bg:#4a3510;--mptwm-warn-fg:#ffdca0;
    --mptwm-bad-bg:#521b17;--mptwm-bad-fg:#ffc9c4;--mptwm-neu-bg:#2a3644;--mptwm-neu-fg:#d6dee8;--mptwm-info-bg:#173246;
  }
}
.mptwm-wrap{box-sizing:border-box;max-width:960px;margin:12px auto;padding:12px;font-size:16px;line-height:1.45;
  color:var(--mptwm-text);background:var(--mptwm-page);border-radius:14px}
.mptwm-wrap *,.mptwm-admin *{box-sizing:border-box}
.mptwm-wrap h1,.mptwm-wrap h2,.mptwm-wrap h3,.mptwm-wrap p,.mptwm-wrap li,.mptwm-wrap label,.mptwm-wrap td,.mptwm-wrap th{color:var(--mptwm-text)}
.mptwm-wrap a{color:var(--mptwm-accent)}
.mptwm-card{background:var(--mptwm-surface);border:1px solid var(--mptwm-line);border-radius:10px;padding:14px;margin:12px 0;color:var(--mptwm-text)}
.mptwm-card h2,.mptwm-card h3{margin-top:0}
.mptwm-meta{font-size:.85em;color:var(--mptwm-muted)!important}
.mptwm-wrap .mptwm-meta{color:var(--mptwm-muted)}


/* Kepala aplikasi */.mptwm-head{display:flex;flex-direction:column;gap:8px;background:var(--mptwm-accent);border-radius:10px;padding:12px}
.mptwm-wrap .mptwm-head,.mptwm-wrap .mptwm-head strong,.mptwm-wrap .mptwm-head .mptwm-sub{color:var(--mptwm-on-accent)}
.mptwm-title{display:flex;flex-direction:column}
.mptwm-title strong{font-size:1.15em}
.mptwm-sub{opacity:.92;font-size:.9em}
.mptwm-chips,.mptwm-actions{display:flex;flex-wrap:wrap;gap:6px}
.mptwm-chip{display:inline-block;border-radius:999px;padding:2px 10px;font-size:.85em;background:var(--mptwm-neu-bg);color:var(--mptwm-neu-fg)}
.mptwm-wrap .mptwm-chip-ok{background:var(--mptwm-ok-bg);color:var(--mptwm-ok-fg)}
.mptwm-wrap .mptwm-chip-off{background:var(--mptwm-neu-bg);color:var(--mptwm-neu-fg)}
.mptwm-wrap .mptwm-chip-warn{background:var(--mptwm-warn-bg);color:var(--mptwm-warn-fg)}
.mptwm-wrap .mptwm-chip-bad{background:var(--mptwm-bad-bg);color:var(--mptwm-bad-fg)}


/* Tombol, tab, dan baris rumah: warna dipaksa agar tidak ditimpa tema */#mptwm-petugas-app .mptwm-btn,#mptwm-petugas-app .mptwm-tab,#mptwm-petugas-app .mptwm-house,
.mptwm-wrap input[type=submit],.mptwm-wrap .mptwm-btn{
  -webkit-appearance:none;appearance:none;cursor:pointer;font-family:inherit;font-size:1em;font-weight:600;line-height:1.3;
  text-transform:none!important;letter-spacing:normal!important;text-shadow:none!important;text-decoration:none!important;
  box-shadow:none!important;border-radius:8px;min-height:44px;opacity:1;
  color:var(--b-fg,var(--mptwm-accent))!important;-webkit-text-fill-color:var(--b-fg,var(--mptwm-accent))!important;
  background:var(--b-bg,var(--mptwm-surface))!important;border:1px solid var(--b-bd,var(--mptwm-accent))!important;
}
#mptwm-kasir-app .mptwm-btn,#mptwm-kasir-app .mptwm-tab,#mptwm-kasir-app .mptwm-house{
  -webkit-appearance:none;appearance:none;cursor:pointer;font-family:inherit;font-size:1em;font-weight:600;line-height:1.3;
  text-transform:none!important;letter-spacing:normal!important;text-shadow:none!important;text-decoration:none!important;
  box-shadow:none!important;border-radius:8px;min-height:44px;opacity:1;
  color:var(--b-fg,var(--mptwm-accent))!important;-webkit-text-fill-color:var(--b-fg,var(--mptwm-accent))!important;
  background:var(--b-bg,var(--mptwm-surface))!important;border:1px solid var(--b-bd,var(--mptwm-accent))!important;
}
#mptwm-petugas-app .mptwm-btn{display:inline-flex;align-items:center;justify-content:center;padding:10px 14px;--b-fg:var(--mptwm-accent);--b-bg:var(--mptwm-surface);--b-bd:var(--mptwm-accent)}
#mptwm-kasir-app .mptwm-btn{display:inline-flex;align-items:center;justify-content:center;padding:10px 14px;--b-fg:var(--mptwm-accent);--b-bg:var(--mptwm-surface);--b-bd:var(--mptwm-accent)}
#mptwm-petugas-app .mptwm-head .mptwm-btn{--b-fg:var(--mptwm-accent);--b-bg:var(--mptwm-surface);--b-bd:var(--mptwm-surface)}
#mptwm-kasir-app .mptwm-head .mptwm-btn{--b-fg:var(--mptwm-accent);--b-bg:var(--mptwm-surface);--b-bd:var(--mptwm-surface)}
#mptwm-petugas-app .mptwm-head .mptwm-btn-ghost{--b-fg:var(--mptwm-on-accent);--b-bg:transparent;--b-bd:var(--mptwm-on-accent)}
#mptwm-kasir-app .mptwm-head .mptwm-btn-ghost{--b-fg:var(--mptwm-on-accent);--b-bg:transparent;--b-bd:var(--mptwm-on-accent)}
#mptwm-petugas-app .mptwm-btn-primary{--b-fg:var(--mptwm-on-accent);--b-bg:var(--mptwm-accent);--b-bd:var(--mptwm-accent)}
#mptwm-kasir-app .mptwm-btn-primary{--b-fg:var(--mptwm-on-accent);--b-bg:var(--mptwm-accent);--b-bd:var(--mptwm-accent)}
#mptwm-petugas-app .mptwm-card .mptwm-btn-ghost,#mptwm-petugas-app .mptwm-q .mptwm-btn-ghost{--b-fg:var(--mptwm-accent);--b-bg:var(--mptwm-surface);--b-bd:var(--mptwm-accent)}
#mptwm-kasir-app .mptwm-card .mptwm-btn-ghost,#mptwm-kasir-app .mptwm-q .mptwm-btn-ghost{--b-fg:var(--mptwm-accent);--b-bg:var(--mptwm-surface);--b-bd:var(--mptwm-accent)}
#mptwm-petugas-app .mptwm-btn-big{width:100%;font-size:1.15em;min-height:54px}
#mptwm-kasir-app .mptwm-btn-big{width:100%;font-size:1.15em;min-height:54px}
#mptwm-petugas-app .mptwm-btn-small{padding:6px 10px;min-height:36px;font-size:.9em}
#mptwm-kasir-app .mptwm-btn-small{padding:6px 10px;min-height:36px;font-size:.9em}
#mptwm-petugas-app .mptwm-btn:disabled{opacity:.55;cursor:not-allowed}
#mptwm-kasir-app .mptwm-btn:disabled{opacity:.55;cursor:not-allowed}
#mptwm-petugas-app .mptwm-btn:hover,#mptwm-petugas-app .mptwm-btn:focus-visible,#mptwm-petugas-app .mptwm-tab:hover,#mptwm-petugas-app .mptwm-house:hover{filter:brightness(.94)}
#mptwm-kasir-app .mptwm-btn:hover,#mptwm-kasir-app .mptwm-btn:focus-visible,#mptwm-kasir-app .mptwm-tab:hover,#mptwm-kasir-app .mptwm-house:hover{filter:brightness(.94)}
#mptwm-petugas-app .mptwm-btn:focus-visible,#mptwm-petugas-app .mptwm-tab:focus-visible,#mptwm-petugas-app .mptwm-house:focus-visible{outline:3px solid var(--mptwm-accent);outline-offset:2px}
#mptwm-kasir-app .mptwm-btn:focus-visible,#mptwm-kasir-app .mptwm-tab:focus-visible,#mptwm-kasir-app .mptwm-house:focus-visible{outline:3px solid var(--mptwm-accent);outline-offset:2px}
.mptwm-wrap .mptwm-label,.mptwm-wrap .mptwm-label *{color:inherit!important;-webkit-text-fill-color:currentColor!important;background:transparent!important;font:inherit;text-transform:none!important}


/* Tab */.mptwm-tabs{display:flex;gap:6px;margin:12px 0}
#mptwm-petugas-app .mptwm-tab{flex:1;padding:12px 8px;--b-fg:var(--mptwm-text);--b-bg:var(--mptwm-surface);--b-bd:var(--mptwm-line)}
#mptwm-kasir-app .mptwm-tab{flex:1;padding:12px 8px;--b-fg:var(--mptwm-text);--b-bg:var(--mptwm-surface);--b-bd:var(--mptwm-line)}
#mptwm-petugas-app .mptwm-tab.mptwm-tab-on{--b-fg:var(--mptwm-on-accent);--b-bg:var(--mptwm-accent);--b-bd:var(--mptwm-accent)}
#mptwm-kasir-app .mptwm-tab.mptwm-tab-on{--b-fg:var(--mptwm-on-accent);--b-bg:var(--mptwm-accent);--b-bd:var(--mptwm-accent)}


/* Catatan/peringatan */.mptwm-note{border-radius:8px;padding:10px 12px;margin:10px 0;border:1px solid var(--mptwm-line);background:var(--mptwm-surface)}
.mptwm-wrap .mptwm-note-error{background:var(--mptwm-bad-bg);color:var(--mptwm-bad-fg)}
.mptwm-wrap .mptwm-note-warning{background:var(--mptwm-warn-bg);color:var(--mptwm-warn-fg)}
.mptwm-wrap .mptwm-note-success{background:var(--mptwm-ok-bg);color:var(--mptwm-ok-fg)}
.mptwm-wrap .mptwm-note-info{background:var(--mptwm-info-bg);color:var(--mptwm-text)}
.mptwm-wrap .mptwm-note a{color:inherit;text-decoration:underline}


/* Formulir dan input */.mptwm-filters{display:flex;flex-direction:column;gap:8px;margin-bottom:8px}
.mptwm-wrap input[type=text],.mptwm-wrap input[type=search],.mptwm-wrap input[type=password],.mptwm-wrap select,.mptwm-wrap textarea{
  width:100%;font-size:1em;padding:10px;min-height:44px;border:1px solid var(--mptwm-input-bd);border-radius:8px;
  background:var(--mptwm-surface);color:var(--mptwm-text);-webkit-text-fill-color:var(--mptwm-text)}
.mptwm-wrap ::placeholder{color:var(--mptwm-muted);opacity:1}
.mptwm-form label{display:block;margin:12px 0 4px;font-weight:600}
.mptwm-wrap input[type=submit]{padding:10px 16px;--b-fg:var(--mptwm-on-accent);--b-bg:var(--mptwm-accent);--b-bd:var(--mptwm-accent)}


/* Daftar rumah dan antrean */.mptwm-wrap ul.mptwm-list,.mptwm-wrap ul.mptwm-activity,.mptwm-activity{list-style:none!important;margin:8px 0;padding:0}
.mptwm-wrap ul.mptwm-list>li,.mptwm-wrap ul.mptwm-activity>li,.mptwm-activity>li{list-style:none!important;margin:0;padding:0}
.mptwm-wrap ul.mptwm-list>li::marker,.mptwm-activity>li::marker{content:''}
.mptwm-list{display:flex;flex-direction:column;gap:8px}
#mptwm-petugas-app .mptwm-house{width:100%;display:flex;justify-content:space-between;gap:8px;align-items:center;text-align:left;padding:12px;min-height:60px;font-weight:400;--b-fg:var(--mptwm-text);--b-bg:var(--mptwm-surface);--b-bd:var(--mptwm-line)}
#mptwm-kasir-app .mptwm-house{width:100%;display:flex;justify-content:space-between;gap:8px;align-items:center;text-align:left;padding:12px;min-height:60px;font-weight:400;--b-fg:var(--mptwm-text);--b-bg:var(--mptwm-surface);--b-bd:var(--mptwm-line)}
.mptwm-house-main,.mptwm-house-side{display:flex;flex-direction:column;gap:2px}
.mptwm-house-side{align-items:flex-end;font-size:.85em}
#mptwm-petugas-app .mptwm-house .mptwm-house-main strong{color:var(--mptwm-text)!important;-webkit-text-fill-color:var(--mptwm-text)!important;font-size:1.05em}
#mptwm-kasir-app .mptwm-house .mptwm-house-main strong{color:var(--mptwm-text)!important;-webkit-text-fill-color:var(--mptwm-text)!important;font-size:1.05em}
#mptwm-petugas-app .mptwm-house .mptwm-house-main span{color:var(--mptwm-muted)!important;-webkit-text-fill-color:var(--mptwm-muted)!important}
#mptwm-kasir-app .mptwm-house .mptwm-house-main span{color:var(--mptwm-muted)!important;-webkit-text-fill-color:var(--mptwm-muted)!important}
#mptwm-petugas-app .mptwm-house .mptwm-house-side>span:first-child{color:var(--mptwm-muted)!important;-webkit-text-fill-color:var(--mptwm-muted)!important}
#mptwm-kasir-app .mptwm-house .mptwm-house-side>span:first-child{color:var(--mptwm-muted)!important;-webkit-text-fill-color:var(--mptwm-muted)!important}
.mptwm-empty{padding:18px;text-align:center;color:var(--mptwm-muted)}
.mptwm-wrap .mptwm-empty{color:var(--mptwm-muted)}
.mptwm-q{display:flex;flex-direction:column;gap:6px;border:1px solid var(--mptwm-line);background:var(--mptwm-surface);border-radius:10px;padding:12px}
.mptwm-q-main,.mptwm-q-side{display:flex;flex-direction:column;gap:2px}
.mptwm-q-actions{display:flex;flex-wrap:wrap;gap:6px}
.mptwm-wrap .mptwm-q strong,.mptwm-wrap .mptwm-q span{color:var(--mptwm-text)}
.mptwm-wrap .mptwm-q .mptwm-meta{color:var(--mptwm-muted)}
.mptwm-loglist{padding-left:18px;font-size:.9em}
.mptwm-usage{margin:8px 0;font-weight:600}
.mptwm-wrap .mptwm-usage-warn{color:var(--mptwm-warn-fg);background:var(--mptwm-warn-bg);padding:4px 8px;border-radius:6px}


/* Lencana status */.mptwm-badge{display:inline-block;border-radius:6px;padding:1px 8px;font-size:.8em;background:var(--mptwm-neu-bg);color:var(--mptwm-neu-fg)}
.mptwm-wrap .mptwm-badge-done,.mptwm-wrap .mptwm-badge-tersinkron,.mptwm-wrap .mptwm-badge-valid,.mptwm-wrap .mptwm-badge-aktif,.mptwm-wrap .mptwm-badge-srv-valid,
#mptwm-petugas-app .mptwm-house .mptwm-badge-done{background:var(--mptwm-ok-bg)!important;color:var(--mptwm-ok-fg)!important;-webkit-text-fill-color:var(--mptwm-ok-fg)!important}
#mptwm-kasir-app .mptwm-house .mptwm-badge-done{background:var(--mptwm-ok-bg)!important;color:var(--mptwm-ok-fg)!important;-webkit-text-fill-color:var(--mptwm-ok-fg)!important}
.mptwm-wrap .mptwm-badge-todo,.mptwm-wrap .mptwm-badge-menunggu,.mptwm-wrap .mptwm-badge-dikirim,.mptwm-wrap .mptwm-badge-kosong,.mptwm-wrap .mptwm-badge-srv-menunggu_validasi,
#mptwm-petugas-app .mptwm-house .mptwm-badge-todo{background:var(--mptwm-warn-bg)!important;color:var(--mptwm-warn-fg)!important;-webkit-text-fill-color:var(--mptwm-warn-fg)!important}
#mptwm-kasir-app .mptwm-house .mptwm-badge-todo{background:var(--mptwm-warn-bg)!important;color:var(--mptwm-warn-fg)!important;-webkit-text-fill-color:var(--mptwm-warn-fg)!important}
.mptwm-wrap .mptwm-badge-gagal,.mptwm-wrap .mptwm-badge-perlu_pemeriksaan,.mptwm-wrap .mptwm-badge-srv-perlu_pemeriksaan,.mptwm-wrap .mptwm-badge-srv-ditolak,.mptwm-wrap .mptwm-badge-nonaktif{background:var(--mptwm-bad-bg);color:var(--mptwm-bad-fg)}


/* Dashboard */.mptwm-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin:12px 0}
.mptwm-stat{background:var(--mptwm-surface);border:1px solid var(--mptwm-line);border-radius:10px;padding:12px;display:flex;flex-direction:column;gap:4px}
.mptwm-wrap .mptwm-stat span{font-size:.85em;color:var(--mptwm-muted)}
.mptwm-wrap .mptwm-stat strong{font-size:1.8em;color:var(--mptwm-text)}
.mptwm-admin .mptwm-stat span{font-size:.85em;color:var(--mptwm-muted)}
.mptwm-admin .mptwm-stat strong{font-size:1.8em;color:var(--mptwm-text)}
.mptwm-card-warn{border-color:var(--mptwm-warn-fg)}
.mptwm-card-bad{border-color:var(--mptwm-bad-fg)}
.mptwm-bars{display:flex;align-items:flex-end;gap:8px;height:190px;padding-top:20px}
.mptwm-bar-col{flex:1;height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:4px;min-width:0}
.mptwm-bar{width:70%;background:var(--mptwm-accent);border-radius:4px 4px 0 0;min-height:2px}
.mptwm-bar-val,.mptwm-bar-label{font-size:.75em;color:var(--mptwm-muted)}
.mptwm-table-scroll{overflow-x:auto}
.mptwm-wrap table,.mptwm-wrap table.mptwm-table{border-collapse:collapse;border:0;width:100%;background:transparent}
.mptwm-wrap table th,.mptwm-wrap table td{border:0;border-bottom:1px solid var(--mptwm-line);color:var(--mptwm-text);background:transparent;padding:8px;text-align:left}
.mptwm-wrap table th{background:var(--mptwm-page);font-weight:700}
.mptwm-wrap .mptwm-activity li{padding:8px 0;border-bottom:1px solid var(--mptwm-line)}
.mptwm-admin .mptwm-activity li{padding:8px 0;border-bottom:1px solid #eef1f4}
@media (min-width:700px){.mptwm-head{flex-direction:row;align-items:center;justify-content:space-between;flex-wrap:wrap}.mptwm-filters{flex-direction:row}}

/* Halaman kasir */
.mptwm-kasir-bar{position:sticky;bottom:0;z-index:5;display:flex;gap:8px;align-items:center;justify-content:space-between;flex-wrap:wrap;background:var(--mptwm-surface);border:1px solid var(--mptwm-line);border-radius:10px;padding:10px 12px;margin-top:12px;box-shadow:0 -2px 8px rgba(0,0,0,.12)}
.mptwm-wrap .mptwm-kasir-bar strong{color:var(--mptwm-text)}
.mptwm-bill{display:flex;flex-direction:column;gap:8px;border:1px solid var(--mptwm-line);background:var(--mptwm-surface);border-radius:10px;padding:12px}
.mptwm-bill-top{display:flex;gap:10px;align-items:flex-start}
.mptwm-bill-top input[type=checkbox]{width:24px;height:24px;margin-top:2px;flex:0 0 auto}
.mptwm-bill-main{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.mptwm-wrap .mptwm-bill strong,.mptwm-wrap .mptwm-bill span,.mptwm-wrap .mptwm-bill label{color:var(--mptwm-text)}
.mptwm-wrap .mptwm-bill .mptwm-meta{color:var(--mptwm-muted)}
.mptwm-bill-saldo{font-size:1.25em;font-weight:700;text-align:right;white-space:nowrap}
.mptwm-bill-actions{display:flex;flex-wrap:wrap;gap:6px}
.mptwm-bill-more{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:4px}
.mptwm-bill-more .mptwm-full{grid-column:1 / -1}
.mptwm-wrap .mptwm-late{background:var(--mptwm-bad-bg);color:var(--mptwm-bad-fg)}