/* SGS Report Portal — matches sgsecom.in design language */
:root {
  --paper:#FBFAF6; --card:#fff; --ink:#26372F; --ink2:#5A6B60;
  --gold:#F2B705; --gold-deep:#D9A404; --gold-soft:#FCEFC7;
  --leaf:#DFEFDA; --line:#E7E4D8; --bad:#B23A1D; --bad-soft:#FBE6DE;
  --disp:"Bricolage Grotesque",sans-serif; --body:"Inter",sans-serif; --mono:"IBM Plex Mono",monospace;
}
* { box-sizing:border-box; } html,body { overflow-x:hidden; }
body { margin:0; background:var(--paper); color:var(--ink); font:15.5px/1.6 var(--body); }
a { color:inherit; text-decoration:none; } img { max-width:100%; }
h1,h2,h3 { font-family:var(--disp); line-height:1.15; margin:0 0 12px; }
h1 { font-size:clamp(26px,3.6vw,38px); font-weight:800; }
h2 { font-size:22px; font-weight:700; } h3 { font-size:17px; font-weight:700; }
.wrap { max-width:1100px; margin:0 auto; padding:0 20px; }
.mono { font-family:var(--mono); font-size:12px; letter-spacing:.06em; }
.sub { color:var(--ink2); margin:0 0 22px; }

