/* File: src/styles/inventory.css */
/* ─────────────────────────────────────────────────────────────────────────────
   inventory.css
   Full-screen inventory overlay: equipment column, storage grid,
   nearby strip, and item tooltip.
───────────────────────────────────────────────────────────────────────────── */

/* ── Overlay backdrop ───────────────────────────────────────────────────── */
#inventory-overlay {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.82);
  pointer-events: auto;
  z-index: 150;
}

#inventory-overlay.is-active {
  display: flex;
}

/* ── Panel ──────────────────────────────────────────────────────────────── */
.inv-panel {
  width: min(860px, 96vw);
  max-height: 92vh;
  overflow: hidden;              /* GameScroll handles all scrolling          */
  background: rgba(6, 14, 4, 0.96);
  border: 1px solid #2a4a18;
  display: flex;
  flex-direction: column;
  position: relative;
}

/* ── Header — stays fixed at top ────────────────────────────────────────── */
.inv-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 8px 16px;
  background: rgba(14, 28, 10, 0.80);
  border-bottom: 1px solid #2a4a18;
  flex-wrap: wrap;
  flex-shrink: 0;
}

.inv-title {
  font-size: 13px;
  font-weight: bold;
  color: #8fce50;
}

.inv-meta              { font-size: 10px; }
.inv-meta--warn        { color: #ff7050; }
.inv-meta--dim         { color: #4a7a28; }
.inv-meta--armed       { color: #c8901a; }
.inv-meta--dim2        { color: #3a2808; }

.inv-close-hint {
  font-size: 9px;
  color: #3a6022;
  margin-left: auto;
  white-space: nowrap;
}

/* ── Scrollable body — GameScroll target ────────────────────────────────── */
/* Header stays fixed above; this area contains inv-body + nearby section.  */
.inv-body-scroll {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  position: relative;
  padding-right: 10px;           /* room for .gs-track                       */
}

/* ── Body ───────────────────────────────────────────────────────────────── */
.inv-body {
  display: flex;
  gap: 0;
  padding: 12px 16px;
  min-height: 360px; /* Guarantees enough height to keep hints pushed away from tooltips */
}

.inv-section-label {
  font-size: 9px;
  font-weight: bold;
  color: #2d5a1a;
  margin-bottom: 8px;
}

.inv-hint {
  font-size: calc(9px * var(--txt-scale));
  margin-top: auto; /* Pushes the hint to the absolute bottom of the flex column */
  padding-top: 24px; /* Ensures minimum separation from the grid */
  min-height: calc(18px * var(--txt-scale));
  line-height: 1.4;
}

/* ── Equipment column ───────────────────────────────────────────────────── */
.inv-equip-col {
  width: 220px;
  flex-shrink: 0;
  margin-right: 16px;
  display: flex;
  flex-direction: column;
}

.equip-slot {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 48px;
  padding: 0 10px;
  margin-bottom: 6px;
  background: rgba(8, 16, 5, 0.70);
  border: 1px solid #1e3412;
  cursor: pointer;
  transition: background 0.1s, border-color 0.1s;
  position: relative;
}
.equip-slot:hover                { background: rgba(20, 40, 12, 0.85); border-color: #3a6a22; }
.equip-slot.is-selected          { background: rgba(40, 80, 20, 0.95); border: 1.5px solid #a0e060; }
.equip-slot.can-accept           { background: rgba(30, 70, 15, 0.60); border: 1.5px solid #6aaa38; }

.equip-slot--weapon              { background: rgba(10, 8, 2, 0.75);   border-color: #2a1e08; }
.equip-slot--weapon:hover        { background: rgba(40, 28, 4, 0.85);  border-color: #8a5818; }
.equip-slot--weapon.is-selected  { background: rgba(60, 38, 4, 0.95);  border: 1.5px solid #e8a030; }
.equip-slot--weapon.can-accept   { background: rgba(50, 34, 4, 0.70);  border: 1.5px solid #c07820; }

.eslot-label                          { font-size: 8px; color: #2a4a18; white-space: nowrap; flex-shrink: 0; }
.eslot-label--weapon                  { color: #3a2808; }
.equip-slot.is-selected .eslot-label  { color: #c0ee80; }
.equip-slot--weapon.is-selected .eslot-label { color: #e0a030; }

.eslot-empty  { font-size: 9px; color: #1a2e10; margin-left: auto; }
.eslot-prompt { font-size: 9px; color: #5a9a30; margin-left: auto; }
.equip-slot--weapon .eslot-empty  { color: #2a1e08; margin-left: auto; }
.equip-slot--weapon .eslot-prompt { color: #a07020; margin-left: auto; }

/* ── Item swatches ──────────────────────────────────────────────────────── */
.item-swatch {
  width: 14px;
  height: 32px;
  flex-shrink: 0;
  border: 1px solid rgba(0, 0, 0, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.item-swatch--sm   { height: 28px; }
.item-swatch--slot { width: 36px; height: 28px; }
.item-swatch--chip { width: 12px; height: 12px; }

.item-swatch--icon {
  background-clip: padding-box;
}

/* ── Item icon images ───────────────────────────────────────────────────── */
.item-icon-img {
  display: block;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  pointer-events: none;
  user-select: none;
  flex-shrink: 0;
}

.item-swatch .item-icon-img {
  max-width: 100%;
  max-height: 100%;
}

.item-swatch-icon--weapon {
  max-width: none;
}

/* ── Item labels ────────────────────────────────────────────────────────── */
.item-name                                    { font-size: 10px; font-weight: bold; color: #90c060; }
.item-name--weapon                            { color: #e0a030; }
.equip-slot--weapon.is-selected .item-name--weapon { color: #ffe060; }

/* ── Weapon row inside equip slot ───────────────────────────────────────── */
.weapon-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
}

.weapon-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.weapon-badge {
  font-size: 7px;
  font-weight: bold;
  padding: 1px 5px;
  width: fit-content;
}
.weapon-badge--melee  { background: rgba(100, 50,  10, 0.70); color: #d08840; }
.weapon-badge--ranged { background: rgba(30,  70, 120, 0.70); color: #70b8e8; }

.weapon-stat { font-size: 8px; color: #5a6830; }

/* ── Gear row inside equip slot ─────────────────────────────────────────── */
.gear-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.stat-hint {
  font-size: 8px;
  color: rgba(100, 160, 60, 0.65);
  margin-left: auto;
  white-space: nowrap;
}

.slot-drop-hint {
  font-size: 8px;
  color: #80c050;
  margin-left: auto;
  white-space: nowrap;
}
.equip-slot--weapon .slot-drop-hint { color: #c07020; }

/* ── Storage column ─────────────────────────────────────────────────────── */
.inv-storage-col {
  flex-shrink: 0;
  width: 272px;
  display: flex;
  flex-direction: column;
  margin-right: 14px;
}

.inv-storage-grid {
  display: grid;
  grid-template-columns: repeat(5, 48px);
  gap: 6px;
}

.storage-divider {
  grid-column: 1 / -1;
  font-size: 8px;
  color: #2a4a18;
  padding: 2px 0;
}

.storage-slot {
  width: 48px;
  height: 48px;
  background: rgba(8, 16, 5, 0.75);
  border: 1px solid #182e10;
  cursor: pointer;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 4px 4px 0;
  transition: background 0.1s, border-color 0.1s;
  overflow: hidden;
}
.storage-slot:hover        { background: rgba(20, 42, 12, 0.85); border-color: #3a6a22; }
.storage-slot.is-selected  { background: rgba(60, 110, 25, 0.90); border: 1.5px solid #8fce50; }
.storage-slot.is-extended  { background: rgba(12, 22, 8, 0.65); border-color: #1a3010; }

.storage-slot .item-swatch--slot {
  width: 40px;
  height: 30px;
  border: none;
}

.item-name--slot {
  font-size: 7px;
  color: #70a840;
  width: 100%;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.2;
}
.storage-slot.is-selected .item-name--slot { color: #c0ee80; }

.item-qty {
  position: absolute;
  top: 2px;
  right: 2px;
  font-size: 8px;
  font-weight: bold;
  color: #ffcc44;
}

/* ── Nearby strip ───────────────────────────────────────────────────────── */
.inv-nearby-section {
  padding: 0 16px 12px;
}

.inv-divider {
  border-top: 1px solid #1a3412;
  margin-bottom: 8px;
}

.inv-nearby-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}

.nearby-empty {
  font-size: 9px;
  color: #1a2e10;
}

.nearby-chip {
  width: 40px;
  height: 44px;
  background: rgba(10, 20, 6, 0.75);
  border: 1px solid #1e3412;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 3px 2px 2px;
  transition: background 0.1s, border-color 0.1s;
  gap: 2px;
}
.nearby-chip:hover { background: rgba(30, 60, 15, 0.90); border-color: #5a9a30; }

.nearby-chip .item-swatch--chip {
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 2px;
}

.nearby-label {
  font-size: 7px;
  color: #6aaa38;
  text-align: center;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 1px;
}

/* ── Tooltip — fixed position, NOT inside scroll area ──────────────────── */
.inv-tooltip {
  position: fixed;
  display: none;
  flex-direction: column;
  gap: 2px;
  width: 190px;
  background: rgba(4, 12, 2, 0.92);
  border: 1px solid #3a6a22;
  padding: 8px;
  pointer-events: none;
  z-index: 1000;
}
.inv-tooltip.is-visible { display: flex; }

.tt-icon-row {
  display: flex;
  justify-content: center;
  margin-bottom: 4px;
}

.tt-icon-wrap {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(100, 160, 60, 0.30);
  border-radius: 2px;
}

.tt-icon-wrap img {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

.tt-line       { font-size: 9px; color: #4a7a28; }
.tt-line--title { font-size: 9px; font-weight: bold; color: #90cc60; }

/* ─────────────────────────────────────────────────────────────────────────────
   CRAFTING PANEL
───────────────────────────────────────────────────────────────────────────── */

.inv-craft-col {
  flex: 1;
  min-width: 180px;
  max-width: 220px;
  padding-left: 14px;
  border-left: 1px solid #1a3412;
  display: flex;
  flex-direction: column;
  gap: 0;
  overflow-y: auto;
  max-height: 400px;
}

.inv-craft-source {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 0 8px;
  margin-bottom: 6px;
  border-bottom: 1px solid #1a3412;
  font-size: 9px;
  min-height: 28px;
}

.craft-from-label { color: #2d5a1a; }
.craft-from-name  { color: #6aaa38; font-weight: bold; }

.craft-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 24px 8px;
  opacity: 0.35;
}

.craft-placeholder-icon {
  font-size: 22px;
  color: #2d5a1a;
}

.craft-placeholder-text {
  font-size: 8px;
  color: #2d5a1a;
  text-align: center;
  line-height: 1.5;
}

.craft-empty {
  font-size: 9px;
  color: #1e3010;
  padding: 12px 0;
  text-align: center;
  opacity: 0.60;
}

.craft-card {
  border: 1px solid #182e10;
  background: rgba(8, 16, 5, 0.70);
  margin-bottom: 5px;
  cursor: pointer;
  user-select: none;
  transition: background 0.1s, border-color 0.1s;
}

.craft-card:hover                { background: rgba(20, 42, 12, 0.85); border-color: #3a6a22; }
.craft-card.is-craftable         { border-color: #2a5018; }
.craft-card.is-craftable:hover   { border-color: #4a8a28; }
.craft-card.is-selected          { background: rgba(30, 60, 14, 0.92); border: 1.5px solid #5ab828; }
.craft-card.is-uncraftable       { opacity: 0.40; }
.craft-card.is-uncraftable:hover { opacity: 0.60; border-color: #2a4818; }

.craft-card-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 7px;
}

.craft-icon-wrap {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.craft-card-name {
  font-size: 9px;
  font-weight: bold;
  color: #90c060;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.craft-card.is-selected .craft-card-name    { color: #c0ee80; }
.craft-card.is-uncraftable .craft-card-name { color: #4a6a30; }

.craft-card-qty { font-size: 8px; color: #5a9030; flex-shrink: 0; }

.craft-chevron { font-size: 7px; color: #2d5a1a; flex-shrink: 0; }
.craft-card.is-selected .craft-chevron { color: #6aaa38; }

.craft-card-detail {
  border-top: 1px solid #1a3412;
  padding: 6px 8px 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.craft-desc {
  font-size: 8px;
  color: rgba(80, 130, 50, 0.60);
  line-height: 1.4;
  margin-bottom: 2px;
}

.craft-ings     { display: flex; flex-direction: column; gap: 2px; }
.craft-ing      { font-size: 8px; }
.craft-ing.has-enough { color: #6aaa38; }
.craft-ing.missing    { color: #c05030; }
.craft-have           { opacity: 0.60; }

.craft-tool-req { font-size: 8px; display: flex; align-items: center; gap: 4px; }
.craft-tool-req.tool-ok { color: #4a9a28; }
.craft-tool-req.missing { color: #c05030; }
.tool-note  { opacity: 0.55; }
.tool-check { color: #6aaa38; font-weight: bold; }
.tool-cross { color: #c04040; font-weight: bold; }

.craft-exec-btn {
  margin-top: 4px;
  font-family: 'ShareTechMono', monospace;
  font-size: 8px;
  font-weight: bold;
  padding: 4px 10px;
  cursor: pointer;
  border: 1px solid #3a6a22;
  background: rgba(20, 50, 10, 0.85);
  color: #8fce50;
  width: 100%;
  text-align: center;
  transition: background 0.12s, border-color 0.12s;
}
.craft-exec-btn:hover {
  background: rgba(50, 100, 20, 0.92);
  border-color: #5ab828;
  color: #c0ee80;
}
.craft-exec-btn--disabled {
  cursor: default;
  border-color: #2a1010;
  background: rgba(30, 8, 8, 0.70);
  color: #5a2020;
  opacity: 0.75;
}

/* ── Rarity pip ─────────────────────────────────────────────────────────── */
.item-rarity-pip {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 6px;
  height: 6px;
  border-radius: 1px;
  z-index: 3;
  pointer-events: none;
  flex-shrink: 0;
}

/* ── Pickup prompt rarity pip ───────────────────────────────────────────── */
.pp-rarity-pip {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 1px;
  flex-shrink: 0;
  vertical-align: middle;
  margin-right: 2px;
}

/* ════════════════════════════════════════════════════════════
   HANDHELD / SMALL SCREEN OPTIMIZATIONS
════════════════════════════════════════════════════════════ */

/* 1. Hide verbose descriptions and subtext */
.is-handheld .eb-empty-sub,             /* "pick up to auto-equip" */
.is-handheld .inv-hint,                 /* Inventory bottom hints */
.is-handheld .gsr-desc,                 /* Settings panel descriptions */
.is-handheld .settings-pane-desc,       /* Settings header paragraphs */
.is-handheld .db-welcome-footnote,      /* Encyclopedia footnotes */
.is-handheld .eb-inv-hint,              /* "[I] inventory" on equip bar */
.is-handheld .stat-hint,                /* "+2 slots" in equipment */
.is-handheld .card-tagline,             /* Zombie card taglines */
.is-handheld #vital-hp-value,           /* Vitals x/y numbers */
.is-handheld #vital-nut-value,
.is-handheld #vital-en-value {
  display: none !important;
}

/* 2. Tighten up the Inventory Layout so it doesn't overflow */
.is-handheld .inv-body {
  flex-wrap: nowrap;
  padding: 8px;
  gap: 8px;
}
.is-handheld .inv-equip-col {
  width: 180px;
  flex-shrink: 1;
  margin-right: 0;
}
.is-handheld .equip-slot {
  height: 40px;
  padding: 0 6px;
  margin-bottom: 4px;
  gap: 6px;
}
.is-handheld .eslot-label {
  font-size: 7px;
}
.is-handheld .item-name {
  font-size: 9px;
}
.is-handheld .weapon-stat, 
.is-handheld .slot-drop-hint {
  font-size: 7px;
}
.is-handheld .inv-storage-col {
  width: 230px;
  flex-shrink: 1;
  margin-right: 0;
}
.is-handheld .inv-storage-grid {
  grid-template-columns: repeat(5, 1fr);
  gap: 4px;
}
.is-handheld .storage-slot {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  padding: 2px;
  justify-content: center;
}
.is-handheld .storage-slot .item-swatch--slot {
  width: 100%;
  height: 22px;
}
.is-handheld .item-name--slot {
  font-size: 6.5px;
  margin-top: 2px;
}
.is-handheld .inv-craft-col {
  flex: 1;
  min-width: 160px;
  padding-left: 8px;
  border-left: 1px solid #1a3412;
  border-top: none;
  margin-top: 0;
  padding-top: 0;
}
.is-handheld .craft-card-header {
  padding: 4px;
}
.is-handheld .craft-card-name {
  font-size: 8px;
}
.is-handheld .inv-nearby-section {
  padding: 0 8px 8px;
}
.is-handheld .nearby-chip {
  width: 36px;
  height: 40px;
  padding: 2px;
}
.is-handheld .nearby-chip .item-swatch--chip {
  width: 20px;
  height: 20px;
}
.is-handheld .nearby-label {
  font-size: 6px;
}

/* If the screen is extremely narrow (portrait), allow wrapping */
@media (max-width: 600px) {
  .is-handheld .inv-body {
    flex-wrap: wrap;
  }
  .is-handheld .inv-equip-col,
  .is-handheld .inv-storage-col,
  .is-handheld .inv-craft-col {
    width: 100%;
    min-width: 100%;
    border-left: none;
    padding-left: 0;
  }
  .is-handheld .inv-craft-col {
    border-top: 1px solid #1a3412;
    padding-top: 8px;
    margin-top: 4px;
  }
}

/* 3. Tighten HUD and Vitals */
.is-handheld .hud-player-type {
  margin-left: 0 !important;   /* Unindent class name */
}
.is-handheld .vital-row {
  gap: 4px;
}

.equip-slot--ranged              { background: rgba(8, 12, 18, 0.75);   border-color: #081a2a; }
.equip-slot--ranged:hover        { background: rgba(12, 24, 40, 0.85);  border-color: #184a7a; }
.equip-slot--ranged.is-selected  { background: rgba(20, 40, 60, 0.95);  border: 1.5px solid #3088d0; }
.equip-slot--ranged.can-accept   { background: rgba(15, 30, 50, 0.70);  border: 1.5px solid #2068a0; }

.eslot-label--ranged                  { color: #183a5a; }
.equip-slot--ranged.is-selected .eslot-label--ranged { color: #50a8e8; }

.equip-slot--ranged .eslot-empty  { color: #182a3a; margin-left: auto; }
.equip-slot--ranged .eslot-prompt { color: #2068a0; margin-left: auto; }

.item-name--ranged                            { color: #70b8e8; }
.equip-slot--ranged.is-selected .item-name--ranged { color: #a0d8ff; }

/* ══════════════════════════════════════════════════════════════════════════
   INPUT GLYPHS (Keyboard & Gamepad Buttons)
══════════════════════════════════════════════════════════════════════════ */

.input-glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'ShareTechMono', monospace;
  font-weight: bold;
  font-size: 0.9em;
  line-height: 1.2;
  vertical-align: middle;
  box-sizing: border-box;
  margin: 0 4px;
  box-shadow: 0 2px 0 rgba(0,0,0,0.5);
  text-shadow: none;
}

.input-glyph-kbm {
  background: #eee;
  color: #111;
  border: 1px solid #aaa;
  border-bottom-width: 2px;
  border-radius: 4px;
  padding: 3px 6px;
  min-width: 1.6em;
  height: 1.6em;
}

.input-glyph-gp {
  background: #444;
  color: #fff;
  border: 1px solid #222;
  border-bottom-width: 2px;
}

.input-glyph-gp-round {
  border-radius: 50%;
  width: 1.6em;
  height: 1.6em;
  padding: 0;
}

.input-glyph-gp-pill {
  border-radius: 1em;
  padding: 3px 8px;
  height: 1.6em;
}

.input-glyph-gp-dpad {
  border-radius: 4px;
  padding: 3px 5px;
  height: 1.6em;
  background: #333;
}

.input-glyph-gp-stick {
  border-radius: 50%;
  width: 1.8em;
  height: 1.8em;
  padding: 0;
  background: radial-gradient(circle at 50% 30%, #666, #222);
  border: 1px solid #111;
  box-shadow: 0 2px 4px rgba(0,0,0,0.8), inset 0 1px 2px rgba(255,255,255,0.2);
  white-space: nowrap !important;
  overflow: visible !important;
}

/* ── Globally strip Input Hints when disabled in settings ───────────────── */
.hide-input-hints .input-glyph,
.hide-input-hints .input-hint-text,
.hide-input-hints .eb-inv-hint,
.hide-input-hints .inv-hint,
.hide-input-hints .inv-close-hint,
.hide-input-hints #inv-pickup-hint,
.hide-input-hints .pp-key,
.hide-input-hints .pp-hint-secondary,
.hide-input-hints .pp-cancel-hint,
.hide-input-hints .tmo-dismiss-footer,
.hide-input-hints #tmo-hint {
  display: none !important;
}