/* =====================================================================
   The Irish Mint — grading admin
   Brand taken from irishmint.co.uk: deep green #0b260d, gold #cda137,
   Instrument Sans, pill buttons and fields.
   ===================================================================== */
:root {
  --green: #0b260d;
  --green-2: #133817;
  --green-3: #1f4d25;
  --gold: #cda137;
  --gold-2: #b88c25;
  --gold-soft: #f7f0dd;
  --cream: #faf8f3;
  --ink: #111111;
  --text: #444444;
  --muted: #7d7d7d;
  --line: #e5e5e5;
  --line-soft: #efefef;
  --bg: #ffffff;
  --danger: #b42318;
  --danger-soft: #fdecea;
  --ok: #1d7a3a;
  --ok-soft: #e8f4ec;
  --warn-ink: #8a5a00;
  --warn-soft: #fff4dc;
  --pill: 999px;
  --radius: 18px;
  --radius-sm: 12px;
  --shadow-sm: 0 1px 2px rgba(11, 38, 13, .06);
  --shadow: 0 1px 2px rgba(11, 38, 13, .05), 0 8px 24px -12px rgba(11, 38, 13, .18);
  --shadow-lg: 0 24px 48px -24px rgba(11, 38, 13, .35);
  --font: "Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "SFMono-Regular", "Cascadia Mono", Consolas, monospace;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --topbar-h: 74px;   /* updated by admin.js to the menu bar's real height */

  /* Status colours: a calm progression from neutral to green, gold for the final checks */
  --st-received: #6b7280;   --st-received-bg: #f1f2f4;
  --st-grading: #2f5f8a;    --st-grading-bg: #e9f1f8;
  --st-encapsulation: #6a4c93; --st-encapsulation-bg: #f1ecf8;
  --st-quality: #9a6b00;    --st-quality-bg: #fbf2dc;
  --st-shipped: #1f6f78;    --st-shipped-bg: #e3f3f4;
  --st-complete: #1d7a3a;   --st-complete-bg: #e8f4ec;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html, body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font); font-size: 15px; line-height: 1.55; }
body { min-height: 100vh; display: flex; flex-direction: column; }
main { flex: 1; }
a { color: var(--ink); text-underline-offset: 3px; }
img { max-width: 100%; }
h1, h2, h3 { color: var(--ink); letter-spacing: -.02em; line-height: 1.15; }
:focus-visible { outline: 3px solid rgba(205, 161, 55, .55); outline-offset: 2px; }

.icon { width: 18px; height: 18px; flex: none; vertical-align: -3px; }
.icon-lg { width: 22px; height: 22px; }

/* ---------- Top bar ---------- */
.topbar { background: var(--green); color: #fff; position: sticky; top: 0; z-index: 20; box-shadow: 0 1px 0 rgba(255,255,255,.06), 0 8px 20px -16px rgba(0,0,0,.6); }
.topbar-inner { max-width: 1180px; margin: 0 auto; padding: 10px 24px; display: flex; align-items: center; gap: 32px; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--gold); }
.brand-logo { height: 54px; width: 54px; object-fit: contain; }
.brand-text { font-weight: 700; letter-spacing: .12em; }
.brand-sub { font-size: 12px; text-transform: uppercase; letter-spacing: .22em; color: var(--gold); border-left: 1px solid rgba(205,161,55,.4); padding-left: 12px; }
.topbar-user { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.topbar-user form { margin: 0; }
.user-chip { display: inline-flex; align-items: center; gap: 10px; color: rgba(255,255,255,.85); font-size: 14px; }
.icon-btn { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255,255,255,.18); background: transparent; color: #fff; cursor: pointer; transition: background .2s, border-color .2s; }
.icon-btn:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.35); }

.avatar { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; flex: none;
  background: linear-gradient(145deg, var(--gold) 0%, var(--gold-2) 100%); color: var(--green); font-weight: 700; font-size: 15px; letter-spacing: .02em;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.35); }
.avatar-sm { width: 32px; height: 32px; font-size: 12px; }
.avatar-lg { width: 72px; height: 72px; font-size: 24px; }

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; color: #fff; background:
    radial-gradient(1200px 400px at 85% -20%, rgba(205,161,55,.22), transparent 60%),
    radial-gradient(800px 300px at 0% 120%, rgba(205,161,55,.12), transparent 60%),
    linear-gradient(180deg, var(--green) 0%, var(--green-2) 100%); }
