/* *********************************************** */
/* *********** Tabs Manager Component ************ */
/* *********************************************** */

/* Tabs Manager Container */
.mf-tabs-manager {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    background-color: var(--color-base-200);
    color: color-mix(in oklab, var(--color-base-content) 50%, transparent);
    border-radius: .5rem;
}

/* Tabs Header using DaisyUI tabs component */
.mf-tabs-header {
    display: flex;
    gap: 0;
    flex-shrink: 1;
    min-height: 25px;

    overflow-x: hidden;
    overflow-y: hidden;
    white-space: nowrap;
}

.mf-tabs-header-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;

    width: 100%;
    /*overflow: hidden;  important */
}

/* Individual Tab Button using DaisyUI tab classes */
.mf-tab-button {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0 0.5rem 0 1rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.mf-tab-button:hover {
    color: var(--color-base-content); /* Change text color on hover */
}

.mf-tab-button.mf-tab-active {
    --depth: 1;
    background-color: var(--color-base-100);
    color: var(--color-base-content);
    border-radius: .25rem;
    border-bottom: 4px solid var(--color-primary);
    box-shadow: 0 1px oklch(100% 0 0/calc(var(--depth) * .1)) inset, 0 1px 1px -1px color-mix(in oklab, var(--color-neutral) calc(var(--depth) * 50%), #0000), 0 1px 6px -4px color-mix(in oklab, var(--color-neutral) calc(var(--depth) * 100%), #0000);
}

/* Tab Label */
.mf-tab-label {
    user-select: none;
    white-space: nowrap;
    max-width: 150px;
}

/* Tab Close Button */
.mf-tab-close-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1rem;
    height: 1rem;
    border-radius: 0.25rem;
    font-size: 1.25rem;
    line-height: 1;
    @apply text-base-content/50;
    transition: all 0.2s ease;
}

.mf-tab-close-btn:hover {
    @apply bg-base-300 text-error;
}

/* Tab Content Area */
.mf-tab-content {
    flex: 1;
    overflow: auto;
    height: 100%;
}

.mf-tab-content-wrapper {
    flex: 1;
    overflow: auto;
    background-color: var(--color-base-100);
    padding: 0.5rem;
    border-top: 1px solid var(--color-border-primary);
}

/* Empty Content State */
.mf-empty-content {
    align-items: center;
    justify-content: center;
    height: 100%;
    @apply text-base-content/50;
    font-style: italic;
}