/* FolderFlow Tabs structural layout */
.folderflow-tabs-wrapper {
    display: flex;
    flex-direction: column;
}

.folderflow-tabs-nav {
    display: flex;
    flex-wrap: wrap;
    position: relative;
    z-index: 2;
    margin-bottom: -1px; /* Align neatly above the folder cards */
}

.folderflow-tab-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-style: solid;
    border-color: #ccc;
    background-color: #f1f1f1;
    color: #333;
    transition: all 0.3s ease, z-index 0s;
    
    /* Order stacking for clean physical layering: left-to-right cascade */
    z-index: 1;
}

/* Establish initial cascading depth of tabs so each tab sits visually in front of the next */
.folderflow-tab-btn:nth-child(1) { z-index: 9; }
.folderflow-tab-btn:nth-child(2) { z-index: 8; }
.folderflow-tab-btn:nth-child(3) { z-index: 7; }
.folderflow-tab-btn:nth-child(4) { z-index: 6; }
.folderflow-tab-btn:nth-child(5) { z-index: 5; }
.folderflow-tab-btn:nth-child(6) { z-index: 4; }
.folderflow-tab-btn:nth-child(7) { z-index: 3; }
.folderflow-tab-btn:nth-child(8) { z-index: 2; }
.folderflow-tab-btn:nth-child(n+9) { z-index: 1; }

/* Overlap handling & visual Z-index folder stacking */
.folderflow-tab-btn.ff-active {
    z-index: 20 !important; /* Promotes active tab to highest visual layer */
}

.folderflow-tab-btn:hover {
    z-index: 15 !important; /* Hovers sit nicely over adjacent inactive elements */
}

/* Eliminate competing overlapping borders with background masking and margin adjustments */
.folderflow-tab-btn {
    box-sizing: border-box;
    background-clip: padding-box; /* Avoids border bleeding under other background layers */
}

.folderflow-tabs-content {
    position: relative;
    z-index: 1;
}

.folderflow-panel {
    border-style: solid;
    border-color: #ccc;
    background-color: #ffffff;
    padding: 20px;
}

/* Caret/indicator arrow */
.folderflow-caret {
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 8px;
    vertical-align: middle;
    border-top: 4px solid;
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
}

.folderflow-tab-btn.ff-active .folderflow-caret {
    transform: rotate(180deg);
}

/* Vertical tabs layouts */
.folderflow-orientation-vertical .folderflow-tabs-wrapper {
    flex-direction: row;
}

.folderflow-orientation-vertical .folderflow-tabs-nav {
    flex-direction: column;
    margin-bottom: 0;
    margin-right: -1px;
}

/* Vertically stacked cascading z-index top-to-bottom */
.folderflow-orientation-vertical .folderflow-tab-btn:nth-child(1) { z-index: 9; }
.folderflow-orientation-vertical .folderflow-tab-btn:nth-child(2) { z-index: 8; }
.folderflow-orientation-vertical .folderflow-tab-btn:nth-child(3) { z-index: 7; }
.folderflow-orientation-vertical .folderflow-tab-btn:nth-child(4) { z-index: 6; }
.folderflow-orientation-vertical .folderflow-tab-btn:nth-child(5) { z-index: 5; }
.folderflow-orientation-vertical .folderflow-tab-btn:nth-child(6) { z-index: 4; }
.folderflow-orientation-vertical .folderflow-tab-btn:nth-child(7) { z-index: 3; }
.folderflow-orientation-vertical .folderflow-tab-btn:nth-child(8) { z-index: 2; }
.folderflow-orientation-vertical .folderflow-tab-btn:nth-child(n+9) { z-index: 1; }

.folderflow-orientation-vertical .folderflow-tabs-content {
    flex-grow: 1;
}

/* Alignment styling */
.folderflow-tab-align-start .folderflow-tabs-nav {
    justify-content: flex-start;
}
.folderflow-tab-align-center .folderflow-tabs-nav {
    justify-content: center;
}
.folderflow-tab-align-end .folderflow-tabs-nav {
    justify-content: flex-end;
}
.folderflow-tab-align-stretch .folderflow-tabs-nav .folderflow-tab-btn {
    flex-grow: 1;
}