/* TCT Warehouse Desk.
   One stylesheet, no build step, no CDN. QC incoming and Store fill this in together on
   whatever screen is nearest them on the floor, so the phone layout is the one that has to
   be right first and the desk layout is what widens out of it. */

:root{
  --ink:#16191d; --mut:#6b727c; --line:#e2e5ea; --bg:#f6f7f9; --card:#fff;
  --accent:#1f5f9e; --warn:#a8600f; --bad:#a52a2a; --ok:#1c6b45;
  /* The sheet's own colours, made real. Pink is QC incoming's half, green is Store's.
     Kept apart from --bad/--ok even though qc borrows warm tones near --bad and store sits
     near --ok: a field being pink is a WHO-WRITES-IT fact, not a good/bad one, and giving it
     its own token stops the two ideas from drifting into each other later. */
  --qc:#9c3468; --qcbg:#fdf1f5; --qcline:#f2cbdb;
  --store:#1c6b45; --storebg:#f0f8f4; --storeline:#cfe6da;
  --radius:10px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;overflow-x:hidden}
body{
  font:15px/1.55 system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",
       "PingFang SC","Microsoft YaHei",sans-serif;
  color:var(--ink); background:var(--bg);
}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}

/* ---------------------------------------------------------------- chrome */
header.top{
  display:flex; align-items:center; gap:18px; padding:10px 18px;
  background:var(--card); border-bottom:1px solid var(--line);
  position:sticky; top:0; z-index:5;
}
/* [hidden] on a styled element loses to a class selector, so the sign-in page keeps its
   navigation bar unless this is written down. */
header.top[hidden]{display:none}
.brand{font-weight:650; color:var(--ink); letter-spacing:.2px}
.tabs{display:flex; gap:4px; flex:1; flex-wrap:wrap}
.tabs a{padding:6px 11px; border-radius:7px; color:var(--mut); font-size:14px}
.tabs a.on{background:#eef2f7; color:var(--accent); font-weight:600}
.tabs a .pip{background:var(--accent); color:#fff; border-radius:9px; font-size:11px;
             padding:0 6px; margin-left:5px}
.who{color:var(--mut); font-size:13px; white-space:nowrap}

@media(max-width:760px){
  header.top{flex-wrap:wrap; gap:6px 12px; padding:8px 12px}
  header.top .brand{order:1; flex:1 1 auto; font-size:14px}
  header.top .who{order:2; flex:0 0 auto; font-size:12px; text-align:right}
  header.top .tabs{
    order:3; flex:1 0 100%; overflow-x:auto; flex-wrap:nowrap;
    -webkit-overflow-scrolling:touch; scrollbar-width:none;
  }
  header.top .tabs::-webkit-scrollbar{display:none}
  header.top .tabs a{white-space:nowrap}
}

.wrap{max-width:1180px; margin:0 auto; padding:20px 18px 64px}
@media(max-width:760px){ .wrap{padding:14px 12px 56px} }
h1{font-size:21px; margin:0 0 4px}
h2{font-size:16px; margin:24px 0 10px}
h3{font-size:14px; margin:18px 0 8px; color:var(--mut); text-transform:uppercase;
   letter-spacing:.04em}
.sub{color:var(--mut); font-size:13px; margin:0 0 16px}
.muted{color:var(--mut)}
.tiny{font-size:12px}
.back{display:inline-block; margin:0 0 10px; font-size:13px}

.card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
      padding:15px 16px; margin:0 0 14px}
.row{display:flex; gap:12px; flex-wrap:wrap}
.row > *{flex:1 1 200px; min-width:0}
.split{display:grid; grid-template-columns:1fr 300px; gap:16px; align-items:start}
@media(max-width:860px){ .split{grid-template-columns:1fr} }

/* ---------------------------------------------------------------- forms */
label{display:block; font-size:12px; color:var(--mut); margin:0 0 4px; font-weight:600;
      letter-spacing:.02em; text-transform:uppercase}
