/**
 * TRADING POST CSS
 * Styles für Trading Modal, Banner und Item-Listen
 */

/* ============================================
   WARBAND TAB - TRADING INDIKATOR
   Blauer Rahmen wenn Warband im Trading-Modus
   ============================================ */

/* Wenn Tab einen Trading Badge enthält, blauen Rahmen zeigen */
.warband-tab:has(.tab-badge.trading) {
  border-color: #3f51b5 !important;
  box-shadow: 0 0 10px rgba(63, 81, 181, 0.4), inset 0 0 0 1px rgba(63, 81, 181, 0.2);
  background: rgba(63, 81, 181, 0.08) !important;
}

.warband-tab:has(.tab-badge.trading):hover {
  border-color: #5c6bc0 !important;
  box-shadow: 0 0 15px rgba(63, 81, 181, 0.5), inset 0 0 0 1px rgba(63, 81, 181, 0.3);
  background: rgba(63, 81, 181, 0.12) !important;
}

/* Explizite Klassen als Fallback */
.warband-tab.has-trading,
.warband-tab.trading-active {
  border-color: #3f51b5 !important;
  box-shadow: 0 0 10px rgba(63, 81, 181, 0.4), inset 0 0 0 1px rgba(63, 81, 181, 0.2);
  background: rgba(63, 81, 181, 0.08) !important;
}

.warband-tab.has-trading:hover,
.warband-tab.trading-active:hover {
  border-color: #5c6bc0 !important;
  box-shadow: 0 0 15px rgba(63, 81, 181, 0.5), inset 0 0 0 1px rgba(63, 81, 181, 0.3);
  background: rgba(63, 81, 181, 0.12) !important;
}

/* ============================================
   TRADING BANNER (im Roster Editor)
   ============================================ */
.trading-banner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 15px;
  padding: 15px 20px;
  margin-bottom: 20px;
  background: linear-gradient(135deg, rgba(63, 81, 181, 0.2) 0%, rgba(103, 58, 183, 0.2) 100%);
  border: 2px solid rgba(63, 81, 181, 0.5);
  border-radius: 12px;
  animation: tradingPulse 2s ease-in-out infinite;
}

@keyframes tradingPulse {
  0%, 100% { border-color: rgba(63, 81, 181, 0.5); }
  50% { border-color: rgba(103, 58, 183, 0.8); }
}

.trading-banner-content {
  display: flex;
  align-items: center;
  gap: 15px;
}

.trading-banner-icon {
  font-size: 2.5rem;
}

.trading-banner-text strong {
  display: block;
  font-size: 1.1rem;
  color: #7986cb;
  margin-bottom: 4px;
}

.trading-banner-text span {
  color: rgba(255,255,255,0.8);
  font-size: 0.9rem;
}

