/*
 * Shared Admin/SystemAdmin tab contract.
 * Page navigation, Syncfusion content tabs, dialog tabs, and local button tabs
 * share one geometry and interaction language.
 */

.admin-section-tabs,
.system-admin-navigation-tabs,
.tenant-admin-navigation-tabs,
.system-showcase-template-dialog .system-showcase-parameter-tabs,
body:has(.admin-layout) .e-dialog .admin-dialog-tablist {
    align-items: stretch;
    border-bottom: 1px solid var(--evosoft-admin-border);
    box-sizing: border-box;
    display: flex;
    gap: 22px;
    height: var(--evosoft-admin-tab-height);
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-color: var(--evosoft-admin-field-border) transparent;
    scrollbar-width: thin;
}

.admin-section-tabs,
.system-admin-navigation-tabs,
.tenant-admin-navigation-tabs {
    margin-bottom: var(--evosoft-admin-page-gap);
}

.admin-section-tabs__list {
    align-items: stretch;
    display: flex;
    gap: 22px;
    height: var(--evosoft-admin-tab-height);
    min-width: max-content;
}

.admin-section-tabs__link,
.system-admin-navigation-tab.e-btn,
.tenant-admin-navigation-tab.e-btn,
.system-showcase-template-dialog .system-showcase-parameter-tab.e-btn,
body:has(.admin-layout) .e-dialog .admin-dialog-tab {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-sizing: border-box;
    color: var(--evosoft-admin-text-secondary);
    display: inline-flex;
    flex: 0 0 auto;
    font-size: 14px;
    font-weight: 500;
    height: var(--evosoft-admin-tab-height);
    justify-content: center;
    line-height: 20px;
    margin: 0;
    min-height: var(--evosoft-admin-tab-height);
    padding: 0 2px var(--evosoft-admin-tab-label-bottom-space);
    position: relative;
    text-decoration: none;
    text-transform: none;
    white-space: nowrap;
}

/*
 * The shared button baseline is 36px and has higher specificity than a bare
 * tab button class. Stretch button-based tabs to the tablist so their active
 * line always overlays the list divider instead of floating above it.
 */
.admin-layout .system-admin-navigation-tabs > .system-admin-navigation-tab.e-btn,
.admin-layout .tenant-admin-navigation-tabs > .tenant-admin-navigation-tab.e-btn,
body:has(.admin-layout) .e-dialog .system-showcase-parameter-tabs > .system-showcase-parameter-tab.e-btn {
    height: 100%;
    min-height: 100%;
}

.admin-section-tabs__link::after,
.system-admin-navigation-tab.e-btn::after,
.tenant-admin-navigation-tab.e-btn::after,
.system-showcase-template-dialog .system-showcase-parameter-tab.e-btn::after,
body:has(.admin-layout) .e-dialog .admin-dialog-tab::after {
    background: transparent;
    border-radius: 999px 999px 0 0;
    bottom: 0;
    content: "";
    height: 2px;
    left: 2px;
    position: absolute;
    right: 2px;
}

.admin-section-tabs__link:hover,
.admin-section-tabs__link:focus,
.admin-section-tabs__link.is-active,
.system-admin-navigation-tab.e-btn:hover,
.system-admin-navigation-tab.e-btn:focus,
.system-admin-navigation-tab.e-btn.is-active,
.tenant-admin-navigation-tab.e-btn:hover,
.tenant-admin-navigation-tab.e-btn:focus,
.tenant-admin-navigation-tab.e-btn.is-active,
.system-showcase-template-dialog .system-showcase-parameter-tab.e-btn:hover,
.system-showcase-template-dialog .system-showcase-parameter-tab.e-btn:focus,
.system-showcase-template-dialog .system-showcase-parameter-tab.e-btn.is-active,
body:has(.admin-layout) .e-dialog .admin-dialog-tab:hover,
body:has(.admin-layout) .e-dialog .admin-dialog-tab:focus,
body:has(.admin-layout) .e-dialog .admin-dialog-tab--active {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
    color: var(--evosoft-admin-primary);
    outline: none;
    text-decoration: none;
}