input,select,textarea,button{font:inherit}
input,select,textarea{
  width:100%; padding:9px 11px; border:1px solid var(--line); border-radius:8px;
  background:#fff; color:var(--ink);
  /* iOS zooms the whole page when a focused field is under 16px. */
  font-size:16px;
}
input[readonly],textarea[readonly]{background:#f5f6f8; color:var(--mut)}
textarea{min-height:70px; resize:vertical; line-height:1.5}
.field{margin:0 0 12px}
button{
  border:1px solid var(--line); background:#fff; color:var(--ink);
  padding:9px 14px; border-radius:8px; cursor:pointer; min-height:44px; font-size:14px;
}
button:hover{border-color:#c9cfd8}
button.primary{background:var(--accent); border-color:var(--accent); color:#fff; font-weight:600}
button.primary:hover{background:#1a5289}
button.small{min-height:34px; padding:5px 10px; font-size:13px}
button.danger{color:var(--bad); border-color:#e8cccc}
button[disabled]{opacity:.55; cursor:default}
.actions{display:flex; gap:8px; flex-wrap:wrap; margin-top:8px; align-items:center}

.searchbar{display:flex; gap:8px; margin:0 0 12px}
.searchbar input{flex:1 1 auto}
.searchbar button{flex:0 0 auto}

/* ---------------------------------------------------------------- chips */
.chips{display:flex; gap:6px; overflow-x:auto; padding:2px 0 10px; scrollbar-width:none;
       -webkit-overflow-scrolling:touch}
.chips::-webkit-scrollbar{display:none}
.chip{white-space:nowrap; border:1px solid var(--line); background:#fff; color:var(--mut);
      border-radius:999px; padding:6px 12px; font-size:13px; cursor:pointer; min-height:34px}
.chip.on{background:var(--accent); border-color:var(--accent); color:#fff; font-weight:600}
.chip .n{opacity:.7; margin-left:5px; font-size:11px}

.badge{display:inline-block; font-size:11px; padding:2px 7px; border-radius:5px;
       border:1px solid var(--line); color:var(--mut); background:#fafbfc;
       letter-spacing:.03em; vertical-align:middle}
.badge.co{color:var(--ok); border-color:#cfe6da; background:#f0f8f4}
.badge.off{color:var(--bad); border-color:#e8cccc; background:#fdf4f4}
.badge.eye{color:var(--warn); border-color:#f0dcb8; background:#fdf7ee}
/* The two halves, wherever a field or a whole block needs to say which one it belongs to. */
.badge.qc{color:var(--qc); border-color:var(--qcline); background:var(--qcbg); font-weight:700}
.badge.store{color:var(--store); border-color:var(--storeline); background:var(--storebg); font-weight:700}

/* ---------------------------------------------------------------- the GRIS table
 *
 * ⭐ This is the sheet, made clickable. Every column keeps the sheet's own left-to-right
 * order and its own colour, so a header cell and the cell under it tint together: pink for
 * QC incoming's half, green for Store's, plain for the uncoloured PO header the sheet never
 * tinted either. Nothing is grouped or reordered, because the order IS what Aiman's team
 * already reads at a glance. */
.scroll{overflow-x:auto; -webkit-overflow-scrolling:touch}
table{border-collapse:collapse; width:100%; font-size:14px}
th,td{text-align:left; padding:7px 10px; border-bottom:1px solid var(--line); vertical-align:top;
      white-space:nowrap}
th{font-size:11px; text-transform:uppercase; letter-spacing:.04em; color:var(--mut); font-weight:700}
tr:last-child td{border-bottom:0}
td.num,th.num{text-align:right}
td.cellwrap{white-space:normal; max-width:180px}
table tr.rec{cursor:pointer}
table tr.rec:hover td{background:#f7f8fa}
th.c-qc,td.c-qc{background:var(--qcbg)}
th.c-qc{color:var(--qc)}
th.c-store,td.c-store{background:var(--storebg)}
th.c-store{color:var(--store)}
.shotcell{width:40px; height:40px; border-radius:6px; overflow:hidden; background:#f0f2f5;
          display:flex; align-items:center; justify-content:center}
.shotcell img{width:100%; height:100%; object-fit:cover; display:block}

dl.specs{display:grid; grid-template-columns:130px 1fr; gap:6px 12px; margin:0; font-size:14px}
dl.specs dt{color:var(--mut); font-size:12px; text-transform:uppercase; letter-spacing:.03em;
            padding-top:2px}
dl.specs dd{margin:0; word-break:break-word}
@media(max-width:520px){ dl.specs{grid-template-columns:100px 1fr} }

/* ---------------------------------------------------------------- the two-part form
 *
 * ⭐ THE FENCE, MADE VISIBLE. A half tinted its colour and a half left grey (read only,
 * because this signed-in person cannot write it) is the capability fence shown on screen,
 * not just enforced behind it. ⚠️ It is a courtesy, never the lock: the server checks the
 * same fence again on every save regardless of what this page shows. */
.half{border-radius:var(--radius); border:1px solid var(--line); padding:14px 15px; margin:0 0 14px}
.half.qc{background:var(--qcbg); border-color:var(--qcline)}
.half.store{background:var(--storebg); border-color:var(--storeline)}
.half.locked{background:#f6f7f9}
.half h3{margin-top:0; display:flex; align-items:center; gap:8px}
.half.qc h3{color:var(--qc)}
.half.store h3{color:var(--store)}
.half .lockednote{font-size:12px; color:var(--mut); margin:0 0 10px}
.readrow{display:flex; justify-content:space-between; gap:10px; padding:5px 0;
         border-bottom:1px solid rgba(0,0,0,.05); font-size:14px}
.readrow:last-child{border-bottom:0}
.readrow .k{color:var(--mut); font-size:12px; text-transform:uppercase; letter-spacing:.03em}
.readrow .v{text-align:right; word-break:break-word}

/* ---------------------------------------------------------------- photos */
.strip{display:flex; gap:8px; flex-wrap:wrap; margin-top:10px}
.strip .sh{width:64px; height:64px; border:1px solid var(--line); border-radius:7px;
           overflow:hidden; background:#f0f2f5; cursor:pointer; padding:0}
.strip .sh.on{border-color:var(--accent); box-shadow:0 0 0 2px #d7e5f3}
.strip .sh img{width:100%; height:100%; object-fit:cover; display:block}
.hero{background:#f0f2f5; border:1px solid var(--line); border-radius:var(--radius);
      aspect-ratio:4/3; display:flex; align-items:center; justify-content:center;
      overflow:hidden; cursor:zoom-in}
.hero img{max-width:100%; max-height:100%; object-fit:contain}
.hero .none{color:#b4bac3; font-size:13px}
.lightbox{position:fixed; inset:0; background:rgba(12,14,18,.92); z-index:50;
          display:flex; align-items:center; justify-content:center; padding:16px; cursor:zoom-out}
.lightbox[hidden]{display:none}
.lightbox img{max-width:100%; max-height:100%; object-fit:contain}

/* ---------------------------------------------------------------- notices */
.err{background:#fdf4f4; border:1px solid #e8cccc; color:var(--bad);
     padding:10px 13px; border-radius:8px; margin:0 0 14px; font-size:14px}
.ok{background:#f0f8f4; border:1px solid #cfe6da; color:var(--ok);
    padding:10px 13px; border-radius:8px; margin:0 0 14px; font-size:14px}
.warnbox{background:#fff4e5; border:1px solid #f0cf9f; color:#8a4b00;
         padding:10px 13px; border-radius:8px; margin:0 0 14px; font-size:14px}
.pin{font:22px/1.3 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; letter-spacing:.2em;
     font-weight:700}
.empty{color:var(--mut); text-align:center; padding:34px 16px; font-size:14px}

.pager{display:flex; gap:10px; align-items:center; justify-content:center;
       margin:16px 0 0; color:var(--mut); font-size:13px; flex-wrap:wrap}

.signin{max-width:320px; margin:52px auto}