.hero::after { /* decorative coin rings */
  content: ""; position: absolute; right: -80px; top: 50%; width: 420px; height: 420px; transform: translateY(-50%); border-radius: 50%;
  background:
    radial-gradient(circle, transparent 54%, rgba(205,161,55,.25) 54.5%, rgba(205,161,55,.25) 55.5%, transparent 56%),
    radial-gradient(circle, transparent 64%, rgba(205,161,55,.18) 64.5%, rgba(205,161,55,.18) 65%, transparent 65.5%),
    repeating-conic-gradient(from 0deg, rgba(205,161,55,.16) 0 1deg, transparent 1deg 6deg);
  -webkit-mask: radial-gradient(circle, transparent 66%, #000 66.5%, #000 70%, transparent 70.5%), radial-gradient(circle, #000 56%, transparent 56.5%);
  mask: radial-gradient(circle, transparent 66%, #000 66.5%, #000 70%, transparent 70.5%), radial-gradient(circle, #000 56%, transparent 56.5%);
  opacity: .9; pointer-events: none; }
.hero-inner { position: relative; z-index: 1; max-width: 1180px; margin: 0 auto; padding: 56px 24px 92px; }
.eyebrow { display: inline-block; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .22em; color: var(--gold); margin-bottom: 10px; }
.hero h1 { color: #fff; font-size: clamp(30px, 4.4vw, 46px); font-weight: 600; margin: 0 0 10px; }
.hero p { color: rgba(255,255,255,.75); margin: 0; max-width: 560px; font-size: 16px; }
.hero-actions { display: flex; gap: 12px; margin-top: 28px; flex-wrap: wrap; align-items: center; }

/* Fancy search: pill field with a round gold icon button */
.search { position: relative; flex: 1; max-width: 620px; }
.search input { width: 100%; height: 58px; margin: 0 !important; padding: 0 70px 0 26px !important; border-radius: var(--pill) !important;
  border: 1px solid rgba(255,255,255,.18) !important; background: rgba(255,255,255,.97) !important; font-size: 16px; box-shadow: var(--shadow-lg); }
.search input:focus { border-color: var(--gold) !important; box-shadow: 0 0 0 4px rgba(205,161,55,.3), var(--shadow-lg) !important; }
.search-btn { position: absolute; right: 6px; top: 6px; width: 46px; height: 46px; border-radius: 50%; border: 0; cursor: pointer;
  display: grid; place-items: center; color: var(--green);
  background: radial-gradient(circle at 30% 25%, #ecd08a 0%, var(--gold) 45%, var(--gold-2) 100%);
  box-shadow: 0 6px 14px -6px rgba(184,140,37,.9), inset 0 1px 0 rgba(255,255,255,.5); transition: transform .2s var(--ease), box-shadow .2s; }
.search-btn:hover { transform: scale(1.06) rotate(-8deg); box-shadow: 0 10px 20px -8px rgba(184,140,37,1), inset 0 1px 0 rgba(255,255,255,.5); }
.search-btn .icon { width: 20px; height: 20px; }
.search-light input { background: #fff !important; border-color: var(--line) !important; box-shadow: var(--shadow-sm); height: 52px; }
.search-light .search-btn { width: 40px; height: 40px; }

/* ---------- Page ---------- */
.page { max-width: 1180px; width: 100%; margin: 0 auto; padding: 36px 24px 72px; }
.hero + .page { margin-top: -56px; position: relative; z-index: 2; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; }
.page-head h1 { margin: 0; font-size: 30px; font-weight: 600; }
.page-head p { margin: 4px 0 0; color: var(--muted); }
.crumbs { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); margin: 0 0 10px; flex-wrap: wrap; }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--ink); }
.crumbs .icon { width: 14px; height: 14px; }
.title { text-align: center; font-size: 32px; font-weight: 600; margin: 0 0 8px; }
.lede { text-align: center; color: var(--muted); margin: 0 0 24px; }
.center { text-align: center; }
.muted { color: var(--muted); }
.ink { color: var(--ink); }
.small { font-size: 13px; }
.mono { font-family: var(--mono); letter-spacing: .02em; }
.narrow { max-width: 420px; margin: 24px auto; }
.narrow-card { max-width: 560px; margin-left: auto; margin-right: auto; }
.empty { text-align: center; color: var(--muted); padding: 48px 16px; }
.empty .icon { width: 40px; height: 40px; color: var(--gold); display: block; margin: 0 auto 10px; }
.section-title { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 36px 0 14px; }
.section-title h2 { margin: 0; font-size: 19px; font-weight: 600; }

/* ---------- Flash ---------- */
.flash { display: flex; align-items: center; gap: 10px; max-width: 760px; margin: 0 auto 22px; padding: 12px 18px; border-radius: var(--pill);
  background: var(--ok-soft); color: var(--ok); font-weight: 500; box-shadow: var(--shadow-sm); animation: drop .35s var(--ease); }
.flash-error { background: var(--danger-soft); color: var(--danger); }
@keyframes drop { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
/* Toasts: the messages after saving, in the bottom-right corner over everything (slide-out panels too). */
.toasts { position: fixed; right: 24px; bottom: 24px; z-index: 70; display: flex; flex-direction: column; gap: 10px; width: min(420px, calc(100vw - 32px));
  pointer-events: none; }
.toasts .flash { margin: 0; max-width: none; pointer-events: auto; align-items: flex-start; border-radius: var(--radius-sm); padding: 12px 10px 12px 16px;
  background: var(--green); color: #fff; box-shadow: var(--shadow-lg); line-height: 1.4; animation: toast-in .3s var(--ease);
  transition: opacity .25s var(--ease), transform .25s var(--ease); }
.toasts .flash > .icon { color: var(--gold); margin-top: 1px; }
.toasts .flash-error { background: #fff; color: var(--danger); border: 1px solid rgba(180,35,24,.35); }
.toasts .flash-error > .icon { color: var(--danger); }
.toasts .flash.leaving { opacity: 0; transform: translateY(8px); }
.toast-text { flex: 1; }
.toast-close { flex: none; width: 26px; height: 26px; margin: -3px 0; display: grid; place-items: center; border: 0; border-radius: 50%;
  background: none; color: inherit; opacity: .7; cursor: pointer; }
.toast-close:hover { opacity: 1; background: rgba(255,255,255,.12); }
.flash-error .toast-close:hover { background: var(--danger-soft); }
.toast-close .icon { width: 14px; height: 14px; }
@keyframes toast-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@media (max-width: 720px) { .toasts { right: 16px; bottom: 16px; } }

/* ---------- Forms ---------- */
label { display: block; color: var(--muted); font-size: 13px; font-weight: 500; }
label.check { display: flex; align-items: center; gap: 10px; color: var(--ink); font-size: 14px; font-weight: 400; cursor: pointer; }
input[type=checkbox], input[type=radio] { flex: none; width: 18px; height: 18px; margin: 0; accent-color: var(--green); }
/* Text-style fields. Checkboxes and radio buttons keep their own small size (above). */
input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=hidden]), select, textarea {
  display: block; width: 100%; margin-top: 6px; padding: 12px 18px; font: inherit; font-size: 15px; color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--pill); background: #fff; outline: none; transition: border-color .15s, box-shadow .15s; }
select { appearance: none; padding-right: 40px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m7 10 5 5 5-5' fill='none' stroke='%23111' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 18px; }
textarea { border-radius: var(--radius-sm); resize: vertical; }
input:hover, select:hover, textarea:hover { border-color: #cfcfcf; }
input:focus, select:focus, textarea:focus { border-color: var(--gold); box-shadow: 0 0 0 4px rgba(205,161,55,.18); }
input::placeholder { color: #b3b3b3; }
input[type=file] { display: block; width: 100%; margin-top: 6px; font-size: 13px; color: var(--muted); }
input[type=file]::file-selector-button { font: inherit; font-weight: 600; margin-right: 10px; padding: 8px 14px; border-radius: var(--pill);
  border: 1px solid var(--line); background: var(--cream); color: var(--ink); cursor: pointer; }
input[type=file]::file-selector-button:hover { border-color: var(--gold); }
.hint { display: block; font-size: 12px; color: var(--muted); font-weight: 400; margin-top: 6px; }
.field-error { display: block; color: var(--danger); font-size: 12px; margin-top: 4px; }
.error-summary ul { margin: 0; padding: 12px 18px 12px 36px; background: var(--danger-soft); color: var(--danger); border-radius: var(--radius-sm); }
.error-summary.validation-summary-valid { display: none; }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 22px; border-radius: var(--pill);
  border: 1px solid var(--line); background: #fff; color: var(--ink); font: inherit; font-weight: 600; letter-spacing: -.01em;
  text-decoration: none; cursor: pointer; transition: transform .15s var(--ease), box-shadow .2s, background .2s, border-color .2s; white-space: nowrap; }
.btn:hover { border-color: #cfcfcf; box-shadow: var(--shadow-sm); }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--green); border-color: var(--green); color: #fff; }
.btn-primary:hover { background: var(--green-3); border-color: var(--green-3); box-shadow: 0 8px 18px -10px rgba(11,38,13,.8); }
.btn-gold { background: var(--gold); border-color: var(--gold); color: var(--green); }
.btn-gold:hover { background: #d8b04c; border-color: #d8b04c; box-shadow: 0 8px 18px -10px rgba(184,140,37,.9); }
.btn-ghost-light { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.25); color: #fff; }
.btn-ghost-light:hover { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.45); }
.btn-danger { background: #fff; border-color: rgba(180,35,24,.35); color: var(--danger); }
.btn-danger:hover { background: var(--danger-soft); border-color: var(--danger); }
.btn-small { padding: 7px 14px; font-size: 13px; }
.btn-block { width: 100%; padding: 14px 22px; }
.link, .link-danger { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.link { color: var(--ink); }
.link-danger { color: var(--danger); display: inline-flex; align-items: center; gap: 4px; }

/* ---------- Layout helpers ---------- */
.stack > * + * { margin-top: 18px; }
.grid-2, .grid-3 { display: grid; gap: 18px 20px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.actions { display: flex; justify-content: flex-end; gap: 12px; flex-wrap: wrap; }
.card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; margin-bottom: 24px; box-shadow: var(--shadow); }
.card h2 { font-size: 18px; font-weight: 600; margin: 0 0 4px; }
.card-head { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.card-head h2 { margin: 0; }
.card-icon { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--gold-soft); color: var(--gold-2); flex: none; }
.danger-zone { display: flex; justify-content: flex-end; margin-top: 4px; }
.tag { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; padding: 3px 10px; border-radius: var(--pill); background: var(--line-soft); color: var(--muted); vertical-align: middle; letter-spacing: .01em; }
.tag-warn { background: var(--warn-soft); color: var(--warn-ink); }
.tag-shopify .icon { width: 13px; height: 13px; vertical-align: 0; }
.tag-ok { background: var(--ok-soft); color: var(--ok); }

/* ---------- Stats ---------- */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.stat { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 22px; box-shadow: var(--shadow); display: flex; gap: 14px; align-items: center; }
.stat .card-icon { width: 46px; height: 46px; }
.stat-value { font-size: 28px; font-weight: 600; color: var(--ink); line-height: 1; letter-spacing: -.03em; }
.stat-label { font-size: 13px; color: var(--muted); margin-top: 6px; }
.stat-accent { background: linear-gradient(160deg, var(--green) 0%, var(--green-2) 100%); border-color: var(--green); }
.stat-accent .stat-value { color: #fff; }
.stat-accent .stat-label { color: rgba(255,255,255,.7); }
.stat-accent .card-icon { background: rgba(205,161,55,.2); color: var(--gold); }

/* Pipeline (Items by status) */
.pipeline { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.pipe { padding: 18px 18px 16px; border-right: 1px solid var(--line-soft); position: relative; }
.pipe:last-child { border-right: 0; }
.pipe::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--c); opacity: .85; }
.pipe-step { font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.pipe-count { font-size: 26px; font-weight: 600; color: var(--ink); letter-spacing: -.03em; margin-top: 6px; }
.pipe-label { font-size: 13px; color: var(--c); font-weight: 600; }

/* ---------- Customer list ---------- */
.list { list-style: none; margin: 0; padding: 0; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.list li + li { border-top: 1px solid var(--line-soft); }
.list-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto 28px; gap: 16px; align-items: center; padding: 16px 22px; text-decoration: none; color: inherit; transition: background .15s; }
.list-row:hover { background: var(--cream); }
.list-row:hover .chev { transform: translateX(3px); color: var(--gold-2); }
.list-name { font-weight: 600; color: var(--ink); font-size: 16px; }
.list-meta { color: var(--muted); font-size: 13px; }
.counts { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.count { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; padding: 5px 12px; border-radius: var(--pill); background: var(--line-soft); color: var(--text); }
.count .icon { width: 14px; height: 14px; }
.count-live { background: var(--gold-soft); color: var(--warn-ink); font-weight: 600; }
.chev { color: #b8b8b8; transition: transform .2s var(--ease), color .2s; }

/* ---------- Customer list search (admin.js filters it in the browser) ---------- */
.list li[hidden], .search-extra[hidden], .search-extra-part[hidden], .show-all[hidden] { display: none; }
.search-extra { display: block; margin-top: 4px; }
.search-extra-part + .search-extra-part::before { content: " · "; }
.show-all { display: flex; margin: 20px auto 0; }

/* ---------- Customer profile ---------- */
.profile { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
.profile h1 { margin: 0; font-size: 30px; font-weight: 600; }
.profile-meta { display: flex; gap: 14px; flex-wrap: wrap; color: var(--muted); font-size: 14px; margin-top: 6px; align-items: center; }
.profile-meta span { display: inline-flex; align-items: center; gap: 6px; }
.profile-actions { margin-left: auto; display: flex; gap: 10px; flex-wrap: wrap; }

/* ---------- Submissions + Items ---------- */
.submission { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); margin-bottom: 20px; overflow: hidden; scroll-margin-top: 100px; }
.submission:target { box-shadow: 0 0 0 3px rgba(205,161,55,.45), var(--shadow); }
.submission-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 16px 22px; background: var(--cream); border-bottom: 1px solid var(--line-soft); }
.submission-ref { display: flex; align-items: center; gap: 12px; }
.submission-ref strong { font-size: 16px; color: var(--ink); letter-spacing: .01em; }
.submission-meta { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; color: var(--muted); font-size: 13px; }
.submission-meta a { color: var(--muted); display: inline-flex; align-items: center; gap: 4px; text-decoration: none; }
.submission-meta a:hover { color: var(--ink); }
.submission-meta .icon { width: 15px; height: 15px; }
.item-row { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr) 210px; gap: 16px; align-items: center; padding: 14px 22px; border-top: 1px solid var(--line-soft); transition: background .15s; }
.submission-head + .item-row { border-top: 0; }
.item-row:hover { background: #fcfcfa; }
.item-main { display: flex; align-items: center; gap: 14px; min-width: 0; }
.item-name { color: var(--ink); font-weight: 500; text-decoration: none; }
.item-name:hover { text-decoration: underline; }
.thumb { width: 46px; height: 46px; object-fit: cover; border-radius: 50%; flex: none; box-shadow: 0 0 0 1px var(--line), 0 4px 10px -6px rgba(0,0,0,.4); }
.thumb-empty { width: 46px; height: 46px; border-radius: 50%; flex: none; display: grid; place-items: center; background: var(--cream); color: #c9c9c9; border: 1px dashed var(--line); }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; background: #999; vertical-align: 1px; }
.metal-gold { background: #cda137; } .metal-silver { background: #a9adb3; } .metal-copper { background: #b8733a; }
.metal-platinum { background: #7f8c95; } .metal-palladium { background: #6d7a70; }
.ngc { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); color: var(--ink); background: var(--line-soft); padding: 5px 12px; border-radius: var(--pill); font-size: 13px; text-decoration: none; }
a.ngc:hover { background: var(--gold-soft); }
.ngc-missing { font-family: var(--font); color: var(--warn-ink); background: var(--warn-soft); }

/* Status pills (spans) and status selects share the colour scheme */
.status, .status-select { --c: var(--st-received); --cb: var(--st-received-bg); }
[data-status="Received"]      { --c: var(--st-received);      --cb: var(--st-received-bg); }
[data-status="Grading"]       { --c: var(--st-grading);       --cb: var(--st-grading-bg); }
[data-status="Encapsulation"] { --c: var(--st-encapsulation); --cb: var(--st-encapsulation-bg); }
[data-status="QualityCheck"]  { --c: var(--st-quality);       --cb: var(--st-quality-bg); }
[data-status="Shipped"]       { --c: var(--st-shipped);       --cb: var(--st-shipped-bg); }
[data-status="Complete"]      { --c: var(--st-complete);      --cb: var(--st-complete-bg); }
.status { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: var(--pill); font-size: 12px; font-weight: 600; color: var(--c); background: var(--cb); }
.status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.status-form { display: flex; align-items: center; gap: 8px; margin: 0; justify-self: end; width: 100%; }
.status-select { margin: 0 !important; font-weight: 600; font-size: 14px !important; color: var(--c) !important; background-color: var(--cb) !important; border-color: transparent !important; padding: 9px 38px 9px 16px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m7 10 5 5 5-5' fill='none' stroke='%23555' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") !important; }
.status-select:hover { border-color: var(--c) !important; }
.status-select:disabled { opacity: .6; }
.status-feedback { font-size: 12px; min-width: 18px; display: inline-flex; }
.status-feedback.ok { color: var(--ok); }
.status-form { flex-wrap: wrap; }
.status-feedback.err { color: var(--danger); flex-basis: 100%; justify-content: flex-end; text-align: right; line-height: 1.35; }
.saved-flash { animation: saved 1.2s var(--ease); }
@keyframes saved { 0% { background: var(--ok-soft); } 100% { background: transparent; } }

/* ---------- Photos ---------- */
.photo-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.photo-slot { margin: 0; text-align: center; }
.photo-frame { position: relative; aspect-ratio: 1; border-radius: var(--radius-sm); overflow: hidden; background: var(--cream); border: 1px solid var(--line); }
.photo-frame img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s var(--ease); }
.photo-frame:hover img { transform: scale(1.04); }
.photo-empty { width: 100%; height: 100%; display: flex; flex-direction: column; gap: 6px; align-items: center; justify-content: center; color: #bdbdbd; font-size: 13px; border-style: dashed; }
.photo-empty .icon { width: 28px; height: 28px; }
.photo-slot figcaption { font-size: 13px; font-weight: 600; color: var(--ink); margin: 10px 0 8px; }
.photo-upload { display: flex; flex-direction: column; gap: 8px; align-items: stretch; }
.photo-slot form + form { margin-top: 6px; }

/* ---------- Tables ---------- */
.table { width: 100%; border-collapse: collapse; }
.table th, .table td { text-align: left; padding: 13px 14px; border-bottom: 1px solid var(--line-soft); font-size: 14px; }
.table th { color: var(--muted); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; }
.table tr:last-child td { border-bottom: 0; }
.table tbody tr:hover { background: var(--cream); }
.table-card { padding: 6px 10px; }
tr.inactive td { color: var(--muted); }

/* ---------- Sign-in ---------- */
body.bare { background:
    radial-gradient(900px 500px at 100% 0%, rgba(205,161,55,.18), transparent 60%),
    linear-gradient(180deg, var(--green) 0%, var(--green-2) 100%); }
body.bare .topbar { background: transparent; box-shadow: none; position: static; }
body.bare .topbar-inner { justify-content: center; padding-top: 36px; }
body.bare .brand-logo { width: 96px; height: 96px; }
body.bare .brand-sub { display: none; }
body.bare .footer { background: transparent; border-top-color: rgba(255,255,255,.08); }
.auth-card { max-width: 440px; margin: 8px auto 40px; background: #fff; border-radius: 24px; padding: 36px 36px 30px; box-shadow: 0 40px 80px -40px rgba(0,0,0,.6); }
.auth-card h1 { text-align: center; font-size: 26px; font-weight: 600; margin: 0 0 8px; }
.auth-card .lede { margin-bottom: 26px; }
.auth-icon { display: grid; place-items: center; width: 56px; height: 56px; margin: 0 auto 16px; border-radius: 50%; background: var(--gold-soft); color: var(--gold-2); }
.auth-icon .icon { width: 26px; height: 26px; }
.auth-foot { text-align: center; color: rgba(255,255,255,.55); font-size: 13px; }
.code-input { font-size: 28px !important; letter-spacing: .5em; text-align: center; font-family: var(--mono); padding: 14px 18px 14px 32px !important; }
.dev-code { display: flex; flex-direction: column; align-items: center; gap: 6px; margin: 0 0 22px; padding: 16px; border: 2px dashed var(--gold); border-radius: var(--radius-sm); background: #fffaf0; color: var(--warn-ink); }
.dev-code strong { font-family: var(--mono); font-size: 30px; letter-spacing: .35em; color: var(--ink); padding-left: .35em; }

/* ---------- Footer ---------- */
.footer { background: var(--green); color: rgba(255,255,255,.75); font-size: 13px; border-top: 3px solid var(--gold); }
.footer-inner { max-width: 1180px; margin: 0 auto; padding: 20px 24px; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.footer-muted { color: rgba(255,255,255,.45); }
body.bare .footer { border-top: 0; }

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .user-name, .brand-sub { display: none; }
}
@media (max-width: 720px) {
  :root { --topbar-h: 60px; }
  .topbar-inner { gap: 12px; padding: 8px 16px; }
  .brand-logo { width: 44px; height: 44px; }
  .hero-inner { padding: 36px 16px 80px; }
  .hero::after { width: 260px; height: 260px; right: -110px; opacity: .5; }
  .page { padding: 28px 16px 56px; }
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .item-row { grid-template-columns: 1fr; gap: 10px; }
  .status-form { justify-self: stretch; }
  .list-row { grid-template-columns: auto minmax(0, 1fr) 20px; }
  .list-row .counts { grid-column: 2 / 3; justify-content: flex-start; }
  .photo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .card { padding: 20px; }
  .auth-card { padding: 28px 22px; margin: 8px 16px 32px; }
  .profile-actions { margin-left: 0; }
}
@media (max-width: 420px) {
  .stats { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* ---------- Roles ---------- */
.role { display: inline-flex; align-items: center; gap: 6px; padding: 3px 11px; border-radius: var(--pill); font-size: 12px; font-weight: 600; white-space: nowrap; }
.role-superadmin { background: linear-gradient(135deg, #ecd08a, var(--gold)); color: var(--green); box-shadow: inset 0 0 0 1px rgba(184,140,37,.5); }
.role-superadmin::before { content: "★"; font-size: 11px; }
.role-admin { background: var(--green); color: #fff; }
.role-staff { background: var(--line-soft); color: var(--text); }
.role-picker { border: 0; padding: 0; margin: 0; display: grid; gap: 10px; }
.role-picker legend { color: var(--muted); font-size: 13px; font-weight: 500; margin-bottom: 8px; padding: 0; }
.role-option { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius-sm); cursor: pointer; color: var(--ink); font-size: 14px; transition: border-color .15s, background .15s; }
.role-option:hover { border-color: #cfcfcf; }
.role-option:has(input:checked) { border-color: var(--gold); background: #fffaf0; box-shadow: 0 0 0 3px rgba(205,161,55,.15); }
.role-option input { margin-top: 3px; accent-color: var(--green); width: 18px; height: 18px; }
.role-option strong { display: block; }

/* ---------- Slide-out panel (drawer) ---------- */
.drawer-backdrop { position: fixed; inset: var(--topbar-h) 0 0 0; z-index: 40; background: rgba(6, 20, 8, .45); backdrop-filter: blur(2px);
  opacity: 0; transition: opacity .3s var(--ease); }
.drawer-backdrop.show { opacity: 1; }
/* Side panels: 40% of the window on desktops, never narrower than 560px so forms aren't cramped on smaller screens;
   the whole width on tablets and phones (see the 1024px rule below). */
.drawer { position: fixed; top: var(--topbar-h); right: 0; bottom: 0; z-index: 50; width: max(40vw, 560px); background: #fff;
  box-shadow: -24px 0 60px -20px rgba(0,0,0,.45); border-top-left-radius: var(--radius); transform: translateX(100%); transition: transform .35s var(--ease);
  display: flex; flex-direction: column; border-left: 4px solid var(--gold); }
.drawer.open { transform: translateX(0); }
.drawer-form { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.drawer-head { display: flex; align-items: flex-start; gap: 14px; padding: 22px 24px 18px; border-bottom: 1px solid var(--line-soft);
  background: linear-gradient(180deg, var(--cream), #fff); }
.drawer-head h2 { margin: 0; font-size: 20px; font-weight: 600; }
.drawer-head p { margin: 4px 0 0; }
.drawer-head .icon-btn { margin-left: auto; flex: none; }
.icon-btn-dark { color: var(--ink); border-color: var(--line); }
.icon-btn-dark:hover { background: var(--line-soft); border-color: #cfcfcf; }
.drawer-body { flex: 1; overflow-y: auto; padding: 22px 24px; overscroll-behavior: contain; }
.drawer-foot { display: flex; justify-content: flex-end; gap: 12px; padding: 16px 24px; border-top: 1px solid var(--line-soft); background: #fff; }
.drawer .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
body.drawer-open { overflow: hidden; }
@media (max-width: 1024px) { .drawer { width: 100vw; border-left: 0; border-top-left-radius: 0; } }
@media (max-width: 560px) { .drawer .grid-2 { grid-template-columns: 1fr; } }

/* ---------- Marketplace names ---------- */
.mkt-names { display: inline-flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.profile-meta .mkt-names { margin-top: 0; }
.mkt { display: inline-flex; align-items: center; font-size: 12px; font-weight: 500; padding: 2px 10px; border-radius: var(--pill);
  background: var(--gold-soft); color: var(--warn-ink); border: 1px solid rgba(205,161,55,.35); }
.drawer[hidden], .drawer-backdrop[hidden] { display: none; }

/* ---------- Phone: country code + number in one pill ---------- */
.field > label { margin-bottom: 0; }
.phone-group { display: flex; margin-top: 6px; border: 1px solid var(--line); border-radius: var(--pill); background: #fff; transition: border-color .15s, box-shadow .15s; }
.phone-group:hover { border-color: #cfcfcf; }
.phone-group:focus-within { border-color: var(--gold); box-shadow: 0 0 0 4px rgba(205,161,55,.18); }
.phone-group > select, .phone-group > input { margin: 0 !important; border: 0 !important; box-shadow: none !important; background-color: transparent; }
.phone-group .phone-country { flex: 0 0 132px; width: 132px; border-radius: var(--pill) 0 0 var(--pill) !important; border-right: 1px solid var(--line) !important;
  font-weight: 600; padding-right: 30px; background-position: right 10px center; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
.phone-group > input { flex: 1; min-width: 0; border-radius: 0 var(--pill) var(--pill) 0 !important; letter-spacing: .02em; }
.wa-link { display: inline-flex; align-items: center; gap: 6px; color: #128c4a; font-weight: 600; text-decoration: none; }
.wa-link:hover { text-decoration: underline; }

/* ---------- Flag picker (enhances the phone country <select>) ---------- */
.phone-group { position: relative; align-items: center; }
.phone-group .phone-country.enhanced { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.phone-prefix { display: none; padding-left: 12px; color: var(--muted); font-weight: 600; font-size: 15px; letter-spacing: .02em; flex: none; }
.phone-group.has-picker .phone-prefix { display: inline; }
.phone-group.has-picker > input { padding-left: 6px !important; }
.flag { width: 27px; height: 18px; border-radius: 3px; flex: none; display: block; box-shadow: 0 0 0 1px rgba(0,0,0,.12); overflow: hidden; }
.flag-btn { display: inline-flex; align-items: center; gap: 6px; height: 46px; padding: 0 12px 0 18px; border: 0; border-right: 1px solid var(--line);
  border-radius: var(--pill) 0 0 var(--pill); background: transparent; cursor: pointer; color: var(--muted); flex: none; }
.flag-btn:hover { background: var(--cream); }
.flag-btn:focus-visible { outline: none; background: var(--gold-soft); }
.flag-btn .icon { width: 16px; height: 16px; transform: rotate(90deg); transition: transform .2s var(--ease); }
.flag-btn[aria-expanded="true"] .icon { transform: rotate(-90deg); }
.flag-menu { position: absolute; left: 0; top: calc(100% + 8px); z-index: 60; width: min(340px, 100%); background: #fff;
  border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: var(--shadow-lg), var(--shadow); overflow: hidden;
  animation: drop .18s var(--ease); }
.flag-menu[hidden] { display: none; }
.flag-search { padding: 10px; border-bottom: 1px solid var(--line-soft); }
.flag-search input { margin: 0 !important; padding: 9px 14px !important; font-size: 14px !important; }
.flag-list { list-style: none; margin: 0; padding: 6px; max-height: 280px; overflow-y: auto; overscroll-behavior: contain; }
.flag-list li { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 10px; cursor: pointer; color: var(--ink); font-size: 14px; }
.flag-list li .dial { margin-left: auto; color: var(--muted); font-variant-numeric: tabular-nums; font-size: 13px; }
.flag-list li.active { background: var(--cream); }
.flag-list li[aria-selected="true"] { background: var(--gold-soft); font-weight: 600; }
.flag-list li.divider { height: 1px; padding: 0; margin: 6px 4px; background: var(--line); cursor: default; }
.flag-list .none { color: var(--muted); cursor: default; justify-content: center; }
.flag-list li[hidden] { display: none; }   /* li is display:flex, which would otherwise override [hidden] */

/* ---------- Home page order: overview, then search directly above results ---------- */
.hero-compact .hero-inner { padding: 24px 24px 72px; }
.hero-compact h1 { font-size: clamp(26px, 3.4vw, 38px); margin: 0; }
/* Dashboard (the only page with the compact hero): tighter gaps so the search and list sit higher. */
.hero-compact + .page { padding-top: 24px; }
.hero-compact + .page .stat { padding: 14px 18px; }
.hero-compact + .page .section-title { margin: 22px 0 10px; }
.hero-compact + .page .finder { margin-top: 22px; padding: 12px; }
.hero-compact + .page .section-title-tight { margin-top: 16px; }
.finder { display: flex; gap: 12px; align-items: center; margin: 36px 0 0; padding: 18px; background: #fff;
  border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); scroll-margin-top: calc(var(--topbar-h) + 16px); }
.finder .search { max-width: none; }
.btn-tall { height: 52px; padding: 0 24px; }
.section-title-tight { margin-top: 20px; }
@media (max-width: 720px) {
  .finder { flex-direction: column; align-items: stretch; padding: 12px; }
  .hero-compact .hero-inner { padding: 20px 16px 68px; }
}

.page-head + .finder { margin-top: 0; }

/* Clickable stat card */
.stat-link { text-decoration: none; color: inherit; transition: border-color .2s, box-shadow .2s, transform .2s var(--ease); }
.stat-link .chev { margin-left: auto; }
.stat-link:hover { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(205,161,55,.15), var(--shadow); transform: translateY(-1px); }
.stat-link:hover .chev { transform: translateX(3px); color: var(--gold-2); }

/* ---------- Statuses (9 steps + NGC Feedback) ---------- */
:root {
  --st-preparing: #6b7280;  --st-preparing-bg: #f1f2f4;
  --st-sent: #8a5a00;       --st-sent-bg: #fbf2dc;
  --st-received: #2f5f8a;   --st-received-bg: #e9f1f8;
  --st-grading: #6a4c93;    --st-grading-bg: #f1ecf8;
  --st-qc: #9a3d6b;         --st-qc-bg: #f9e9f1;
  --st-shipped: #1f6f78;    --st-shipped-bg: #e3f3f4;
  --st-returned: #3d6b2f;   --st-returned-bg: #ebf4e6;
  --st-posted: #1d7a3a;     --st-posted-bg: #e8f4ec;
  --st-ngc-prep: #a04f2a;   --st-ngc-prep-bg: #f8ece6;
  --st-feedback: #b42318;   --st-feedback-bg: #fdecea;
}
[data-status="Preparing"]    { --c: var(--st-preparing); --cb: var(--st-preparing-bg); }
[data-status="Sent"]         { --c: var(--st-sent);      --cb: var(--st-sent-bg); }
[data-status="Received"]     { --c: var(--st-received);  --cb: var(--st-received-bg); }
[data-status="Grading"]      { --c: var(--st-grading);   --cb: var(--st-grading-bg); }
[data-status="QualityCheck"] { --c: var(--st-qc);        --cb: var(--st-qc-bg); }
[data-status="Shipped"]      { --c: var(--st-shipped);   --cb: var(--st-shipped-bg); }
[data-status="Returned"]     { --c: var(--st-returned);  --cb: var(--st-returned-bg); }
[data-status="Posted"]       { --c: var(--st-posted);    --cb: var(--st-posted-bg); }
[data-status="NgcPreparations"] { --c: var(--st-ngc-prep); --cb: var(--st-ngc-prep-bg); }
[data-status="NgcFeedback"]     { --c: var(--st-feedback); --cb: var(--st-feedback-bg); }
/* Dashboard "Items by status": all 10 in one row on wide screens, two rows of 5 below that, then two columns. */
.pipeline { grid-template-columns: repeat(10, minmax(0, 1fr)); }
.pipe { padding: 16px 12px 14px; }
.pipe-step { letter-spacing: .1em; }
.pipe-count { font-size: 24px; }
.pipe-label { font-size: 12.5px; line-height: 1.3; }
@media (max-width: 1280px) {
  .pipeline { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .pipe:nth-child(5) { border-right: 0; }
  .pipe:nth-child(-n+5) { border-bottom: 1px solid var(--line-soft); }
}
@media (max-width: 640px) {
  .pipeline { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pipe:nth-child(odd) { border-right: 1px solid var(--line-soft); }
  .pipe:nth-child(even) { border-right: 0; }
  .pipe:nth-child(-n+8) { border-bottom: 1px solid var(--line-soft); }
}

.item-status { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; justify-self: end; }
.status-note { font-size: 12px; color: var(--warn-ink); background: var(--warn-soft); padding: 2px 8px; border-radius: 8px; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.status-readonly { display: block; margin-top: 10px; }
.inline-form { display: inline; margin: 0; }

/* NGC Submission: status stepper */
.stepper { list-style: none; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0; margin: 0; padding: 0; counter-reset: step; }
.step { position: relative; }
.step form { margin: 0; }
.step::before { content: ""; position: absolute; top: 15px; left: -50%; right: 50%; height: 3px; background: var(--line); }
.step:first-child::before { display: none; }
.step-done::before, .step-current::before { background: var(--c); }
.step button { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; width: 100%; padding: 4px 4px 8px;
  background: none; border: 0; font: inherit; cursor: pointer; color: var(--muted); border-radius: var(--radius-sm); }
.step button:hover:not([disabled]) { background: var(--cream); color: var(--ink); }
.step button[disabled] { cursor: default; }
.step-dot { width: 30px; height: 30px; border-radius: 50%; border: 3px solid var(--line); background: #fff; display: block; transition: transform .2s var(--ease); }
.step-done .step-dot { background: var(--c); border-color: var(--c); }
.step-current .step-dot { border-color: var(--c); box-shadow: 0 0 0 5px var(--cb); background: radial-gradient(circle, var(--c) 0 38%, #fff 40%); }
.step button:hover:not([disabled]) .step-dot { transform: scale(1.1); }
.step-label { font-weight: 600; font-size: 13px; color: var(--ink); text-align: center; }
.step-upcoming .step-label { color: var(--muted); font-weight: 500; }
.step-owner { font-size: 10px; text-transform: uppercase; letter-spacing: .14em; color: var(--muted); }
@media (max-width: 720px) {
  .stepper { grid-template-columns: 1fr; gap: 4px; }
  .step::before { display: none; }
  .step button { flex-direction: row; justify-content: flex-start; padding: 8px; }
  .step-dot { width: 22px; height: 22px; }
}

/* Tabs */
.tabs { display: flex; gap: 6px; }
.tabs a { padding: 7px 14px; border-radius: var(--pill); text-decoration: none; color: var(--muted); font-weight: 500; }
.tabs a:hover { background: var(--line-soft); color: var(--ink); }
.tabs a.active { background: var(--green); color: #fff; }
.tab-count { display: inline-block; min-width: 20px; padding: 0 6px; margin-left: 4px; border-radius: var(--pill); background: rgba(255,255,255,.2); font-size: 12px; text-align: center; }
.tabs a:not(.active) .tab-count { background: var(--line-soft); }

/* NGC Submission: lines + add items */
.grade-input { margin: 0 !important; padding: 7px 12px !important; font-size: 13px !important; min-width: 110px; }
.pick-group { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 6px 16px 12px; margin: 0; }
.pick-group legend { padding: 0 6px; }
.pick-item { padding: 6px 0 6px 28px; border-top: 1px solid var(--line-soft); }
.pick-item:first-of-type { border-top: 0; }
.table td a { text-decoration: none; }
.table td a:hover { text-decoration: underline; }
tr:target td { background: var(--gold-soft); }

/* Customer page: empty Submission + Add Item panel */
.item-row-empty { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 18px 22px; }
.submission-meta .btn-small { color: var(--ink); }
/* Keep primary buttons (e.g. Mark as posted) white on green; the rule above would otherwise darken their text */
.submission-meta .btn-small.btn-primary { color: #fff; }
.more-fields { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 12px 16px; }
.more-fields summary { cursor: pointer; font-weight: 600; color: var(--ink); font-size: 14px; }
.more-fields[open] summary { margin-bottom: 14px; }
.drawer-foot { flex-wrap: wrap; }

/* NGC Submission lines: reorder arrows, waiting-for-number notice */
.icon-btn-sm { display: inline-grid; place-items: center; width: 26px; height: 26px; margin-right: 2px; border-radius: 8px; border: 1px solid var(--line); background: var(--bg); color: var(--ink); font-size: 10px; cursor: pointer; transition: background .2s, border-color .2s; }
.icon-btn-sm:hover:not(:disabled) { background: var(--gold-soft); border-color: var(--gold); }
.icon-btn-sm:disabled { opacity: .35; cursor: default; }
.notice { padding: 12px 14px; border-radius: var(--radius-sm); background: var(--warn-soft); color: var(--warn-ink); }
.notice a { color: inherit; font-weight: 600; }

/* NGC Submission: Add Items search */
.pick-search { position: relative; max-width: 620px; }
.pick-search > .icon { position: absolute; z-index: 1; left: 16px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
/* !important: the general input rule (input:not(...):not(...)) is more specific than this one. */
.pick-search input { width: 100%; height: 48px; margin: 0 !important; padding: 0 48px 0 44px !important; border-radius: var(--pill) !important; }
.pick-search input:focus { border-color: var(--gold); box-shadow: 0 0 0 4px rgba(205,161,55,.25); outline: none; }
.pick-search input::-webkit-search-cancel-button { display: none; }
.pick-clear { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; display: grid; place-items: center;
  border: 0; border-radius: 50%; background: transparent; color: var(--muted); cursor: pointer; }
.pick-clear:hover { background: var(--line-soft); color: var(--ink); }
.pick-clear .icon { width: 14px; height: 14px; }
.pick-search[hidden], .pick-clear[hidden], .pick-group[hidden], .pick-item[hidden] { display: none; }
.pick-group legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.pick-group legend .mkt-names { margin-top: 0; }
.pick-group mark { background: rgba(205,161,55,.35); color: inherit; border-radius: 3px; padding: 0 1px; }

/* NGC Submission: Enter grades panel */
.grade-row { display: grid; grid-template-columns: minmax(0, 1fr) 180px; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line-soft); font-weight: 400; color: var(--ink); }
.grade-row-text { font-size: 14px; line-height: 1.4; }
.grade-row input { margin: 0 !important; }
@media (max-width: 560px) { .grade-row { grid-template-columns: 1fr; } }

/* NGC Submission: "Move to Sent" reminder on the left, button on the right, one row */
.send-action { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; margin-top: 16px; }
.send-action > .btn { order: 2; flex: none; margin-left: auto; }   /* button on the right */
.send-warning { order: 1; margin: 0; text-align: left; white-space: nowrap; color: var(--danger); font-weight: 700; font-size: 14px; }
@media (max-width: 900px) {   /* small screens: stack, sentence wraps instead of overflowing */
  .send-action { flex-direction: column; align-items: flex-end; }
  .send-warning { align-self: stretch; white-space: normal; }
}

/* NGC Submission: grades help text with the Save button underneath, both on the right like the other actions */
.grades-save { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; padding: 12px 14px 16px; }
.grades-save p { margin: 0; text-align: right; }

/* Confirmation pop-up (native <dialog>) */
.modal { width: min(620px, calc(100vw - 32px)); max-height: calc(100vh - 64px); padding: 0; border: 0; border-radius: var(--radius);
  box-shadow: var(--shadow-lg); color: var(--text); }
.modal::backdrop { background: rgba(6, 20, 8, .45); backdrop-filter: blur(2px); }
.modal > form { display: flex; flex-direction: column; max-height: calc(100vh - 64px); margin: 0; }
.modal-head { display: flex; align-items: center; gap: 12px; padding: 22px 24px 12px; }
.modal-head h2 { margin: 0; font-size: 18px; font-weight: 600; color: var(--ink); }
.modal-head p { margin: 2px 0 0; }
.modal-body { padding: 4px 24px 8px; overflow: auto; }
.modal-foot { display: flex; justify-content: flex-end; gap: 12px; padding: 14px 24px 22px; border-top: 1px solid var(--line-soft); }
.modal-foot [hidden] { display: none; }
.modal-empty { margin: 8px 0; font-size: 15px; color: var(--ink); }
.modal-table td, .modal-table th { padding: 8px 10px; }
.grade-new { font-weight: 700; color: var(--ok); }
.grade-cleared { color: var(--danger); font-family: var(--font); font-weight: 600; }

/* NGC Submission: IM Submission side panel */
.im-link { color: var(--muted); text-decoration: underline dotted; text-underline-offset: 3px; }
.im-link:hover { color: var(--gold-2); text-decoration-style: solid; }
.im-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.im-summary > div { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fff; }
.im-summary strong { color: var(--ink); font-size: 16px; font-weight: 600; }
.im-summary span { color: var(--muted); font-size: 12px; }
.im-summary .im-summary-this { background: var(--gold-soft); border-color: rgba(205,161,55,.45); }
.im-coins { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.im-coin { display: flex; justify-content: space-between; gap: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fff; opacity: .75; }
.im-coin-here { opacity: 1; background: var(--gold-soft); border-color: var(--gold); box-shadow: inset 4px 0 0 var(--gold); }
.im-coin-main { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.im-coin-name { color: var(--ink); font-weight: 600; }
.im-coin-side { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex: none; text-align: right; }
.im-grade { color: var(--ok); font-weight: 700; }
.tag-here { background: var(--green); color: #fff; border-color: var(--green); }
@media (max-width: 560px) { .im-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Confirmation pop-up (shared) */
.modal-confirm { width: min(480px, calc(100vw - 32px)); }
.modal-text { margin: 4px 0 6px; font-size: 15px; line-height: 1.55; color: var(--text); }
.modal-confirm .modal-head { padding-bottom: 6px; }
.modal-danger .card-icon { background: var(--danger-soft); color: var(--danger); }
.btn-danger-solid { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn-danger-solid:hover { background: #9a1d14; border-color: #9a1d14; box-shadow: 0 8px 18px -10px rgba(180,35,24,.8); }

/* Settings (Super-admin): section links and the Market Places list */
.settings-link { display: flex; align-items: center; gap: 16px; text-decoration: none; color: inherit; }
.settings-link h2 { margin: 0 0 2px; }
.settings-link:hover { border-color: var(--gold); }
.settings-link-chevron { margin-left: auto; color: var(--muted); }
.settings-add { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.settings-add label { flex: 1 1 260px; }
.settings-rename { display: flex; align-items: center; gap: 8px; margin: 0; }
.settings-rename input { max-width: 320px; }
/* Item forms: where the order came from */
.order-ref { color: var(--muted); }

/* Customer page: search this customer's Items and Submissions (admin.js) */
.item-search { margin: 0 0 10px; }
.item-search-summary { margin: 0 0 14px; }
.submission[hidden], .item-row[hidden], .item-search-summary[hidden], .empty[hidden] { display: none; }
.submission mark, .list mark { background: rgba(205,161,55,.35); color: inherit; border-radius: 3px; padding: 0 1px; }

/* Loading banner (shown by admin.js while the next page loads). The logo spins on its vertical axis like a coin. */
.page-loader { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 16px;
  background: radial-gradient(circle at 50% 40%, rgba(11,38,13,.35), rgba(11,38,13,.6));
  -webkit-backdrop-filter: blur(6px) saturate(120%); backdrop-filter: blur(6px) saturate(120%);
  opacity: 0; transition: opacity .25s var(--ease); }
.page-loader[hidden] { display: none; }
.page-loader.show { opacity: 1; }
.page-loader-card { position: relative; overflow: hidden; min-width: 260px; padding: 34px 48px 26px; text-align: center; color: #fff;
  background: linear-gradient(160deg, var(--green-3), var(--green) 70%); border: 1px solid rgba(205,161,55,.45);
  border-radius: var(--radius); box-shadow: 0 30px 70px -24px rgba(0,0,0,.65), inset 0 1px 0 rgba(255,255,255,.08);
  transform: translateY(8px) scale(.98); transition: transform .35s var(--ease); }
.page-loader.show .page-loader-card { transform: none; }
/* A slow gold sheen across the card */
.page-loader-card::before { content: ""; position: absolute; inset: -40% auto -40% -60%; width: 40%;
  background: linear-gradient(100deg, transparent, rgba(205,161,55,.18), transparent); transform: skewX(-20deg);
  animation: im-sheen 2.4s ease-in-out infinite; pointer-events: none; }
.page-loader-coin { display: grid; justify-items: center; gap: 6px; margin: 0 auto 16px; perspective: 700px; }
.page-loader-coin img, .page-loader-fallback { width: 96px; height: 96px; object-fit: contain; backface-visibility: visible;
  animation: im-coin-spin 1.8s cubic-bezier(.45,.05,.55,.95) infinite; filter: drop-shadow(0 10px 14px rgba(0,0,0,.45)); }
.page-loader-fallback { display: grid; place-items: center; border-radius: 50%; background: var(--gold); color: var(--green);
  font-weight: 700; font-size: 30px; letter-spacing: .06em; }
/* Soft shadow under the coin that narrows as it turns edge-on */
.page-loader-coin::after { content: ""; display: block; width: 64px; height: 8px; border-radius: 50%;
  background: rgba(0,0,0,.35); filter: blur(3px); animation: im-coin-shadow 1.8s cubic-bezier(.45,.05,.55,.95) infinite; }
.page-loader-title { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--gold); }
.page-loader-text { margin: 4px 0 16px; font-size: 16px; font-weight: 500; color: rgba(255,255,255,.9); }
.page-loader-bar { height: 3px; border-radius: 3px; background: rgba(255,255,255,.12); overflow: hidden; }
.page-loader-bar span { display: block; width: 40%; height: 100%; border-radius: 3px;
  background: linear-gradient(90deg, transparent, var(--gold), #f1d88a); animation: im-bar 1.3s ease-in-out infinite; }
@keyframes im-coin-spin { from { transform: rotateY(0deg); } to { transform: rotateY(360deg); } }
@keyframes im-coin-shadow { 0%, 50%, 100% { transform: scaleX(1); opacity: .9; } 25%, 75% { transform: scaleX(.25); opacity: .5; } }
@keyframes im-bar { from { transform: translateX(-110%); } to { transform: translateX(260%); } }
@keyframes im-sheen { 0% { left: -60%; } 60%, 100% { left: 130%; } }
/* Respect "reduce motion": no spin or sweep, just a gentle pulse. */
@media (prefers-reduced-motion: reduce) {
  .page-loader-coin img, .page-loader-fallback { animation: im-pulse 1.6s ease-in-out infinite; }
  .page-loader-coin::after, .page-loader-card::before { animation: none; }
  .page-loader-bar span { animation: none; width: 100%; opacity: .6; }
}
@keyframes im-pulse { 50% { opacity: .55; } }

/* NGC Submission: an Item's side panel (_ItemPanel) */
.item-panel-thumb { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; border: 2px solid var(--gold); flex: none; }
.item-panel-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--line);
  border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; }
.item-panel-facts > div { background: var(--cream); padding: 10px 14px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.item-panel-facts span:first-child { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.item-panel-facts strong { font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item-panel-facts a { color: var(--ink); }
.item-panel-photos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.item-panel-photos figure { margin: 0; }
.item-panel-photos img, .item-panel-photos .photo-empty { display: block; width: 100%; aspect-ratio: 1; object-fit: cover;
  border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--cream); }
.item-panel-photos .photo-empty { display: grid; place-items: center; align-content: center; gap: 6px; color: var(--muted); font-size: 13px; }
.item-panel-photos figcaption { margin-top: 6px; font-size: 12px; color: var(--muted); text-align: center; }
.item-panel-section { margin: 6px 0 -4px; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-2); }
.item-panel-section::after { content: ""; display: block; height: 1px; margin-top: 8px; background: var(--line-soft); }
.item-panel .error-summary ul { margin: 0; padding-left: 18px; }

/* Warning panel, e.g. sending a blank NGC Submission */
.warn-box { padding: 12px 16px; border-radius: var(--radius-sm); background: var(--warn-soft); color: var(--warn-ink); font-size: 14px; line-height: 1.5; border: 1px solid rgba(138,90,0,.2); }
.warn-box strong { display: block; margin-bottom: 2px; }

/* Move an Item to another NGC Submission (_MoveItemFields): a compact toggle that spans the row once opened */
.move-box { align-self: start; border: 1px dashed var(--line); border-radius: var(--radius-sm); background: var(--cream); }
.move-box[open] { grid-column: 1 / -1; border-style: solid; border-color: rgba(205,161,55,.6); }
.move-box > summary { display: flex; align-items: center; gap: 8px; padding: 12px 14px; cursor: pointer; font-weight: 600; font-size: 14px; color: var(--ink); list-style: none; }
.move-box > summary::-webkit-details-marker { display: none; }
.move-box > summary .icon { width: 16px; height: 16px; color: var(--gold-2); }
.move-box-body { padding: 0 14px 14px; }
.item-panel-fact-wide { grid-column: 1 / -1; }
.item-panel-fact-wide strong { white-space: normal; font-weight: 500; }
.tag-moved { margin-left: 6px; font-size: 11px; text-decoration: none; background: var(--warn-soft); color: var(--warn-ink); }
.moved-row td { color: var(--muted); }
.moved-row td a { color: var(--ink); }

/* NGC Submission: "Add a missing Item" panel (_MissingItemPanel) */
.drawer-form-inner { display: flex; flex-direction: column; flex: 1; min-height: 0; margin: 0; }
.missing-steps { display: flex; gap: 8px; margin: 0; padding: 10px 24px; list-style: none; counter-reset: step; background: var(--cream); border-bottom: 1px solid var(--line-soft); font-size: 13px; color: var(--muted); }
.missing-steps li { counter-increment: step; display: flex; align-items: center; gap: 6px; }
.missing-steps li::before { content: counter(step); display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--line); font-size: 11px; font-weight: 700; background: #fff; }
.missing-steps li + li::after { content: none; }
.missing-steps li.current { color: var(--ink); font-weight: 600; }
.missing-steps li.current::before { background: var(--green); border-color: var(--green); color: #fff; }
.missing-steps li.done::before { background: var(--gold-soft); border-color: var(--gold); color: var(--gold-2); }
.missing-search { display: flex; align-items: flex-end; gap: 10px; margin: 0; }
.missing-search label { flex: 1; }
.missing-search .pick-search { display: block; max-width: none; margin-top: 6px; }
.missing-results { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; }
.missing-results li + li { border-top: 1px solid var(--line-soft); }
.missing-result { display: flex; align-items: center; gap: 12px; padding: 10px 14px; text-decoration: none; color: inherit; }
.missing-result:hover { background: var(--cream); }
.missing-result > span:nth-child(2) { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.missing-result .chev { color: var(--muted); }
.missing-new { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border: 1px dashed var(--line); border-radius: var(--radius-sm); }
.missing-customer { display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: var(--cream); border-radius: var(--radius-sm); }
.missing-customer > div { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.missing-subs { display: flex; flex-direction: column; gap: 8px; }
.missing-added { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; }
.missing-added strong { width: 100%; }
.missing-matches { margin: 6px 0 8px; padding-left: 18px; }
.add-missing-link { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; }

/* NGC Submission: every line added in one go (ticked Items, or a run of "Save and add another"), same look as :target */
tr.row-new td { background: var(--gold-soft); }

/* "Add a missing Item": IM Submission choices as selectable rows (radio, then reference with date and count beneath) */
.missing-subs { gap: 8px; }
.sub-option { padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fff; transition: border-color .15s, background .15s; }
.sub-option:hover { border-color: #cfcfcf; }
.sub-option:has(input:checked) { border-color: var(--gold); background: var(--gold-soft); }
.sub-option-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sub-option-text strong { font-weight: 600; }

/* =====================================================================
   Phones and tablets
   ===================================================================== */

/* Left menu (sidebar), signed-in pages. Desktops: fixed under the top bar and collapsed to icons by default
   (html.nav-collapsed); pointing at it (or tabbing into it) opens it over the page, which doesn't move. The button at
   the bottom pins it open instead (remembered by admin.js, applied by the layout's head script). Up to 1024px it's
   hidden and the top bar's menu button slides it in over the page (body.menu-open). */
:root { --side-w: 236px; }
html.nav-collapsed { --side-w: 72px; }
body.has-sidenav .topbar-inner { max-width: none; padding-left: 20px; padding-right: 24px; gap: 16px; }
.sidenav { position: fixed; top: var(--topbar-h); left: 0; bottom: 0; z-index: 15; width: var(--side-w); display: flex; flex-direction: column;
  gap: 8px; padding: 14px 12px; background: var(--green); border-top: 1px solid rgba(255,255,255,.06); overflow-x: hidden; overflow-y: auto;
  transition: width .2s var(--ease); }
.sidenav-links { display: flex; flex-direction: column; gap: 4px; flex: 1; }
.sidenav-links a, .sidenav-collapse { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: var(--radius-sm);
  color: rgba(255,255,255,.82); text-decoration: none; font-weight: 500; white-space: nowrap; transition: background .2s var(--ease), color .2s; }
.sidenav-links a:hover { background: rgba(255,255,255,.08); color: #fff; }
.sidenav-links a.active { background: rgba(205,161,55,.16); color: var(--gold); }
.sidenav .icon { width: 20px; height: 20px; }
.sidenav-collapse { width: 100%; background: none; border: 0; cursor: pointer; font: inherit; font-size: 13px; color: rgba(255,255,255,.55); }
.sidenav-collapse:hover { background: rgba(255,255,255,.08); color: #fff; }
.sidenav-collapse .icon { transition: transform .2s var(--ease); }
html.nav-collapsed .sidenav-label { display: none; }
html.nav-collapsed .sidenav-links a, html.nav-collapsed .sidenav-collapse { justify-content: center; padding: 11px 0; }
html.nav-collapsed .sidenav-collapse .icon { transform: rotate(180deg); }
@media (min-width: 1025px) {
  /* Auto-collapse: opens over the page after a short pause (so passing the mouse across it doesn't flash it open). */
  html.nav-collapsed .sidenav:hover, html.nav-collapsed .sidenav:focus-within { width: 236px; transition-delay: .15s;
    box-shadow: 18px 0 30px -18px rgba(0,0,0,.55); }
  html.nav-collapsed .sidenav:hover .sidenav-label, html.nav-collapsed .sidenav:focus-within .sidenav-label { display: inline; }
  html.nav-collapsed .sidenav:hover .sidenav-links a, html.nav-collapsed .sidenav:hover .sidenav-collapse,
  html.nav-collapsed .sidenav:focus-within .sidenav-links a, html.nav-collapsed .sidenav:focus-within .sidenav-collapse { justify-content: flex-start; padding: 11px 14px; }
}
body.has-sidenav .shell { margin-left: var(--side-w); transition: margin-left .2s var(--ease); }
/* Beside the menu the page uses the full width of the window (no centred column with white space either side). */
body.has-sidenav .page { max-width: none; }
@media (min-width: 1025px) { body.has-sidenav .page { padding-left: 28px; padding-right: 28px; } }
.nav-toggle { display: none; }
.nav-toggle-close { display: none; }
@media (max-width: 1024px) {
  body.has-sidenav .shell { margin-left: 0; }
  body.has-sidenav .topbar-inner { padding-left: 12px; padding-right: 16px; }
  .nav-toggle { display: inline-grid; width: 44px; height: 44px; flex: none; }
  body.menu-open .nav-toggle-open { display: none; }
  body.menu-open .nav-toggle-close { display: block; }
  .sidenav { width: min(300px, 85vw); z-index: 45; transform: translateX(-100%); transition: transform .2s var(--ease);
    box-shadow: 18px 0 30px -18px rgba(0,0,0,.7); }
  body.menu-open .sidenav { transform: none; }
  .sidenav-collapse { display: none; }
  /* Collapsing is for desktops: on phones and tablets the menu always shows its names. */
  html.nav-collapsed .sidenav-label { display: inline; }
  html.nav-collapsed .sidenav-links a { justify-content: flex-start; padding: 13px 14px; }
  .sidenav-links a { padding: 13px 14px; font-size: 16px; }
}

/* Tables. Up to 900px wide (phones, portrait tablets) each row becomes a card with labelled fields instead of squeezed
   columns: a three-column grid with the label above each value from 601px, one field per line with the label beside it
   on phones. Wider screens keep the table. admin.js wraps each table in .table-scroll (a wide table then scrolls inside
   its own box rather than widening the page) and copies the column headings onto the cells (data-label); cells under a
   blank heading hold the row's buttons (.cell-actions). */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
@media (max-width: 900px) {
  .table:not(.modal-table) thead { display: none; }
  .table:not(.modal-table), .table:not(.modal-table) tbody, .table:not(.modal-table) tr { display: block; width: 100%; }
  .table:not(.modal-table) tr { padding: 12px 4px; border-bottom: 1px solid var(--line); }
  .table:not(.modal-table) tbody tr:last-child { border-bottom: 0; }
  .table:not(.modal-table) td { display: block; border: 0; text-align: left !important; white-space: normal !important; overflow-wrap: anywhere; }
  .table:not(.modal-table) td::before { content: attr(data-label); font-family: var(--font); font-size: 11px; font-weight: 600;
    letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
  .table:not(.modal-table) td.cell-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 8px; }
  .table:not(.modal-table) td.cell-actions::before { content: none; }
  .table:not(.modal-table) td:empty { display: none; }
  .table:not(.modal-table) tr.row-new, .table:not(.modal-table) tr:target { background: var(--gold-soft); }
  .table:not(.modal-table) .grade-input { min-width: 0; }
  .table:not(.modal-table) .icon-btn-sm { width: 36px; height: 36px; font-size: 12px; }   /* easier to tap */
  .table:not(.modal-table) td:has(> .settings-rename)::before { content: none; }
  .table-card { padding: 4px 16px; }
}
@media (min-width: 601px) and (max-width: 900px) {
  .table:not(.modal-table) tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 20px; padding: 16px 6px; }
  .table:not(.modal-table) td { padding: 0; }
  .table:not(.modal-table) td::before { display: block; margin-bottom: 4px; }
  .table:not(.modal-table) td.cell-actions, .table:not(.modal-table) td:has(> .settings-rename) { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  .table:not(.modal-table) td { position: relative; padding: 5px 0 5px 104px; min-height: 30px; }
  .table:not(.modal-table) td::before { position: absolute; left: 0; top: 8px; width: 94px; }
  .table:not(.modal-table) td.cell-actions, .table:not(.modal-table) td:has(> .settings-rename) { padding-left: 0; }
}

/* Card headers: a button beside the title (e.g. "Add a missing Item") moves onto its own line on phones. */
@media (max-width: 720px) {
  .card-head { flex-wrap: wrap; }
  .card-head > div { flex: 1 1 200px; min-width: 0; }
  .card-head > .btn { margin-left: 0 !important; width: 100%; white-space: normal; text-align: center; }
}

/* NGC Submission, Add Items: on phones the Submission heading flows as one line of text that wraps, and each Item's
   details go under its name instead of being squeezed into narrow columns. */
@media (max-width: 720px) {
  .pick-group { padding: 6px 12px 10px; }
  .pick-group legend label.check { display: block; line-height: 1.5; }
  .pick-group legend label.check input { display: inline-block; vertical-align: -3px; margin-right: 8px; }
  .pick-item { flex-wrap: wrap; align-items: flex-start; column-gap: 10px; row-gap: 2px; padding-left: 4px; }
  .pick-item > input { margin-top: 3px; }
  .pick-item > span:first-of-type { flex: 1 1 0; min-width: 0; }
  .pick-item > span.muted { flex-basis: 100%; padding-left: 28px; }
}

/* Phones: section headings stack over their notes, filter tabs keep their counts on one line, and the finder's
   buttons go full width. Market Places: the name box gets the row's full width. */
@media (max-width: 720px) {
  .section-title { flex-direction: column; align-items: flex-start; gap: 6px; }
  .tabs { flex-wrap: wrap; }
  .tabs a { white-space: nowrap; }
  .finder > form.inline-form { display: block; }
  .finder .btn-tall { width: 100%; }
  .settings-rename input { max-width: none; }
}

/* Landscape tablets and small laptops: a little less space in table cells so the NGC lines fit. */
@media (min-width: 901px) and (max-width: 1024px) {
  .table th, .table td { padding: 11px 9px; }
  .grade-input { min-width: 90px; }
}

/* Tablets: section headings keep to one line; the note beside them wraps instead. */
@media (min-width: 721px) and (max-width: 1024px) {
  .section-title h2 { flex: none; }
}

/* Touch screens: iPhones and iPads zoom the page when a field with text under 16px is tapped, so fields use 16px there.
   (The big sign-in code box is already larger.) */
@media (hover: none) and (pointer: coarse) {
  input:not([type=checkbox]):not([type=radio]):not([type=file]):not(.code-input), select, textarea { font-size: 16px !important; }
}

/* IM Submission page: totals, the Items with the waiting Items beside them (customer groups, ticked rows highlighted;
   underneath on narrower screens), and notes shown as text with Edit. */
.im-head { display: flex; align-items: center; gap: 16px 32px; flex-wrap: wrap; padding: 16px 22px; margin-bottom: 0; }
.im-head-title { display: flex; align-items: center; gap: 14px; flex: 1; min-width: 260px; }
.im-head-title .card-icon { width: 40px; height: 40px; }
.im-head h1 { margin: 0; font-size: 22px; font-weight: 600; }
.im-head .profile-meta { margin-top: 4px; font-size: 13px; }
.im-head .profile-meta .status { padding: 2px 10px; }
.im-figures { display: flex; gap: 6px 28px; flex-wrap: wrap; margin: 0; }
.im-figures div { display: flex; flex-direction: column-reverse; }
.im-figures dt { font-size: 12px; color: var(--muted); }
.im-figures dd { margin: 0; font-size: 20px; font-weight: 600; color: var(--ink); line-height: 1.2; letter-spacing: -.02em; }
.im-layout .section-title { margin: 20px 0 10px; }
.im-layout .section-title h2 { font-size: 17px; }
.im-main > .card { padding: 4px 8px; }
.im-main .table th, .im-main .table td { padding: 9px 12px; font-size: 14px; }
.im-main .table th { font-size: 11px; }
/* The Items box: heading, count and New Item inside it, above the table (like the waiting list beside it). */
.im-main > .items-card { padding: 16px 16px 6px; }
.im-layout .items-head { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 8px 10px; margin: 0;
  padding: 2px 0 12px; border-bottom: 1px solid var(--line-soft); }
.items-head > .btn { margin-left: auto; }
.items-card .empty { padding: 32px 16px; }
.notes-card { padding: 16px 20px; margin-top: 20px; }
.notes-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.notes-head h3 { margin: 0; font-size: 16px; flex: 1; }
.notes-head h3 .muted { font-weight: 400; }
.notes-text { margin: 0; white-space: pre-wrap; color: var(--ink); }
.notes-card [hidden] { display: none; }
.pick-group-customer { border: 0; padding: 0; }
.pick-group-customer legend { padding: 0 14px 4px; width: 100%; }
.pick-group-customer legend .check { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; color: var(--ink); }
.pick-group-customer .pick-item { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; margin: 2px 0; border: 1px solid transparent;
  border-top: 1px solid transparent; border-radius: var(--radius-sm); cursor: pointer; color: var(--ink); }
.pick-group-customer .pick-item:hover { background: var(--cream); }
.pick-group-customer .pick-item:has(input:checked) { background: var(--gold-soft); border-color: rgba(205,161,55,.45); }
.pick-group-customer .pick-item input { margin-top: 4px; }
.goes-on { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; background: var(--gold-soft); color: var(--warn-ink);
  border-radius: var(--pill); padding: 6px 14px; font-size: 13px; font-weight: 600; }
.im-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 24px; align-items: start; }
@media (min-width: 1200px) {
  .im-layout { grid-template-columns: minmax(0, 1fr) minmax(400px, 38%); }
}
/* The waiting list's heading and its Add button sit inside the box, above the search, and stay just under the top bar
   while scrolling through the list. */
.im-layout .waiting-head { position: sticky; top: var(--topbar-h); z-index: 5; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-start;
  gap: 8px 10px; margin: 0; padding: 2px 0 12px; background: #fff; border-bottom: 1px solid var(--line-soft); }
.waiting-head [data-pick-add] { margin-left: auto; }
.waiting-card { display: flex; flex-direction: column; gap: 12px; padding: 16px; }
.waiting-card .pick-search input { height: 42px; }
.waiting-card .pick-group-customer legend { padding: 0 8px 2px; }
.waiting-card .pick-group-customer .pick-item { padding: 10px; }
.row-remove { width: 34px; height: 34px; color: var(--muted); background: none; border: 1px solid transparent; }
.row-remove:hover { color: var(--danger); background: var(--danger-soft); border-color: rgba(180,35,24,.25); }
.row-remove .icon { width: 16px; height: 16px; }
/* NGC Submission page: Status and the NGC Submission card (right, as wide as Add Items below) side by side,
   stacked on narrower screens; Add Items lines up with the top of the Lines below. */
.ngc-top { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; margin-bottom: 20px; }
.ngc-top > .card { margin-bottom: 0; }
@media (min-width: 1200px) {
  .ngc-top { grid-template-columns: minmax(0, 1fr) minmax(400px, 38%); column-gap: 24px; }   /* same columns as .im-layout */
  .ngc-top > #status { order: -1; }
}
.ngc-head .profile { align-items: flex-start; flex-wrap: nowrap; }
.ngc-head .profile h1 { font-size: 24px; }
.ngc-head .profile-actions { margin-left: auto; }
.ngc-actions { flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 8px; }
.ngc-actions .btn, .ngc-actions form .btn { width: 100%; white-space: nowrap; }
.ngc-head .send-warning { margin: 14px 0 0; white-space: normal; }
.im-waiting-top { margin-top: 0; }
.row-lock { display: inline-grid; place-items: center; width: 34px; height: 34px; color: var(--muted); cursor: help; border-radius: 50%; }
.row-lock:hover, .row-lock:focus-visible { color: var(--ink); background: var(--line-soft); }
.row-lock .icon { width: 16px; height: 16px; }