/* admin.css — Studio Admin. Quiet, legible internal tool.
   Serif headings for a curated feel; system sans for controls. One accent. */

:root {
  --bg:      #f6f5f2;
  --panel:   #ffffff;
  --ink:     #1b1a17;
  --muted:   #6f6b62;
  --line:    #e4e1da;
  --accent:  #2f6f5e;   /* muted gallery green */
  --accent-d:#245648;
  --danger:  #a3402f;
  --gold:    #b08343;
  --radius:  10px;
  --shadow:  0 1px 2px rgba(27,26,23,.05), 0 8px 24px rgba(27,26,23,.06);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 15px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: Georgia, "Iowan Old Style", "Times New Roman", serif;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.2;
  margin: 0;
}

a { color: var(--accent); }

/* ---- top bar ------------------------------------------------------------ */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 22px;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 20;
}
.brand {
  font-family: Georgia, serif;
  font-size: 20px;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  letter-spacing: -0.01em;
}
.brand span { color: var(--gold); }
.topbar nav { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.topbar nav a {
  text-decoration: none;
  color: var(--ink);
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 14px;
}
.topbar nav a:hover { background: var(--bg); }
.topbar nav a.ghost { color: var(--muted); }

/* ---- layout ------------------------------------------------------------- */
.wrap { max-width: 960px; margin: 0 auto; padding: 26px 22px 60px; }
.page-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 22px;
}
.page-head h1 { font-size: 27px; }
.foot { text-align: center; color: var(--muted); font-size: 13px; padding: 30px 0 40px; }

/* ---- buttons ------------------------------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--accent);
  color: #fff;
  border: 0;
  border-radius: 9px;
  padding: 10px 16px;
  font: inherit;
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  cursor: pointer;
}
.btn:hover { background: var(--accent-d); }
.btn.secondary { background: transparent; color: var(--ink); border: 1px solid var(--line); }
.btn.secondary:hover { border-color: var(--muted); background: var(--panel); }
.link-danger {
  background: none; border: 0; color: var(--danger);
  font: inherit; font-size: 14px; cursor: pointer; padding: 0;
}
.link-danger:hover { text-decoration: underline; }

/* ---- flash -------------------------------------------------------------- */
.flash {
  border-radius: var(--radius);
  padding: 12px 16px;
  margin-bottom: 20px;
  font-size: 14px;
  border: 1px solid transparent;
}
.flash-ok  { background: #eaf3ef; border-color: #cfe4db; color: #21503f; }
.flash-err { background: #f8ece9; border-color: #ecccc4; color: #7f2c1e; }

/* ---- gallery grid ------------------------------------------------------- */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 20px;
}
.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
}
.card-img {
  display: block;
  aspect-ratio: 4 / 3;
  background: #efece6;
  overflow: hidden;
}
.card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.card-img .noimg {
  display: flex; align-items: center; justify-content: center;
  height: 100%; color: var(--muted); font-size: 13px;
}
.card-body { padding: 12px 14px 6px; flex: 1; }
.card-body h3 { font-size: 17px; }
.card-body .muted { color: var(--muted); font-size: 13px; margin: 3px 0 10px; }
.card-actions {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px; border-top: 1px solid var(--line);
}
.card-actions a { text-decoration: none; font-size: 14px; font-weight: 600; }
.card-actions form { margin: 0; }