.pnav { background:#1E2B25; border-bottom:3px solid var(--gold); }
.pnav-in { display:flex; align-items:center; gap:20px; min-height:62px; flex-wrap:wrap; padding-top:6px; padding-bottom:6px; }
.brand { display:flex; align-items:center; gap:10px; color:#fff; font-family:var(--disp); font-weight:800; font-size:17px; }
.brand img { height:32px; } .brand em { font-style:normal; color:var(--gold); }
.pnav nav { display:flex; gap:4px; margin-left:auto; flex-wrap:wrap; align-items:center; }
.pnav nav a { color:#B9C4B8; padding:7px 12px; border-radius:8px; font-size:14.5px; }
.pnav nav a:hover { color:#fff; } .pnav nav a.on { color:#fff; background:rgba(255,255,255,.1); }
.who { color:#C9D3C7; font-size:14.5px; font-weight:500; padding:7px 12px; line-height:1.2; }
.section-label { color:var(--gold); font-family:var(--disp); font-weight:700; font-size:17px; letter-spacing:.02em; padding-left:16px; margin-left:4px; border-left:1px solid #3A4A41; }
.pnav .brand img { height:30px; }
.pnav-cta { background:var(--gold); color:var(--ink) !important; font-weight:700; padding:7px 14px !important; border-radius:8px; }
.pnav-cta:hover { filter:brightness(1.05); }
.pnav-burger { display:none; flex-direction:column; gap:5px; cursor:pointer; padding:8px; margin-left:auto; }
.pnav-burger span { display:block; width:24px; height:2.5px; background:#fff; border-radius:2px; transition:transform .2s, opacity .2s; }
.pnav-toggle-cb:checked + .pnav-burger span:nth-child(1) { transform:translateY(7.5px) rotate(45deg); }
.pnav-toggle-cb:checked + .pnav-burger span:nth-child(2) { opacity:0; }
.pnav-toggle-cb:checked + .pnav-burger span:nth-child(3) { transform:translateY(-7.5px) rotate(-45deg); }

.btn { display:inline-block; padding:11px 20px; border-radius:10px; font-weight:600; font-size:14.5px; border:0; cursor:pointer; font-family:var(--body); }
.btn.gold { background:var(--gold); color:var(--ink); box-shadow:0 2px 0 var(--gold-deep); }
.btn.forest { background:var(--ink); color:#fff; }
.btn.ghost { background:#fff; color:var(--ink); border:1.4px solid var(--line); }
.pnav .btn.ghost { background:transparent; color:#B9C4B8; border-color:#3A4A41; }
.btn.sm { padding:7px 13px; font-size:13px; border-radius:8px; }
.btn:hover { filter:brightness(1.05); }

main { padding:34px 20px 50px; }
.tool-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.tcard { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:20px; display:flex; flex-direction:column; transition:transform .12s, box-shadow .12s; }
.tcard:hover { transform:translateY(-3px); box-shadow:0 14px 30px -20px rgba(38,55,47,.4); }
.tcard h3 { font-size:16.5px; margin:10px 0 6px; }
.tcard p { color:var(--ink2); font-size:13.5px; flex:1; margin:0 0 14px; }
.mp { font-family:var(--mono); font-size:10px; letter-spacing:.1em; padding:3px 9px; border-radius:99px; align-self:flex-start; }
.mp-amazon { background:var(--gold-soft); } .mp-flipkart { background:#E1ECFB; }
.mp-meesho { background:#FBE4EF; } .mp-all { background:var(--leaf); }

.card { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:22px; margin-bottom:18px; }
.crumb { font-family:var(--mono); font-size:12px; color:var(--ink2); display:inline-block; margin-bottom:10px; }
.grid2 { display:grid; grid-template-columns:1.1fr .9fr; gap:22px; align-items:start; }
.grid2 > * { min-width:0; }
.feat-item { display:flex; gap:10px; padding:9px 0; border-bottom:1px solid #F2F0E8; font-size:14.5px; }
.feat-item:last-child { border-bottom:0; }
.feat-item .tick { color:var(--gold-deep); font-weight:700; }
.input-step { border:1px solid var(--line); border-radius:11px; padding:14px 16px; margin-bottom:12px; background:#FDFCF9; }
.input-step h3 { font-size:14.5px; margin-bottom:4px; }
.input-step p { margin:0; font-size:13.5px; color:var(--ink2); }
.in-num { font-family:var(--mono); font-size:11px; color:var(--gold-deep); letter-spacing:.1em; }

.up-zone { border:2px dashed var(--line); border-radius:12px; padding:18px; text-align:center; background:#FDFCF9; margin-bottom:12px; }
.up-zone input[type=file] { width:100%; font-size:13.5px; }
.up-zone .hint { font-size:12.5px; color:var(--ink2); margin-top:6px; }
label { display:block; font-weight:600; font-size:13.5px; margin:12px 0 6px; }
input[type=text],input[type=password],input[type=email],input[type=number] { width:100%; padding:10px 12px; border:1.4px solid var(--line); border-radius:9px; font:14.5px var(--body); background:#fff; }
input:focus { outline:2px solid var(--gold); border-color:var(--gold); }

.msg-ok { background:var(--leaf); padding:13px 16px; border-radius:10px; margin-bottom:16px; font-size:14.5px; }
.msg-err { background:var(--bad-soft); padding:13px 16px; border-radius:10px; margin-bottom:16px; font-size:14.5px; }
.pill { font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; padding:3px 10px; border-radius:99px; }
.pill.ok { background:var(--leaf); color:#1E7B45; } .pill.soon { background:var(--gold-soft); color:#8A6D00; }
.pill.fail { background:var(--bad-soft); color:var(--bad); }

table { width:100%; border-collapse:collapse; background:var(--card); border:1px solid var(--line); border-radius:12px; overflow:hidden; }
th,td { text-align:left; padding:10px 12px; border-bottom:1px solid var(--line); font-size:14px; }
th { background:#F7F5EE; font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink2); }
tr:last-child td { border-bottom:0; }

/* login/signup/verify — CENTERED, NO SCROLL, on any screen height
   -----------------------------------------------------------------
   The old rule was `margin:70px auto`, a FIXED offset from the top of the
   page. That number has no idea how tall the actual browser window is — on
   a big monitor 70px is nothing, but on a 14" laptop (roughly 650-750px of
   usable height once tabs/bookmarks/URL bar are accounted for) that fixed
   push plus the box's own ~550-650px of content ran past the bottom of the
   window, forcing the vertical scroll reported.

   Fix: give these three pages ONLY a body class (auth-page) that centers
   with flexbox instead. Flexbox centering sizes itself to whatever height
   IS actually available, so it looks centered on a 14" laptop, a desktop
   monitor, or anything in between, with no scroll on a normal-height page.
   If content ever gets taller than the viewport (e.g. an error banner
   appears), the box still just scrolls normally rather than being clipped —
   nothing is ever cut off, it only stops being perfectly centered in that
   one edge case.

   Scoped to .auth-page rather than changing `body` directly, because body
   is shared by every other page in the portal (dashboards, tool pages,
   tables) — those must keep their normal top-down layout untouched. */
.auth-page { display:flex; align-items:center; justify-content:center; min-height:100dvh; padding:24px 16px; box-sizing:border-box; }
.login-box { max-width:400px; margin:0 auto; background:var(--card); border:1px solid var(--line); border-radius:16px; padding:30px; }
.login-box img { display:block; margin:0 auto 8px; max-width:190px; }
.pfoot { text-align:center; color:var(--ink2); font-size:13px; padding:20px; }
.pfoot a { text-decoration:underline; }
.tpl-dl { display:inline-flex; align-items:center; gap:8px; background:var(--gold-soft); border:1px solid #EAD48E; padding:10px 14px; border-radius:10px; font-size:13.5px; font-weight:600; }

@media (max-width:900px) { .tool-grid { grid-template-columns:1fr 1fr; } .grid2 { grid-template-columns:1fr; } }
@media (max-width:820px) {
  .pnav-in { position:relative; }
  .pnav-burger { display:flex; }
  .section-label { margin-left:auto; border-left:0; }
  .pnav nav {
    position:absolute; top:100%; left:0; right:0; margin:0;
    flex-direction:column; align-items:stretch; gap:0;
    background:#1E2B25; border-top:1px solid #3A4A41;
    max-height:0; overflow:hidden; transition:max-height .28s ease; z-index:40;
  }
  .pnav-toggle-cb:checked ~ nav { max-height:360px; }
  .pnav nav a, .pnav nav .who { padding:13px 18px; border-top:1px solid #33423A; border-radius:0; font-size:15px; }
  .pnav nav a:first-child { border-top:0; }
  .pnav-cta { text-align:center; }
}
@media (max-width:600px) { .tool-grid { grid-template-columns:1fr; } }

/* --- mobile: keep wide tables and long tokens from cutting the page --- */
.table-scroll { width:100%; max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; border-radius:12px; border:1px solid var(--line); }
.table-scroll table { min-width:760px; border:0; margin:0; }
.table-scroll th, .table-scroll td { white-space:nowrap; }
.table-scroll td .mono, .table-scroll td span { white-space:normal; }
.card, .tcard, .msg-ok, .msg-err { min-width:0; overflow-wrap:anywhere; word-break:break-word; }
.card p, .input-step p, .input-step h3, .use p, .use li { overflow-wrap:anywhere; word-break:break-word; }
.mono { overflow-wrap:anywhere; }
@media (max-width:600px){
  main.wrap { padding-left:14px; padding-right:14px; }
  .card { padding:16px; }
  h1 { font-size:26px; overflow-wrap:anywhere; }
  .file-list div { flex-wrap:wrap; }
}

/* v8 — reports table fits on desktop, plus pagination
   ---------------------------------------------------
   The Inputs column used max-width on the <td>. In an auto-layout table that is
   only a hint: the browser widens the cell to fit the filenames, the table grows
   past the container, and the Download button gets cut off. Putting the clamp on
   an inner block makes it stick, so the table fits without side-scrolling. */
.cell-clip { display:block; max-width:260px; overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap; font-size:12.5px; color:var(--ink2); }
.col-inputs { max-width:260px; }
.col-dl { white-space:nowrap; text-align:right; }
/* The table only needs to be forced wide on small screens, where side-scrolling
   is the right answer. On desktop it should simply fit. */
@media (min-width:821px) { .table-scroll table { min-width:0; } }
@media (max-width:1000px) { .cell-clip, .col-inputs { max-width:200px; } }

/* Pager — same shape as the tracker's, in the portal's own colours */
.pager { display:flex; gap:18px; align-items:center; flex-wrap:wrap; margin:18px 0 4px; }
.pager-go { display:flex; gap:6px; align-items:center; font-size:13.5px; color:var(--ink2); }
.pager-go input[type=number] { width:72px; padding:7px 9px; }
.pager-nums { display:flex; gap:5px; align-items:center; }
.pg { display:inline-block; min-width:38px; text-align:center; padding:7px 10px; border-radius:9px;
  border:1.4px solid var(--line); background:#fff; font-size:13.5px; color:var(--ink); }
a.pg:hover { border-color:var(--gold); }
.pg.on { background:var(--gold); border-color:var(--gold); color:var(--ink); font-weight:700; }
.pg.dots { border:0; background:transparent; color:var(--ink2); min-width:18px; }
.pager-pp select { padding:8px 10px; font-size:13.5px; border:1.4px solid var(--line);
  border-radius:9px; background:#fff; font-family:var(--body); color:var(--ink); }
.pager form { margin:0; }

@media (max-width:600px) {
  /* Drop the "Page N of M" jump box on phones — the numbers and arrows are
     enough, and it keeps the row on one line. */
  .pager { gap:10px; }
  .pager-go { display:none; }
}