.admin-section-tabs__link.is-active,
.system-admin-navigation-tab.e-btn.is-active,
.tenant-admin-navigation-tab.e-btn.is-active,
.system-showcase-template-dialog .system-showcase-parameter-tab.e-btn.is-active,
body:has(.admin-layout) .e-dialog .admin-dialog-tab--active {
    font-weight: 600;
}

.admin-section-tabs__link.is-active::after,
.system-admin-navigation-tab.e-btn.is-active::after,
.tenant-admin-navigation-tab.e-btn.is-active::after,
.system-showcase-template-dialog .system-showcase-parameter-tab.e-btn.is-active::after,
body:has(.admin-layout) .e-dialog .admin-dialog-tab--active::after {
    background: var(--evosoft-admin-primary);
}

/* Dialog tablists reserve one dialog inset above the 44px tab row. */
body:has(.admin-layout) .e-dialog .admin-dialog-tablist {
    align-items: flex-end;
    height: calc(var(--evosoft-admin-tab-height) + var(--evosoft-admin-dialog-tab-padding-top));
    min-height: calc(var(--evosoft-admin-tab-height) + var(--evosoft-admin-dialog-tab-padding-top));
    padding-top: var(--evosoft-admin-dialog-tab-padding-top);
}

/* Syncfusion page and dialog tabs use the same visual contract. */
.admin-layout .e-tab > .e-tab-header,
body:has(.admin-layout) .e-dialog .e-tab > .e-tab-header {
    background: transparent;
    border: 0;
    box-sizing: border-box;
    height: var(--evosoft-admin-tab-height);
    min-height: var(--evosoft-admin-tab-height);
}

body:has(.admin-layout) .e-dialog .e-tab.admin-dialog-tabs > .e-tab-header {
    height: calc(var(--evosoft-admin-tab-height) + var(--evosoft-admin-dialog-tab-padding-top));
    min-height: calc(var(--evosoft-admin-tab-height) + var(--evosoft-admin-dialog-tab-padding-top));
    padding-top: var(--evosoft-admin-dialog-tab-padding-top);
}

body:has(.admin-layout) .e-dialog.admin-dialog--large.admin-dialog--tabbed > .e-dlg-content > .e-tab.admin-dialog-tabs > .e-tab-header {
    flex: 0 0 calc(var(--evosoft-admin-tab-height) + var(--evosoft-admin-dialog-tab-padding-top));
    padding-left: var(--evosoft-admin-dialog-padding-x);
    padding-right: var(--evosoft-admin-dialog-padding-x);
}

.admin-layout .e-tab > .e-tab-header .e-toolbar-items,
body:has(.admin-layout) .e-dialog .e-tab > .e-tab-header .e-toolbar-items {
    background: transparent;
    border-bottom: 1px solid var(--evosoft-admin-border);
    box-sizing: border-box;
    height: var(--evosoft-admin-tab-height);
    min-height: var(--evosoft-admin-tab-height);
    width: 100%;
}

.admin-layout .e-tab > .e-tab-header .e-toolbar-left,
body:has(.admin-layout) .e-dialog .e-tab > .e-tab-header .e-toolbar-left {
    align-items: stretch;
    box-sizing: border-box;
    display: flex;
    height: var(--evosoft-admin-tab-height);
    min-height: var(--evosoft-admin-tab-height);
    top: 0;
}

.admin-layout .e-tab > .e-tab-header .e-toolbar-item,
body:has(.admin-layout) .e-dialog .e-tab > .e-tab-header .e-toolbar-item {
    background: transparent;
    box-sizing: border-box;
    height: var(--evosoft-admin-tab-height);
    margin: 0;
    min-height: var(--evosoft-admin-tab-height);
    padding: 0;
}

