/* ============================================
   Gathering Popup UI Styles for OpenMUD
   Icon bar + dropdown popup for room resources
   Uses theme variables from theme.css
   ============================================ */

/* Gathering Bar - Inline in room header */
#gathering-bar {
  display: none;
  align-items: center;
  gap: 6px;
  position: relative;
}

/* When visible, use flex */
#gathering-bar[style*="display: flex"],
#gathering-bar:not([style*="display: none"]):not([style*="display"]) {
  display: flex;
}

/* Icons Container */
#gathering-icons {
  display: flex;
  gap: 4px;
}

/* Individual Node Type Icon */
.gathering-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 32px;
  height: 32px;
  padding: 4px;
  background: var(--theme-bg-primary);
  border: 1px solid var(--theme-border-secondary);
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s;
}

.gathering-icon:hover {
  background: rgba(76, 175, 80, 0.1);
  border-color: var(--theme-accent-green);
  transform: translateY(-1px);
}

.gathering-icon.depleted {
  opacity: 0.5;
}

.gathering-icon.depleted:hover {
  transform: none;
  border-color: var(--theme-border-secondary);
}

/* Con-color borders on icons in the bar */
.gathering-icon.con-grey {
  border-color: #808080;
}

.gathering-icon.con-grey:hover {
  background: rgba(128, 128, 128, 0.1);
  border-color: #909090;
}

.gathering-icon.con-green {
  border-color: #4CAF50;
}

.gathering-icon.con-green:hover {
  background: rgba(76, 175, 80, 0.1);
  border-color: #66BB6A;
}

.gathering-icon.con-blue {
  border-color: #2196F3;
}

.gathering-icon.con-blue:hover {
  background: rgba(33, 150, 243, 0.1);
  border-color: #42A5F5;
}

.gathering-icon.con-yellow {
  border-color: #FFEB3B;
}

.gathering-icon.con-yellow:hover {
  background: rgba(255, 235, 59, 0.1);
  border-color: #FFF176;
}

.gathering-icon.con-orange {
  border-color: #FF9800;
}

.gathering-icon.con-orange:hover {
  background: rgba(255, 152, 0, 0.1);
  border-color: #FFB74D;
}

.gathering-icon.con-red {
  border-color: #f44336;
}

.gathering-icon.con-red:hover {
  background: rgba(244, 67, 54, 0.1);
  border-color: #EF5350;
}

.gathering-icon.con-purple {
  border-color: #9C27B0;
}

.gathering-icon.con-purple:hover {
  background: rgba(156, 39, 176, 0.1);
  border-color: #AB47BC;
}

.gathering-icon-img {
  width: 20px;
  height: 20px;
  /* Removed filter to preserve SVG colors */
}

.gathering-icon-count {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  font-size: 10px;
  font-weight: bold;
  color: #000;
  background: var(--theme-accent-green, #4CAF50);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Con-colored count badges */
.gathering-icon.con-grey .gathering-icon-count {
  background: #808080;
  color: #fff;
}

.gathering-icon.con-green .gathering-icon-count {
  background: #4CAF50;
  color: #000;
}

.gathering-icon.con-blue .gathering-icon-count {
  background: #64B5F6;
  color: #000;
}

.gathering-icon.con-yellow .gathering-icon-count {
  background: #FFEB3B;
  color: #000;
}

.gathering-icon.con-orange .gathering-icon-count {
  background: #FF9800;
  color: #000;
}

.gathering-icon.con-red .gathering-icon-count {
  background: #f44336;
  color: #fff;
}

.gathering-icon.con-purple .gathering-icon-count {
  background: #BA68C8;
  color: #fff;
}

.gathering-icon.depleted .gathering-icon-count {
  background: var(--theme-text-muted, #666);
  color: #ccc;
}

/* ============================================
   Gathering Popup
   ============================================ */

#gathering-popup {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  width: 280px;
  max-height: 300px;
  background: var(--theme-bg-secondary);
  border: 1px solid var(--theme-border-primary);
  border-radius: 4px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6);
  z-index: 1000;
  margin-top: 4px;
}

.gathering-popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  background: var(--theme-bg-tertiary);
  border-bottom: 1px solid var(--theme-border-secondary);
  font-size: 12px;
  color: var(--theme-text-primary);
  font-weight: bold;
}

.gathering-popup-close {
  background: none;
  border: none;
  color: var(--theme-text-muted);
  font-size: 16px;
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
}