.trading-banner-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.btn-trading {
  background: linear-gradient(135deg, #3f51b5 0%, #303f9f 100%) !important;
  border-color: #7986cb !important;
  color: white !important;
  padding: 12px 24px !important;
  font-weight: 700 !important;
}

.btn-trading:hover {
  background: linear-gradient(135deg, #5c6bc0 0%, #3f51b5 100%) !important;
  transform: translateY(-2px) !important;
}

/* ============================================
   TRADING MODAL - POST MODAL
   ============================================ */

/* Override modal-body padding für Trading Post */
.modal-body:has(.trading-post-modal) {
  padding: 0 !important;
}

/* Fallback für Browser ohne :has() Support */
.trading-post-wrapper {
  margin: calc(-1 * var(--spacing-lg, 24px));
  margin-bottom: 0;
}

.trading-post-modal {
  display: flex;
  flex-direction: column;
  min-height: 500px;
  max-height: 80vh;
}

.trading-tabs {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 15px 20px;
  background: linear-gradient(135deg, #8b0000 0%, #5c0000 100%);
  border-bottom: 2px solid #c9a959;
}

.trading-tab {
  padding: 12px 24px;
  background: transparent;
  border: 2px solid transparent;
  border-radius: 8px;
  color: rgba(255,255,255,0.7);
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.trading-tab:hover {
  background: rgba(255,255,255,0.1);
  color: white;
}

.trading-tab.active {
  background: rgba(201, 169, 89, 0.2);
  border-color: #c9a959;
  color: #c9a959;
}

.trading-gold-display {
  margin-left: auto;
  padding: 10px 20px;
  background: rgba(0,0,0,0.4);
  border: 1px solid rgba(201, 169, 89, 0.5);
  border-radius: 25px;
  color: rgba(255,255,255,0.8);
  font-size: 0.95rem;
}

.trading-gold-display strong {
  color: #c9a959;
  font-size: 1.3rem;
  font-family: 'Cinzel', serif;
}

/* ============================================
   TRADING CONTENT AREA
   ============================================ */
.trading-content {
  flex: 1;
  overflow-y: auto;
  padding: 0;
  background: #1a1a1a;
}

.tab-intro {
  color: rgba(255,255,255,0.7);
  margin: 0;
  padding: 12px 20px;
  background: rgba(0,0,0,0.3);
  border-bottom: 1px solid rgba(201, 169, 89, 0.2);
  font-size: 0.9rem;
}

/* ============================================
   ITEM CATEGORIES
   ============================================ */
.item-category {
  margin: 0;
  padding: 0 20px 20px;
}

.item-category:first-of-type {
  padding-top: 0;
}

.category-title {
  margin: 0 -20px 15px;
  padding: 14px 20px;
  background: linear-gradient(135deg, rgba(44, 36, 27, 0.95) 0%, rgba(30, 25, 20, 0.98) 100%);
  border: none;
  border-bottom: 1px solid rgba(201, 169, 89, 0.3);
  border-left: 4px solid #c9a959;
  border-radius: 0;
  font-family: 'Cinzel', serif;
  font-size: 0.95rem;
  font-weight: 600;
  color: #c9a959;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.category-title.found-title {
  background: linear-gradient(135deg, rgba(76, 175, 80, 0.2) 0%, rgba(56, 142, 60, 0.1) 100%);
  border-color: rgba(76, 175, 80, 0.4);
  border-left-color: #4caf50;
  color: #81c784;
}

/* ============================================
   ITEMS GRID
   ============================================ */
.items-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
  padding: 0;
}

/* Buy/Search Tab Container */
.buy-tab,
.search-tab {
  padding: 0;
}

.buy-tab .item-category,
.search-tab .item-category {
  padding: 0 20px 20px;
}

/* ============================================
   ITEM CARDS
   ============================================ */
.item-card {
  position: relative;
  padding: 0;
  background: linear-gradient(145deg, #2a2520 0%, #1e1a16 100%);
  border: 1px solid rgba(201, 169, 89, 0.25);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.25s ease;
  overflow: hidden;
}

.item-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, rgba(201, 169, 89, 0.3), transparent);
  opacity: 0;
  transition: opacity 0.25s ease;
}

.item-card:hover {
  border-color: rgba(201, 169, 89, 0.6);
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.4), 0 0 15px rgba(201, 169, 89, 0.1);
}

.item-card:hover::before {
  opacity: 1;
}

.item-card.common:hover {
  border-color: rgba(76, 175, 80, 0.6);
  box-shadow: 0 8px 20px rgba(0,0,0,0.4), 0 0 15px rgba(76, 175, 80, 0.15);
}

.item-card.common:hover::before {
  background: linear-gradient(90deg, transparent, rgba(76, 175, 80, 0.5), transparent);
}

.item-card.rare:hover {
  border-color: rgba(255, 193, 7, 0.6);
  box-shadow: 0 8px 20px rgba(0,0,0,0.4), 0 0 15px rgba(255, 193, 7, 0.15);
}

.item-card.rare:hover::before {
  background: linear-gradient(90deg, transparent, rgba(255, 193, 7, 0.5), transparent);
}

.item-card.item-found {
  background: linear-gradient(145deg, #1a2e1a 0%, #162016 100%);
  border-color: rgba(76, 175, 80, 0.5);
}

/* Item Header - Name & Preis */
.item-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px 8px;
  background: rgba(0,0,0,0.2);
  border-bottom: 1px solid rgba(255,255,255,0.05);
}

.item-card .item-name {
  font-weight: 700;
  color: #f4e4c1;
  font-size: 0.9rem;
  line-height: 1.3;
  font-family: 'Cinzel', serif;
}

.item-card .item-cost {
  color: #c9a959;
  font-weight: 700;
  font-size: 0.9rem;
  white-space: nowrap;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

/* Item Rarity - Gelb für Rare */
.item-card .item-rarity {
  padding: 4px 14px 6px;
  color: #f5c842;
  font-size: 0.75rem;
  font-weight: 600;
  background: rgba(255, 193, 7, 0.08);
}

.item-card .item-rarity.found {
  color: #81c784;
  background: rgba(76, 175, 80, 0.1);
}

/* Item Rules - Beschreibung */
.item-card .item-rules {
  padding: 8px 14px 12px;
  font-size: 0.8rem;
  color: rgba(255,255,255,0.55);
  font-style: italic;
  line-height: 1.4;
  min-height: 32px;
}

/* ============================================
   BUY TAB - Too Expensive Items
   ============================================ */
.buy-tab .item-card.too-expensive {
  opacity: 0.4;
  cursor: not-allowed;
}

.buy-tab .item-card.too-expensive:hover {
  transform: none;
  border-color: rgba(198, 40, 40, 0.5);
  box-shadow: none;
}

/* ============================================
   SEARCH TAB - Results & Hero List
   ============================================ */

/* Suchergebnisse */
.search-result {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  margin-bottom: 8px;
  border-radius: 8px;
  transition: all 0.2s ease;
}

.search-result.found {
  background: linear-gradient(145deg, #1a2e1a 0%, #162016 100%);
  border: 1px solid rgba(76, 175, 80, 0.5);
}

.search-result.not-found {
  background: linear-gradient(145deg, #2a2020 0%, #1e1616 100%);
  border: 1px solid rgba(198, 40, 40, 0.3);
  opacity: 0.7;
}

.search-result-info {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  color: rgba(255,255,255,0.9);
  font-size: 0.95rem;
}

.search-result-icon {
  font-size: 1.3rem;
  flex-shrink: 0;
}

.search-result .btn {
  flex-shrink: 0;
  white-space: nowrap;
  font-weight: 700;
  letter-spacing: 0.5px;
}

.search-result .btn-disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

/* Hero Search Liste */
.hero-search-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.hero-search-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  background: linear-gradient(145deg, #2a2520 0%, #1e1a16 100%);
  border: 1px solid rgba(201, 169, 89, 0.2);
  border-radius: 8px;
  transition: all 0.2s ease;
}

.hero-search-row:hover {
  border-color: rgba(201, 169, 89, 0.4);
  background: linear-gradient(145deg, #352f28 0%, #28221c 100%);
}

.hero-search-row .hero-name {
  flex: 1;
  font-weight: 700;
  color: #f4e4c1;
  font-family: 'Cinzel', serif;
}

.hero-search-row .hero-type {
  color: rgba(255,255,255,0.4);
  font-size: 0.85rem;
  font-style: italic;
}

.hero-search-row.searched {
  opacity: 0.5;
  border-color: rgba(255,255,255,0.1);
}

.searched-badge {
  color: rgba(255,255,255,0.4);
  font-size: 0.85rem;
  font-style: italic;
}

/* ============================================
   SEARCH MODAL - Item Auswahl
   ============================================ */
.search-modal {
  max-height: 60vh;
  overflow-y: auto;
}

.search-modal > p {
  margin-bottom: 15px;
  color: rgba(255,255,255,0.8);
  padding: 0 5px;
}

.search-category {
  margin-bottom: 20px;
}

.search-category-title {
  padding: 10px 14px;
  margin-bottom: 8px;
  background: linear-gradient(135deg, rgba(44, 36, 27, 0.95) 0%, rgba(30, 25, 20, 0.98) 100%);
  border-left: 3px solid #c9a959;
  border-radius: 0 6px 6px 0;
  font-family: 'Cinzel', serif;
  font-size: 0.85rem;
  font-weight: 600;
  color: #c9a959;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.rare-search-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  margin-bottom: 4px;
  background: linear-gradient(145deg, #2a2520 0%, #1e1a16 100%);
  border: 1px solid rgba(201, 169, 89, 0.15);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.rare-search-item:hover {
  border-color: #c9a959;
  background: linear-gradient(145deg, #352f28 0%, #28221c 100%);
  transform: translateX(4px);
}

.rare-search-item .item-name {
  flex: 1;
  font-weight: 600;
  color: #f4e4c1;
  font-size: 0.95rem;
}

.rare-search-item .item-rarity-badge {
  padding: 4px 12px;
  background: rgba(201, 169, 89, 0.15);
  border: 1px solid rgba(201, 169, 89, 0.4);
  border-radius: 20px;
  color: #c9a959;
  font-size: 0.8rem;
  font-weight: 600;
  white-space: nowrap;
}

.rare-search-item .item-cost {
  color: #c9a959;
  font-weight: 700;
  font-size: 0.9rem;
  white-space: nowrap;
  min-width: 55px;
  text-align: right;
}

/* ============================================
   DICE ROLL MODAL
   ============================================ */
.roll-modal {
  padding: 10px 0;
  text-align: center;
}

.roll-modal p {
  margin-bottom: 12px;
  color: rgba(255,255,255,0.8);
}

.roll-modal .rarity-info {
  padding: 10px 15px;
  background: rgba(201, 169, 89, 0.1);
  border: 1px solid rgba(201, 169, 89, 0.3);
  border-radius: 8px;
  color: #c9a959;
  font-weight: 600;
  margin-bottom: 20px;
}

.dice-input {
  margin: 20px 0;
}

.dice-input label {
  display: block;
  margin-bottom: 10px;
  color: rgba(255,255,255,0.7);
}

.dice-input input {
  width: 100px;
  height: 60px;
  background: rgba(0,0,0,0.4);
  border: 2px solid rgba(201, 169, 89, 0.3);
  border-radius: 10px;
  color: #c9a959;
  font-size: 1.8rem;
  font-weight: 700;
  text-align: center;
}

.dice-input input:focus {
  outline: none;
  border-color: #c9a959;
  box-shadow: 0 0 10px rgba(201, 169, 89, 0.3);
}

.dice-actions {
  display: flex;
  justify-content: center;
  gap: 15px;
  margin-top: 20px;
}

/* ============================================
   SELL TAB
   ============================================ */
.sell-tab {
  padding: 20px;
}

.empty-stash {
  text-align: center;
  padding: 40px 20px;
  color: rgba(255,255,255,0.5);
  font-style: italic;
  font-size: 1.1rem;
}

.stash-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.stash-item {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 14px 18px;
  background: linear-gradient(145deg, #2a2520 0%, #1e1a16 100%);
  border: 1px solid rgba(201, 169, 89, 0.2);
  border-radius: 8px;
  transition: all 0.2s ease;
}

.stash-item:hover {
  background: linear-gradient(145deg, #352f28 0%, #28221c 100%);
  border-color: rgba(76, 175, 80, 0.4);
}

.stash-item .item-name {
  flex: 1;
  font-weight: 600;
  color: #f4e4c1;
}

.stash-item .item-sell-price {
  color: #81c784;
  font-weight: 700;
  font-size: 0.95rem;
}

/* ============================================
   HERO SELECT MODAL
   ============================================ */
.hero-select-modal {
  padding: 10px 0;
}

.hero-select-modal p {
  margin-bottom: 15px;
  color: rgba(255,255,255,0.8);
}

.hero-select-modal .rarity-info {
  padding: 10px 15px;
  background: rgba(255, 193, 7, 0.1);
  border: 1px solid rgba(255, 193, 7, 0.3);
  border-radius: 8px;
  color: #ffc107;
  font-weight: 600;
  margin-bottom: 20px;
}

.hero-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.hero-option {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 18px;
  background: linear-gradient(145deg, #2a2520 0%, #1e1a16 100%);
  border: 1px solid rgba(201, 169, 89, 0.2);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.hero-option:hover {
  background: linear-gradient(145deg, #352f28 0%, #28221c 100%);
  border-color: #c9a959;
}

.hero-option .hero-name {
  font-weight: 600;
  color: #f4e4c1;
}

.hero-option .hero-type {
  color: rgba(255,255,255,0.5);
  font-size: 0.85rem;
}

/* ============================================
   TRADING FOOTER
   ============================================ */
.trading-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  background: rgba(0,0,0,0.5);
  border-top: 2px solid rgba(201, 169, 89, 0.3);
  margin: 0;
}

/* ============================================
   LEGACY SUPPORT - alte shop-item Klassen
   ============================================ */
.shop-item {
  position: relative;
  padding: 0;
  background: linear-gradient(145deg, #2a2520 0%, #1e1a16 100%);
  border: 1px solid rgba(201, 169, 89, 0.25);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.25s ease;
  overflow: hidden;
}

.shop-item:hover {
  border-color: rgba(76, 175, 80, 0.6);
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.4);
}

.shop-item .item-name {
  display: block;
  padding: 12px 14px 4px;
  font-weight: 700;
  color: #f4e4c1;
  font-size: 0.9rem;
  font-family: 'Cinzel', serif;
}

.shop-item .item-price {
  display: block;
  padding: 0 14px 4px;
  color: #c9a959;
  font-weight: 700;
}

.shop-item .item-notes {
  display: block;
  padding: 4px 14px 12px;
  font-size: 0.8rem;
  color: rgba(255,255,255,0.5);
  font-style: italic;
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 768px) {
  .trading-tabs {
    flex-wrap: wrap;
    gap: 8px;
  }

  .trading-tab {
    flex: 1;
    min-width: 100px;
    text-align: center;
    padding: 10px 15px;
    font-size: 0.85rem;
  }

  .trading-gold-display {
    width: 100%;
    text-align: center;
    margin-top: 10px;
    margin-left: 0;
  }

  .items-grid {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 10px;
  }

  .item-card .item-name {
    font-size: 0.85rem;
  }

  .trading-footer {
    flex-direction: column;
    gap: 10px;
  }

  .trading-footer .btn {
    width: 100%;
  }

  .search-result {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .search-result .btn {
    width: 100%;
    text-align: center;
  }

  .rare-search-item {
    flex-wrap: wrap;
  }

  .rare-search-item .item-name {
    flex-basis: 100%;
  }
}

@media (max-width: 480px) {
  .items-grid {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .item-header {
    flex-direction: column;
    gap: 4px;
    padding: 10px 12px 6px;
  }

  .item-card .item-cost {
    align-self: flex-start;
  }

  .item-card .item-rules {
    padding: 6px 12px 10px;
    font-size: 0.75rem;
  }
}

/* ============================================
   TRADING POST v3.1 EXTENSIONS
   Hired Swords, Dramatis Personae, Rarity,
   DP Roll Dialog, DP Hire Detail
   ============================================ */

/* === Tab Colors === */
.trading-tab.tab-hired.active { border-color: #cd7f32; color: #d4a574; background: rgba(205, 127, 50, 0.2); }
.trading-tab.tab-dp.active { border-color: #ffd700; color: #ffe066; background: rgba(255, 215, 0, 0.15); }
.trading-tabs { flex-wrap: wrap; gap: 4px; }

/* === Tab Intro Box === */
.tab-intro-box { padding: 15px 20px; background: rgba(0, 0, 0, 0.3); border-bottom: 1px solid rgba(201, 169, 89, 0.2); }
.tab-intro-box .tab-intro { padding: 0; background: none; border: none; }
.hs-intro-box { border-bottom-color: rgba(205, 127, 50, 0.3); }
.dp-intro-box { border-bottom-color: rgba(255, 215, 0, 0.2); }

/* === Search Rules === */
.search-rules-details { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; font-size: 0.82rem; }
.rule-item { display: flex; align-items: flex-start; gap: 6px; color: rgba(255, 255, 255, 0.6); line-height: 1.3; }
.search-rules-box { border-left: 3px solid rgba(201, 169, 89, 0.4); border-radius: 0; }

/* === OOA Styling === */
.ooa-title { color: #e57373 !important; }
.hero-search-row.ooa-hero { opacity: 0.5; background: rgba(229, 115, 115, 0.05); border-color: rgba(229, 115, 115, 0.2); }
.ooa-badge { padding: 2px 8px; background: rgba(229, 115, 115, 0.15); border: 1px solid rgba(229, 115, 115, 0.3); border-radius: 10px; font-size: 0.75rem; color: #e57373; }

/* ============================================
   HIRED SWORD MINI STATS TABLE
   ============================================ */
.hs-stats-table-mini { width: calc(100% - 28px); margin: 0 14px 4px; border-collapse: collapse; table-layout: fixed; }
.hs-stats-table-mini th { padding: 4px 2px; font-size: 0.65rem; font-weight: 700; color: rgba(205, 127, 50, 0.7); text-align: center; border-bottom: 1px solid rgba(205, 127, 50, 0.2); letter-spacing: 0.5px; }
.hs-stats-table-mini td { padding: 5px 2px; font-size: 0.85rem; font-weight: 600; color: rgba(255, 255, 255, 0.85); text-align: center; }
.hs-tagline { padding: 6px 14px 10px; font-size: 0.8rem; color: rgba(212, 165, 116, 0.7); line-height: 1.3; border-top: 1px solid rgba(205, 127, 50, 0.1); }

/* ============================================
   DRAMATIS PERSONAE CARD VARIANTS
   ============================================ */
.hired-sword-card.dp-card-style { border-color: rgba(255, 215, 0, 0.35); background: linear-gradient(145deg, rgba(50, 45, 25, 0.95) 0%, rgba(25, 22, 12, 0.98) 100%); }
.hired-sword-card.dp-card-style::before { background: linear-gradient(90deg, transparent, #ffd700, transparent); }
.hired-sword-card.dp-card-style:hover { border-color: rgba(255, 215, 0, 0.6); box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4), 0 0 20px rgba(255, 215, 0, 0.2); }
.dp-header-style { background: rgba(255, 215, 0, 0.05) !important; border-bottom-color: rgba(255, 215, 0, 0.15) !important; }
.dp-name-style { color: #ffe066 !important; }
.dp-grade-style { background: rgba(255, 215, 0, 0.2) !important; border-color: rgba(255, 215, 0, 0.35) !important; color: #ffd700 !important; }
.dp-cost-style { color: #ffe066 !important; }
.dp-stats-mini th { color: rgba(255, 215, 0, 0.6) !important; border-bottom-color: rgba(255, 215, 0, 0.15) !important; }
.dp-tagline-style { color: rgba(255, 230, 150, 0.6) !important; border-top-color: rgba(255, 215, 0, 0.1) !important; }
.dp-title { background: linear-gradient(135deg, rgba(255, 215, 0, 0.15) 0%, transparent 100%) !important; border-left-color: #ffd700 !important; color: #ffe066 !important; }

/* ============================================
   RARITY DISPLAY (Search Tab)
   ============================================ */
.item-rarity-display { display: flex; align-items: center; gap: 6px; }
.rarity-dice { padding: 3px 8px; background: rgba(201, 169, 89, 0.15); border: 1px solid rgba(201, 169, 89, 0.4); border-radius: 4px; font-size: 0.8rem; font-weight: 700; color: #c9a959; white-space: nowrap; }
.rarity-chance { padding: 2px 6px; background: rgba(255, 255, 255, 0.06); border-radius: 10px; font-size: 0.72rem; color: rgba(255, 255, 255, 0.45); white-space: nowrap; }

/* ============================================
   DP ROLL DIALOG
   ============================================ */
.dp-roll-dialog { padding: 10px 0; }

.dp-roll-target {
  text-align: center;
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 12px;
}

.dp-roll-requirement {
  text-align: center;
  padding: 10px 15px;
  margin-bottom: 16px;
  background: rgba(255, 215, 0, 0.08);
  border: 1px solid rgba(255, 215, 0, 0.25);
  border-radius: 8px;
  color: #ffe066;
  font-size: 0.95rem;
}

.dp-roll-input-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.dp-roll-input-row label {
  flex-shrink: 0;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.7);
}

.dp-roll-input-row input {
  width: 80px;
  padding: 10px 14px;
  background: rgba(0, 0, 0, 0.4);
  border: 2px solid rgba(255, 215, 0, 0.4);
  border-radius: 8px;
  color: white;
  font-size: 1.2rem;
  font-weight: 700;
  text-align: center;
}

.dp-roll-input-row input:focus {
  outline: none;
  border-color: #ffd700;
  box-shadow: 0 0 10px rgba(255, 215, 0, 0.3);
}

.dp-roll-actions {
  display: flex;
  justify-content: center;
  gap: 12px;
}

/* ============================================
   DP FULL HIRE CONFIRM DIALOG
   ============================================ */
.dp-full-hire-confirm {
  max-height: 70vh;
  overflow-y: auto;
  text-align: center;
}

.dp-hire-reveal { padding: 10px 0 5px; }

.dp-hire-star-big {
  font-size: 2.5rem;
  filter: drop-shadow(0 0 12px rgba(255, 215, 0, 0.5));
  animation: dpStarPulse 2s ease-in-out infinite;
}

@keyframes dpStarPulse {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.4)); }
  50% { transform: scale(1.08); filter: drop-shadow(0 0 16px rgba(255, 215, 0, 0.7)); }
}

.dp-hire-name {
  color: #ffe066;
  font-family: 'Cinzel', serif;
  font-size: 1.3rem;
  margin: 6px 0 2px;
}

.dp-hire-source { font-size: 0.8rem; color: rgba(255, 215, 0, 0.5); }

.dp-hire-lore-excerpt {
  padding: 12px 15px;
  margin: 10px 0;
  background: rgba(245, 230, 200, 0.06);
  border-left: 2px solid rgba(245, 230, 200, 0.2);
  text-align: left;
  font-size: 0.88rem;
  color: rgba(245, 230, 200, 0.6);
  line-height: 1.4;
}

.dp-hire-info-grid {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin: 12px 0;
}

.dp-hire-info-item { text-align: center; }
.dp-hire-info-label { display: block; font-size: 0.7rem; color: rgba(255, 255, 255, 0.4); text-transform: uppercase; }
.dp-hire-info-value { display: block; font-size: 1rem; font-weight: 600; color: #ffe066; }
.dp-hire-cost-note { font-size: 0.8rem; color: rgba(100, 181, 246, 0.7); margin: 8px 0; }

.dp-hire-availability {
  text-align: left;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.6);
  margin: 10px 0;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 6px;
}

.dp-hire-warning {
  padding: 10px;
  background: rgba(229, 115, 115, 0.15);
  border: 1px solid rgba(229, 115, 115, 0.3);
  border-radius: 6px;
  color: #e57373;
  margin: 10px 0;
}

.dp-hire-confirm-text { margin: 15px 0 10px; font-size: 1rem; color: rgba(255, 255, 255, 0.8); }

.dp-hire-actions { display: flex; justify-content: center; gap: 15px; margin-top: 15px; }

.dp-confirm-hire-btn {
  background: linear-gradient(135deg, #b8860b 0%, #ffd700 100%) !important;
  color: #1a1a1a !important;
  font-weight: 700;
  padding: 10px 25px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-family: 'Cinzel', serif;
  letter-spacing: 0.5px;
  transition: all 0.2s;
}

.dp-confirm-hire-btn:hover:not(.btn-disabled) {
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(255, 215, 0, 0.3);
}

.dp-confirm-hire-btn.btn-disabled { opacity: 0.4; cursor: not-allowed; }

/* === Equipment Block === */
.dp-hire-detail-block {
  text-align: left;
  margin: 10px 0;
  padding: 10px 12px;
  background: rgba(255, 215, 0, 0.03);
  border: 1px solid rgba(255, 215, 0, 0.1);
  border-radius: 6px;
}

.dp-hire-detail-block strong { color: #ffe066; }

.dp-fixed-tag {
  display: inline-block;
  padding: 1px 5px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 3px;
  font-size: 0.6rem;
  color: rgba(255, 255, 255, 0.4);
  text-transform: uppercase;
  font-weight: 400;
  vertical-align: middle;
}

.dp-hire-equip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}

.dp-hire-equip-item {
  padding: 4px 10px;
  background: rgba(255, 215, 0, 0.06);
  border: 1px solid rgba(255, 215, 0, 0.15);
  border-radius: 5px;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.75);
}

.dp-hire-equip-notes {
  margin-top: 6px;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.4);
}

/* === Skills === */
.dp-hire-skills {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 6px;
}

.dp-hire-skill-pill {
  padding: 3px 8px;
  background: rgba(255, 215, 0, 0.1);
  border: 1px solid rgba(255, 215, 0, 0.25);
  border-radius: 10px;
  font-size: 0.78rem;
  color: #ffe066;
}

/* === Pair Profiles === */
.dp-hire-pair-section {
  text-align: left;
  margin: 10px 0;
}

.dp-hire-pair-section strong { color: #ffe066; display: block; margin-bottom: 8px; }

.dp-hire-pair-card {
  padding: 10px 12px;
  margin-bottom: 8px;
  background: rgba(255, 215, 0, 0.04);
  border: 1px solid rgba(255, 215, 0, 0.15);
  border-radius: 8px;
}

.dp-hire-pair-name {
  font-weight: 700;
  color: #ffe066;
  font-family: 'Cinzel', serif;
  margin-bottom: 6px;
  font-size: 0.95rem;
}

.dp-hire-pair-detail {
  margin-top: 4px;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.6);
}

/* === Special Rules Accordion === */
.dp-hire-rules-section {
  text-align: left;
  margin: 10px 0;
}

.dp-hire-rules-section strong { color: #ffe066; display: block; margin-bottom: 8px; }

.dp-hire-rule-item {
  margin-bottom: 4px;
  border: 1px solid rgba(255, 215, 0, 0.12);
  border-radius: 6px;
  overflow: hidden;
}

.dp-hire-rule-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  background: rgba(255, 215, 0, 0.06);
  cursor: pointer;
  transition: background 0.2s;
}

.dp-hire-rule-header:hover { background: rgba(255, 215, 0, 0.12); }

.dp-hire-rule-name {
  font-weight: 600;
  color: #ffe066;
  font-size: 0.85rem;
}

.dp-hire-rule-toggle {
  color: rgba(255, 215, 0, 0.4);
  font-size: 0.7rem;
  transition: transform 0.2s;
}

.dp-hire-rule-item.open .dp-hire-rule-toggle { transform: rotate(90deg); }

.dp-hire-rule-body {
  display: none;
  padding: 8px 12px 10px;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.65);
  line-height: 1.5;
  border-top: 1px solid rgba(255, 215, 0, 0.08);
}

.dp-hire-rule-item.open .dp-hire-rule-body { display: block; }

/* ============================================
   DP SEARCH TAB & MODAL STYLES
   ============================================ */
.dp-search-tab { padding-bottom: 20px; }
.dp-search-modal { text-align: center; }
.dp-search-header { padding: 10px 0 15px; }
.dp-search-info { text-align: left; padding: 12px; margin: 10px 0; background: rgba(255, 215, 0, 0.06); border: 1px solid rgba(255, 215, 0, 0.15); border-radius: 8px; font-size: 0.9rem; color: rgba(255, 255, 255, 0.7); }
.dp-search-info p { margin: 6px 0; }
.dp-search-hero-list { text-align: left; margin-top: 15px; }
.dp-search-hero-list strong { display: block; margin-bottom: 8px; color: rgba(255, 215, 0, 0.8); }

.dp-search-hero-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 12px; margin-bottom: 6px;
  background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px; cursor: pointer; transition: all 0.2s;
}

.dp-search-hero-row:hover { background: rgba(255, 215, 0, 0.08); border-color: rgba(255, 215, 0, 0.25); }
.dp-search-initiative { font-size: 0.8rem; color: rgba(255, 215, 0, 0.6); }
.dp-special-hire { text-align: center; }
.dp-special-hire h3 { color: #ffe066; font-family: 'Cinzel', serif; }

/* ============================================
   DP Stats Table (Hire Confirm)
   ============================================ */
.dp-stats-table {
  width: 100%;
  border-collapse: collapse;
  margin: 10px 0;
}

.dp-stats-table th {
  padding: 6px 8px;
  background: rgba(255, 215, 0, 0.1);
  color: #ffe066;
  font-size: 0.8rem;
  font-weight: 600;
  border: 1px solid rgba(255, 215, 0, 0.15);
}

.dp-stats-table td {
  padding: 8px;
  text-align: center;
  color: white;
  font-weight: 600;
  font-size: 0.95rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 768px) {
  .trading-tabs { padding: 10px 12px; }
  .trading-tab { padding: 8px 12px; font-size: 0.8rem; }
  .trading-gold-display { width: 100%; text-align: center; margin-top: 5px; margin-left: 0; }
  .dp-roll-input-row { flex-direction: column; gap: 8px; }
  .dp-hire-info-grid { gap: 10px; }
  .dp-hire-pair-card .hs-stats-table-mini { width: 100%; margin: 6px 0; }
}

@media (max-width: 480px) {
  .trading-tab { padding: 6px 8px; font-size: 0.72rem; }
  .hs-stats-table-mini th { font-size: 0.6rem; }
  .hs-stats-table-mini td { font-size: 0.75rem; }
}

/* DP Hire Table (Bertha/Penthesilea special) */
.dp-hire-table {
  width: 100%;
  border-collapse: collapse;
  margin: 10px 0;
}
.dp-hire-table th, .dp-hire-table td {
  padding: 6px 10px;
  border: 1px solid rgba(255, 215, 0, 0.15);
  text-align: center;
  font-size: 0.85rem;
}
.dp-hire-table th {
  background: rgba(255, 215, 0, 0.1);
  color: #ffe066;
}

/* Tooltip cursor for interactive pills */
.dp-hire-equip-item[title],
.dp-hire-skill-pill[title] {
  cursor: help;
  position: relative;
}

.dp-hire-equip-item[title]:hover,
.dp-hire-skill-pill[title]:hover {
  background: rgba(255, 215, 0, 0.2);
  border-color: rgba(255, 215, 0, 0.5);
}

/* ============================================
   CUSTOM TOOLTIP (works inside modals)
   ============================================ */

.tp-custom-tooltip {
  position: fixed;
  z-index: 100000;
  max-width: 320px;
  padding: 10px 14px;
  background: rgba(15, 12, 8, 0.97);
  border: 1px solid rgba(201, 169, 89, 0.5);
  border-radius: 6px;
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.82rem;
  line-height: 1.4;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6), 0 0 8px rgba(201, 169, 89, 0.15);
}

.tp-custom-tooltip strong {
  color: #c9a959;
  display: block;
  margin-bottom: 3px;
  font-family: 'Cinzel', serif;
  font-size: 0.9rem;
}

.tp-custom-tooltip em {
  color: rgba(255, 255, 255, 0.5);
}

/* Clickable cursor for tooltip items */
.dp-hire-equip-item,
.dp-hire-skill-pill {
  cursor: pointer !important;
  transition: all 0.15s;
}

.dp-hire-equip-item:hover {
  background: rgba(255, 215, 0, 0.2) !important;
  border-color: rgba(255, 215, 0, 0.5) !important;
}

.dp-hire-skill-pill:hover {
  background: rgba(255, 215, 0, 0.25) !important;
  border-color: rgba(255, 215, 0, 0.5) !important;
  transform: translateY(-1px);
}

/* ============================================
   DP Grade Section Headers
   ============================================ */

.dp-grade-header {
  font-family: 'Cinzel', serif;
  font-size: 0.8rem;
  font-weight: 600;
  color: rgba(255, 215, 0, 0.6);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  padding: 12px 20px 6px;
  border-bottom: 1px solid rgba(255, 215, 0, 0.1);
  margin-bottom: 0;
}

/* DP category title */
.category-title.dp-title {
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.12) 0%, rgba(201, 169, 89, 0.08) 100%);
  border-left-color: #ffd700;
  color: #ffd700;
}