*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#ffffff;--bg2:#f8f8f6;--bg3:#f2f1ee;
  --text:#1a1a18;--text2:#6b6b67;--text3:#9b9b96;
  --border:rgba(0,0,0,0.1);--border2:rgba(0,0,0,0.18);
  --blue:#185FA5;--blue-bg:#E6F1FB;--blue-text:#185FA5;
  --green:#1D9E75;--green-bg:#EAF3DE;--green-text:#3B6D11;
  --red:#E24B4A;--red-bg:#FCEBEB;--red-text:#A32D2D;
  --amber:#EF9F27;--amber-bg:#FAEEDA;--amber-text:#854F0B;
  --gray-bg:#F1EFE8;--gray-text:#5F5E5A;
  --radius:8px;--radius-lg:12px;
}

/* Dark theme toggle */
:root.dark-theme {
  --bg:#1e1e1c;--bg2:#272725;--bg3:#2e2e2c;
  --text:#f0f0ec;--text2:#a0a09c;--text3:#6a6a66;
  --border:rgba(255,255,255,0.1);--border2:rgba(255,255,255,0.18);
  --blue-bg:#0c2a4a;--blue-text:#7ab8f0;
  --green-bg:#0a2e20;--green-text:#6dd4a8;
  --red-bg:#2e1010;--red-text:#f08080;
  --amber-bg:#2e1e04;--amber-text:#f0b84a;
  --gray-bg:#333330;--gray-text:#a0a09c;
}

html,body{height:100%;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;font-size:14px;color:var(--text);background:var(--bg3);line-height:1.5}
.app{display:flex;height:100vh;overflow:hidden}
.sidebar{width:210px;min-width:210px;background:var(--bg);border-right:0.5px solid var(--border);display:flex;flex-direction:column;overflow-y:auto}
.main-wrap{flex:1;overflow-y:auto}

/* ===== LAYOUT FIX: FULL WIDTH ===== */
.main{
  padding:20px 32px;
  width:100%;
  max-width:100%; /* was 1000px – removed */
}

