/* Galactic Web screen inside D.P.A. */
.dpa-screen-galactic-web {
  flex: 1 1 auto;
  min-height: 0; /* critical so it doesn't push into Group Chat */
}

/* Subheader: title + tiny tabs */
.gw-subheader {
  display: flex;
  flex-direction: column;   /* NEW: stack into 2 rows */
  align-items: flex-start;  /* NEW: left align */
  gap: 4px;                 /* NEW: row spacing */

  justify-content: left;
  padding-bottom: 4px;
  margin-bottom: 6px;
  border-bottom: 1px solid #333;

  color: #0ff;
  font-family: "AstroSpace", sans-serif;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.gw-subheader-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Optional but recommended so row gaps control spacing cleanly */
.gw-active-category-label {
  margin-left: 0;
  margin-right: 0;
}
.gw-main-tabs { margin-left: 0; }
.gw-sub-tabs  { margin-left: 0; }

/* Active category label (ARMOR / later BELTS / etc.) */
.gw-active-category-label {
  margin-left: 8px;
  margin-right: 8px;
  color: #0ff;
  opacity: 0.9;
}

/* Two tab rows */
.gw-main-tabs {
  margin-left: 8px;
}

.gw-sub-tabs {
  margin-left: 6px;
}

/* Split view container (A|M) */
.gw-split-lists {
  display: flex;
  gap: 6px;
  min-height: 0;
  flex: 1 1 auto;
}

/* Each column in split view */
.gw-split-col {
  flex: 1 1 0;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* Small header above each list column */
.gw-split-col-title {
  font-size: 11px;
  font-style: italic;
  color: #aaa;
  margin-bottom: 4px;
  padding-left: 2px;
}

/* Ensure both lists scroll nicely */
.gw-split-col .gw-list {
  flex: 1 1 auto;
  min-height: 0;
}

/* Outer list shell (always the same area) */
.gw-list-host {
  flex: 1 1 auto;
  min-height: 0;

  border: 1px solid #333;
  background: rgba(255, 255, 255, 0.02);
  padding: 4px;
  box-sizing: border-box;

  overflow: hidden; /* important: prevent nested scroll conflicts */
}

/* Inner scroll list (single view + split columns use this) */
.gw-list-host .gw-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  border: none;      /* border handled by host */
  background: transparent;
  padding: 0;
}

.gw-title {
  flex: 0 0 auto;
}

.gw-tabs {
  display: flex;
  gap: 4px;
}

.gw-tab {
  width: 22px;
  height: 22px;
  border-radius: 4px;
  border: 1px solid #333;
  background: rgba(0, 0, 0, 0.8);
  color: #0ff;
  font-size: 12px;
  cursor: pointer;

  display: flex;
  align-items: center;
  justify-content: center;
}

.gw-tab:hover,
.gw-tab.active {
  border-color: #0ff;
  box-shadow: 0 0 8px rgba(0, 255, 255, 0.8);
  background: rgba(0, 255, 255, 0.1);
}

/* Layout: list on the left, details on the right */
.gw-layout {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;  /* ⬅ stack list over detail */
  gap: 6px;
  min-height: 0;           /* allow children to scroll */
}

.gw-list-panel {
  /* Take the top portion; tweak % if you want more/less height */
  flex: 0 0 45%;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}

.gw-detail-panel {
  /* Lives below the list, fills remaining height */
  flex: 1 1 0;
  border: 1px solid #333;
  background: rgba(0, 0, 0, 0.9);
  padding: 6px;
  font-size: 12px;
  color: #0ff;
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
}

/* Search box */
.gw-search-input {
  margin-bottom: 4px;
  padding: 2px 4px;
  font-size: 12px;
  background: rgba(0, 0, 0, 0.8);
  color: #0ff;
  border: 1px solid #333;
  outline: none;
}

.gw-search-input:focus {
  border-color: #0ff;
  box-shadow: 0 0 6px rgba(0, 255, 255, 0.6);
}

/* List container */
.gw-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  border: none;
  background: transparent;
  padding: 0;
  box-sizing: border-box;
}

/* Category headers (Light / Medium / Heavy / Helmet) */
.gw-list-category {
  margin-top: 4px;
  margin-bottom: 2px;
  font-size: 11px;
  font-style: italic;
  color: #0ff;
  border-bottom: 1px solid #333;
  padding-bottom: 1px;
}

/* Single armor row */
.gw-list-item {
  padding: 3px 4px;
  border-radius: 3px;
  cursor: pointer;
  font-size: 12px;
  color: #0ff;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.gw-list-item:hover {
  background: rgba(0, 255, 255, 0.08);
  box-shadow: 0 0 6px rgba(0, 255, 255, 0.4);
}

.gw-list-item.selected {
  background: rgba(0, 255, 255, 0.2);
}