.gathering-popup-close:hover {
  color: var(--theme-text-primary);
}

#gathering-popup-list {
  max-height: 250px;
  overflow-y: auto;
  padding: 8px;
}

#gathering-popup-list::-webkit-scrollbar {
  width: 6px;
}

#gathering-popup-list::-webkit-scrollbar-track {
  background: var(--theme-bg-primary);
}

#gathering-popup-list::-webkit-scrollbar-thumb {
  background: var(--theme-border-primary);
  border-radius: 3px;
}

/* ============================================
   Node Item in Popup
   ============================================ */

.gathering-node-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  background: var(--theme-bg-tertiary);
  border: 1px solid var(--theme-border-secondary);
  border-radius: 3px;
  margin-bottom: 6px;
  transition: all 0.2s;
}

.gathering-node-item:last-child {
  margin-bottom: 0;
}

.gathering-node-item:hover:not(.depleted) {
  background: #333333;
  border-color: var(--theme-border-primary);
}

.gathering-node-item.depleted {
  opacity: 0.5;
}

.gathering-node-icon {
  width: 28px;
  height: 28px;
  /* Removed filter to preserve SVG colors */
}

.gathering-node-info {
  flex: 1;
}

.gathering-node-name {
  font-size: 12px;
  color: var(--theme-text-primary);
  font-weight: bold;
  margin-bottom: 2px;
}

.gathering-node-type {
  font-size: 10px;
  color: var(--theme-text-muted);
  text-transform: capitalize;
}

/* Gather Button */
.gather-btn {
  padding: 6px 12px;
  background: var(--theme-accent-green);
  border: none;
  border-radius: 3px;
  color: #fff;
  font-size: 11px;
  font-weight: bold;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.2s;
}

.gather-btn:hover:not([disabled]) {
  background: #66BB6A;
  transform: translateY(-1px);
}

.gather-btn[disabled] {
  background: #555;
  color: var(--theme-text-muted);
  cursor: not-allowed;
}

.gather-btn.clicked {
  transform: scale(0.95);
}

/* Empty State */
.gathering-empty {
  text-align: center;
  padding: 16px;
  color: var(--theme-text-muted);
  font-size: 12px;
}

/* ============================================
   Con-Color System for Difficulty
   ============================================ */

/* Con-color borders on node items */
.gathering-node-item.con-grey {
  border-left: 3px solid #808080;
}

.gathering-node-item.con-green {
  border-left: 3px solid #4CAF50;
}

.gathering-node-item.con-blue {
  border-left: 3px solid #2196F3;
}

.gathering-node-item.con-yellow {
  border-left: 3px solid #FFEB3B;
}

.gathering-node-item.con-orange {
  border-left: 3px solid #FF9800;
}

.gathering-node-item.con-red {
  border-left: 3px solid #f44336;
}

.gathering-node-item.con-purple {
  border-left: 3px solid #9C27B0;
}

/* Con-color text for node names */
.gathering-node-name.con-grey {
  color: #808080;
}

.gathering-node-name.con-green {
  color: #4CAF50;
}

.gathering-node-name.con-blue {
  color: #64B5F6;
}

.gathering-node-name.con-yellow {
  color: #FFEB3B;
}

.gathering-node-name.con-orange {
  color: #FF9800;
}

.gathering-node-name.con-red {
  color: #f44336;
}

.gathering-node-name.con-purple {
  color: #BA68C8;
}

/* Node skill requirement display */
.gathering-node-skill {
  font-size: 10px;
  margin-top: 2px;
}

.gathering-node-skill.con-grey {
  color: #808080;
}

.gathering-node-skill.con-green {
  color: #81C784;
}

.gathering-node-skill.con-blue {
  color: #90CAF9;
}

.gathering-node-skill.con-yellow {
  color: #FFF176;
}

.gathering-node-skill.con-orange {
  color: #FFB74D;
}

.gathering-node-skill.con-red {
  color: #EF9A9A;
}

.gathering-node-skill.con-purple {
  color: #CE93D8;
}