.sidebar-header{padding:16px;border-bottom:0.5px solid var(--border)}
.sidebar-title{font-size:14px;font-weight:600;color:var(--text)}
.sidebar-sub{font-size:11px;color:var(--text2);margin-top:2px}
.nav-section{padding:8px 0}
.nav-label{font-size:10px;font-weight:600;color:var(--text3);text-transform:uppercase;letter-spacing:.8px;padding:6px 16px 2px}
.nav-item{display:flex;align-items:center;gap:9px;padding:8px 16px;cursor:pointer;font-size:13px;color:var(--text2);background:none;border:none;width:100%;text-align:left;transition:all .12s;font-family:inherit}
.nav-item:hover{background:var(--bg2);color:var(--text)}
.nav-item.active{background:var(--blue-bg);color:var(--blue-text);font-weight:500}
.nav-icon{font-size:16px;width:20px;text-align:center}
.sidebar-footer{margin-top:auto;padding:12px 16px;border-top:0.5px solid var(--border);font-size:11px;color:var(--text3);line-height:1.7}
.page-header{margin-bottom:20px;display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap}
.page-header h1{font-size:18px;font-weight:600;color:var(--text)}
.page-header p{font-size:13px;color:var(--text2);margin-top:2px}
.metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px;margin-bottom:18px}
.metric{background:var(--bg2);border-radius:var(--radius);padding:14px 16px}
.metric-label{font-size:11px;color:var(--text2);font-weight:500;text-transform:uppercase;letter-spacing:.4px;margin-bottom:6px}
.metric-val{font-size:24px;font-weight:600;line-height:1}
.metric-sub{font-size:11px;color:var(--text2);margin-top:4px}
.c-green{color:var(--green)}.c-red{color:var(--red)}.c-amber{color:var(--amber)}.c-blue{color:var(--blue)}
.card{background:var(--bg);border:0.5px solid var(--border);border-radius:var(--radius-lg);padding:16px 18px;margin-bottom:14px}
.card-title{font-size:13px;font-weight:600;color:var(--text);margin-bottom:14px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.badge{display:inline-flex;align-items:center;padding:2px 8px;border-radius:99px;font-size:11px;font-weight:500;white-space:nowrap}
.badge-green{background:var(--green-bg);color:var(--green-text)}
.badge-red{background:var(--red-bg);color:var(--red-text)}
.badge-amber{background:var(--amber-bg);color:var(--amber-text)}
.badge-blue{background:var(--blue-bg);color:var(--blue-text)}
.badge-gray{background:var(--gray-bg);color:var(--gray-text)}
.prog-wrap{background:var(--bg3);border-radius:99px;height:7px;overflow:hidden;margin:4px 0 2px}
.prog-bar{height:100%;border-radius:99px;transition:width .5s ease}
.prog-green{background:var(--green)}.prog-amber{background:var(--amber)}.prog-red{background:var(--red)}
.tbl-wrap{overflow-x:auto;border-radius:var(--radius);border:0.5px solid var(--border)}
table{width:100%;border-collapse:collapse;font-size:13px;min-width:480px}
thead th{background:var(--bg2);font-weight:500;padding:8px 12px;text-align:left;white-space:nowrap;border-bottom:0.5px solid var(--border);font-size:12px;color:var(--text2)}
tbody td{padding:8px 12px;border-bottom:0.5px solid var(--border);vertical-align:middle}
tbody tr:last-child td{border-bottom:none}
tbody tr:hover td{background:var(--bg2)}
.btn{display:inline-flex;align-items:center;gap:5px;padding:7px 13px;border-radius:var(--radius);border:0.5px solid var(--border2);font-size:13px;cursor:pointer;background:var(--bg);color:var(--text);font-weight:500;white-space:nowrap;transition:all .12s;font-family:inherit}
.btn:hover{background:var(--bg2)}.btn:active{transform:scale(.98)}
.btn-primary{background:var(--blue);color:#fff;border-color:var(--blue)}.btn-primary:hover{background:#0c447c}
.btn-danger{background:var(--red-bg);color:var(--red-text);border-color:#f7c1c1}.btn-danger:hover{background:#f7c1c1}
.btn-success{background:var(--green-bg);color:var(--green-text);border-color:#9FE1CB}
.btn-sm{padding:4px 9px;font-size:12px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.form-group{display:flex;flex-direction:column;gap:4px}
.form-group.span2{grid-column:1/-1}
label{font-size:12px;font-weight:500;color:var(--text2)}
input,select,textarea{border:0.5px solid var(--border2);border-radius:var(--radius);padding:7px 10px;font-size:13px;background:var(--bg);color:var(--text);width:100%;font-family:inherit}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 2px rgba(24,95,165,.12)}
textarea{resize:vertical;min-height:60px}
.toolbar{display:flex;align-items:center;gap:8px;margin-bottom:12px;flex-wrap:wrap}
.search{position:relative;flex:1;min-width:200px;max-width:300px}
.search input{padding-left:30px}
.search::before{content:'🔍';position:absolute;left:9px;top:50%;transform:translateY(-50%);font-size:12px;pointer-events:none}
.modal-bg{position:fixed;inset:0;background:rgba(0,0,0,.45);display:flex;align-items:center;justify-content:center;z-index:1000;padding:16px}
.modal{background:var(--bg);border-radius:var(--radius-lg);padding:20px;width:100%;max-width:560px;max-height:90vh;overflow-y:auto;border:0.5px solid var(--border2)}
.modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
.modal-header h3{font-size:15px;font-weight:600}
.modal-footer{display:flex;justify-content:flex-end;gap:8px;margin-top:16px;padding-top:14px;border-top:0.5px solid var(--border)}
.toast{position:fixed;bottom:20px;right:20px;padding:10px 16px;border-radius:var(--radius);font-size:13px;z-index:2000;max-width:320px;box-shadow:0 4px 12px rgba(0,0,0,.12)}
.toast-success{background:var(--green-bg);color:var(--green-text);border:0.5px solid #9FE1CB}
.toast-error{background:var(--red-bg);color:var(--red-text);border:0.5px solid #f7c1c1}
.toast-info{background:var(--blue-bg);color:var(--blue-text);border:0.5px solid #B5D4F4}
.empty{text-align:center;padding:36px 20px;color:var(--text2)}
.empty-icon{font-size:32px;margin-bottom:8px}
.chart-donut{display:flex;align-items:center;gap:16px}
.donut-legend{flex:1;display:flex;flex-direction:column;gap:6px}
.legend-item{display:flex;align-items:center;gap:6px;font-size:12px}
.legend-dot{width:10px;height:10px;border-radius:2px;flex-shrink:0}
.kpi-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.kpi-chip{background:var(--bg2);border-radius:var(--radius);padding:8px 14px;font-size:12px;display:flex;align-items:center;gap:8px;border:0.5px solid var(--border)}
.kpi-chip b{font-size:17px;font-weight:600}
.settings-section{background:var(--bg);border:0.5px solid var(--border);border-radius:var(--radius-lg);padding:20px;margin-bottom:16px}
.settings-section h2{font-size:14px;font-weight:600;margin-bottom:4px}
.settings-section p{font-size:12px;color:var(--text2);margin-bottom:16px}
.purok-list{display:flex;flex-direction:column;gap:6px;margin-bottom:12px}
.purok-row{display:flex;align-items:center;gap:8px;padding:8px 10px;background:var(--bg2);border-radius:var(--radius);border:0.5px solid var(--border)}
.purok-row span{flex:1;font-size:13px}
.purok-row .purok-num{font-size:11px;color:var(--text3);min-width:22px;font-weight:600}
.add-purok-row{display:flex;gap:8px;align-items:center}
.add-purok-row input{flex:1}
.info-box{background:var(--blue-bg);border:0.5px solid #B5D4F4;border-radius:var(--radius);padding:10px 14px;font-size:12px;color:var(--blue-text);margin-bottom:14px}
.warn-box{background:var(--amber-bg);border:0.5px solid #FAC775;border-radius:var(--radius);padding:10px 14px;font-size:12px;color:var(--amber-text);margin-bottom:14px}

.switch{position:relative;display:inline-block;width:50px;height:28px;flex-shrink:0}
.switch input{opacity:0;width:0;height:0}
.slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:#ccc;transition:.2s;border-radius:28px}
.slider:before{position:absolute;content:"";height:20px;width:20px;left:4px;bottom:4px;background-color:white;transition:.2s;border-radius:50%}
input:checked+.slider{background-color:var(--blue)}
input:checked+.slider:before{transform:translateX(22px)}
:root.dark-theme .slider{background-color:#555}

@media print{.sidebar,.toolbar,.modal-bg,.btn,.toast,.float-save{display:none!important}.main-wrap{overflow:visible}.card{break-inside:avoid}}
@media(max-width:640px){
  .app{flex-direction:column}
  .sidebar{width:100%;min-width:0;height:auto;flex-direction:row;overflow-x:auto;border-right:none;border-bottom:0.5px solid var(--border)}
  .sidebar-header,.sidebar-footer,.nav-label,.save-section{display:none}
  .nav-section{display:flex;padding:4px}
  .nav-item{flex-direction:column;gap:2px;padding:6px 8px;font-size:10px;min-width:60px;justify-content:center}
  .nav-icon{font-size:20px}
  .main{padding:12px}
  .form-grid,.row2{grid-template-columns:1fr}
  .form-group.span2{grid-column:1}
  .metrics{grid-template-columns:repeat(2,1fr)}
}

.save-section{padding:12px 14px;border-top:0.5px solid var(--border)}
.btn-save{width:100%;background:var(--green);color:#fff;border:none;border-radius:var(--radius);padding:11px 14px;font-size:13px;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:7px;transition:all .15s;font-family:inherit;letter-spacing:.2px}
.btn-save:hover{background:#0F6E56}.btn-save:active{transform:scale(.98)}
.btn-save.dirty{animation:pulsave 1.8s ease-in-out infinite}
@keyframes pulsave{0%,100%{background:var(--green)}50%{background:#27c48e}}
.save-status{font-size:10px;text-align:center;margin-top:5px;min-height:14px;color:var(--text3);transition:color .2s}
.save-status.unsaved{color:var(--amber-text);font-weight:500}
.save-tools{display:flex;gap:6px;margin-top:8px}
.btn-tool{flex:1;background:var(--bg2);color:var(--text2);border:0.5px solid var(--border);border-radius:var(--radius);padding:6px 4px;font-size:11px;cursor:pointer;text-align:center;transition:all .12s;font-family:inherit;line-height:1.3}
.btn-tool:hover{background:var(--bg3);color:var(--text)}
.unsaved-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--amber);margin-right:4px;animation:blinkdot 1.2s ease-in-out infinite;vertical-align:middle}
@keyframes blinkdot{0%,100%{opacity:1}50%{opacity:.2}}
.float-save{position:fixed;bottom:24px;right:24px;background:var(--green);color:#fff;border:none;border-radius:50px;padding:11px 20px;font-size:13px;font-weight:600;cursor:pointer;display:none;align-items:center;gap:7px;box-shadow:0 4px 18px rgba(29,158,117,.45);z-index:999;transition:all .18s;font-family:inherit}
.float-save:hover{background:#0F6E56;transform:translateY(-2px);box-shadow:0 6px 22px rgba(29,158,117,.5)}
.float-save:active{transform:scale(.97)}
.float-save.show{display:flex;animation:popIn .2s ease}
@keyframes popIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.kbd{display:inline-block;background:rgba(255,255,255,.25);border-radius:3px;padding:1px 5px;font-size:10px;font-weight:400;letter-spacing:.5px}