/* ======================================================
   ICD TREE – STYL DRZEWA DIAGNOSTYCZNEGO
   ====================================================== */


/* ======================================================
   1. KONTENER DRZEWA
   ====================================================== */

#disorders{
display:flex;
flex-direction:column;
gap:10px;
}


/* ======================================================
   2. KATEGORIA GŁÓWNA (ACCORDION)
   ====================================================== */

.accordion{

position:relative;

width:100%;
padding:10px 12px;

font-size:14px;
font-weight:600;
color:#222;
letter-spacing:0.1px;


border:2px solid #d6deea;
border-radius:5px;

display:flex;
align-items:center;
gap:8px;

min-height:44px;

cursor:pointer;

line-height:1.25;

transform-origin:center;

will-change:background, box-shadow;

transition:
background .18s ease,
border-color .18s ease,
box-shadow .18s ease,
transform .12s ease;

}

/* ======================================================
   GŁĘBOKOŚĆ KATEGORII
   ====================================================== */

/* ======================================================
   GŁĘBOKOŚĆ KATEGORII – OPACITY SYSTEM
   ====================================================== */

/* poziom 1 */

#disorders > div > button.accordion{
background:rgba(120,130,150,0.20);
}

/* poziom 2 – trochę lżejszy */

#disorders .panel > div > button.accordion{
background:rgba(120,130,150,0.15);
}

/* poziom 3 */

#disorders .panel .panel > div > button.accordion{
background:rgba(120,130,150,0.10);
}

/* poziom 4 */

#disorders .panel .panel .panel > div > button.accordion{
background:rgba(120,130,150,0.04);
}

/* poziom 5 */

#disorders .panel .panel .panel .panel > div > button.accordion{
background:rgba(120,130,150,0.00);
}
/* ======================================================
   3. NODE HOVER (subtelny highlight)
   ====================================================== */

.accordion:hover{
transform:translateY(-2px);
}

.accordion:not(.no-preview):hover{
background:rgba(25,118,210,0.12);
border-color:rgba(25,118,210,0.30);
box-shadow:
0 0 0 1px rgba(25,118,210,0.12),
0 2px 4px rgba(0,0,0,0.04);
}

.accordion:not(.no-preview):hover::before{
content:"";
position:absolute;
left:0;
top:0;
right:0;
bottom:0;
background:rgba(25,118,210,0.05);
border-radius:5px;
pointer-events:none;
z-index:0;
}
/* ======================================================
   PARENT HIGHLIGHT – SUBTELNIEJSZE RAMKI
   ====================================================== */
/* ======================================================
   PARENT HIGHLIGHT – JAŚNIEJSZY W DÓŁ DRZEWA
   ====================================================== */

/* poziom 1 */

#disorders > div > .accordion.parent-hover{

border:2px solid rgba(25,118,210,0.45);

box-shadow:
0 0 8px rgba(25,118,210,0.25),
0 0 0 2px rgba(25,118,210,0.18);

}

/* poziom 2 */

.panel > div > .accordion.parent-hover{

border:2px solid rgba(25,118,210,0.40);

box-shadow:
0 0 7px rgba(25,118,210,0.22),
0 0 0 2px rgba(25,118,210,0.15);

}

/* poziom 3 */

.panel .panel > div > .accordion.parent-hover{

border:2px solid rgba(25,118,210,0.35);

box-shadow:
0 0 6px rgba(25,118,210,0.18),
0 0 0 2px rgba(25,118,210,0.12);

}

/* poziom 4 */

.panel .panel .panel > div > .accordion.parent-hover{

border:2px solid rgba(25,118,210,0.30);

box-shadow:
0 0 5px rgba(25,118,210,0.15),
0 0 0 2px rgba(25,118,210,0.10);

}

/* poziom 5 */

.panel .panel .panel .panel > div > .accordion.parent-hover{

border:2px solid rgba(25,118,210,0.25);

box-shadow:
0 0 4px rgba(25,118,210,0.12),
0 0 0 2px rgba(25,118,210,0.08);

}

/* ======================================================
   5. POWOLNY FADE PARENTÓW (gdy mysz opuści drzewo)
   ====================================================== */

.accordion.parent-fade{

background:#f6f8ff;

border-color:rgba(25,118,210,0.05);

box-shadow:0 0 0 0 rgba(25,118,210,0);

transition:
border-color 1.8s ease,
box-shadow 3s ease;

}


/* ======================================================
   6. iOS PRESS EFFECT
   ====================================================== */


/* ======================================================
   6. iOS PRESS EFFECT
   ====================================================== */