/* Node details row */
.gathering-node-details {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Tier/quality badges */
.node-tier-badge {
  font-size: 9px;
  padding: 1px 4px;
  border-radius: 2px;
  text-transform: uppercase;
  font-weight: bold;
}

.node-tier-badge.tier-common {
  background: rgba(128, 128, 128, 0.2);
  color: #808080;
}

.node-tier-badge.tier-uncommon {
  background: rgba(76, 175, 80, 0.2);
  color: #4CAF50;
}

.node-tier-badge.tier-rare {
  background: rgba(33, 150, 243, 0.2);
  color: #2196F3;
}

.node-tier-badge.tier-legendary {
  background: rgba(255, 215, 0, 0.2);
  color: #FFD700;
}

/* Con-colored gather buttons */
.gather-btn.con-grey {
  background: #606060;
}

.gather-btn.con-grey:hover:not([disabled]) {
  background: #707070;
}

.gather-btn.con-green {
  background: #4CAF50;
}

.gather-btn.con-green:hover:not([disabled]) {
  background: #66BB6A;
}

.gather-btn.con-blue {
  background: #2196F3;
}

.gather-btn.con-blue:hover:not([disabled]) {
  background: #42A5F5;
}

.gather-btn.con-yellow {
  background: #FBC02D;
  color: #000;
}

.gather-btn.con-yellow:hover:not([disabled]) {
  background: #FDD835;
}

.gather-btn.con-orange {
  background: #FF9800;
}

.gather-btn.con-orange:hover:not([disabled]) {
  background: #FFB74D;
}

.gather-btn.con-red {
  background: #f44336;
}

.gather-btn.con-red:hover:not([disabled]) {
  background: #EF5350;
}

.gather-btn.con-purple {
  background: #9C27B0;
}

.gather-btn.con-purple:hover:not([disabled]) {
  background: #AB47BC;
}

/* ============================================
   Message Area Gathering Icons
   (Inline with room title in description)
   ============================================ */

.msg-gathering-icons {
  display: inline-flex;
  gap: 4px;
  margin-left: 8px;
  vertical-align: middle;
}

.msg-gathering-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 2px;
  background: var(--theme-bg-primary);
  border: 1px solid var(--theme-border-secondary);
  border-radius: 3px;
  transition: all 0.2s;
}

.msg-gathering-icon:hover:not(.depleted) {
  background: rgba(76, 175, 80, 0.2);
  border-color: var(--theme-accent-green);
  transform: translateY(-1px);
}

.msg-gathering-icon.depleted {
  opacity: 0.4;
  cursor: not-allowed;
}

.msg-gathering-icon .resource-icon {
  width: 14px;
  height: 14px;
  opacity: 0.85;
}

.msg-gathering-icon:hover:not(.depleted) .resource-icon {
  opacity: 1;
}

/* Count badge for message area gathering icons */
.msg-gathering-count {
  position: absolute;
  bottom: -2px;
  right: -2px;
  min-width: 12px;
  height: 12px;
  padding: 0 3px;
  font-size: 9px;
  font-weight: bold;
  line-height: 12px;
  text-align: center;
  color: #fff;
  background: var(--theme-bg-tertiary);
  border-radius: 6px;
  border: 1px solid var(--theme-border-secondary);
}

/* Con-color count badge backgrounds */
.msg-gathering-icon.con-grey .msg-gathering-count {
  background: #666;
}
.msg-gathering-icon.con-green .msg-gathering-count {
  background: #4CAF50;
  color: #000;
}
.msg-gathering-icon.con-blue .msg-gathering-count {
  background: #2196F3;
}
.msg-gathering-icon.con-yellow .msg-gathering-count {
  background: #FFEB3B;
  color: #000;
}
.msg-gathering-icon.con-orange .msg-gathering-count {
  background: #FF9800;
  color: #000;
}
.msg-gathering-icon.con-red .msg-gathering-count {
  background: #F44336;
}
.msg-gathering-icon.con-purple .msg-gathering-count {
  background: #9C27B0;
}

/* Con-color borders for message area gathering icons
   Matches backend colors: grey, green, blue, yellow, orange, red, purple */
.msg-gathering-icon.con-grey {
  border-color: rgba(128, 128, 128, 0.6);
}
.msg-gathering-icon.con-grey:hover:not(.depleted) {
  background: rgba(128, 128, 128, 0.2);
  border-color: #888;
}

.msg-gathering-icon.con-green {
  border-color: rgba(76, 175, 80, 0.6);
}
.msg-gathering-icon.con-green:hover:not(.depleted) {
  background: rgba(76, 175, 80, 0.2);
  border-color: #4CAF50;
}

