:root{
  --dk:#0E3D28; --dk2:#155A3C; --accent:#5CB93C; --accent-tx:#0C2A19;
  --pg:#F3F7F1; --card:#FFFFFF; --bdr:#D6E0D8; --mut:#4C5C51; --txt:#16221B;
  --blue:#1565C0; --blue-bg:#E7F1FA;
  --ok-bg:#E4F4EA; --ok-fg:#2F8F5B; --info-bg:#E7F1FA; --info-fg:#2E75B6;
  --warn-bg:#FBF1DE; --warn-fg:#B7871E; --err-bg:#FBE4E3; --err-fg:#C62828;
  --red:#E53935; --soft:#E7F4DF; --soft-tx:#155A3C; --ro:#F1F5EF;
  --shadow: 0 1px 2px rgba(14,61,40,.06), 0 1px 1px rgba(14,61,40,.04);
  --radius: 10px;
  --sans: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "Cascadia Code", "Roboto Mono", "SFMono-Regular", Consolas, monospace;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --dk:#082A1B; --dk2:#0F4530; --accent:#4CA832; --accent-tx:#0C2A19;
  --pg:#0F1712; --card:#16211A; --bdr:#243329; --mut:#A9C0B2; --txt:#E7F0E9;
  --blue:#5FA8E8; --blue-bg:#122A3E;
  --ok-bg:#143024; --ok-fg:#4CC98A; --info-bg:#122A3E; --info-fg:#5FA8E8;
  --warn-bg:#332A10; --warn-fg:#E8B44C; --err-bg:#3B1616; --err-fg:#F07070;
  --red:#F05050; --soft:#1C3524; --soft-tx:#7DD35C; --ro:#182620;
}}
:root[data-theme="dark"]{
  --dk:#082A1B; --dk2:#0F4530; --accent:#4CA832; --accent-tx:#0C2A19;
  --pg:#0F1712; --card:#16211A; --bdr:#243329; --mut:#A9C0B2; --txt:#E7F0E9;
  --blue:#5FA8E8; --blue-bg:#122A3E;
  --ok-bg:#143024; --ok-fg:#4CC98A; --info-bg:#122A3E; --info-fg:#5FA8E8;
  --warn-bg:#332A10; --warn-fg:#E8B44C; --err-bg:#3B1616; --err-fg:#F07070;
  --red:#F05050; --soft:#1C3524; --soft-tx:#7DD35C; --ro:#182620;
}
:root[data-theme="light"]{
  --dk:#0E3D28; --dk2:#155A3C; --accent:#5CB93C; --accent-tx:#0C2A19;
  --pg:#F3F7F1; --card:#FFFFFF; --bdr:#D6E0D8; --mut:#4C5C51; --txt:#16221B;
  --blue:#1565C0; --blue-bg:#E7F1FA;
  --ok-bg:#E4F4EA; --ok-fg:#2F8F5B; --info-bg:#E7F1FA; --info-fg:#2E75B6;
  --warn-bg:#FBF1DE; --warn-fg:#B7871E; --err-bg:#FBE4E3; --err-fg:#C62828;
  --red:#E53935; --soft:#E7F4DF; --soft-tx:#155A3C; --ro:#F1F5EF;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--pg); color:var(--txt); font-family:var(--sans);
  font-size:15px; line-height:1.45; -webkit-font-smoothing:antialiased;
}
h1,h2,h3{text-wrap:balance; margin:0;}
::selection{background:var(--accent); color:var(--accent-tx);}
button{font-family:inherit;}
input,select,textarea{font-family:inherit; font-size:14px;}
:focus-visible{outline:2px solid var(--blue); outline-offset:2px; border-radius:4px;}

