/*
 * sidebar.css — RattyData unified filter sidebar system
 */
:root {
  --sb-surface:    #0d0906;
  --sb-surface2:   #130d09;
  --sb-border:     rgba(80, 60, 35, 0.7);
  --sb-border-h:   rgba(80, 60, 35, 1);
  --sb-orange:     #FFA040;
  --sb-orange-dim: rgba(255, 140, 0, 0.12);
  --sb-orange-bd:  rgba(255, 140, 0, 0.4);
  --sb-text:       rgba(255, 255, 255, 0.88);
  --sb-text-dim:   rgba(255, 255, 255, 0.5);
  --sb-text-muted: rgba(255, 255, 255, 0.35);
  --sb-din:        'DIN Alternate', 'Arial Narrow', sans-serif;
  --sb-caret:      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%238b7355'/%3E%3C/svg%3E");
}
.bond-sidebar,
.burn-sidebar,
.mp-controls {
  background: var(--sb-surface);
  border-right: 1px solid var(--sb-border);
  padding: 16px;
  overflow-y: auto;
}
.bond-sidebar,
.burn-sidebar {
  width: 280px;
  min-width: 280px;
  position: sticky;
  top: 36px;
  align-self: flex-start;
  max-height: calc(100vh - 36px);
  overflow-y: auto;
}
@media (max-width: 900px) {
  .bond-sidebar,
  .burn-sidebar {
    width: 100%;
    min-width: 0;
    position: static;
    height: auto;
    border-right: none;
    border-bottom: 1px solid var(--sb-border);
  }
  .sb-filter-grid,
  .sb-row { flex-direction: column; gap: 6px; }
}
.sb-title,
.mp-controls-title {
  font-family: var(--sb-din);
  font-size: 18px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.75);
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 12px;
  line-height: 1.2;
}
.sb-title .sb-accent,
.mp-controls-title .sb-accent { color: var(--sb-orange); }
.wallet-select-wrap { margin-bottom: 12px; }
.wallet-select {
  width: 100%;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid var(--sb-border);
  color: var(--sb-text);
  font-family: var(--sb-din);
  font-size: 12px;
  font-weight: 700;
  padding: 9px 28px 9px 12px;
  border-radius: 4px;
  outline: none;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: var(--sb-caret);
  background-repeat: no-repeat;
  background-position: right 10px center;
  margin-bottom: 12px;
  transition: border-color 0.15s;
}
.wallet-select:hover { border-color: var(--sb-border-h); }
.wallet-select option { background: var(--sb-surface); color: var(--sb-text); }
.wallet-select.primary-active   { border-color: var(--sb-orange-bd); color: var(--sb-orange); }
.wallet-select.secondary-active { border-color: rgba(88,166,255,0.4); color: #58a6ff; }
.wallet-select:disabled { opacity: 0.4; cursor: not-allowed; }
.sb-counts { display: flex; gap: 6px; margin-bottom: 12px; }
.sb-count {
  flex: 1;
  background: var(--sb-orange-dim);
  border: 1px solid var(--sb-orange-bd);
  border-radius: 4px;
  padding: 8px;
  text-align: center;
}
.sb-count-val {
  font-family: var(--sb-din);
  font-size: 24px;
  font-weight: 700;
  color: var(--sb-text);
  line-height: 1;
}
.sb-count-label {
  font-family: var(--sb-din);
  font-size: 9px;
  font-weight: 700;
  color: var(--sb-orange);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-top: 2px;
  display: block;
}
.sb-input,
.mp-input {
  width: 100%;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid var(--sb-border);
  color: var(--sb-text);
  font-family: var(--sb-din);
  font-size: 13px;
  font-weight: 700;
  padding: 9px 12px;
  border-radius: 4px;
  outline: none;
  box-sizing: border-box;
  margin-bottom: 12px;
  transition: border-color 0.15s;
}
.sb-input:focus,
.mp-input:focus { border-color: var(--sb-orange-bd); }
.sb-input::placeholder,
.mp-input::placeholder { color: var(--sb-text-muted); font-weight: 700; }
.search-input {
  background: rgba(0, 0, 0, 0.5);
  border: 2px solid var(--sb-border);
  color: var(--sb-text);
  font-family: var(--sb-din);
  font-size: 14px;
  font-weight: 700;
  padding: 9px 12px;
  border-radius: 4px;
  outline: none;
  transition: border-color 0.15s;
}
.search-input:focus { border-color: var(--sb-orange-bd); }
.search-input::placeholder { color: var(--sb-text-muted); }
.sb-divider,
.mp-divider {
  height: 1px;
  background: var(--sb-border);
  border: none;
  margin: 10px 0;
  opacity: 0.6;
}
.sb-section,
.mp-group { margin-bottom: 10px; }
.sb-label,
.mp-label,
.mp-sub-label,
.filter-label {
  font-family: var(--sb-din);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  margin-bottom: 5px;
  display: block;
}
.sb-row,
.mp-row,
.mp-price-row {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
}
.sb-row .sb-col,
.mp-row > * { flex: 1; min-width: 0; }
.sb-filter-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 14px;
  margin-bottom: 4px;
}
.sb-filter-grid .full { grid-column: 1 / -1; }
.sb-pills,
.mp-tier-pills,
.filter-pills { display: flex; flex-wrap: wrap; gap: 3px; }
.sb-pill,
.mp-pill,
.filter-pill,
.ctrl-pill {
  font-family: var(--sb-din);
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 3px;
  border: 1px solid var(--sb-border);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.6);
  cursor: pointer;
  transition: border-color 0.12s;
  user-select: none;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.sb-pill:hover,
