/* Vidya Veeksha — ITDA DIS design system (Phase 1) */
:root{
  --green:#1B5E20; --green-dark:#0E3D12; --saffron:#E65100; --cream:#FFF8E1;
  --slate:#263238; --ok:#2E7D32; --bad:#C62828; --warn:#F9A825;
  --card-border:#E0D9C3;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--cream); color:var(--slate);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Noto Sans Telugu",
              "Noto Sans",Arial,sans-serif;
  -webkit-text-size-adjust:100%;
}
a{color:var(--saffron)}
.wrap{max-width:1180px;margin:0 auto;padding:10px 14px 28px}
.wrap-narrow{max-width:560px}

/* header */
.hdr{background:var(--green);border-radius:10px;padding:12px 16px;color:var(--cream)}
.hdr-row{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}
.brand{display:flex;flex-direction:column;align-items:center;min-width:90px}
.brand b{color:var(--cream);font-size:15px;white-space:nowrap}
.hdr-title{text-align:center;flex:1;min-width:210px}
.hdr-title .t1{font-size:15px;font-weight:800;color:var(--cream)}
.hdr-title .t2{font-size:12px;font-weight:600;color:var(--cream);opacity:.92}
.userstrip{display:flex;justify-content:space-between;align-items:center;gap:8px;
  background:var(--green-dark);border:1px solid var(--cream);border-radius:8px;
  margin-top:8px;padding:6px 12px;flex-wrap:wrap}
