/* ============================================================
   POWDER HOUSE BEND — Retail Inventory (Skis/Snowboards/Nordic)
   Matches full design system. Syne + glacier #62c1db.
   Retro: cyan only. No per-column color scatter.
   ============================================================ */

:root {
  --inv-font:    'Syne', system-ui, -apple-system, sans-serif;
  --inv-mono:    'Courier New', Courier, monospace;
  --inv-accent:  #62c1db;
  --inv-seam:    rgba(98, 193, 219, 0.22);
  --inv-glow:    rgba(98, 193, 219, 0.14);
  --inv-bg:      rgba(14, 20, 32, 0.92);
  --inv-border:  rgba(255, 255, 255, 0.07);
  --inv-text:    #e8f0f8;
  --inv-muted:   rgba(220, 229, 240, 0.62);
  --inv-ease:    cubic-bezier(0.22, 1, 0.36, 1);
}


/* ════════════════════════════════════════════════════════════
   SECTION
════════════════════════════════════════════════════════════ */
.inventory-section {
  padding: 2rem;
  max-width: 1200px;
  margin: 0 auto;
}

.inventory-section h2 {
  font-family: var(--inv-font);
  font-size: 1.75rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--inv-text);
  margin: 0 0 0.5rem;
}

.inventory-section p {
  font-family: var(--inv-font);
  font-size: 0.90rem;
  color: var(--inv-muted);
  margin: 0 0 2rem;
  line-height: 1.65;
}


/* ════════════════════════════════════════════════════════════
   INVENTORY COLUMN CARD
════════════════════════════════════════════════════════════ */
.inventory-column {
  flex: 1 1 300px;
  max-width: 100%;
  min-width: 280px;
  box-sizing: border-box;
  margin-bottom: 1.5rem;

  background: var(--inv-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);

  border: 1px solid var(--inv-border);
  border-top: 2px solid transparent;
  border-radius: 12px;
  padding: 1.5rem;

  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.28);
  transition:
    transform     0.26s var(--inv-ease),
    box-shadow    0.26s ease,
    border-color  0.22s ease;
}

.inventory-column:hover {
  transform: translateY(-4px);
  border-top-color: var(--inv-accent);
  box-shadow:
    0 14px 36px rgba(0, 0, 0, 0.32),
    0 0 18px var(--inv-glow);
}

/* All three category columns — same treatment, hierarchy via opacity */
.ski-column,
.snowboard-column,
.nordic-column {
  border-top-color: transparent; /* hover reveals accent */
}

.inventory-column h3 {
  font-family: var(--inv-font);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--inv-accent);
  margin: 0 0 1rem;
  padding: 0.4rem 0.65rem;
  border: 1px solid rgba(98, 193, 219, 0.22);
  border-radius: 5px;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  animation: none;
}


/* ════════════════════════════════════════════════════════════
   CONTROLS (search + filter)
════════════════════════════════════════════════════════════ */
.inventory-controls {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
}

