/* ─────────────────────────────────────────────────────
   garment-library.css  —  LaserMockLab V4
   Garment Library V1 · UI + Selection only.
   No canvas, no render, no layers.
   ───────────────────────────────────────────────────── */

/* ── Section wrapper ────────────────────────────────── */
#garment-library-section {
  flex-shrink: 0;
  border-top: 1px solid var(--border);
  padding: 12px 10px 14px;
}

/* ── Panel header ───────────────────────────────────── */
.gl-header {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin-bottom: 12px;
}
.gl-header-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--text1);
  letter-spacing: .04em;
}
.gl-header-sub {
  font-size: 9px;
  color: var(--text3);
  letter-spacing: .04em;
}

/* ── Subsection labels ──────────────────────────────── */
.gl-label {
  font-size: 9px;
  font-weight: 700;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin: 12px 0 6px;
}
.gl-label:first-of-type {
  margin-top: 0;
}

/* ── Category segmented control ─────────────────────── */
.gl-seg {
  display: flex;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
  gap: 0;
}
.gl-seg-btn {
  flex: 1;
  background: none;
  border: none;
  border-right: 1px solid var(--border);
  color: var(--text3);
  padding: 6px 2px;
  font-size: 9.5px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  touch-action: manipulation;
  text-align: center;
  transition: background .12s, color .12s;
  letter-spacing: .01em;
  white-space: nowrap;
}
.gl-seg-btn:last-child {
  border-right: none;
}
.gl-seg-btn:hover {
  background: var(--surface3);
  color: var(--text2);
}
.gl-seg-btn.active {
  background: rgba(31, 111, 235, .2);
  color: var(--accent2);
  font-weight: 700;
}

/* ── Model grid (3-column portrait cards) ───────────── */
.gl-model-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

/* card wrapper */
.gl-model-card {
  display: flex;
  flex-direction: column;
  gap: 3px;
  cursor: pointer;
  touch-action: manipulation;
  border-radius: 7px;
  padding: 3px;
  border: 2px solid transparent;
  background: var(--surface2);
  transition: border-color .14s, background .14s;
}
.gl-model-card:hover {
  border-color: rgba(88, 166, 255, .5);
  background: var(--surface3);
}
.gl-model-card.selected {
  border-color: var(--accent);
  background: rgba(31, 111, 235, .1);
  box-shadow: 0 0 0 2px rgba(31, 111, 235, .25);
}

.gl-model-img {
  width: 100%;
  aspect-ratio: 9 / 13;
  object-fit: cover;
  border-radius: 5px;
  display: block;
  background: #17223f;
  /* Denim presentation for the neutral-gray source garment PNGs — thumbnail
     treatment ONLY. The canvas/export pipeline (selectPant → pantImg) never
     touches this CSS, so final rendering stays byte-identical.
     Mapping (measured): mid gray 167 → denim blue rgb(104,133,168);
     shadows 90 → indigo rgb(56,72,121). */
  filter: sepia(1) hue-rotate(188deg) saturate(2.8) brightness(0.66);
}
.gl-model-img-placeholder {
  width: 100%;
  aspect-ratio: 9 / 13;
  border-radius: 5px;
  background: linear-gradient(150deg, #1e2c52 0%, #17223f 55%, #111a33 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: var(--text3);
}
.gl-model-label {
  font-size: 8.5px;
  font-weight: 600;
  color: var(--text3);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 2px 1px;
}
.gl-model-card.selected .gl-model-label {
  color: var(--accent2);
}

/* ── Wash grid (4-column square swatches) ───────────── */
.gl-wash-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 5px;
}

.gl-wash-card {
  display: flex;
  flex-direction: column;
  gap: 3px;
  cursor: pointer;
  touch-action: manipulation;
  border-radius: 6px;
  padding: 2px;
  border: 2px solid transparent;
  background: var(--surface2);
  transition: border-color .14s, background .14s;
}
.gl-wash-card:hover {
  border-color: rgba(88, 166, 255, .5);
  background: var(--surface3);
}
.gl-wash-card.selected {
  border-color: var(--accent);
  background: rgba(31, 111, 235, .1);
  box-shadow: 0 0 0 2px rgba(31, 111, 235, .25);
}

.gl-wash-img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 4px;
  display: block;
  background: var(--surface3);
}
.gl-wash-img-placeholder {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 4px;
  background: var(--surface3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: var(--text3);
}
/* "Yıkamasız / Orijinal" swatch: deep raw indigo denim with a subtle diagonal
   twill weave — replaces the old pale 🚫 placeholder. Purely visual; the
   card still selects the null-wash state exactly as before. */
.gl-wash-none {
  background:
    repeating-linear-gradient(115deg, rgba(255,255,255,.05) 0 1px, rgba(0,0,0,0) 1px 4px),
    linear-gradient(150deg, #1c2a52 0%, #152142 55%, #0e1730 100%);
}
.gl-wash-label {
  font-size: 7.5px;
  font-weight: 600;
  color: var(--text3);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 1px 1px;
}
.gl-wash-card.selected .gl-wash-label {
  color: var(--accent2);
}

/* ── Loading / empty state ──────────────────────────── */
.gl-state-msg {
  font-size: 10px;
  color: var(--text3);
  padding: 8px 2px;
  text-align: center;
  grid-column: 1 / -1;
  font-style: italic;
}

/* ── Selection summary ──────────────────────────────── */
.gl-summary {
  margin-top: 12px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: 6px;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.gl-summary-row {
  display: flex;
  align-items: baseline;
  gap: 5px;
  font-size: 10px;
  white-space: nowrap;
  overflow: hidden;
}
.gl-summary-key {
  color: var(--text3);
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  flex-shrink: 0;
  min-width: 54px;
}
.gl-summary-val {
  color: var(--text1);
  font-weight: 600;
  font-size: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Error box ──────────────────────────────────────── */
.gl-error {
  margin-top: 8px;
  background: rgba(220, 38, 38, .1);
  border: 1px solid rgba(220, 38, 38, .3);
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 10px;
  color: #f87171;
  line-height: 1.5;
}

/* ── Mobile tap fix: prevent child elements stealing tap events ── */
/* img and span inside cards have pointer-events:none so the tap
   always reaches the parent card's onclick handler.             */
.gl-model-card img,
.gl-model-card span,
.gl-wash-card img,
.gl-wash-card span {
  pointer-events: none;
}