.admin-layout .e-tab > .e-tab-header .e-toolbar-item + .e-toolbar-item,
body:has(.admin-layout) .e-dialog .e-tab > .e-tab-header .e-toolbar-item + .e-toolbar-item {
    margin-left: 22px;
}

.admin-layout .e-tab > .e-tab-header .e-tab-wrap,
body:has(.admin-layout) .e-dialog .e-tab > .e-tab-header .e-tab-wrap {
    align-items: center;
    background: transparent;
    box-sizing: border-box;
    color: var(--evosoft-admin-text-secondary);
    display: inline-flex;
    font-size: 14px;
    font-weight: 500;
    height: var(--evosoft-admin-tab-height);
    line-height: 20px;
    min-height: var(--evosoft-admin-tab-height);
    padding: 0 2px var(--evosoft-admin-tab-label-bottom-space);
    position: relative;
    text-transform: none;
}

.admin-layout .e-tab > .e-tab-header .e-tab-text,
body:has(.admin-layout) .e-dialog .e-tab > .e-tab-header .e-tab-text {
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
    height: auto;
    line-height: inherit;
    text-transform: none;
}

.admin-layout .e-tab > .e-tab-header .e-toolbar-item:hover .e-tab-wrap,
.admin-layout .e-tab > .e-tab-header .e-toolbar-item:hover :is(.e-tab-text, .e-tab-icon),
.admin-layout .e-tab.e-focused > .e-tab-header .e-toolbar-item .e-tab-wrap:focus,
.admin-layout .e-tab.e-focused > .e-tab-header .e-toolbar-item .e-tab-wrap:focus :is(.e-tab-text, .e-tab-icon),
body:has(.admin-layout) .e-dialog .e-tab > .e-tab-header .e-toolbar-item:hover .e-tab-wrap,
body:has(.admin-layout) .e-dialog .e-tab > .e-tab-header .e-toolbar-item:hover :is(.e-tab-text, .e-tab-icon),
body:has(.admin-layout) .e-dialog .e-tab.e-focused > .e-tab-header .e-toolbar-item .e-tab-wrap:focus,
body:has(.admin-layout) .e-dialog .e-tab.e-focused > .e-tab-header .e-toolbar-item .e-tab-wrap:focus :is(.e-tab-text, .e-tab-icon) {
    color: var(--evosoft-admin-primary);
}

.admin-layout .e-tab > .e-tab-header .e-toolbar-item.e-active .e-tab-wrap,
.admin-layout .e-tab > .e-tab-header .e-toolbar-item.e-active :is(.e-tab-text, .e-tab-icon),
body:has(.admin-layout) .e-dialog .e-tab > .e-tab-header .e-toolbar-item.e-active .e-tab-wrap,
body:has(.admin-layout) .e-dialog .e-tab > .e-tab-header .e-toolbar-item.e-active :is(.e-tab-text, .e-tab-icon) {
    color: var(--evosoft-admin-primary);
    font-weight: 600;
}

/*
 * Bind the visual indicator to the active item instead of JS-measured width.
 * Syncfusion still owns selection, keyboard behavior, and overflow scrolling.
 */
.admin-layout .e-tab > .e-tab-header .e-indicator,
body:has(.admin-layout) .e-dialog .e-tab > .e-tab-header .e-indicator {
    display: none;
}

.admin-layout .e-tab > .e-tab-header .e-toolbar-item.e-active .e-tab-wrap::after,
body:has(.admin-layout) .e-dialog .e-tab > .e-tab-header .e-toolbar-item.e-active .e-tab-wrap::after {
    background: var(--evosoft-admin-primary);
    border-radius: 999px 999px 0 0;
    bottom: 0;
    content: "";
    height: 2px;
    left: 2px;
    position: absolute;
    right: 2px;
}