.app{display:flex; flex-direction:column; min-height:100vh; max-width:1180px; margin:0 auto; position:relative;}
.topbar{
  display:flex; align-items:center; gap:10px; padding:14px 16px;
  background:var(--dk); color:#fff; position:sticky; top:0; z-index:20;
}
.topbar .mark{
  width:28px; height:28px; border-radius:7px; background:var(--accent);
  display:flex; align-items:center; justify-content:center;
  color:var(--accent-tx); font-weight:700; font-size:14px; flex:none;
}
.topbar .name{font-weight:600; font-size:15px; letter-spacing:.2px;}
.topbar .name small{display:block; font-weight:400; font-size:11px; color:#CFE3D4; letter-spacing:.3px;}
.topbar .spacer{flex:1;}
.topbar .avatar{
  width:30px; height:30px; border-radius:50%; background:var(--dk2);
  display:flex; align-items:center; justify-content:center; font-size:12px;
  font-weight:700; color:#fff; border:1px solid rgba(255,255,255,.25); cursor:pointer;
}

.body-wrap{display:flex; flex:1; min-height:0;}
.rail{display:none; flex-direction:column; gap:2px; padding:16px 10px; width:208px; flex:none; border-right:1px solid var(--bdr);}
.rail .railbtn{
  display:flex; align-items:center; gap:10px; padding:9px 12px; border-radius:8px;
  color:var(--mut); font-size:14px; font-weight:600; cursor:pointer; border:none;
  background:none; text-align:left; width:100%;
}
.rail .railbtn .ico{font-size:16px; width:20px; text-align:center;}
.rail .railbtn[aria-current="page"]{background:var(--soft); color:var(--soft-tx);}
.rail .railbtn:hover:not([aria-current="page"]){background:var(--ro); color:var(--txt);}

main{flex:1; min-width:0; padding:16px 16px 96px; width:100%;}
@media (min-width:760px){
  .rail{display:flex;}
  main{padding:24px 28px 32px;}
  .tabbar{display:none !important;}
}

.tabbar{
  position:fixed; left:0; right:0; bottom:0; z-index:20; display:flex;
  background:var(--card); border-top:1px solid var(--bdr); max-width:1180px;
  margin:0 auto; padding-bottom:env(safe-area-inset-bottom);
}
.tabbar button{
  flex:1; display:flex; flex-direction:column; align-items:center; gap:3px;
  padding:9px 4px 8px; border:none; background:none; color:var(--mut);
  font-size:11px; font-weight:600; cursor:pointer;
}
.tabbar button .ico{font-size:19px;}
.tabbar button[aria-current="page"]{color:var(--accent-tx);}
.tabbar button[aria-current="page"] .ico{
  background:var(--accent); color:var(--accent-tx); border-radius:8px;
  width:34px; height:22px; display:flex; align-items:center; justify-content:center;
}

.view{display:none;}
.view.active{display:block; animation:fade .15s ease;}
@keyframes fade{from{opacity:0; transform:translateY(3px);} to{opacity:1; transform:none;}}

.eyebrow{text-transform:uppercase; letter-spacing:.09em; font-size:11px; font-weight:700; color:var(--mut);}
.page-title{font-size:21px; font-weight:700; margin:2px 0 3px;}
.page-sub{color:var(--mut); font-size:13.5px; margin-bottom:18px;}

.listhead{display:flex; flex-direction:column; gap:12px; align-items:stretch;}
.listhead .btn{white-space:nowrap;}
@media (min-width:560px){.listhead{flex-direction:row; align-items:flex-end; justify-content:space-between;}}

.card{background:var(--card); border:1px solid var(--bdr); border-radius:var(--radius); box-shadow:var(--shadow);}
.card + .card{margin-top:12px;}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  border-radius:9px; border:1px solid transparent; padding:10px 16px;
  font-size:14px; font-weight:600; cursor:pointer; white-space:nowrap;
}
.btn-primary{background:var(--accent); color:var(--accent-tx);}
.btn-primary:hover{filter:brightness(1.05);}
.btn-ghost{background:var(--soft); color:var(--soft-tx);}
.btn-line{background:var(--card); color:var(--txt); border-color:var(--bdr);}
.btn-block{width:100%;}
.btn[disabled]{opacity:.5; cursor:not-allowed;}

.fab{
  position:fixed; right:18px; bottom:88px; z-index:15; width:52px; height:52px;
  border-radius:50%; border:none; background:var(--accent); color:var(--accent-tx);
  font-size:24px; box-shadow:0 4px 14px rgba(14,61,40,.28); cursor:pointer;
}
@media (min-width:760px){.fab{display:none;}}

.chip{display:inline-flex; align-items:center; gap:5px; padding:3px 10px; border-radius:99px; font-size:12px; font-weight:700; white-space:nowrap;}
.chip-ok{background:var(--ok-bg); color:var(--ok-fg);}
.chip-info{background:var(--info-bg); color:var(--info-fg);}
.chip-warn{background:var(--warn-bg); color:var(--warn-fg);}
.chip-err{background:var(--err-bg); color:var(--err-fg);}

