/**
 * item_tooltip.css
 * ------------------------------------------------------------------
 * Wspólny styl tooltipów przedmiotów — używany zarówno przez katalog
 * przedmiotów, jak i modal ekwipunku w widoku rekrutacji (js/item_tooltip.js).
 * ------------------------------------------------------------------
 */

:root {
    --tt-common: #666666;
    --tt-unique: #e6cc80;
    --tt-heroic: #0088ff;
    --tt-legendary: #ff8800;
    --tt-upgraded: #ff00ff;
}

.item-tooltip {
    display: none;
    position: fixed;
    z-index: 10000;
    width: 260px;
    background: rgba(12, 12, 12, 0.95);
    border: 1px solid #444;
    border-radius: 5px;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.8);
    font-family: 'Verdana', sans-serif;
    font-size: 11px;
    line-height: 1.4;
    color: #c0c0c0;
    pointer-events: none;
    padding-bottom: 5px;
    overflow-x: hidden;
    overflow-y: auto;
    max-height: calc(100vh - 30px);
}

.item-tooltip.visible {
    display: block;
}

/* Kolor ramki i poświaty zależny od rzadkości przedmiotu */
.item-tooltip.tt-rarity-common    { border-color: var(--tt-common);    box-shadow: 0 0 8px var(--tt-common); }
.item-tooltip.tt-rarity-unique    { border-color: var(--tt-unique);    box-shadow: 0 0 8px var(--tt-unique); }
.item-tooltip.tt-rarity-heroic    { border-color: var(--tt-heroic);    box-shadow: 0 0 8px var(--tt-heroic); }
.item-tooltip.tt-rarity-legendary { border-color: var(--tt-legendary); box-shadow: 0 0 8px var(--tt-legendary); }
.item-tooltip.tt-rarity-upgraded  { border-color: var(--tt-upgraded);  box-shadow: 0 0 8px var(--tt-upgraded); }

/* Nagłówek */
.tt-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.02);
}
.tt-header-no-icon { justify-content: center; }
.tt-header-no-icon .tt-header-text { text-align: center; }

.tt-icon {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    object-fit: contain;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.tt-header-text { flex: 1; min-width: 0; text-align: left; }
.tt-name { font-weight: bold; font-size: 13px; letter-spacing: 0.5px; }

/* Odznaka rzadkości pod nagłówkiem */
.tt-rarity-badge {
    text-align: center;
    font-size: 9px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 3px 0;
    margin: 6px 10px;
    border-radius: 3px;
}
.tt-rarity-badge-common    { background: rgba(102, 102, 102, 0.25); color: #ccc; }
.tt-rarity-badge-unique    { background: rgba(230, 204, 128, 0.2); color: var(--tt-unique); }
.tt-rarity-badge-heroic    { background: rgba(0, 136, 255, 0.2);   color: var(--tt-heroic); }
.tt-rarity-badge-legendary { background: rgba(255, 136, 0, 0.2);   color: var(--tt-legendary); }
.tt-rarity-badge-upgraded  { background: rgba(255, 0, 255, 0.2);   color: var(--tt-upgraded); }
.tt-rarity-badge-artifact  { background: rgba(255, 255, 255, 0.18); color: #fff; }

/* Kolor nazwy w nagłówku wg rzadkości */
.rar-common    { color: #fff; }
.rar-unique    { color: var(--tt-unique); text-shadow: 0 0 2px #5f4c00; }
.rar-heroic    { color: var(--tt-heroic); text-shadow: 0 0 2px #003366; }
.rar-legendary { color: var(--tt-legendary); text-shadow: 0 0 2px #662200; }
.rar-upgraded  { color: var(--tt-upgraded); }

/* Odznaka wydarzenia (np. "Przedmiot ostatnio dostępny podczas wydarzenia: ...") */
.tt-etiquette {
    padding: 5px 10px;
    text-align: center;
    background: rgba(255, 200, 60, 0.08);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.tt-etiquette-label {
    font-size: 9px;
    color: #c9a24a;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.tt-etiquette-value {
    font-size: 10px;
    font-weight: bold;
    color: #ffd76e;
    margin-top: 1px;
}

/* Plakietka wiązania (duszozwiązany / na stałe / po założeniu) */
.tt-bind {
    padding: 4px 10px;
    text-align: center;
    font-size: 10px;
    font-weight: bold;
    color: #ff8fa3;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* Statystyki */
.tt-stats { padding: 8px 10px; }
.tt-row { display: flex; justify-content: space-between; margin-bottom: 1px; }
.tt-key { color: #9d9d9d; }
.tt-val { color: #e8e8e8; font-weight: bold; }

.val-bonus   { color: #5cff5c; } /* Zielony dla bonusów */
.val-req     { color: #9fc5ff; } /* Neutralny niebieski — panel nie porównuje z "Twoją postacią" */
.val-neutral { color: #fff; }

/* Bonus legendarny — wyróżniony blok (jak w oryginalnej grze) */
.tt-legendary {
    padding: 6px 10px;
    font-size: 10px;
    text-align: center;
    color: #7fd8ff;
    background: rgba(0, 136, 255, 0.06);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* Efekty specjalne renderowane jako pełne zdanie (adest, lowevade, itd.) */
.tt-effect {
    padding: 2px 10px;
    font-size: 10px;
    line-height: 1.35;
    color: #c9a6ff;
}

/* Sekcje */
.tt-separator { margin: 6px 0; border-top: 1px solid rgba(255, 255, 255, 0.15); }

.tt-desc {
    padding: 6px 10px;
    color: #e6c35c;
    font-style: italic;
    font-size: 10px;
    text-align: center;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(0, 0, 0, 0.2);
}

.tt-loot {
    padding: 6px 10px 2px;
    font-size: 10px;
    color: #b7b7b7;
    text-align: center;
}
.tt-loot-name    { color: #9fd6ff; font-weight: bold; }
.tt-loot-monster { color: #ffb17a; font-weight: bold; }
.tt-loot-meta    { color: #777; }