.admin-layout .e-tab > .e-tab-header .e-toolbar-item:focus,
.admin-layout .e-tab > .e-tab-header .e-tab-wrap:focus,
.admin-layout .e-tab > .e-tab-header :is(.e-scroll-nav, .e-hor-nav):focus,
.admin-layout .e-tab > .e-tab-header :is(.e-scroll-nav, .e-hor-nav):active,
body:has(.admin-layout) .e-dialog .e-tab > .e-tab-header .e-toolbar-item:focus,
body:has(.admin-layout) .e-dialog .e-tab > .e-tab-header .e-tab-wrap:focus,
body:has(.admin-layout) .e-dialog .e-tab > .e-tab-header :is(.e-scroll-nav, .e-hor-nav):focus,
body:has(.admin-layout) .e-dialog .e-tab > .e-tab-header :is(.e-scroll-nav, .e-hor-nav):active {
    box-shadow: none !important;
    outline: none !important;
}

.admin-layout .e-tab > .e-tab-header :is(.e-scroll-nav, .e-hor-nav),
body:has(.admin-layout) .e-dialog .e-tab > .e-tab-header :is(.e-scroll-nav, .e-hor-nav) {
    background: transparent;
    border: 0;
    box-shadow: none;
    height: var(--evosoft-admin-tab-height);
}

.admin-layout .e-tab > .e-tab-header :is(.e-scroll-nav, .e-hor-nav):hover .e-nav-arrow,
.admin-layout .e-tab > .e-tab-header .e-hor-nav:hover :is(.e-popup-up-icon, .e-popup-down-icon),
body:has(.admin-layout) .e-dialog .e-tab > .e-tab-header :is(.e-scroll-nav, .e-hor-nav):hover .e-nav-arrow,
body:has(.admin-layout) .e-dialog .e-tab > .e-tab-header .e-hor-nav:hover :is(.e-popup-up-icon, .e-popup-down-icon) {
    color: var(--evosoft-admin-primary) !important;
}

.admin-layout .e-tab .e-toolbar-item.e-disabled,
body:has(.admin-layout) .e-dialog .e-tab .e-toolbar-item.e-disabled {
    color: var(--evosoft-admin-disabled-text);
    cursor: not-allowed;
    opacity: 0.65;
}

.admin-section-tabs::-webkit-scrollbar,
.system-admin-navigation-tabs::-webkit-scrollbar,
.tenant-admin-navigation-tabs::-webkit-scrollbar,
.system-showcase-template-dialog .system-showcase-parameter-tabs::-webkit-scrollbar,
body:has(.admin-layout) .e-dialog .admin-dialog-tablist::-webkit-scrollbar {
    height: var(--evosoft-admin-scrollbar-size);
}

.admin-section-tabs::-webkit-scrollbar-track,
.system-admin-navigation-tabs::-webkit-scrollbar-track,
.tenant-admin-navigation-tabs::-webkit-scrollbar-track,
.system-showcase-template-dialog .system-showcase-parameter-tabs::-webkit-scrollbar-track,
body:has(.admin-layout) .e-dialog .admin-dialog-tablist::-webkit-scrollbar-track {
    background: transparent;
}

.admin-section-tabs::-webkit-scrollbar-thumb,
.system-admin-navigation-tabs::-webkit-scrollbar-thumb,
.tenant-admin-navigation-tabs::-webkit-scrollbar-thumb,
.system-showcase-template-dialog .system-showcase-parameter-tabs::-webkit-scrollbar-thumb,
body:has(.admin-layout) .e-dialog .admin-dialog-tablist::-webkit-scrollbar-thumb {
    background: var(--evosoft-admin-field-border);
    border-radius: var(--evosoft-admin-radius);
}

@media (max-width: 768.98px) {
    .admin-section-tabs__list,
    .system-admin-navigation-tabs,
    .tenant-admin-navigation-tabs,
    .system-showcase-template-dialog .system-showcase-parameter-tabs,
    body:has(.admin-layout) .e-dialog .admin-dialog-tablist {
        gap: 18px;
    }
}