/* CM Tabs Styles */
.cm-tabs {
    --cm-tab-bg: #f5f5f5;
    --cm-tab-color: #333;
    --cm-tab-hover-bg: #e0e0e0;
    --cm-tab-hover-color: #000;
    --cm-tab-active-bg: #fff;
    --cm-tab-active-color: #000;
    --cm-tab-content-bg: #fff;
    --cm-tab-content-color: #333;
    --cm-tab-border-color: #ddd;
    --cm-tab-nav-width: 200px;
    
    position: relative;
    display: flex;
    flex-direction: column;
    margin: 20px 0;
    border: 1px solid var(--cm-tab-border-color);
    min-height: 400px; /* Ensure consistent height */
}

/* Tab Navigation */
.cm-tabs .cm-tab-nav {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    background: var(--cm-tab-bg);
}

.cm-tabs .cm-tab-nav li {
    padding: 10px 20px;
    cursor: pointer;
    background: var(--cm-tab-bg);
    color: var(--cm-tab-color);
    transition: all 0.3s ease;
    border-bottom: 1px solid var(--cm-tab-border-color);
}

.cm-tabs .cm-tab-nav li:hover {
    background: var(--cm-tab-hover-bg);
    color: var(--cm-tab-hover-color);
}

.cm-tabs .cm-tab-nav li.active {
    background: var(--cm-tab-active-bg);
    color: var(--cm-tab-active-color);
}

/* Tab Content */
.cm-tabs .cm-tab-content {
    display: none;
    padding: 20px;
    background: var(--cm-tab-content-bg);
    flex: 1;
}

.cm-tabs .cm-tab-content.active {
    display: block;
}

/* Horizontal Tabs (Default) */
.cm-tabs[data-presentation="horzTabs"] {
    flex-direction: column;
}

.cm-tabs[data-presentation="horzTabs"] .cm-tab-nav {
    flex-direction: row;
    border-bottom: 1px solid var(--cm-tab-border-color);
}

.cm-tabs[data-presentation="horzTabs"] .cm-tab-nav li {
    border-right: 1px solid var(--cm-tab-border-color);
    border-bottom: none;
    margin-bottom: -1px;
}

.cm-tabs[data-presentation="horzTabs"] .cm-tab-nav li.active {
    border-bottom: 1px solid var(--cm-tab-active-bg);
}

/* Vertical Tabs Left */
.cm-tabs[data-presentation="vertTabsLeft"] {
    flex-direction: row;
}

.cm-tabs[data-presentation="vertTabsLeft"] .cm-tab-nav {
    flex-direction: column;
    width: var(--cm-tab-nav-width);
    border-right: 1px solid var(--cm-tab-border-color);
}

.cm-tabs[data-presentation="vertTabsLeft"] .cm-tab-nav li {
    border-bottom: 1px solid var(--cm-tab-border-color);
    border-right: none;
    margin-right: -1px;
}

.cm-tabs[data-presentation="vertTabsLeft"] .cm-tab-nav li.active {
    border-right: 1px solid var(--cm-tab-active-bg);
}

.cm-tabs[data-presentation="vertTabsLeft"] .cm-tab-content {
    flex: 1;
    border-left: none;
}

/* Vertical Tabs Right */
.cm-tabs[data-presentation="vertTabsRight"] {
    flex-direction: row;
}

.cm-tabs[data-presentation="vertTabsRight"] .cm-tab-nav {
    flex-direction: column;
    width: var(--cm-tab-nav-width);
    order: 2;
    border-left: 1px solid var(--cm-tab-border-color);
}

.cm-tabs[data-presentation="vertTabsRight"] .cm-tab-content {
    order: 1;
    flex: 1;
    border-right: none;
}

.cm-tabs[data-presentation="vertTabsRight"] .cm-tab-nav li {
    border-bottom: 1px solid var(--cm-tab-border-color);
    border-left: none;
    margin-left: -1px;
}

.cm-tabs[data-presentation="vertTabsRight"] .cm-tab-nav li.active {
    border-left: 1px solid var(--cm-tab-active-bg);
}

/* Accordion Styles */
.cm-tabs[data-presentation^="accordion"] {
    flex-direction: column;
}

.cm-tabs[data-presentation^="accordion"] .cm-tab-nav {
    flex-direction: column;
    width: 100%;
}

.cm-tabs[data-presentation^="accordion"] .cm-tab-content {
    display: none;
    border-bottom: 1px solid var(--cm-tab-border-color);
}

.cm-tabs[data-presentation^="accordion"] .cm-tab-nav li {
    border-bottom: 1px solid var(--cm-tab-border-color);
    width: 100%;
}

.cm-tabs[data-presentation^="accordion"] .cm-tab-nav li.active + .cm-tab-content {
    display: block;
}

/* Accordion Top Open */
.cm-tabs[data-presentation="accordionTopOpen"] .cm-tab-nav li.active + .cm-tab-content {
    display: block;
}

/* Responsive Design */
@media screen and (max-width: 768px) {
    .cm-tabs[data-presentation="horzTabs"] .cm-tab-nav,
    .cm-tabs[data-presentation="vertTabsLeft"] .cm-tab-nav,
    .cm-tabs[data-presentation="vertTabsRight"] .cm-tab-nav {
        flex-direction: column;
        width: 100%;
    }

    .cm-tabs[data-presentation="vertTabsLeft"],
    .cm-tabs[data-presentation="vertTabsRight"] {
        flex-direction: column;
    }

    .cm-tabs[data-presentation="vertTabsLeft"] .cm-tab-nav,
    .cm-tabs[data-presentation="vertTabsRight"] .cm-tab-nav {
        border-right: none;
        border-left: none;
        border-bottom: 1px solid var(--cm-tab-border-color);
    }

    .cm-tabs .cm-tab-nav li {
        border-right: none;
        border-bottom: 1px solid var(--cm-tab-border-color);
        margin: 0;
    }

    .cm-tabs .cm-tab-nav li.active {
        border-right: none;
        border-left: none;
    }

    .cm-tabs .cm-tab-content {
        border: none;
    }
}