/* status pills */
.listing-pills { list-style: none; margin: 0 0 4px; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.pill {
  font-size: 12px; padding: 3px 8px; border-radius: 999px;
  background: #f0eee9; color: var(--muted); width: fit-content;
}
.pill-available { background: #eaf3ef; color: #276450; }
.pill-reserved  { background: #fbf1dd; color: #8a6316; }
.pill-sold      { background: #f2e7e4; color: #8a3a2b; }

/* empty state */
.empty {
  text-align: center; padding: 60px 20px; color: var(--muted);
  border: 1px dashed var(--line); border-radius: var(--radius); background: var(--panel);
}
.empty p { margin: 0 0 16px; }

/* ---- forms -------------------------------------------------------------- */
.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 22px;
  margin-bottom: 22px;
}
.panel h2 { font-size: 19px; margin-bottom: 4px; }
.panel .hint { color: var(--muted); font-size: 13px; margin: 0 0 18px; }

.field { margin-bottom: 16px; }
.field label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.field input[type=text],
.field input[type=password],
.field input[type=number],
.field textarea,
.field select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font: inherit;
  background: #fff;
  color: var(--ink);
}
.field textarea { min-height: 96px; resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: var(--accent);
}
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.row3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.err-list { list-style: none; margin: 0 0 18px; padding: 12px 16px; background: #f8ece9; border: 1px solid #ecccc4; color: #7f2c1e; border-radius: 8px; font-size: 14px; }
.err-list li + li { margin-top: 4px; }

/* existing images */
.thumbs { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 14px; }
.thumb {
  width: 132px; border: 1px solid var(--line); border-radius: 8px;
  overflow: hidden; background: #fff; font-size: 12px;
}
.thumb img { width: 100%; height: 92px; object-fit: cover; display: block; }
.thumb.primary { outline: 2px solid var(--gold); }
.thumb .tag { display: block; padding: 4px 8px 0; font-size: 11px; color: var(--gold); font-weight: 600; }
.thumb-ops { padding: 6px 8px 8px; }
.thumb-ops .op {
  display: block; font-size: 12px; font-weight: 600; text-decoration: none;
  margin-bottom: 6px;
}
.op-row { display: flex; gap: 4px; }
.op-btn {
  flex: 1; border: 1px solid var(--line); background: #fff; color: var(--ink);
  border-radius: 6px; padding: 4px 0; font: inherit; font-size: 12px; cursor: pointer;
  line-height: 1.2;
}
.op-btn:hover:not(:disabled) { border-color: var(--muted); background: var(--bg); }
.op-btn:disabled { opacity: .35; cursor: default; }
.op-btn.danger { color: var(--danger); }
.op-btn.danger:hover { border-color: var(--danger); background: #f8ece9; }

/* cropper */
.cropper-stage {
  position: relative; display: inline-block; max-width: 100%;
  margin-bottom: 16px; line-height: 0; background: #efece6; border-radius: 8px; overflow: hidden;
}
.cropper-stage img {
  max-width: 100%; max-height: 460px; display: block;
  cursor: crosshair; user-select: none; -webkit-user-drag: none;
  /* a finger dragging here is drawing a crop box, not scrolling the page */
  touch-action: none;
}
.crop-box {
  position: absolute; display: none; border: 1px solid #fff;
  box-shadow: 0 0 0 9999px rgba(20,22,26,.48); pointer-events: none;
}
.preview-web { max-width: 100%; max-height: 400px; border-radius: 8px; display: block; }

/* listings editor */
.listing-row {
  display: grid;
  /* auto-fit, because the row now carries up to eight fields and which ones are
     visible depends on the supply kind */
  grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
  gap: 12px;
  align-items: end;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 9px;
  margin-bottom: 12px;
  background: #fbfaf8;
}
.listing-row .f { margin: 0; }
.listing-row .f.grow { grid-column: span 1; }
.listing-row label { display: block; font-size: 12px; font-weight: 600; margin-bottom: 5px; color: var(--muted); }
.listing-row input, .listing-row select {
  width: 100%; padding: 8px 10px; border: 1px solid var(--line);
  border-radius: 7px; font: inherit; background: #fff;
}
.listing-row .row-x {
  grid-column: 1 / -1;
  justify-self: end;
  background: none; border: 0; color: var(--danger);
  font: inherit; font-size: 13px; cursor: pointer; padding: 2px 0;
}
.form-actions { display: flex; gap: 12px; align-items: center; margin-top: 8px; }

/* ---- auth pages --------------------------------------------------------- */
.auth-shell {
  min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px;
}
.auth-card {
  width: 100%; max-width: 380px; background: var(--panel);
  border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); padding: 30px;
}
.auth-card h1 { font-size: 24px; margin-bottom: 4px; }
.auth-card .hint { color: var(--muted); font-size: 13px; margin: 0 0 22px; }
.auth-card .btn { width: 100%; justify-content: center; margin-top: 6px; }

@media (max-width: 560px) {
  .row2, .row3 { grid-template-columns: 1fr; }
  .listing-row { grid-template-columns: 1fr 1fr; }
  .listing-row .f.grow { grid-column: 1 / -1; }
}

/* ---- photo editor -------------------------------------------------------- */
/* Two columns: frame on the left, light/colour on the right. Collapses to one
   on a phone, which is where she'll actually be shooting and editing. */
.editor-grid {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 18px;
  align-items: start;
}

.ed-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}
.ed-row:last-child { border-bottom: 0; }

.ed-label {
  flex: none;
  width: 104px;
  font-size: 11px;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--muted);
}

.slider {
  flex: 1;
  accent-color: var(--accent);
  height: 22px;
  cursor: pointer;
  min-width: 0;
}

.ed-row output {
  flex: none;
  width: 44px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  color: var(--muted);
}

/* chips: shape presets, turn controls, white-background strength */
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 13px;
  font: inherit;
  font-size: 12px;
  color: var(--ink);
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.chip:hover { border-color: var(--accent); }
.chip.on {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

@media (max-width: 900px) {
  .editor-grid { grid-template-columns: 1fr; }
  .ed-label { width: 82px; }
}

/* chips are used as links on the dashboard filter row too */
a.chip { text-decoration: none; display: inline-flex; align-items: center; }

/* ---- mobile --------------------------------------------------------------
   This is the half that matters most on a phone: she photographs a piece with
   the camera button and edits it on the spot. Desktop is the comfortable case;
   the phone is the real one. */

@media (max-width: 700px) {
  /* iOS zooms the whole page when a focused input is under 16px. That zoom
     never fully undoes itself and makes the form feel broken, so inputs go to
     16px on small screens regardless of the 15px body text. */
  .field input[type=text],
  .field input[type=password],
  .field input[type=number],
  .field textarea,
  .field select,
  .listing-row input,
  .listing-row select {
    font-size: 16px;
  }

  /* Comfortable tap targets everywhere. */
  .btn, .op-btn, .chip, .row-x { min-height: 44px; }
  .chip { padding: 10px 15px; }
  .op-btn { min-width: 44px; }

  .panel { padding: 16px; }
  .page-head { flex-wrap: wrap; gap: 10px; }
  .row2, .row3 { grid-template-columns: 1fr; }

  /* The editor's slider row: the label alone would eat half the width. */
  .ed-row { flex-wrap: wrap; }
  .ed-label { width: 100%; }
  .slider { flex: 1; min-width: 0; height: 34px; }
  .ed-row output { width: 40px; }

  .form-actions { flex-wrap: wrap; }
  .form-actions .btn { flex: 1; justify-content: center; text-align: center; }
}

@media (max-width: 560px) {
  /* One field per line beats four squeezed ones — the supply/price/stock fields
     are the ones she'll get wrong if they're cramped. */
  .listing-row { grid-template-columns: 1fr; gap: 10px; }
  .listing-row .f.grow { grid-column: 1 / -1; }
  .thumbs { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
}

/* a piece with no category yet — a gentle nudge, not an alarm */
.muted-warn { color: #b8860b; }