/* Gracey's Garms — Listing Studio
   Design system carried over from the proof of concept so the production tool
   looks like what David was shown, extended with the form and table controls a
   real back-office needs. */

@font-face {
  font-family: 'Anek Tamil';
  src: url('/static/assets/fonts/AnekTamil-Variable.woff2') format('woff2-variations'),
       url('/static/assets/fonts/AnekTamil-Variable.woff2') format('woff2');
  font-weight: 100 800;
  font-display: swap;
}
@font-face {
  font-family: 'Assistant';
  src: url('/static/assets/fonts/Assistant-Variable.woff2') format('woff2-variations'),
       url('/static/assets/fonts/Assistant-Variable.woff2') format('woff2');
  font-weight: 100 800;
  font-display: swap;
}

:root {
  --gg-blue:      #0d4b8e;
  --gg-blue-dark: #093862;
  --gg-ink:       #231f20;
  --gg-bg:        #f2f2f2;
  --gg-panel:     #ffffff;
  --gg-border:    #e0e0e0;
  --gg-muted:     #6b6f76;
  --gg-good:      #0f7a3d;
  --gg-good-bg:   #e7f5ec;
  --gg-warn:      #b45500;
  --gg-warn-bg:   #fdf1e6;
  --gg-bad:       #b3413a;
  --gg-bad-bg:    #fdecea;
  --gg-heading:   'Anek Tamil', 'Assistant', sans-serif;
  --gg-body:      'Assistant', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --radius: 10px;
}

* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  background: var(--gg-bg);
  color: var(--gg-ink);
  font-family: var(--gg-body);
  font-size: 15px;
  line-height: 1.55;
}
a { color: var(--gg-blue); }

/* ── HEADER ── */
header.gg-header {
  background: var(--gg-ink);
  color: #fff;
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 14px 28px;
  position: sticky;
  top: 0;
  z-index: 50;
  box-shadow: 0 2px 10px rgba(0,0,0,0.15);
}
/* mark-on-dark.png is already light-on-transparent, so no filter is needed —
   the old invert() hack existed only to rescue a dark logo on a dark header. */
header.gg-header img.logo {
  height: 38px; width: 38px;
  display: block;
}
header.gg-header .divider { width: 1px; height: 32px; background: rgba(255,255,255,0.2); }
header.gg-header .titles h1 {
  font-family: var(--gg-heading);
  font-size: 16px; font-weight: 700; margin: 0; letter-spacing: 0.2px;
}
header.gg-header .titles p {
  margin: 2px 0 0; font-size: 11px;
  color: rgba(255,255,255,0.55); letter-spacing: 0.3px;
}
header.gg-header .spacer { flex: 1; }