.mp-pill:hover,
.filter-pill:hover,
.ctrl-pill:hover { border-color: var(--sb-border-h); }
.sb-pill.active,
.mp-pill.active,
.filter-pill.active,
.ctrl-pill.active {
  background: var(--sb-orange-dim);
  border-color: var(--sb-orange-bd);
  color: var(--sb-orange);
}
.sb-select,
.mp-select,
.filter-select {
  width: 100%;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid var(--sb-border);
  color: var(--sb-text);
  font-family: var(--sb-din);
  font-size: 12px;
  font-weight: 700;
  padding: 7px 28px 7px 10px;
  border-radius: 4px;
  outline: none;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: var(--sb-caret);
  background-repeat: no-repeat;
  background-position: right 10px center;
  transition: border-color 0.15s;
}
.sb-select:hover,
.mp-select:hover,
.filter-select:hover { border-color: var(--sb-border-h); }
.sb-select:focus,
.mp-select:focus,
.filter-select:focus { border-color: var(--sb-orange-bd); outline: none; }
.sb-select option,
.mp-select option,
.filter-select option { background: var(--sb-surface); color: var(--sb-text); }
.sb-accordion,
.mp-filter {
  margin-bottom: 5px;
  border: 1px solid var(--sb-border);
  border-radius: 4px;
  overflow: hidden;
  transition: border-color 0.15s;
}
.sb-accordion:hover,
.mp-filter:hover { border-color: var(--sb-border-h); }
.sb-accordion-head,
.mp-filter-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  cursor: pointer;
  user-select: none;
  transition: background 0.15s;
}
.sb-accordion-head:hover,
.mp-filter-head:hover { background: rgba(255, 255, 255, 0.025); }
.sb-accordion-title,
.mp-filter-title {
  font-family: var(--sb-din);
  font-size: 10px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  letter-spacing: 1.5px;
}
.sb-accordion-icon,
.mp-filter-icon {
  color: var(--sb-orange);
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
}
.sb-accordion-body,
.mp-filter-body {
  overflow: hidden;
  transition: max-height 0.25s ease, padding 0.2s;
}
.sb-accordion-body.open,
.mp-filter-body.open   { max-height: 800px; padding: 8px 12px; }
.sb-accordion-body.closed,
.mp-filter-body.closed { max-height: 0; padding: 0 12px; }
.sb-btn,
.mp-btn-clear {
  width: 100%;
  font-family: var(--sb-din);
  font-size: 13px;
  font-weight: 700;
  padding: 11px;
  border-radius: 4px;
  border: 1px solid var(--sb-border);
  cursor: pointer;
  letter-spacing: 1px;
  text-transform: uppercase;
  transition: all 0.12s;
  margin-bottom: 6px;
  background: rgba(0, 0, 0, 0.35);
  color: rgba(255, 255, 255, 0.5);
}
.sb-btn:hover,
.mp-btn-clear:hover {
  border-color: var(--sb-border-h);
  color: rgba(255, 255, 255, 0.75);
}
.sb-btn.orange,
.sb-btn.green { border: none; color: #000; }
.sb-btn.orange { background: var(--sb-orange); }
.sb-btn.orange:hover { background: #ffb050; }
.sb-btn.green  { background: #3fb950; }
.sb-btn.green:hover  { background: #4fca60; }
.sb-btn.outline {
  background: transparent;
  border-color: var(--sb-border);
  color: rgba(255, 255, 255, 0.4);
}
.sb-btn.outline:hover {
  border-color: var(--sb-border-h);
  color: rgba(255, 255, 255, 0.7);
}
.sb-btn:disabled,
.mp-btn-clear:disabled { opacity: 0.35; cursor: not-allowed; }

/* ── SHELL OVERRIDES ─────────────────────────────── */
.mp-controls,
.batch-controls {
  width: 280px;
  min-width: 280px;
  max-width: 280px;
  box-sizing: border-box;
  overflow: hidden;
  position: sticky;
  top: 76px;
  height: calc(100vh - 76px);
  border-radius: 0;
  max-height: none;
}

@media (max-width: 900px) {
  .mp-controls,
  .batch-controls {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    position: static;
    height: auto;
    border-right: none;
    border-bottom: 1px solid var(--sb-border);
  }
}


.wrap .mp-controls {
  margin-left: -28px;
}

/* ── Status / loading messages ── */
.bond-status-msg {
  text-align: center;
  padding: 60px 20px;
  color: var(--sb-text-muted);
  font-family: var(--sb-din);
  font-size: 14px;
}
.bond-status-msg h3 {
  color: rgba(255,255,255,0.6);
  font-size: 18px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 8px;
}
.bond-status-msg p {
  color: rgba(255,255,255,0.35);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin: 0;
}

/* Override aff/cls color classes inside filter sidebar */
.mp-controls .sb-pill[class*="aff-c-"],
.mp-controls .sb-pill[class*="cls-c-"] {
  color: rgba(255,255,255,0.6);
}
.mp-controls .sb-pill.active[class*="aff-c-"],
.mp-controls .sb-pill.active[class*="cls-c-"] {
  color: var(--sb-orange);
}

/* Expandable pill groups */
.sb-expand-body {
  display: none;
  flex-wrap: wrap;
  gap: 3px;
  margin-top: 4px;
}
.sb-expand-body.open { display: flex; }
.sb-expand-toggle { cursor: pointer; }
.sb-expand-toggle.has-active {
  background: var(--sb-orange-dim);
  border-color: var(--sb-orange-bd);
  color: var(--sb-orange);
}