/* Small subtext under the name */
.gw-list-item-sub {
  font-size: 11px;
  color: #aaa;
}

/* Detail panel empty state */
.gw-detail-empty {
  font-size: 12px;
  color: #888;
  text-align: center;
  margin-top: 20px;
}

/* Detail panel content */
.gw-detail-name,
.gw-detail-row,
.gw-armor-detail-name,
.gw-armor-detail-line {
  font-size: 12px;
}

.gw-detail-name {
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 4px;
}

/* Long explanation text for mods */
.gw-detail-explanation {
  margin-top: 6px;
  font-size: 11px;
  line-height: 1.3;
  white-space: pre-wrap; /* keep line breaks from the JSON */
}

/* Apply button area */
.gw-armor-detail-actions {
  margin-top: 8px;
}

.gw-armor-apply-btn {
  padding: 2px 6px;
  font-size: 11px;
  border-radius: 3px;
  border: 1px solid #0ff;
  background: rgba(0, 0, 0, 0.8);
  color: #0ff;
  cursor: pointer;
}

.gw-armor-apply-btn:hover {
  background: rgba(0, 255, 255, 0.2);
  box-shadow: 0 0 6px #0ff;
}

/* Glow for install/placement target areas (Held + General Inventory) */
.gw-install-target-glow {
  /* big obvious glow, same vibe as your other glowing controls */
  box-shadow: 0 0 15px rgba(0, 255, 255, 1);
  filter: drop-shadow(0 0 5px #0ff);
  animation: pulse 100s infinite;
}

@keyframes pulse {
  0%   { filter: drop-shadow(0 0 5px #0ff); }
  50%  { filter: drop-shadow(0 0 10px #0ff); }
  100% { filter: drop-shadow(0 0 5px #0ff); }
}

/* Toned-down glow for individual rows (less intense than area glow) */
.worn-row.gw-install-target-glow,
.held-row.gw-install-target-glow,
.general-inventory-row.gw-install-target-glow,
.cyber-row.gw-install-target-glow {
  /* Remove filter to prevent stacking context issues with tooltips */
  filter: none;
  animation: none;
  
  /* Subtle glow - adjust these values to taste */
  box-shadow: 0 0 10px rgba(177, 234, 8, .1);
  
  /* Optional: slight background tint instead of pure glow */
  background: rgba(177, 234, 11, 0.4);
}

/* Subcategory headers inside the mods list (e.g., Back, Shoulder) */
.gw-list-subcategory {
  margin-top: 2px;
  margin-bottom: 2px;
  font-size: 11px;
  font-style: italic;
  color: #aaa;
  padding-left: 6px;
}

/* Mod detail layout & type-based colors */
.gw-mod-detail {
  font-size: 12px;
}

.gw-mod-category,
.gw-mod-subcategory,
.gw-mod-line {
  font-size: 12px;
  margin-bottom: 2px;
}

/* Passive mods = pink */
.gw-mod-type-passive .gw-detail-name,
.gw-mod-type-passive .gw-mod-category,
.gw-mod-type-passive .gw-mod-subcategory,
.gw-mod-type-passive .gw-mod-line {
  color: #ff4fbf;
}

/* Action mods = orange */
.gw-mod-type-action .gw-detail-name,
.gw-mod-type-action .gw-mod-category,
.gw-mod-type-action .gw-mod-subcategory,
.gw-mod-type-action .gw-mod-line {
  color: #ffa64d;
}

/* Reaction mods = blue */
.gw-mod-type-reaction .gw-detail-name,
.gw-mod-type-reaction .gw-mod-category,
.gw-mod-type-reaction .gw-mod-subcategory,
.gw-mod-type-reaction .gw-mod-line {
  color: #4fc3ff;
}

/* Explanation text below the pink/orange/blue labels */
.gw-mod-explanation {
  margin-top: 6px;
  font-size: 11px;
  line-height: 1.35;
  color: #ffffff;

  /* IMPORTANT: preserve paragraph structure */
  white-space: pre-wrap;     /* preserves newlines and wrapping */
}

/* Make the list host a real flex column so the inner list can size+overflow */
.gw-list-host {
  display: flex;
  flex-direction: column;
}

/* SINGLE LIST MODE (A or M): this is the scroll container */
#gw-worn-list-single {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

/* SPLIT MODE (A|M): allow split container to take the host's height */
.gw-split-lists {
  flex: 1 1 auto;
  min-height: 0;
}

/* SPLIT MODE: each column list scrolls independently */
.gw-split-col .gw-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

/* Weapon Detail Color Styling */

/* Cost Color */
.gw-detail-cost {
  color: silver
}

/* Damage Color */
.gw-detail-damage {
  color: #f1a523; 
}