/* =============================================================
   Tree Navigation Menu v1.0
   ============================================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');

:root {
    --tnm-font:          'Inter', system-ui, sans-serif;

    --tnm-bg:            #f5efe2;
    --tnm-border:        #c9bfa0;
    --tnm-line:          #e0d5be;

    --tnm-text:          #4a3520;
    --tnm-text-muted:    #9e8c6e;

    --tnm-hover-bg:      #ede5d0;
    --tnm-active-bg:     #e8dfc8;
    --tnm-active-text:   #8b6f47;
    --tnm-active-border: #8b6f47;

    --tnm-folder-color:  #8b6f47;
    --tnm-page-color:    #b0a080;

    --tnm-indent:        16px;
    --tnm-row-h:         22px;
    --tnm-font-size:     13px;
    --tnm-icon-size:     16px;
    --tnm-radius:        4px;
    --tnm-transition:    140ms ease;
}

/* ── Widget – neutralizacja paddingu motywu ─────────────────── */
.widget_tnm_widget {
    margin:  0 0px !important;
    padding: 0 !important;
}

.widget-title {
    background: #f5efe2;
}

/* ── Wrapper drzewa ─────────────────────────────────────────── */
.tnm-tree {
    font-family:  var(--tnm-font);
    font-size:    var(--tnm-font-size);
    color:        var(--tnm-text);
    background:   var(--tnm-bg);
    border-top:   1px solid var(--tnm-border);
    border-bottom: 1px solid var(--tnm-border);
    border-left:  none;
    border-right: none;
    border-radius: 0;
    padding:      4px 0;
    margin:       0;
    width:        100%;
    max-width:    100%;
    max-height:   none;
    overflow-y:   visible;
    user-select:  none;
    line-height:  1;
}

/* ── Listy ─────────────────────────────────────────────────── */
.tnm-list {
    list-style: none;
    margin:     0;
    padding:    0;
}

.tnm-list.tnm-subtree {
    padding-left: var(--tnm-indent);
    position:     relative;
    width:        100%;
    flex-basis:   100%;
}

.tnm-list.tnm-subtree::before {
    content:    '';
    position:   absolute;
    left:       9px;
    top:        0;
    bottom:     4px;
    width:      1px;
    background: var(--tnm-line);
}

/* ── Elementy ───────────────────────────────────────────────── */
.tnm-item {
    position:    relative;
    display:     flex;
    align-items: center;
    flex-wrap:   wrap;
    border-radius: var(--tnm-radius);
    transition:  background var(--tnm-transition);
    margin-bottom: 0 !important;
}

.tnm-tree li {
    margin-bottom: 0 !important;
}

.tnm-list.tnm-subtree > .tnm-item::before {
    content:    '';
    position:   absolute;
    left:       -11px;
    top:        calc(var(--tnm-row-h) / 2);
    width:      11px;
    height:     1px;
    background: var(--tnm-line);
}

.tnm-item:not(.tnm-current):hover {
    background: var(--tnm-hover-bg);
}

.tnm-item.tnm-current {
    background:     var(--tnm-active-bg);
    outline:        2px solid var(--tnm-active-border);
    outline-offset: -2px;
}

/* ── Toggle (strzałka) ─────────────────────────────────────── */
.tnm-toggle {
    flex-shrink:     0;
    width:           16px;
    height:          var(--tnm-row-h);
    background:      none;
    border:          none;
    cursor:          pointer;
    padding:         0;
    display:         flex;
    align-items:     center;
    justify-content: center;
    color:           var(--tnm-text-muted);
    border-radius:   3px;
    transition:      background var(--tnm-transition), color var(--tnm-transition);
}

.tnm-toggle:hover {
    background: var(--tnm-hover-bg);
    color:      var(--tnm-text);
}

.tnm-arrow {
    display:       block;
    width:         0;
    height:        0;
    color:         #f00;
    border-top:    5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left:   8px solid currentColor;
    transition:    transform var(--tnm-transition);
}

.tnm-toggle[aria-expanded="true"] .tnm-arrow {
    transform: rotate(90deg);
}

/* ── Ikony ─────────────────────────────────────────────────── */
.tnm-icon {
    flex-shrink:    0;
    width:          var(--tnm-icon-size);
    height:         var(--tnm-icon-size);
    margin:         0 4px 0 2px;
    display:        inline-block;
    vertical-align: middle;
    -webkit-mask-size: cover;
    mask-size:      cover;
}

