/* Canal Information Board & Silt Cleaning Monitoring System — one stylesheet for all pages.
   Colours: maroon / saffron / cream / white (same as the department banner). No blue. */
:root{
  --bg:#FBF5EC; --surface:#FFFFFF; --ink:#2B211C; --muted:#6B5A4E; --line:#E8D5BC;
  --brand:#7A1F2B; --brand-2:#5A1621; --brand-ink:#FFF8EE; --accent:#B84A14; --accent-soft:#F6E3D2;
  --ok:#2F6B3A; --ok-bg:#E3F1E4; --warn:#8A5000; --warn-bg:#FBE8C2; --crit:#9E2A1B; --crit-bg:#F7D9D3; --na:#6B5A4E; --na-bg:#EFE4D3;
  --radius:14px; --shadow:0 1px 2px rgba(31,26,23,.06),0 4px 14px rgba(31,26,23,.07);
  --font:'Noto Sans Devanagari','Inter','Segoe UI',Roboto,system-ui,sans-serif; --mono:ui-monospace,Menlo,Consolas,monospace;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#1A1412; --surface:#241C19; --ink:#F3E9DD; --muted:#BBA999; --line:#3A2D27; --brand:#4A1520; --brand-2:#3B101A;
  --accent:#F0904A; --accent-soft:#3A261B; --ok:#B6D187; --ok-bg:#2A3320; --warn:#F2C26B; --warn-bg:#3B2D12; --crit:#F29A8A; --crit-bg:#41201A; --na:#BBA999; --na-bg:#2E2420; color-scheme:dark}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.55 var(--font);padding-bottom:40px}
a{color:var(--accent)} img{max-width:100%}
.wrap{max-width:1180px;margin:0 auto;padding:0 16px}
header.top{background:#fbf6ec}
.banner{display:block;width:100%;max-width:1600px;height:auto;margin:0 auto}   /* whole banner always visible: never cropped at any zoom / width */
.band{background:linear-gradient(100deg,#7d1a00 0%,#b73302 55%,#d84a04 85%,#f2780f 100%);color:#fff;border-bottom:3px solid #fbbd5a;padding:12px 0 14px}
.band h1{margin:0;font-size:clamp(17px,3.4vw,26px);line-height:1.25;font-weight:800}
.band .en{font-size:clamp(12.5px,2.2vw,15px);opacity:.92;font-weight:600;margin-top:2px}
.band .who{font-size:13.5px;opacity:.95;margin-top:6px;display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center}
.band .who span{background:rgba(255,255,255,.16);padding:2px 10px;border-radius:999px}
.band a,.band button.lnk{color:#fff}
nav.main{background:var(--surface);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:5}
nav.main .wrap{display:flex;gap:2px;overflow-x:auto;scrollbar-width:thin}
nav.main a{white-space:nowrap;text-decoration:none;color:var(--ink);padding:12px 12px;font-weight:600;font-size:14.5px;border-bottom:3px solid transparent}
nav.main a.on{color:var(--brand);border-bottom-color:var(--accent)}
nav.main a .b{display:inline-block;min-width:18px;text-align:center;background:var(--crit);color:#fff;border-radius:99px;font-size:11.5px;padding:0 6px;margin-left:4px}
main{padding-top:20px}
h2{font-size:20px;margin:0 0 10px;color:var(--brand);display:flex;align-items:center;gap:10px}
h2::before{content:"";width:4px;height:18px;border-radius:2px;background:var(--accent)}
h3{font-size:16px;margin:0 0 8px} .sub{color:var(--muted);font-size:14px} .mono{font-family:var(--mono)}
section.blk{margin-top:26px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;box-shadow:var(--shadow)}
.card+.card{margin-top:14px}
.grid{display:grid;gap:14px} .g2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))} .g3{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px}
a.tile,div.tile{display:block;text-decoration:none;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px;box-shadow:var(--shadow);position:relative;overflow:hidden}
.tile::before{content:"";position:absolute;inset:0 auto 0 0;width:5px;background:var(--line)}
.tile.ok::before{background:var(--ok)} .tile.warn::before{background:#E0A526} .tile.brand::before{background:var(--brand)} .tile.acc::before{background:var(--accent)} .tile.crit::before{background:var(--crit)}
.tile .n{font-size:30px;font-weight:800;line-height:1.1} .tile .l{font-size:13.5px;font-weight:700;margin-top:4px} .tile .l small{display:block;font-weight:500;color:var(--muted)} .tile .u{font-size:13px;color:var(--muted);margin-top:2px}
a.tile:hover{box-shadow:0 2px 4px rgba(31,26,23,.08),0 10px 22px rgba(31,26,23,.12)}
dl.kv{display:grid;grid-template-columns:minmax(120px,36%) 1fr;margin:0;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--surface)}
dl.kv dt,dl.kv dd{margin:0;padding:9px 14px;border-top:1px solid var(--line);overflow-wrap:anywhere}
dl.kv dt{color:var(--muted);font-weight:600;font-size:14px} dl.kv dt:first-of-type,dl.kv dd:first-of-type{border-top:0}
@media(min-width:900px){dl.kv.two{grid-template-columns:minmax(120px,18%) 1fr minmax(120px,18%) 1fr}dl.kv.two>:nth-child(-n+4){border-top:0}}
.btn{font:inherit;font-weight:700;border:1px solid var(--brand);background:var(--brand);color:var(--brand-ink);border-radius:11px;padding:10px 18px;cursor:pointer;text-decoration:none;display:inline-block;line-height:1.3}
.btn:hover{filter:brightness(1.1)} .btn:disabled{opacity:.5;cursor:not-allowed}
.btn.alt{background:var(--surface);color:var(--brand)} .btn.acc{background:var(--accent);border-color:var(--accent)} .btn.danger{background:var(--crit);border-color:var(--crit)} .btn.ok{background:var(--ok);border-color:var(--ok)}
.btn.sm{padding:5px 11px;font-size:13.5px}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .btn.alt{color:var(--accent)}}
.actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:12px 0}
button.lnk{font:inherit;background:none;border:0;color:var(--accent);cursor:pointer;text-decoration:underline;padding:0}
.form{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.form .full{grid-column:1/-1}
.form label,.lbl{display:block;font-size:13.5px;font-weight:700;margin-bottom:4px}
.form label small{font-weight:500;color:var(--muted)}
input,select,textarea{font:inherit;width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--ink);min-width:0}
input[type=checkbox],input[type=radio]{width:auto}
input:focus,select:focus,textarea:focus,button:focus-visible,a:focus-visible{outline:3px solid color-mix(in srgb,var(--accent) 45%,transparent);outline-offset:1px}
.err{color:var(--crit);font-size:13px;margin-top:3px}
.hint{font-size:12.5px;color:var(--muted);margin-top:3px}
.flash{border-radius:10px;padding:10px 14px;margin:12px 0;border:1px solid var(--line);background:var(--surface)}
.flash.ok{background:var(--ok-bg);color:var(--ok);border-color:var(--ok)} .flash.err{background:var(--crit-bg);color:var(--crit);border-color:var(--crit)} .flash.warn{background:var(--warn-bg);color:var(--warn);border-color:var(--warn)}
.empty{border:1px dashed var(--line);border-radius:var(--radius);padding:16px;color:var(--muted);background:transparent}
.pill{display:inline-block;font-size:12.5px;font-weight:700;padding:2px 10px;border-radius:99px;background:var(--na-bg);color:var(--na);white-space:nowrap}
.pill.ok{background:var(--ok-bg);color:var(--ok)} .pill.warn{background:var(--warn-bg);color:var(--warn)} .pill.crit{background:var(--crit-bg);color:var(--crit)} .pill.acc{background:var(--accent-soft);color:var(--accent)}
.tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface)}
table{border-collapse:collapse;width:100%;font-size:14.5px}
th,td{text-align:left;padding:8px 11px;border-bottom:1px solid var(--line);vertical-align:top}
th{font-size:12.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);white-space:nowrap;background:var(--bg)}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums} tr:last-child td{border-bottom:0}
td input{padding:6px 8px;min-width:90px}
.list{display:grid;gap:10px}
a.row,div.row{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;justify-content:space-between;text-decoration:none;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:12px 16px}
a.row:hover{border-color:var(--accent)} .row .nm{font-weight:800;font-size:16.5px} .row .meta{font-size:13.5px;color:var(--muted)}
.tabs{display:flex;gap:6px;flex-wrap:wrap;border-bottom:1px solid var(--line);margin-bottom:16px}
.tabs button,.tabs a{font:inherit;font-weight:700;border:0;background:none;color:var(--muted);padding:9px 14px;border-bottom:3px solid transparent;cursor:pointer;text-decoration:none}
.tabs .on{color:var(--brand);border-bottom-color:var(--accent)}
.bar{height:12px;background:var(--na-bg);border-radius:99px;overflow:hidden} .bar>i{display:block;height:100%;background:var(--ok);border-radius:99px}
.check{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.check li{display:flex;gap:12px;align-items:flex-start;padding:10px 14px;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
.check .tick{flex:none;width:28px;height:28px;border-radius:50%;border:2px solid var(--line);display:grid;place-items:center;font-weight:800;color:transparent}
.check li.done{background:var(--ok-bg);border-color:var(--ok)} .check li.done .tick{background:var(--ok);border-color:var(--ok);color:#fff}
.check .t{font-weight:700} .check .d{font-size:13px;color:var(--muted)}
.photos{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px}
.photos figure{margin:0;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--surface)}
.photos img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;cursor:zoom-in}
.photos figcaption{padding:5px 8px;font-size:12.5px;color:var(--muted)}
.stage{border-top:4px solid var(--accent)} .stage.before{border-top-color:#C98A1B} .stage.during{border-top-color:var(--accent)} .stage.after{border-top-color:var(--ok)}
.lightbox,.modalbg{position:fixed;inset:0;background:rgba(20,12,10,.85);display:grid;place-items:center;padding:16px;z-index:50}
.lightbox img{max-width:100%;max-height:92vh;border-radius:8px}
.modal{background:var(--surface);border-radius:var(--radius);padding:20px;max-width:520px;width:100%;max-height:90vh;overflow:auto}
.chips{display:flex;flex-wrap:wrap;gap:6px} .chip{background:var(--accent-soft);color:var(--accent);border-radius:99px;padding:2px 10px;font-size:13px;font-weight:600}
.pick{border:1px solid var(--line);border-radius:10px;background:var(--surface);padding:8px}
.pick .opts{max-height:170px;overflow:auto;margin-top:6px;display:grid;gap:2px}
.pick label{display:flex;gap:8px;font-weight:500;font-size:14px;margin:0;padding:2px 4px;align-items:center}
.foot{margin-top:34px;padding-top:14px;border-top:1px solid var(--line);font-size:13.5px;color:var(--muted)}
.toast{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);background:var(--ink);color:var(--bg);padding:10px 18px;border-radius:10px;z-index:60;max-width:90vw}
.locked{background:var(--warn-bg);border:1px solid var(--warn);color:var(--warn);border-radius:12px;padding:10px 14px;font-weight:600}
.timeline{list-style:none;padding:0;margin:0;display:grid;gap:8px} .timeline li{display:grid;grid-template-columns:130px 1fr;gap:10px;padding:8px 12px;border:1px solid var(--line);border-radius:10px;background:var(--surface)}
.timeline .w{font-family:var(--mono);font-size:13px;color:var(--muted)}
@media(max-width:560px){.timeline li{grid-template-columns:1fr}}
/* QR cards + print */
.qrgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
.qcard{border:1.5px solid #7A1F2B;border-radius:10px;padding:10px;text-align:center;background:#fff;color:#2B211C;break-inside:avoid}
.qcard .ql{height:36px} .qcard .qt{font-weight:800;font-size:13px;color:#7A1F2B;line-height:1.25} .qcard .qn{font-weight:800;font-size:16px;margin:6px 0 2px}
.qcard .qm{font-size:11.5px;color:#555} .qcard svg,.qcard img.qr{width:150px;height:150px}
.hide{display:none!important}
@media print{
  body{background:#fff;color:#000} nav.main,.noprint,.band .who,.actions,.tabs,button{display:none!important}
  .card,.tablewrap{box-shadow:none} main{padding-top:6px}
  @page{size:A4 landscape;margin:10mm}
}