/* 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-box { max-width:400px; margin:70px 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; }
}