.msg-gathering-icon.con-blue {
  border-color: rgba(33, 150, 243, 0.6);
}
.msg-gathering-icon.con-blue:hover:not(.depleted) {
  background: rgba(33, 150, 243, 0.2);
  border-color: #2196F3;
}

.msg-gathering-icon.con-yellow {
  border-color: rgba(255, 235, 59, 0.6);
}
.msg-gathering-icon.con-yellow:hover:not(.depleted) {
  background: rgba(255, 235, 59, 0.2);
  border-color: #FFEB3B;
}

.msg-gathering-icon.con-orange {
  border-color: rgba(255, 152, 0, 0.6);
}
.msg-gathering-icon.con-orange:hover:not(.depleted) {
  background: rgba(255, 152, 0, 0.2);
  border-color: #FF9800;
}

.msg-gathering-icon.con-red {
  border-color: rgba(244, 67, 54, 0.6);
}
.msg-gathering-icon.con-red:hover:not(.depleted) {
  background: rgba(244, 67, 54, 0.2);
  border-color: #F44336;
}

.msg-gathering-icon.con-purple {
  border-color: rgba(156, 39, 176, 0.6);
}
.msg-gathering-icon.con-purple:hover:not(.depleted) {
  background: rgba(156, 39, 176, 0.2);
  border-color: #9C27B0;
}

/* ============================================
   Message Area Harvest Buttons
   (Inline with corpse items in room description)
   ============================================ */

.msg-harvest-actions {
  display: inline-flex;
  gap: 2px;
  margin-left: 4px;
  vertical-align: middle;
}

.msg-harvest-btn {
  width: 18px;
  height: 18px;
  border-radius: 3px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s;
  background: var(--theme-bg-secondary);
  border: 1px solid var(--theme-border-secondary);
  padding: 2px;
}

.msg-harvest-btn img {
  width: 12px;
  height: 12px;
  opacity: 0.85;
}

.msg-harvest-btn:hover:not(:disabled) img {
  opacity: 1;
}

/* Con-colored message harvest buttons */
.msg-harvest-btn.con-easy {
  background: rgba(144, 238, 144, 0.2);
  border-color: rgba(144, 238, 144, 0.5);
}
.msg-harvest-btn.con-easy:hover:not(:disabled) {
  background: rgba(144, 238, 144, 0.4);
  border-color: #90EE90;
}

.msg-harvest-btn.con-advantage {
  background: rgba(135, 206, 235, 0.2);
  border-color: rgba(135, 206, 235, 0.5);
}
.msg-harvest-btn.con-advantage:hover:not(:disabled) {
  background: rgba(135, 206, 235, 0.4);
  border-color: #87CEEB;
}

.msg-harvest-btn.con-even {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.3);
}
.msg-harvest-btn.con-even:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.5);
}

.msg-harvest-btn.con-challenging {
  background: rgba(255, 165, 0, 0.2);
  border-color: rgba(255, 165, 0, 0.5);
}
.msg-harvest-btn.con-challenging:hover:not(:disabled) {
  background: rgba(255, 165, 0, 0.4);
  border-color: #FFA500;
}

.msg-harvest-btn.con-dangerous {
  background: rgba(255, 0, 0, 0.2);
  border-color: rgba(255, 0, 0, 0.5);
}
.msg-harvest-btn.con-dangerous:hover:not(:disabled) {
  background: rgba(255, 0, 0, 0.4);
  border-color: #FF0000;
}

.msg-harvest-btn.con-extreme {
  background: rgba(139, 0, 139, 0.2);
  border-color: rgba(139, 0, 139, 0.5);
}
.msg-harvest-btn.con-extreme:hover:not(:disabled) {
  background: rgba(139, 0, 139, 0.4);
  border-color: #8B008B;
}

.msg-harvest-btn.done {
  background: rgba(102, 102, 102, 0.2);
  border-color: rgba(102, 102, 102, 0.3);
  opacity: 0.4;
  cursor: default;
}

/* ============================================
   Responsive Design
   ============================================ */

@media (max-width: 600px) {
  #gathering-popup {
    width: 100%;
    max-width: none;
    left: 0;
    right: 0;
  }

  /* Slightly smaller icons on mobile */
  .msg-gathering-icon {
    width: 18px;
    height: 18px;
  }

  .msg-harvest-btn {
    width: 16px;
    height: 16px;
  }
}