/* ── Folder zamknięty ───────────────────────────────────────── */
.tnm-icon-folder {
    background-color: var(--tnm-folder-color);
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='currentColor'%3E%3Cpath d='M2 6a2 2 0 012-2h4l2 2h6a2 2 0 012 2v6a2 2 0 01-2 2H4a2 2 0 01-2-2V6z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='currentColor'%3E%3Cpath d='M2 6a2 2 0 012-2h4l2 2h6a2 2 0 012 2v6a2 2 0 01-2 2H4a2 2 0 01-2-2V6z'/%3E%3C/svg%3E");
}

/* ── Folder otwarty – klasa dodawana przez JS ───────────────── */
.tnm-icon.tnm-icon-folder.tnm-icon-folder--open {
    background-color: #cc7700 !important;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='currentColor' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M5 19a2 2 0 01-2-2V7a2 2 0 012-2h4l2 2h8a2 2 0 012 2v1M5 19h14a2 2 0 002-2v-5a2 2 0 00-2-2H9a2 2 0 00-2 2v5a2 2 0 01-2 2z'/%3E%3C/svg%3E") !important;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='currentColor' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M5 19a2 2 0 01-2-2V7a2 2 0 012-2h4l2 2h8a2 2 0 012 2v1M5 19h14a2 2 0 002-2v-5a2 2 0 00-2-2H9a2 2 0 00-2 2v5a2 2 0 01-2 2z'/%3E%3C/svg%3E") !important;
}

/* ── Strona ─────────────────────────────────────────────────── */
.tnm-icon-page {
    background-color: var(--tnm-page-color);
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='currentColor'%3E%3Cpath fill-rule='evenodd' d='M4 4a2 2 0 012-2h4.586A2 2 0 0112 2.586L15.414 6A2 2 0 0116 7.414V16a2 2 0 01-2 2H6a2 2 0 01-2-2V4zm2 6a1 1 0 011-1h6a1 1 0 110 2H7a1 1 0 01-1-1zm1 3a1 1 0 100 2h6a1 1 0 100-2H7z' clip-rule='evenodd'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='currentColor'%3E%3Cpath fill-rule='evenodd' d='M4 4a2 2 0 012-2h4.586A2 2 0 0112 2.586L15.414 6A2 2 0 0116 7.414V16a2 2 0 01-2 2H6a2 2 0 01-2-2V4zm2 6a1 1 0 011-1h6a1 1 0 110 2H7a1 1 0 01-1-1zm1 3a1 1 0 100 2h6a1 1 0 100-2H7z' clip-rule='evenodd'/%3E%3C/svg%3E");
}

/* ── Ikonka aktualnej strony ────────────────────────────────── */
.tnm-item.tnm-current > .tnm-icon-page {
    background-color: #cc7700 !important;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='currentColor' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z'/%3E%3C/svg%3E") !important;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='currentColor' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z'/%3E%3C/svg%3E") !important;
}

/* ── Linki ─────────────────────────────────────────────────── */
.tnm-link {
    flex:            1;
    display:         flex;
    align-items:     center;
min-height:      var(--tnm-row-h);
    height:          auto;
    padding:         0px 0px 2px 2px;
    color:           var(--tnm-text);
    text-decoration: none;
    white-space:     normal;
    overflow:        visible;
    text-overflow:   unset;
    font-size:       var(--tnm-font-size);
    transition:      color var(--tnm-transition);
    word-break:      break-word; 
}

/*  bez zawijania spisu tresci 
white-space:     nowrap;
overflow:        hidden;
text-overflow:   ellipsis;
height:          var(--tnm-row-h);
*/




.tnm-item:hover > .tnm-link {
    color: var(--tnm-active-text);
}

.tnm-link--active,
.tnm-link--active:hover {
    color:       var(--tnm-active-text);
    font-weight: 600;
}

/* ── Animacja ───────────────────────────────────────────────── */
.tnm-subtree {
    overflow:   hidden;
    transition: none;
}

.tnm-subtree.tnm-animating {
    display:    block !important;
    overflow:   hidden;
    transition: max-height 200ms ease;
}