/* 👁️ style_tooltip.css
   Stylowanie dynamicznego podglądu dekoracji:
   – pozycjonowanie obrazka obok kursora (absolute),
   – tło, ramka i cień dla okna z podglądem,
   – skalowanie zgodne z wartością zmiennej CSS (--skala-podgladu),
   – wyłączenie interakcji myszą (pointer-events: none).
*/

/* ------------------------------ */
/* 👁️ Podgląd obrazka (kształt/dekoracja) */
/* ------------------------------ */

#podgladObrazka {
    position: absolute;
    display: none;
    padding: 4px;
    background: #fff;
    border: 1px solid #aaa;
    box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.25);
    z-index: 999;
    pointer-events: none;

    transform-origin: top left;
}

/* 🎨 Podgląd dekoracji: skalowanie zgodnie ze zmienną CSS */
#podgladObrazka.podglad-dekoracja {
    transform: scale(calc(1 / var(--skala-podgladu)));
}

/* 🏺 Podgląd kształtu: 1:1 oryginalna wielkość pliku (bez pomniejszania) */
#podgladObrazka.podglad-ksztalt {
    transform: none;
}

#podgladObrazka img {
    display: block;
    max-width: none;
    height: auto;
}

/* 💬 Kobaltowy dymek dla komórek macierzy (CODE / DECOR) */
.dymek-kobaltowy {
    position: absolute;
    display: none;
    padding: 6px 14px;
    background: linear-gradient(180deg, #355c9d 0%, #224278 100%);
    color: #ffffff;
    font-size: 1.19em;
    font-weight: 500;
    letter-spacing: 0.3px;
    border: 1px solid #1a325e;
    border-radius: 6px;
    box-shadow: 0 4px 14px rgba(23, 45, 84, 0.38);
    pointer-events: none;
    z-index: 1000;
    white-space: nowrap;
}

.dymek-kobaltowy::after {
    content: "";
    position: absolute;
    top: 36px;
    right: 100%;
    border-width: 5px;
    border-style: solid;
    border-color: transparent #2c4f8b transparent transparent;
}

/* 🔄 Gdy dymek wyświetla się po lewej stronie kursora, odwracamy strzałkę na prawą krawędź dymka */
.dymek-kobaltowy.w-lewo::after {
    right: auto;
    left: 100%;
    border-color: transparent transparent transparent #2c4f8b;
}

.dymek-kobaltowy .dymek-linia-nazwa {
    font-size: 0.95em;
    color: #fef08a;
    margin-bottom: 4px;
    line-height: 1.25;
}

.dymek-kobaltowy .dymek-linia-druga {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.dymek-kobaltowy .dymek-linia-kod {
    font-size: 1em;
    color: #ffffff;
    line-height: 1.25;
}

.dymek-kobaltowy .dymek-badge-min {
    font-size: 0.78em;
    font-weight: 600;
    color: #fecdd3;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(254, 205, 211, 0.45);
    border-radius: 4px;
    padding: 1px 7px;
    letter-spacing: 0.3px;
    margin-left: auto;
    white-space: nowrap;
}


/* 🖼️ Miniatury kształtu i dekoracji pod tekstem w dymku (duży, wyraźny podgląd) */
.dymek-kobaltowy .dymek-obrazy {
    display: flex;
    flex-direction: row;
    gap: 12px;
    margin-top: 10px;
    justify-content: flex-start;
    align-items: center;
}

.dymek-kobaltowy .dymek-img-box {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.75);
    border-radius: 8px;
    padding: 4px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
    height: 196px;
    box-sizing: border-box;
}

.dymek-kobaltowy .dymek-img-box img {
    display: block;
    height: 184px;
    width: auto;
    max-width: 288px;
    object-fit: contain;
    border-radius: 5px;
}

.dymek-kobaltowy .dymek-img-box.dymek-box-dekoracja img {
    width: 184px;
    height: 184px;
    object-fit: cover;
}

/* 📦 Lista kartonów w dymku komórki dla trybu ORDER */
.dymek-kobaltowy .dymek-kartony-box {
    display: flex;
    flex-direction: column;
    background: rgba(10, 24, 52, 0.85);
    border: 1px solid rgba(147, 197, 253, 0.35);
    border-radius: 8px;
    padding: 8px 12px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
    height: 196px;
    box-sizing: border-box;
    min-width: 165px;
}

.dymek-kobaltowy .dymek-kartony-naglowek {
    font-size: 0.78em;
    font-weight: 700;
    color: #fef08a;
    letter-spacing: 0.4px;
    margin-bottom: 6px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    padding-bottom: 4px;
    white-space: nowrap;
}

.dymek-kobaltowy .dymek-kartony-lista {
    flex: 1;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-content: flex-start;
    gap: 3px 14px;
    overflow-y: hidden;
    overflow-x: auto;
    padding-right: 2px;
}

.dymek-kobaltowy .dymek-karton-wiersz {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: 0.78em;
    line-height: 1.35;
    color: #e2e8f0;
    white-space: nowrap;
}

.dymek-kobaltowy .dymek-karton-nazwa {
    font-weight: 600;
    color: #93c5fd;
}

.dymek-kobaltowy .dymek-karton-qty {
    font-weight: 700;
    color: #ffffff;
    font-variant-numeric: tabular-nums;
}

.dymek-kobaltowy .dymek-kartony-stopka {
    font-size: 0.76em;
    color: #9ec5f7;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    padding-top: 4px;
    margin-top: 4px;
    text-align: right;
    white-space: nowrap;
}

.dymek-kobaltowy .dymek-kartony-stopka strong {
    color: #fef08a;
    font-weight: 700;
}

.dymek-kobaltowy .dymek-kartony-puste {
    min-width: 155px;
}

.dymek-kobaltowy .dymek-kartony-brak {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 0.76em;
    color: rgba(255, 255, 255, 0.5);
    font-style: italic;
    line-height: 1.35;
}