/* ═══════════════════════════════════════════════
   css/sidebar.css
═══════════════════════════════════════════════ */
.sidebar {
  border-left: 1px solid var(--border);
  background: rgba(13,10,5,.85);
  display: flex; flex-direction: column;
  min-height: 0;
}
.sidebar-tabs {
  display: flex; flex-shrink: 0;
  border-bottom: 1px solid var(--border);
}
.stab {
  flex: 1; padding: 8px 4px;
  font-family: var(--font-display); font-size: 9px;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--ash); background: none; border: none;
  cursor: pointer; transition: all .15s;
  border-bottom: 2px solid transparent;
}
.stab:hover { color: var(--parch-dim); }
.stab.active { color: var(--gold); border-bottom-color: var(--gold); background: rgba(42,26,16,.3); }
.sidebar-pane { flex: 1; overflow-y: auto; padding: 12px; display: none; }
.sidebar-pane.active { display: block; }

/* ── DHARMA WHEEL ── */
.wheel-container { display: flex; flex-direction: column; align-items: center; margin-bottom: 14px; }
.wheel-container svg { width: 120px; height: 120px; }
.wheel-score { font-family: var(--font-display); font-size: 18px; color: var(--dharma-light); margin-top: 6px; }
.wheel-label { font-size: 10px; color: var(--ash); }
.spoke-row   { margin-bottom: 7px; }
.spoke-name  { font-size: 10px; color: var(--ash); margin-bottom: 2px; display: flex; justify-content: space-between; }
.spoke-track { height: 3px; background: rgba(42,26,16,.6); border-radius: 2px; overflow: hidden; }
.spoke-fill  { height: 100%; background: linear-gradient(90deg, var(--dharma), var(--dharma-light)); border-radius: 2px; transition: width .5s; }

/* ── STATS ── */
.stat-row     { display: flex; justify-content: space-between; padding: 5px 0; border-bottom: 1px solid rgba(74,55,40,.2); }
.stat-key     { font-size: 11px; color: var(--ash); }
.stat-val     { font-size: 11px; color: var(--parch-dim); font-family: var(--font-display); letter-spacing: .04em; }
.intel-item   { background: rgba(26,18,8,.6); border: 1px solid var(--border); padding: 7px; margin-bottom: 5px; font-size: 11px; line-height: 1.4; }
.intel-body   { color: var(--ash-light); }
.rel-section  { margin-top: 12px; }

/* ── INVENTORY ── */
.inv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.inv-item {
  background: rgba(26,18,8,.6); border: 1px solid var(--border);
  padding: 8px 6px; cursor: pointer; transition: all .15s;
  position: relative;
}
.inv-item:hover    { border-color: var(--gold-dim); }
.inv-icon          { font-size: 22px; margin-bottom: 3px; }
.inv-name          { font-size: 10px; color: var(--parch-dim); line-height: 1.3; }
.inv-type          { font-size: 9px; color: var(--ash); }
.item-tooltip {
  position: absolute; bottom: calc(100% + 4px); left: 0; right: 0;
  background: rgba(13,10,5,.98); border: 1px solid var(--gold-dark);
  padding: 8px; font-size: 11px; color: var(--parch-dim);
  z-index: 100; display: none; line-height: 1.4; pointer-events: none;
}
.inv-item:hover .item-tooltip { display: block; }

/* ── LORE ── */
.lore-entry        { margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid rgba(74,55,40,.25); }
.lore-title        { font-family: var(--font-display); font-size: 11px; color: var(--gold); letter-spacing: .05em; margin-bottom: 4px; }
.lore-body         { font-size: 12px; color: var(--ash-light); line-height: 1.5; }
.lore-empty        { font-size: 12px; color: var(--stone); font-style: italic; }

/* ── Character Portrait (in wheel tab) ── */
.char-portrait-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 0; margin-bottom: 10px;
  border-bottom: 1px solid var(--border);
}
.char-portrait-icon {
  font-size: 32px; line-height: 1;
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(26,18,8,.6); border: 1px solid var(--border);
  border-radius: 50%;
}
.char-portrait-info {
  flex: 1; min-width: 0;
}
.char-portrait-name {
  font-family: var(--font-display); font-size: 13px;
  color: var(--gold); letter-spacing: .06em;
}
.char-portrait-role {
  font-size: 10px; color: var(--ash);
  margin-top: 1px;
}

/* ── Auto-save slot styling ── */
.save-slot-auto {
  border-color: var(--dharma-pale) !important;
  background: rgba(46,125,110,.06) !important;
}
.save-slot-auto .save-slot-num {
  color: var(--dharma-light) !important;
}