.inventory-controls select,
.inventory-controls input {
  font-family: var(--inv-font);
  font-size: 0.82rem;
  padding: 0.55rem 0.85rem;
  border-radius: 7px;
  border: 1px solid var(--inv-border);
  background: rgba(255, 255, 255, 0.05);
  color: var(--inv-text);
  box-shadow: none;
  box-sizing: border-box;
  width: 100%;
  transition: border-color 0.14s ease, box-shadow 0.14s ease;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.inventory-controls input::placeholder {
  color: var(--inv-muted);
}

.inventory-controls select:focus,
.inventory-controls input:focus {
  outline: none;
  border-color: rgba(98, 193, 219, 0.48);
  box-shadow: 0 0 0 3px rgba(98, 193, 219, 0.10);
}

/* Glacier chevron for select */
.inventory-controls select {
  background-image: url("data:image/svg+xml;utf8,<svg fill='%2362c1db' height='20' viewBox='0 0 24 24' width='20' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 0.65rem center;
  background-size: 1rem;
  padding-right: 2rem;
}

.inventory-controls select::-ms-expand { display: none; }


/* ════════════════════════════════════════════════════════════
   INVENTORY TABLE
════════════════════════════════════════════════════════════ */
.inventory-table {
  max-height: 400px;
  overflow-y: auto;
  overflow-x: auto;
  width: 100%;
  box-sizing: border-box;

  scrollbar-width: thin;
  scrollbar-color: rgba(98, 193, 219, 0.20) transparent;
}

.inventory-table::-webkit-scrollbar       { width: 3px; height: 3px; }
.inventory-table::-webkit-scrollbar-track { background: transparent; }
.inventory-table::-webkit-scrollbar-thumb {
  background: rgba(98, 193, 219, 0.22);
  border-radius: 2px;
}

.inventory-table table {
  width: 100%;
  table-layout: auto;
  border-collapse: collapse;
  font-size: 0.84rem;
}

.inventory-table th,
.inventory-table td {
  padding: 0.6rem 0.75rem;
  text-align: left;
  font-family: var(--inv-font);
}

.inventory-table th {
  position: relative;
  white-space: nowrap;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--inv-accent);
  padding: 0.65rem 1.8rem 0.65rem 0.75rem;
  border-bottom: 1px solid var(--inv-border);
}

/* Sort indicator */
.inventory-table th::after,
.inventory-table th.sortable::after {
  content: '⇅';
  font-size: 0.75em;
  opacity: 0.40;
  position: absolute;
  right: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}

.inventory-table td {
  color: var(--inv-muted);
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.inventory-table td:first-child {
  color: var(--inv-text);
  font-weight: 600;
}

.inventory-table tbody tr:nth-child(even) {
  background: rgba(255, 255, 255, 0.022);
}

.inventory-table tbody tr:hover {
  background: rgba(98, 193, 219, 0.06);
  transition: background 0.12s ease;
}


/* ════════════════════════════════════════════════════════════
   INITIALS BADGE — hidden per original intent
════════════════════════════════════════════════════════════ */
.initials-wrapper { display: none; }


/* ════════════════════════════════════════════════════════════
   RETRO MODE — cyan only
   All three columns same treatment.
   No per-column yellow/magenta scatter. No pulseGlow.
════════════════════════════════════════════════════════════ */
body.retro-mode .inventory-column,
body.retro-mode .ski-column,
body.retro-mode .snowboard-column,
body.retro-mode .nordic-column {
  background: rgba(0, 229, 255, 0.022);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 1px solid rgba(0, 229, 255, 0.22);
  border-top: 2px solid transparent;
  border-radius: 2px;
  box-shadow: none;
}

body.retro-mode .inventory-column:hover,
body.retro-mode .ski-column:hover,
body.retro-mode .snowboard-column:hover,
body.retro-mode .nordic-column:hover {
  border-top-color: #00e5ff;
  background: rgba(0, 229, 255, 0.05);
  box-shadow: 0 0 20px rgba(0, 229, 255, 0.10);
  transform: translateY(-3px);
}

/* All column headings — same cyan, no per-section color */
body.retro-mode .inventory-column h3,
body.retro-mode .ski-column h3,
body.retro-mode .snowboard-column h3,
body.retro-mode .nordic-column h3 {
  font-family: var(--inv-mono);
  font-size: 0.56rem;
  letter-spacing: 0.22em;
  color: #00e5ff;
  text-shadow: 0 0 8px rgba(0, 229, 255, 0.55);
  border-color: rgba(0, 229, 255, 0.28);
  border-radius: 1px;
  animation: none;
  box-shadow: none;
}

/* Controls — all columns same */
body.retro-mode .inventory-controls select,
body.retro-mode .inventory-controls input,
body.retro-mode .ski-column select,
body.retro-mode .ski-column input,
body.retro-mode .snowboard-column select,
body.retro-mode .snowboard-column input,
body.retro-mode .nordic-column select,
body.retro-mode .nordic-column input {
  font-family: var(--inv-mono);
  font-size: 0.76rem;
  letter-spacing: 0.04em;
  background: rgba(0, 5, 12, 0.95);
  color: rgba(0, 229, 255, 0.60);
  border: 1px solid rgba(0, 229, 255, 0.28);
  border-radius: 2px;
  box-shadow: none;
}

body.retro-mode .inventory-controls select {
  background-image: url("data:image/svg+xml;utf8,<svg fill='%2300e5ff' height='20' viewBox='0 0 24 24' width='20' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>");
}

body.retro-mode .inventory-controls input::placeholder {
  color: rgba(0, 229, 255, 0.28);
}

body.retro-mode .inventory-controls select:focus,
body.retro-mode .inventory-controls input:focus {
  border-color: rgba(0, 229, 255, 0.60);
  box-shadow: 0 0 0 3px rgba(0, 229, 255, 0.08);
}

/* Table — all columns same */
body.retro-mode .inventory-table {
  scrollbar-color: rgba(0, 229, 255, 0.18) transparent;
}

body.retro-mode .inventory-table::-webkit-scrollbar-thumb {
  background: rgba(0, 229, 255, 0.18);
}

body.retro-mode .inventory-table th,
body.retro-mode .ski-column .inventory-table th,
body.retro-mode .snowboard-column .inventory-table th,
body.retro-mode .nordic-column .inventory-table th {
  font-family: var(--inv-mono);
  font-size: 0.58rem;
  letter-spacing: 0.14em;
  color: rgba(0, 229, 255, 0.65);
  border-bottom-color: rgba(0, 229, 255, 0.14);
}

body.retro-mode .inventory-table td,
body.retro-mode .ski-column .inventory-table td,
body.retro-mode .snowboard-column .inventory-table td,
body.retro-mode .nordic-column .inventory-table td {
  font-family: var(--inv-mono);
  font-size: 0.76rem;
  color: rgba(0, 229, 255, 0.46);
  border-bottom-color: rgba(0, 229, 255, 0.07);
}

body.retro-mode .inventory-table td:first-child,
body.retro-mode .ski-column .inventory-table td:first-child,
body.retro-mode .snowboard-column .inventory-table td:first-child,
body.retro-mode .nordic-column .inventory-table td:first-child {
  color: rgba(0, 229, 255, 0.80);
  font-weight: 600;
}

body.retro-mode .inventory-table tbody tr:nth-child(even) {
  background: rgba(0, 229, 255, 0.022);
}

body.retro-mode .inventory-table tbody tr:hover {
  background: rgba(0, 229, 255, 0.06);
}

/* Section headings */
body.retro-mode .inventory-section h2 {
  font-family: var(--inv-mono);
  font-size: 0.88rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #00e5ff;
  text-shadow: 0 0 12px rgba(0, 229, 255, 0.55);
}

body.retro-mode .inventory-section p {
  font-family: var(--inv-mono);
  font-size: 0.78rem;
  color: rgba(0, 229, 255, 0.42);
}


/* ════════════════════════════════════════════════════════════
   RESPONSIVE
════════════════════════════════════════════════════════════ */
@media screen and (max-width: 900px) {
  .inventory-section { padding: 1.25rem 1rem 3rem; }

  .inventory-columns {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    width: 100%;
  }

  .inventory-column {
    flex: 1 1 auto;
    width: 100%;
    max-width: 95%;
    margin: 0 auto;
    padding: 1rem;
  }

  .inventory-column h3 { font-size: 0.58rem; }

  .inventory-table { font-size: 0.88rem; }

  .inventory-table table { table-layout: fixed; }

  .inventory-table th,
  .inventory-table td {
    padding: 0.5rem;
    white-space: normal;
    word-break: break-word;
  }
}

@media screen and (max-width: 480px) {
  .inventory-column h3      { font-size: 0.56rem; }
  .inventory-table          { font-size: 0.82rem; }

  .inventory-controls select,
  .inventory-controls input { font-size: 0.88rem; }
}

@media screen and (max-width: 360px) {
  .inventory-section  { padding: 1rem 0.75rem 3rem; }
  .inventory-column   { max-width: 100%; padding: 0.75rem; }
  .inventory-table    { font-size: 0.78rem; }

  .inventory-controls select,
  .inventory-controls input { font-size: 0.82rem; padding: 0.45rem 0.6rem; }
}


/* ────────────────────────────────────────────────────────────
   REDUCED MOTION
──────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .inventory-column {
    transition: none !important;
    animation: none !important;
  }
}