.user-chip {
  display: flex; align-items: center; gap: 10px;
  font-size: 12px; color: rgba(255,255,255,0.8);
}
.user-chip .who { font-weight: 700; color: #fff; }
.user-chip .role {
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase;
  padding: 3px 8px; border-radius: 20px;
}
.user-chip .role.owner   { background: rgba(13,75,142,0.55); color: #cfe0f5; border: 1px solid rgba(120,170,225,0.5); }
.user-chip .role.drafter { background: rgba(255,255,255,0.1); color: rgba(255,255,255,0.75); border: 1px solid rgba(255,255,255,0.2); }
.user-chip a { color: rgba(255,255,255,0.6); font-size: 11.5px; text-decoration: none; }
.user-chip a:hover { color: #fff; text-decoration: underline; }

/* ── NAV ── */
nav.gg-nav {
  background: #fff;
  border-bottom: 1px solid var(--gg-border);
  display: flex; gap: 4px; padding: 0 24px;
  position: sticky; top: 72px; z-index: 49; overflow-x: auto;
}
nav.gg-nav a {
  font-family: var(--gg-body); font-size: 13.5px; font-weight: 600;
  color: var(--gg-muted); padding: 14px 16px 12px;
  border-bottom: 3px solid transparent; text-decoration: none; white-space: nowrap;
}
nav.gg-nav a .num {
  font-family: var(--gg-heading); font-size: 10.5px; font-weight: 700;
  color: #b8bcc2; margin-right: 7px; letter-spacing: 0.5px;
}
nav.gg-nav a.active { color: var(--gg-ink); border-bottom-color: var(--gg-blue); }
nav.gg-nav a.active .num { color: var(--gg-blue); }
nav.gg-nav a:hover { color: var(--gg-ink); }
nav.gg-nav .count {
  display: inline-block; min-width: 18px; padding: 0 5px; margin-left: 7px;
  background: var(--gg-blue); color: #fff; border-radius: 10px;
  font-size: 10px; font-weight: 700; text-align: center; line-height: 17px;
}

/* ── LAYOUT ── */
main { max-width: 1180px; margin: 0 auto; padding: 32px 28px 90px; }
main.wide { max-width: 1400px; }

.view-head { margin-bottom: 26px; }
.view-head .eyebrow {
  font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase;
  color: var(--gg-blue); margin-bottom: 8px;
}
.view-head h2 {
  font-family: var(--gg-heading);
  font-size: 26px; font-weight: 700; margin: 0 0 8px; letter-spacing: -0.2px;
}
.view-head p { max-width: 640px; color: var(--gg-muted); margin: 0; font-size: 14px; }

.panel {
  background: var(--gg-panel); border: 1px solid var(--gg-border);
  border-radius: var(--radius); padding: 20px 22px; margin-bottom: 18px;
}
.panel > h3 {
  font-family: var(--gg-heading); font-size: 14px; font-weight: 700; margin: 0 0 4px;
}
.panel > .sub { font-size: 11.5px; color: var(--gg-muted); margin: 0 0 16px; }

/* ── SUMMARY STRIP ── */
.summary-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 28px; }
.summary-strip .card {
  background: var(--gg-panel); border: 1px solid var(--gg-border);
  border-radius: var(--radius); padding: 16px 18px;
}
.summary-strip .card .val {
  font-family: var(--gg-heading); font-size: 24px; font-weight: 700;
  color: var(--gg-blue); line-height: 1.1;
}
.summary-strip .card .lbl { font-size: 11.5px; color: var(--gg-muted); margin-top: 4px; }

/* ── BUTTONS ── */
.btn {
  appearance: none; border: none; cursor: pointer;
  font-family: var(--gg-body); font-weight: 700; font-size: 13px;
  padding: 11px 18px; border-radius: 7px; text-decoration: none;
  display: inline-flex; align-items: center; gap: 8px;
}
.btn-primary { background: var(--gg-blue); color: #fff; }
.btn-primary:hover { background: var(--gg-blue-dark); }
.btn-primary:disabled, .btn:disabled { background: #b9c6d6; cursor: not-allowed; }
.btn-ghost { background: #fff; color: var(--gg-ink); border: 1px solid var(--gg-border); }
.btn-ghost:hover { border-color: var(--gg-ink); }
.btn-danger { background: var(--gg-bad); color: #fff; }
.btn-sm { padding: 7px 12px; font-size: 12px; }

/* ── FORMS ── */
.form-row { display: flex; flex-direction: column; gap: 5px; margin-bottom: 16px; }
.form-row label {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.5px;
  text-transform: uppercase; color: var(--gg-muted);
  display: flex; align-items: center; gap: 6px;
}
.form-row input[type=text], .form-row input[type=email], .form-row input[type=password],
.form-row input[type=number], .form-row select, .form-row textarea {
  font-family: var(--gg-body); font-size: 14px; color: var(--gg-ink);
  padding: 10px 12px; border: 1px solid var(--gg-border);
  border-radius: 7px; background: #fff; width: 100%;
}
.form-row input:focus, .form-row select:focus, .form-row textarea:focus {
  outline: none; border-color: var(--gg-blue); box-shadow: 0 0 0 3px rgba(13,75,142,0.12);
}
.form-row .hint { font-size: 11.5px; color: var(--gg-muted); }
.form-row textarea { resize: vertical; min-height: 120px; line-height: 1.55; }
.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 20px; }

/* ── CHIPS & BADGES ── */
.chip {
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase;
  padding: 3px 7px; border-radius: 5px; display: inline-block; white-space: nowrap;
}
.chip.auto    { background: #e7effa; color: var(--gg-blue); }
.chip.manual  { background: var(--gg-warn-bg); color: var(--gg-warn); }
.chip.good    { background: var(--gg-good-bg); color: var(--gg-good); }
.chip.bad     { background: var(--gg-bad-bg); color: var(--gg-bad); }
.chip.neutral { background: #eef0f2; color: var(--gg-muted); }

/* Listing status */
.chip.status-pending, .chip.status-generating { background: #eef0f2; color: var(--gg-muted); }
.chip.status-draft, .chip.status-ready_for_review { background: var(--gg-warn-bg); color: var(--gg-warn); }
.chip.status-active { background: var(--gg-good-bg); color: var(--gg-good); }
.chip.status-generation_failed { background: var(--gg-bad-bg); color: var(--gg-bad); }
.chip.status-archived { background: #eef0f2; color: var(--gg-muted); }

/* ── TABLES ── */
table.data { width: 100%; border-collapse: collapse; }
table.data th {
  text-align: left; font-size: 10.5px; font-weight: 700; letter-spacing: 0.5px;
  text-transform: uppercase; color: var(--gg-muted);
  padding: 8px 10px; border-bottom: 1px solid var(--gg-border);
}
table.data td {
  padding: 11px 10px; border-bottom: 1px solid var(--gg-border);
  font-size: 13px; vertical-align: middle;
}
table.data tr:last-child td { border-bottom: none; }
table.data tbody tr:hover { background: #fafbfc; }
.table-scroll { overflow-x: auto; }

/* ── ALERTS ── */
.alert {
  border-radius: 8px; padding: 13px 16px; font-size: 13px;
  margin-bottom: 16px; border: 1px solid;
}
.alert.info    { background: #e7effa; border-color: #c3d6ee; color: var(--gg-blue-dark); }
.alert.good    { background: var(--gg-good-bg); border-color: #b9dfc8; color: #0b5c2e; }
.alert.warn    { background: var(--gg-warn-bg); border-color: #f0c896; color: #8a4200; }
.alert.bad     { background: var(--gg-bad-bg); border-color: #f2c0bc; color: #8f2f2a; }
.alert strong { font-weight: 700; }
.alert ul { margin: 8px 0 0; padding-left: 20px; }

/* ── READINESS (credentials still outstanding) ── */
.readiness { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.readiness .item {
  display: flex; align-items: center; gap: 10px;
  border: 1px solid var(--gg-border); border-radius: 8px; padding: 11px 13px; background: #fff;
}
.readiness .dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
.readiness .dot.on  { background: var(--gg-good); }
.readiness .dot.off { background: #d0d4d9; }
.readiness .txt .n { font-size: 12.5px; font-weight: 700; }
.readiness .txt .s { font-size: 11px; color: var(--gg-muted); }

/* ── LOGIN ── */
.login-wrap {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  padding: 24px; background: var(--gg-ink);
}
.login-card {
  background: var(--gg-panel); border-radius: 14px; padding: 34px 36px;
  width: 100%; max-width: 400px; box-shadow: 0 20px 50px rgba(0,0,0,0.3);
}
.login-card .brand { text-align: center; margin-bottom: 26px; }
/* The full lockup, not the mark — the login screen is the one place with the
   vertical room to carry the wordmark and strapline legibly. */
.login-card .brand img { height: 128px; width: auto; }
.login-card h1 {
  font-family: var(--gg-heading); font-size: 19px; font-weight: 700;
  margin: 14px 0 4px; text-align: center;
}
.login-card .tag { font-size: 12.5px; color: var(--gg-muted); text-align: center; margin: 0 0 24px; }
.login-card .btn { width: 100%; justify-content: center; }

/* ── PHOTO GRID ──
   These classes were used in the listing detail template but never styled, so
   photos rendered at natural size — a 2400x3000 finished render filling the
   page. Constrained to a thumbnail grid here. */
.stock-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
}
.stock-card {
  border: 1px solid var(--gg-border); border-radius: var(--radius);
  overflow: hidden; background: var(--gg-panel);
}
.stock-card .thumb { position: relative; aspect-ratio: 4 / 5; background: #e9ecef; }
.stock-card .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.stock-card .thumb .badge { position: absolute; left: 6px; bottom: 6px; }
.stock-card .info { padding: 8px 10px; }
.stock-card .info .meta {
  font-size: 11px; color: var(--gg-muted); text-transform: capitalize;
}
/* Fully pruned: the platforms hold their copies, ours is gone. A normal end
   state, so it reads as archived rather than as a missing image. */
.thumb-archived {
  width: 100%; height: 100%; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center;
  font-size: 12px; font-weight: 600; color: var(--gg-muted);
  background: repeating-linear-gradient(
    45deg, #eceff2, #eceff2 8px, #e4e8ec 8px, #e4e8ec 16px
  );
}
.thumb-archived small { font-weight: 400; font-size: 10.5px; opacity: 0.8; }

/* ── COMPETITOR PRICES ──
   Back-office only. Semantic colour, deliberately not the brand accent:
   green undercuts us, red does not, grey means the price could not be read —
   and grey must never be mistaken for a confirmed comparison. */
.price-check { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--gg-border); }
.price-check form { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.price-check .sub { margin: 0; }
.seller-list { list-style: none; margin: 12px 0 6px; padding: 0; display: grid; gap: 4px; }
.seller-list li {
  display: flex; align-items: center; gap: 10px;
  font-size: 13px; padding: 5px 9px; border-radius: 6px;
  border-left: 3px solid transparent; background: var(--gg-bg);
}
.seller-list li .amt { font-weight: 700; font-variant-numeric: tabular-nums; min-width: 72px; }
.seller-list li.under { border-left-color: var(--gg-bad, #b3261e); }
.seller-list li.under .amt { color: var(--gg-bad, #b3261e); }
.seller-list li.over { border-left-color: var(--gg-good); }
.seller-list li.over .amt { color: var(--gg-good); }
.seller-list li.unknown { border-left-color: #b9bec4; }
.seller-list li a { color: var(--gg-ink); text-decoration: none; }
.seller-list li a:hover { text-decoration: underline; }

/* Photo cards are draggable to set the order shown on Shopify. */
#photo-grid .stock-card { cursor: grab; }
#photo-grid .stock-card.dragging { opacity: 0.45; cursor: grabbing; }
#photo-grid .stock-card:first-child { outline: 2px solid var(--gg-blue); outline-offset: -2px; }

/* ── SOURCED IMAGE PICKER ── */
.candidate-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px;
}
.candidate {
  border: 1px solid var(--gg-border); border-radius: var(--radius);
  background: var(--gg-panel); overflow: hidden; display: flex; flex-direction: column;
}
.candidate .thumb {
  position: relative; aspect-ratio: 4 / 5; background: #f2f3f5;
}
.candidate .thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
.candidate .thumb .badge { position: absolute; left: 6px; top: 6px; }
.candidate .thumb .badge.brand-tag { left: auto; right: 6px; }
.candidate .meta { padding: 9px 10px; flex: 1; }
.candidate .meta .site { font-size: 12.5px; font-weight: 700; }
.candidate .meta .dims {
  font-size: 11px; color: var(--gg-muted); font-variant-numeric: tabular-nums;
}
.candidate .meta .title {
  font-size: 11px; color: var(--gg-muted); margin-top: 4px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.candidate form { padding: 0 10px 10px; }
.candidate .btn { width: 100%; justify-content: center; }

/* Actions that spend money say so, in the colour used for everything else
   that needs attention. */
.costs-credits {
  margin-top: 14px; padding: 14px 16px;
  border: 1px solid var(--gg-bad); border-left-width: 3px;
  border-radius: var(--radius); background: var(--gg-bad-bg);
}
.costs-credits form { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.costs-credits .nb {
  color: var(--gg-bad); font-size: 12.5px; max-width: 54ch; line-height: 1.45;
}
.costs-credits .nb strong { font-weight: 700; }

/* ── DANGER ZONE ──
   Visually separated because everything else on the settings page is
   read-only, and this is the one control that destroys work. */
.danger-zone { border-color: var(--gg-bad); border-left: 3px solid var(--gg-bad); }
.danger-zone > h3 { color: var(--gg-bad); }
.reset-columns {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 18px; margin-bottom: 18px;
}
.reset-columns .label-head {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.5px;
  text-transform: uppercase; color: var(--gg-muted);
}
.reset-columns ul { margin: 6px 0 0; padding-left: 18px; font-size: 13px; }
.reset-columns li { margin-bottom: 3px; }
.reset-form { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; }

/* The generative option. Marked like the other things that need care rather
   than styled as a normal action — it invents detail, and the interface
   should not make that look routine. */
.ai-photo {
  margin: 0 0 14px; padding: 12px 14px;
  border: 1px solid var(--gg-warn); border-left: 3px solid var(--gg-warn);
  border-radius: var(--radius); background: var(--gg-warn-bg);
}
.ai-photo form { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.ai-photo .nb { color: var(--gg-warn); font-size: 12.5px; max-width: 60ch; line-height: 1.45; }

/* ── PAGINATION ──
   Always states the total, not just the page. A page that shows a subset
   without saying so reads as missing data. */
.pager {
  margin-top: 14px; font-size: 12.5px; color: var(--gg-muted);
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.pager a { color: var(--gg-blue); text-decoration: none; font-weight: 600; }
.pager a:hover { text-decoration: underline; }

/* ── EMPTY STATES ── */
.empty {
  padding: 44px 24px; text-align: center; color: var(--gg-muted); font-size: 13.5px;
  background: var(--gg-panel); border: 1px dashed var(--gg-border); border-radius: var(--radius);
}
.empty strong { display: block; color: var(--gg-ink); font-size: 15px; margin-bottom: 6px; }

/* ── TOAST ── */
.toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(20px);
  background: var(--gg-ink); color: #fff; padding: 13px 22px; border-radius: 8px;
  font-size: 13px; font-weight: 600; opacity: 0; pointer-events: none;
  transition: opacity .2s ease, transform .2s ease; z-index: 100;
  box-shadow: 0 8px 24px rgba(0,0,0,0.2);
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

footer.gg-footer {
  max-width: 1180px; margin: 0 auto; padding: 20px 28px 60px;
  font-size: 11.5px; color: var(--gg-muted); border-top: 1px solid var(--gg-border);
}

@media (max-width: 860px) {
  .summary-strip { grid-template-columns: repeat(2, 1fr); }
  .form-grid { grid-template-columns: 1fr; }
}

/* Photo selection — tick boxes on the listing grid, and the bar that acts on
   them. Kept visually quiet: selecting is an occasional job and should not
   compete with the photographs themselves. */
.photo-pick {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--muted, #6b6f76);
  cursor: pointer;
  user-select: none;
  margin-bottom: 4px;
}
.photo-pick input { cursor: pointer; margin: 0; }
.stock-card:has(input[name="photo_ids"]:checked) {
  outline: 2px solid var(--accent, #c44a2a);
  outline-offset: 1px;
}
.photo-bulk-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 10px 0 16px;
  border-top: 1px solid var(--border, #e0e0e0);
  margin-top: -8px;
}

/* The three ways to get photographs onto a listing, in the order they should
   be tried. Numbered because "last resort" was being read as an equal option,
   and the client asked for the sequence to be unmistakable. */
.photo-step { padding: 16px 0; border-top: 1px solid var(--border, #e0e0e0); }
.photo-step:first-of-type { border-top: 0; padding-top: 4px; }
.step-head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 12px; }
.step-n {
  flex: 0 0 auto;
  width: 26px; height: 26px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--gg-blue, #0d4b8e); color: #fff;
  font-size: 13px; font-weight: 700;
  font-variant-numeric: tabular-nums;
}
/* Step three is the one to avoid unless the first two have failed, so it is
   marked rather than matching its siblings. */
.photo-step:last-of-type .step-n { background: var(--accent, #c44a2a); }
.step-head .sub { margin-top: 2px; }

/* ── Capturing a garment on a phone ──────────────────────────────────────
   Held in one hand in front of a rail, so: one column, thumb-sized controls,
   and a shutter that is hard to miss. The rest of the Studio is a desktop
   tool and stays that way — this is the one screen used standing up. */
.capture .panel { margin-bottom: 14px; }

.shoot {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 128px;
  padding: 20px;
  border: 2px dashed var(--gg-border);
  border-radius: 12px;
  background: #fafbfc;
  cursor: pointer;
  text-align: center;
}
.shoot:active { background: #f1f3f5; }
.shoot-icon { font-size: 32px; line-height: 1; }
.shoot-label { font-weight: 700; color: var(--gg-blue); }
/* The input itself is never shown; the whole label is the target, which gives
   a far bigger tap area than a file button. */
.shoot input[type="file"] { position: absolute; width: 1px; height: 1px;
  opacity: 0; pointer-events: none; }

.btn-big {
  width: 100%;
  padding: 16px 20px;
  font-size: 16px;
  min-height: 52px;
}

@media (max-width: 640px) {
  /* Inputs at 16px or larger stop iOS zooming the page when one is focused,
     which otherwise leaves him pinching back out after every field. */
  .capture input[type="text"] { font-size: 16px; min-height: 46px; }
  .capture .form-grid { grid-template-columns: 1fr; }

  /* The Studio was built for a desk and the header is one flex row that does
     not wrap: logo, divider, title, environment, name, role and sign-out come
     to more than a phone is wide, so the whole document was forced wider than
     the screen and every panel lost its right-hand edge. Screenshotting the
     capture page at 430px is what made it obvious.
     The header keeps what identifies the app and who is signed in; the
     decoration goes. */
  html, body { overflow-x: hidden; }
  header.gg-header { padding: 10px 14px; gap: 10px; }
  header.gg-header .divider,
  header.gg-header .titles p,
  header.gg-header .user-chip .who { display: none; }
  header.gg-header img.logo { height: 30px; width: 30px; }
  header.gg-header .titles h1 { font-size: 14px; }

  nav.gg-nav { padding: 0 8px; top: 52px; }
  nav.gg-nav a { padding: 12px 11px 10px; font-size: 13px; }

  main { padding: 18px 14px 72px; }
  .view-head h2 { font-size: 22px; }
  .panel { padding: 16px 14px; }
}