.field{display:flex; flex-direction:column; gap:5px;}
.field label{font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--mut);}
.field input, .field select, .field textarea{
  background:var(--ro); border:1px solid var(--bdr); border-radius:8px;
  padding:10px 11px; color:var(--txt); width:100%;
}
.field input:focus, .field select:focus, .field textarea:focus{background:var(--card); border-color:var(--accent);}
.field input:disabled, .field select:disabled, .field textarea:disabled{opacity:.65; cursor:not-allowed;}
.field small{color:var(--mut); font-size:11.5px;}
.field .err{color:var(--err-fg); font-size:11.5px;}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
.grid3{display:grid; grid-template-columns:repeat(3,1fr); gap:12px;}
.grid3 .span2{grid-column:span 2;}
@media (max-width:480px){
  .grid2,.grid3{grid-template-columns:1fr;}
  /* Sem isso, o span:2 fixo força o grid a criar uma 2ª coluna implícita
     de 0px só pra caber o span pedido, mesmo com só 1 coluna explícita
     declarada acima — não quebra visualmente (a coluna fantasma não tem
     conteúdo), mas desperdiça o gap e deixa o grid tecnicamente errado. */
  .grid3 .span2{grid-column:auto;}
}

/* Tabela Bruto/Tratado (Parâmetros do efluente, ETE Industrial) — coluna
   do rótulo em "auto" (só o espaço que o maior rótulo precisa, nunca
   estica além disso) e as 2 colunas de valor em 1fr cada, absorvendo TODO
   o espaço que sobra — geram campos maiores e coladas logo depois do
   rótulo, em vez de espremidas e empurradas pro canto direito. Primeira
   versão tinha isso invertido (rótulo em 1fr, valores em largura fixa
   pequena) — exatamente o oposto do pretendido; mesmo ajuste do desktop
   (Tkinter weight=0 no rótulo / weight=1 nos valores), aqui via CSS Grid. */
.tbl-bt{display:grid; grid-template-columns:auto 1fr 1fr; gap:7px 10px; align-items:center; margin-top:4px;}
.tbl-bt .tbl-bt-head{font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--mut);}
.tbl-bt .tbl-bt-label{font-size:13.5px;}
.tbl-bt input{background:var(--ro); border:1px solid var(--bdr); border-radius:8px; padding:9px 10px; color:var(--txt); width:100%; min-width:56px; font-size:14px;}
.tbl-bt input:focus{background:var(--card); border-color:var(--accent);}

.segrow{display:flex; gap:8px;}
.segbtn{
  flex:1; padding:9px; text-align:center; border:1px solid var(--bdr); border-radius:8px;
  background:var(--ro); color:var(--mut); font-size:13.5px; font-weight:600; cursor:pointer;
}
.segbtn.on{background:var(--soft); border-color:var(--accent); color:var(--soft-tx);}
.segbtn[disabled]{opacity:.45; cursor:not-allowed;}

.mono{font-family:var(--mono); font-variant-numeric:tabular-nums;}
.muted{color:var(--mut);}
.divider{height:1px; background:var(--bdr); margin:14px 0;}

.rowlink{
  display:flex; gap:12px; align-items:flex-start; padding:14px; cursor:pointer;
  text-align:left; width:100%; background:none; border:none;
  border-bottom:1px solid var(--bdr); color:inherit;
}
.rowlink:last-child{border-bottom:none;}
.rowlink:hover{background:var(--ro);}
.rowlink .rl-main{flex:1; min-width:0;}
.rowlink .rl-top{display:flex; align-items:baseline; gap:8px; margin-bottom:3px;}
.rowlink .rl-title{font-weight:700; font-size:14.5px;}
.rowlink .rl-code{font-family:var(--mono); color:var(--mut); font-size:12px;}
.rowlink .rl-meta{color:var(--mut); font-size:12.5px; display:flex; gap:6px; flex-wrap:wrap;}
.rowlink .rl-side{flex:none; text-align:right; display:flex; flex-direction:column; align-items:flex-end; gap:6px;}
.rowlink .rl-venda{font-family:var(--mono); font-weight:700; font-size:13.5px; color:var(--dk2);}
:root[data-theme="dark"] .rowlink .rl-venda{color:var(--accent);}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .rowlink .rl-venda{color:var(--accent);}}

.searchbar{
  display:flex; align-items:center; gap:8px; background:var(--ro); border:1px solid var(--bdr);
  border-radius:9px; padding:9px 12px; margin-bottom:14px;
}
.searchbar input{background:none; border:none; flex:1; color:var(--txt);}
.searchbar input:focus{outline:none;}