.userstrip .who{color:var(--cream);font-weight:700;font-size:13px}
.userstrip .sub{color:var(--cream);opacity:.9;font-size:11.5px}
.userstrip a{color:#FFD180;font-size:13px;text-decoration:underline}
.tribal{height:9px;margin:6px 0;border-radius:2px;
  background:repeating-linear-gradient(45deg,var(--saffron) 0 7px,var(--green) 7px 14px,var(--warn) 14px 21px)}

.ctx{background:#1B5E2014;border-left:5px solid var(--green);border-radius:6px;
  padding:8px 12px;margin:8px 0;font-size:14px}
.ctx b{color:var(--green)}

/* cards + buttons */
.card{background:#fff;border:1px solid var(--card-border);border-radius:12px;padding:16px;margin:10px 0}
.btn{display:inline-block;border:none;border-radius:8px;padding:.7rem 1rem;font-size:15px;
  font-weight:800;cursor:pointer;text-align:center;text-decoration:none}
.btn-primary{background:var(--saffron);color:#fff;width:100%}
.btn-ghost{background:#fff;border:2px solid var(--saffron);color:var(--saffron)}
.btn-green{background:var(--green);color:#fff}
.btn:disabled{opacity:.55;cursor:default}
.field{width:100%;font-size:16px;min-height:46px;padding:8px 12px;border:1px solid #ccc;
  border-radius:8px;margin:6px 0}
label.lbl{font-size:13px;font-weight:700;color:var(--slate);display:block;margin-top:8px}

/* pills */
.pill{display:inline-block;border-radius:999px;padding:2px 10px;font-size:12px;font-weight:800;
  white-space:nowrap;border:1px solid}
.pill.ok{color:var(--ok);background:#2E7D321A;border-color:var(--ok)}
.pill.bad{color:var(--bad);background:#C628281A;border-color:var(--bad)}
.pill.warn{color:#9a7400;background:#F9A8251A;border-color:var(--warn)}
.pill.muted{color:#777;background:#9e9e9e1a;border-color:#bdbdbd}

/* meal tabs */
.tabs{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin:10px 0}
.tab{background:#fff;border:1px solid var(--card-border);border-radius:10px;padding:8px 6px;
  text-align:center;text-decoration:none;color:var(--slate);font-size:12px;line-height:1.25}
.tab.active{background:var(--saffron);border-color:var(--saffron);color:#fff}
.tab .te{font-weight:800;font-size:12px;display:block}
.tab .en{font-size:11px;opacity:.9}
.tab .cnt{font-size:11px;font-weight:800}

/* progress */
.prog{height:10px;background:#eee;border-radius:6px;overflow:hidden;margin:6px 0}
.prog > i{display:block;height:100%;background:var(--saffron)}

/* item capture card */
.item{background:#fff;border:1px solid var(--card-border);border-radius:12px;overflow:hidden;margin:12px 0}
.item .ref{width:100%;aspect-ratio:16/10;object-fit:cover;background:#f3eed9;display:block}
.item .ref.placeholder{display:flex;align-items:center;justify-content:center;color:#b9ad84;
  font-size:13px;font-weight:700;height:150px}
.item .body{padding:10px 12px}
.item .name{font-weight:800;font-size:15px}
.item .sub{font-size:11px;color:#777}
.reftag{position:relative}
.reftag .lab{position:absolute;top:8px;left:8px;background:#fff;border-radius:6px;padding:2px 8px;
  font-size:11px;font-weight:800;color:var(--green)}
.filebtn{position:relative;overflow:hidden;display:inline-block;width:100%}
.filebtn input[type=file]{position:absolute;inset:0;opacity:0;width:100%;height:100%;cursor:pointer}
.row{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}

/* review grid (desktop) */
.layout{display:flex;gap:16px;align-items:flex-start}
.sidebar{flex:0 0 240px;position:sticky;top:10px}
.main{flex:1;min-width:0}
.grp{background:#fff;border:1px solid var(--card-border);border-radius:12px;margin:12px 0;padding:12px}
.grp h3{margin:0 0 2px 0;color:var(--green)}
.grp .meta{font-size:12px;color:#777;margin-bottom:8px}
.revrow{display:grid;grid-template-columns:1fr 1fr 1.1fr;gap:12px;align-items:start;
  padding:12px 0;border-top:1px solid #F0E8D8}
.revrow img{width:100%;border-radius:8px;background:#f3eed9;aspect-ratio:16/10;object-fit:cover}
.colhead{font-size:10.5px;font-weight:800;letter-spacing:.05em;color:#888;text-transform:uppercase}
.decide{display:flex;gap:8px;margin:6px 0}
.decide .btn{flex:1;padding:.5rem;font-size:13px}
.btn-approve{background:var(--ok);color:#fff;border:1px solid var(--ok)}
.btn-approve.off{background:#fff;color:var(--slate);border:1px solid #ccc}
.btn-reject{background:var(--bad);color:#fff;border:1px solid var(--bad)}
.btn-reject.off{background:#fff;color:var(--slate);border:1px solid #ccc}
.remarks{width:100%;min-height:46px;border:1px solid #ccc;border-radius:8px;padding:6px 10px;font-size:13px}
.statline{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
@media (max-width:820px){
  .layout{flex-direction:column}.sidebar{position:static;flex:auto;width:100%}
  .revrow{grid-template-columns:1fr}
}

/* capture / preview / confirm screens */
.screenhd{display:flex;gap:10px;align-items:center;margin:10px 0}
.screenhd img{width:64px;height:48px;border-radius:8px;object-fit:cover;background:#f3eed9;flex:none}
.screenhd .ph{width:64px;height:48px;border-radius:8px;background:#f3eed9;flex:none}
.screenhd .nm{font-weight:800;font-size:16px;color:var(--green)}
.screenhd .sb{font-size:12px;color:#777}
.camstage{position:relative;width:100%;border-radius:12px;background:#000;overflow:hidden;
  aspect-ratio:3/4;max-height:62vh;display:flex;align-items:center;justify-content:center}
.camstage video,.camstage canvas{width:100%;height:100%;object-fit:cover;display:block}
.livebadge{position:absolute;top:10px;left:10px;z-index:2;background:var(--bad);color:#fff;
  border-radius:8px;padding:4px 10px;font-size:12px;font-weight:800;display:flex;align-items:center;gap:6px}
.livebadge .dot{width:8px;height:8px;border-radius:50%;background:#fff;animation:blink 1.2s infinite}
@keyframes blink{50%{opacity:.25}}
.capbadge{position:absolute;bottom:10px;right:10px;z-index:2;background:#000000b0;color:#fff;
  border-radius:8px;padding:5px 11px;font-size:12px;font-weight:700}
.chips{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin:12px 0 4px}
.chips .chip{background:#fff;border:1px solid var(--card-border);border-radius:999px;
  padding:6px 12px;font-size:13px;font-weight:700;color:var(--green)}
.cf-img{width:100%;border-radius:10px;background:#000;object-fit:contain;max-height:48vh;display:block}
.camctrls{display:flex;gap:10px;margin-top:12px}
.camctrls .btn{flex:1}
.camhint{color:#777;font-size:12px;text-align:center;margin-top:8px}
.camerr{background:#C628281A;border:1px solid var(--bad);color:var(--bad);border-radius:8px;
  padding:12px;font-size:13px;text-align:center;line-height:1.5;margin-top:10px}
.tick{display:inline-block;border:3px solid var(--ok);border-radius:50%;width:64px;height:64px;
  line-height:58px;font-size:32px;color:var(--ok);text-align:center}
.meta-tbl{width:100%;font-size:14px;border-collapse:collapse}
.meta-tbl td{padding:7px 4px;border-bottom:1px solid #F0E8D8}
.meta-tbl td:first-child{color:#777}
.meta-tbl td:last-child{text-align:right;font-weight:700}

/* footer */
.ftr{background:var(--green);color:var(--cream);text-align:center;border-radius:10px;
  padding:8px 12px;font-size:12px;line-height:1.6;margin-top:8px}
.ftr a{color:#FFD180}
.toast{position:fixed;bottom:14px;left:50%;transform:translateX(-50%);background:var(--green-dark);
  color:#fff;padding:10px 16px;border-radius:8px;font-size:14px;opacity:0;transition:opacity .25s;z-index:50}
.toast.show{opacity:1}
.err{background:#C628281A;border:1px solid var(--bad);color:var(--bad);border-radius:8px;
  padding:10px 12px;margin:8px 0;font-size:14px}