/* poziom 0 – mocny */

.depth-0:active{
transform:translateY(2px) scale(.985);
box-shadow:
0 0 0 3px rgba(124,77,255,0.22),
0 3px 10px rgba(124,77,255,0.14);
}

/* poziom 1 – średni */

.depth-1:active{
transform:translateY(1px) scale(.988);
box-shadow:
0 0 0 2px rgba(124,77,255,0.18),
0 2px 6px rgba(124,77,255,0.12);
}

/* poziom 2 – lekki */

.depth-2:active{
transform:none;
box-shadow:none;
}

/* poziom 3 – prawie brak */

.depth-3:active{
transform:none;
box-shadow:none;
}

/* poziom 4 – brak */

.depth-4:active{
transform:none;
box-shadow:none;
}

/* ======================================================
   7. STRZAŁKA ROZWIJANIA
   ====================================================== */

.arrow{

font-size:12px;
width:14px;

flex-shrink:0;

display:inline-block;

transition:transform .2s ease;

}

.accordion.open .arrow{
transform:rotate(90deg);
}


/* ======================================================
   8. PANEL DRZEWA
   ====================================================== */

.panel{

display:none;

margin-left:18px;
padding-left:18px;

}


/* ======================================================
   9. ELEMENT DRZEWA
   ====================================================== */

.panel > div{

position:relative;

z-index:1;

margin:6px 0;

border-radius:6px;

transition:background .28s cubic-bezier(.22,.61,.36,1);

}


.panel > div::after{

content:"";
position:absolute;

left:-18px;
top:-6px;
bottom:-6px;

width:2px;

background:#e3e8f3;

z-index:2;

}

.panel > div::before{

content:"";
position:absolute;

left:-18px;
top:22px;

width:18px;
height:2px;

background:#e3e8f3;

z-index:2;

}
/* skrócenie ostatniej linii */

.panel > div:last-child::after{
bottom:calc(100% - 22px);
}





/* ======================================================
   12. PRZYCISK DIAGNOZY
   ====================================================== */

.disorder{

width:100%;

padding:8px 12px;



border:1px solid #e1e1e1;
border-radius:6px;

font-size:13px;
font-weight:400;

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

text-align:left;

min-height:42px;

cursor:pointer;

line-height:1.35;

white-space:normal;
word-break:break-word;

transition:
background .20s ease,
border-color .20s ease;

}

.disorder:hover{
border-color:#c7d2fe;
}


/* ======================================================
   13. PODKATEGORIA ICD
   ====================================================== */

.subcategory{

font-weight:500;



border-color:#e6e6e6;

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

text-align:left;

line-height:1.35;

white-space:normal;
word-break:break-word;

}


/* ======================================================
   14. LIŚĆ DRZEWA
   ====================================================== */

.leaf{

font-weight:400;



border-color:#ececec;

padding:8px 10px;

color:#333;

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

text-align:left;

line-height:1.35;

white-space:normal;
word-break:break-word;

}
/* ======================================================
   15. TREE PATH FLOW (animacja kliknięcia)
   ====================================================== */

.tree-path-flash{
animation:treePathFlow 3.4s ease;
}

@keyframes treePathFlow{

0%{
box-shadow:0 0 0 0 rgba(25,118,210,0);
}

20%{
box-shadow:
0 0 0 1.4px rgba(25,118,210,0.18),
0 0 5px rgba(25,118,210,0.08);
}

70%{
box-shadow:
0 0 0 1.4px rgba(25,118,210,0.18),
0 0 5px rgba(25,118,210,0.08);
}

100%{
box-shadow:0 0 0 0 rgba(25,118,210,0);
}

}
/* ======================================================
   FREEZE HOVER GDY MYSZ OPUŚCI DRZEWO
   ====================================================== */

body.tree-leaving .tree-hover-freeze{

background:rgba(124,77,255,0.02);

border-color:rgba(124,77,255,0.08);

box-shadow:0 0 0 0 rgba(124,77,255,0);

transition:
background 2.2s ease,
border-color 2.6s ease,
box-shadow 3.8s ease;

}

/* Zmiana koloru tła i obramowania dla zaznaczonego elementu */
/* wybrana diagnoza - fioletowy */
.accordion.selected {
  background-color: #e8d6ff; /* Jasny fiolet */
  border-color: #8a4fff;     /* Fioletowe obramowanie */
  color: #5a2a99;            /* Fioletowy kolor tekstu */
}

/* Zmiana koloru strzałki na fioletowy */
.accordion.selected .arrow {
  color: #5a2a99;
}