*{box-sizing:border-box}
body{margin:0;font-family:"Segoe UI",Roboto,Arial,sans-serif;font-size:14px;color:#1f2937;background:#f3f5f9}
a{color:#1d4ed8;text-decoration:none}a:hover{text-decoration:underline}
header.top{display:flex;align-items:center;gap:16px;background:#1e3a8a;color:#fff;padding:8px 16px;flex-wrap:wrap;position:sticky;top:0;z-index:10}
.brand{font-weight:700;font-size:17px}.brand small{font-weight:400;opacity:.75}
header nav{display:flex;gap:2px;flex-wrap:wrap;flex:1}
header nav a{color:#dbeafe;padding:7px 10px;border-radius:6px}
header nav a.active,header nav a:hover{background:#2f4fb0;color:#fff;text-decoration:none}
.userbox{display:flex;gap:10px;align-items:center}.userbox a{color:#fff}
.userbox select{padding:4px}
.menu-btn{display:none;background:none;border:0;color:#fff;font-size:22px;cursor:pointer}
main{padding:18px;max-width:1300px;margin:auto}
.card{background:#fff;border-radius:10px;padding:16px 18px;margin-bottom:16px;box-shadow:0 1px 3px rgba(0,0,0,.08)}
h1,h2,h3{margin:0 0 12px}h2{font-size:19px}h3{font-size:16px}
.grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}
.stat{background:#fff;border-radius:10px;padding:14px;box-shadow:0 1px 3px rgba(0,0,0,.08)}
.stat b{display:block;font-size:22px;margin-top:4px}.stat span{color:#6b7280}
label{display:block;font-size:12px;color:#4b5563;margin-bottom:3px}
input,select,textarea{width:100%;padding:7px 9px;border:1px solid #cbd5e1;border-radius:6px;font:inherit;background:#fff}
input[type=checkbox],input[type=radio]{width:auto}
.form-grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.req::after{content:" *";color:#dc2626}
.btn,button{display:inline-block;background:#1d4ed8;color:#fff;border:0;padding:8px 14px;border-radius:6px;cursor:pointer;font:inherit}
.btn:hover,button:hover{background:#1e40af;text-decoration:none}
.btn.gray{background:#6b7280}.btn.red,button.red{background:#dc2626}.btn.green,button.green{background:#16a34a}
.btn.sm,button.sm{padding:4px 9px;font-size:12px}
.actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:10px 0}
.inline{display:inline}
.table-wrap{overflow-x:auto}
table{border-collapse:collapse;width:100%}
th,td{padding:7px 8px;border-bottom:1px solid #e5e7eb;text-align:left;vertical-align:top}
th{background:#f1f5f9;font-weight:600;font-size:13px}
td.r,th.r{text-align:right}
tfoot td{font-weight:700;background:#f8fafc}
.flash{padding:10px 14px;border-radius:6px;margin-bottom:12px}
.flash.ok{background:#dcfce7;color:#166534}.flash.err{background:#fee2e2;color:#991b1b}.flash.warn{background:#fef9c3;color:#854d0e}
.muted{color:#6b7280}
.pager{margin-top:10px;display:flex;gap:6px}.pager a,.pager b{padding:3px 9px;border:1px solid #cbd5e1;border-radius:4px}
.pager b{background:#1d4ed8;color:#fff;border-color:#1d4ed8}
/* Month grid colours */
.months{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px}
.mcell{border-radius:8px;padding:9px;text-align:center;border:1px solid transparent}
.mcell .m{font-weight:700}.mcell .a{font-size:12px;margin-top:3px}.mcell .s{font-size:11px;margin-top:2px}
.paid{background:#dcfce7;border-color:#22c55e;color:#14532d}
.paidlate{background:#ffedd5;border-color:#f97316;color:#7c2d12}
.partial{background:#fef9c3;border-color:#eab308;color:#713f12}
.overdue{background:#fee2e2;border-color:#ef4444;color:#7f1d1d}
.upcoming{background:#f1f5f9;border-color:#cbd5e1;color:#334155}
.none{background:#fff;border:1px dashed #d1d5db;color:#9ca3af}
.badge{display:inline-block;padding:2px 8px;border-radius:10px;font-size:11px;border:1px solid}
.legend{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0;font-size:12px}
.legend span{padding:3px 8px;border-radius:5px;border:1px solid}
/* live search */
.search-box{position:relative}
.suggest{position:absolute;left:0;right:0;top:100%;background:#fff;border:1px solid #cbd5e1;border-radius:6px;max-height:340px;overflow:auto;z-index:20;box-shadow:0 6px 18px rgba(0,0,0,.12)}
.suggest a{display:block;padding:8px 10px;border-bottom:1px solid #f1f5f9;color:#111}
.suggest a:hover{background:#eff6ff;text-decoration:none}
.login{max-width:360px;margin:9vh auto}
.two{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:900px){.two{grid-template-columns:1fr}.menu-btn{display:block}header nav{display:none;flex-basis:100%;flex-direction:column}body.nav-open header nav{display:flex}}
@media print{header.top,.no-print,.flash{display:none!important}body{background:#fff}main{padding:0}.card{box-shadow:none}}
/* ---- user friendly additions ---- */
.suggest a.on{background:#dbeafe}.suggest .nores{padding:10px;color:#6b7280}
.tiles{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));margin-bottom:16px}
.tile{display:block;background:#fff;border-radius:12px;padding:18px 14px;text-align:center;box-shadow:0 1px 3px rgba(0,0,0,.1);color:#1e3a8a;font-weight:600;border:2px solid transparent}
.tile:hover{border-color:#1d4ed8;text-decoration:none}.tile .ic{font-size:30px;display:block;margin-bottom:6px}
.help{background:#eff6ff;border:1px solid #bfdbfe;border-radius:10px;padding:10px 14px;margin-bottom:16px}
.help summary{cursor:pointer;font-weight:600;color:#1e40af}.help ol,.help ul{margin:8px 0 2px;padding-left:20px}.help li{margin:3px 0}
.checklist li{list-style:none;margin:6px 0;display:flex;gap:10px;align-items:center}.checklist{padding:0}
.checklist .ok{color:#16a34a;font-weight:700}.checklist .no{color:#dc2626;font-weight:700}
.step{display:inline-block;background:#1d4ed8;color:#fff;border-radius:50%;width:26px;height:26px;text-align:center;line-height:26px;margin-right:6px;font-size:14px}
.bigtotal{font-size:28px;font-weight:800;color:#166534}
.search-box input.big{font-size:18px;padding:12px 14px}
button.big,.btn.big{font-size:17px;padding:12px 22px}
.btn.wa{background:#16a34a}
/* ---- paging ---- */
.pager{margin-top:12px;display:flex;gap:12px;align-items:center;flex-wrap:wrap;justify-content:space-between}
.pager .pbtns{display:flex;gap:4px;flex-wrap:wrap}
.pager a,.pager b,.pager .dis{padding:5px 10px;border:1px solid #cbd5e1;border-radius:6px;background:#fff;min-width:34px;text-align:center}
.pager a:hover{background:#eff6ff;text-decoration:none}
.pager b{background:#1d4ed8;color:#fff;border-color:#1d4ed8}
.pager .dis{color:#cbd5e1}.pager .dots{padding:5px 2px;color:#9ca3af}
.pager .per{display:flex;gap:6px;align-items:center;margin:0;font-size:13px}.pager .per select{width:auto;padding:4px}