.segfilter{display:flex; gap:8px; overflow-x:auto; margin-bottom:14px; padding-bottom:2px;}
.segfilter button{
  flex:none; padding:6px 13px; border-radius:99px; border:1px solid var(--bdr);
  background:var(--card); color:var(--mut); font-size:12.5px; font-weight:600; cursor:pointer;
}
.segfilter button.on{background:var(--dk); border-color:var(--dk); color:#fff;}

.kv{display:flex; justify-content:space-between; gap:12px; padding:9px 0; font-size:13.5px;}
.kv + .kv{border-top:1px solid var(--bdr);}
.kv .k{color:var(--mut);}
.kv .v{font-weight:600; text-align:right;}

.empty{padding:40px 20px; text-align:center; color:var(--mut);}
.empty .ico{font-size:30px; margin-bottom:8px;}
.spinner-wrap{padding:40px 20px; text-align:center; color:var(--mut); font-size:13px;}
.err-box{
  background:var(--err-bg); color:var(--err-fg); border-radius:9px; padding:11px 14px;
  font-size:13.5px; margin-bottom:12px;
}

.backrow{display:flex; align-items:center; gap:10px; margin-bottom:14px;}
.backrow button{background:none; border:none; cursor:pointer; color:var(--mut); font-size:20px; display:flex; padding:2px;}

.toast{
  position:fixed; left:50%; bottom:96px; transform:translateX(-50%); background:var(--dk);
  color:#fff; padding:10px 18px; border-radius:9px; font-size:13.5px; font-weight:600;
  box-shadow:0 6px 20px rgba(0,0,0,.25); z-index:60; opacity:0; pointer-events:none;
  transition:opacity .2s, transform .2s; max-width:90vw; text-align:center;
}
.toast.show{opacity:1; transform:translateX(-50%) translateY(-4px);}
.toast.err{background:var(--red);}

.loginwrap{min-height:100vh; display:flex; align-items:center; justify-content:center; background:var(--dk); padding:20px;}
.loginbox{width:100%; max-width:360px;}
.loginbox .mark{
  width:52px; height:52px; border-radius:13px; background:var(--accent); display:flex;
  align-items:center; justify-content:center; color:var(--accent-tx); font-weight:800;
  font-size:24px; margin:0 auto 16px;
}
.loginbox h1{color:#fff; text-align:center; font-size:19px; margin-bottom:2px;}
.loginbox .sub{color:#B9D2C1; text-align:center; font-size:13px; margin-bottom:26px;}
.loginbox .card{padding:22px; background:var(--card);}
.loginbox .field + .field{margin-top:12px;}
.loginbox .btn-primary{margin-top:18px;}
.loginbox .foot{color:#9DB8A5; text-align:center; font-size:12px; margin-top:18px;}

.thumbtoggle{
  display:flex; gap:6px; background:var(--ro); border:1px solid var(--bdr); border-radius:99px;
  padding:3px; position:fixed; top:12px; right:12px; z-index:30;
}
.thumbtoggle button{border:none; background:none; padding:5px 9px; border-radius:99px; cursor:pointer; font-size:12px; color:var(--mut);}
.thumbtoggle button.on{background:var(--card); color:var(--txt); box-shadow:var(--shadow);}

.comment{padding:11px 0; border-top:1px solid var(--bdr);}
.comment:first-child{border-top:none;}
.comment .c-head{display:flex; justify-content:space-between; font-size:12px; color:var(--mut); margin-bottom:3px;}
.comment .c-head b{color:var(--txt);}
.hist{padding:11px 0; border-top:1px solid var(--bdr);}
.hist:first-child{border-top:none;}
.hist .h-dt{font-family:var(--mono); font-size:11.5px; color:var(--mut); margin-bottom:2px;}

.modal-backdrop{
  display:none; position:fixed; inset:0; background:rgba(8,18,13,.5); z-index:50;
  align-items:flex-end; justify-content:center; padding:0;
}
.modal-backdrop.show{display:flex;}
.modal{
  background:var(--card); width:100%; max-width:440px; border-radius:16px 16px 0 0;
  box-shadow:0 -8px 30px rgba(0,0,0,.25); animation:slideup .18s ease;
  max-height:88vh; display:flex; flex-direction:column;
}
@media (min-width:560px){.modal-backdrop{align-items:center; padding:20px;} .modal{border-radius:16px; animation:popin .15s ease;}}
@keyframes slideup{from{transform:translateY(24px); opacity:.6;} to{transform:none; opacity:1;}}
@keyframes popin{from{transform:scale(.97); opacity:0;} to{transform:none; opacity:1;}}
.modal-head{display:flex; align-items:center; justify-content:space-between; padding:16px 18px; border-bottom:1px solid var(--bdr);}
.modal-head h2{font-size:16px; font-weight:700;}
.modal-x{background:none; border:none; color:var(--mut); font-size:16px; cursor:pointer; padding:4px;}
.modal-body{padding:16px 18px; overflow-y:auto;}
.modal-foot{display:flex; gap:8px; padding:14px 18px; border-top:1px solid var(--bdr); flex-wrap:wrap;}
.modal-foot .btn{flex:1; white-space:nowrap;}