.e-tab .e-tab-header .e-toolbar-item .e-tab-wrap {
color:black;
}
.e-tab .e-tab-header .e-toolbar-item.e-active .e-tab-wrap:hover .e-tab-text, .e-tab .e-tab-header .e-toolbar-item.e-active .e-tab-wrap:hover .e-tab-icon {
    color: var(--foo-blue2)
}
/* Tab header container */
.e-tab .e-tab-header {
    height: 32px; /* Match rendered height */
}

    /* Individual tab items */
    .e-tab .e-tab-header .e-toolbar-item {
        min-width: 120px; /* Set desired tab width */
        min-height: 60px; /* Match rendered min-height */
        height: 60px; /* Match rendered height */
        padding: 4px; /* Match rendered padding */
        border: 1px solid transparent; /* Match rendered border for inactive tabs */
        background: #f8f9fa; /* Inactive tab background color (light gray, Bootstrap-inspired) */
        color: #495057; /* Inactive tab text color */
        align-content: center;
        align-items: center;
        display: inline-flex;
        cursor: pointer;
    }

        /* Active tab styling */
        .e-tab .e-tab-header .e-toolbar-item.e-active {
            background: #ffffff; /* Active tab background color (white, per rendered style) */
            color: #212529; /* Active tab text color (dark, Bootstrap-inspired) */
            border: 1px solid #dee2e6; /* Match rendered border */
            border-radius: 4px 4px 0 0; /* Match rendered border-radius */
            border-bottom: 1px solid #ffffff; /* Match rendered border-bottom */
            margin: 0; /* Match rendered margin */
            padding-bottom: 0; /* Match rendered padding-bottom */
            position: unset; /* Match rendered position */
        }

        /* Hover effect for inactive tabs */
        .e-tab .e-tab-header .e-toolbar-item:not(.e-active):hover {
            background: #e9ecef; /* Hover background for inactive tabs (slightly darker gray) */
            color: var(--foo-blue2) !important;
        }

        /* Active tab hover (to match rendered style) */
        .e-tab .e-tab-header .e-toolbar-item.e-active {
            background: var(--foo-blue2)!important; 
        }
        .e-tab .e-tab-header .e-toolbar-item.e-active:hover {
            background: var(--foo-blue) !important;
        }
        .e-tab .e-tab-header .e-toolbar-item.e-active.e-ileft .e-tab-text, .e-tab .e-tab-header .e-toolbar-item.e-active.e-iright .e-tab-text {
            color: white!important;
        }
        /* Tab text styling */
        .e-tab .e-tab-header .e-toolbar-item .e-tab-text {
            padding: 0 10px; /* Adjust padding for text alignment */
            line-height: 60px; /* Match tab height for vertical centering */
            font-size: 18px !important;
            font-weight: 600 !important;
            min-height: 60px;
        }
        .e-tab .e-tab-header .e-toolbar-item:not(.e-separator) {
            height: 60px;
            margin: 0;
            min-height: 60px;
            min-width: auto;
            padding: 0;
            
        }
 
.card-body.position-relative {
    position: relative;
}

.test-mode-switch {
    position: absolute;
    top: 40px; /* Adjust to vertically center with tab text; lower for "similar position" */
    right: 30px; /* Pull to right edge */
    z-index: 1; /* Ensure above tab header if needed */
    height: 24px; /* Optional: lower height for finer positioning */
    display: flex;
    align-items: center;
}
.e-tab .e-tab-content {
    top: 60px!important; /* Match your tab header height */
}

/* Left padding for workspace tab content */
.workspace-tabs .e-tab-content {
    padding-left: 15px;
}

/* ============================================================
   Editor-inline tabs — compact tabs used inside editor dialogs
   (WorkspaceEditor "Import Configuration", VaultEditor
   "Configuration Source"). Scoped via the .editor-inline-tabs
   class so the main workspace tab styling above is untouched.
   ============================================================ */

/* Wrapper — provide a comfortable gap before the dialog's
   action buttons so tab content never crowds Cancel/Add. */
.editor-inline-tabs-wrapper {
    margin-bottom: 24px;
}

/* Tab header row — shorter than the main workspace tabs */
.editor-inline-tabs.e-tab .e-tab-header {
    height: 38px;
    min-height: 38px;
}

/* Individual tab items — shorter, narrower, rounded top corners
   to match the radius on form inputs (.form-control uses 0.375rem). */
.editor-inline-tabs.e-tab .e-tab-header .e-toolbar-item,
.editor-inline-tabs.e-tab .e-tab-header .e-toolbar-item:not(.e-separator) {
    min-height: 38px;
    height: 38px;
    min-width: 140px;
    padding: 0;
    border-radius: 4px 4px 0 0;
}

.editor-inline-tabs.e-tab .e-tab-header .e-toolbar-item .e-tab-wrap {
    padding: 0 14px;
    border-radius: 4px 4px 0 0;
}

/* Tab label — smaller/lighter than the main workspace tabs */
.editor-inline-tabs.e-tab .e-tab-header .e-toolbar-item .e-tab-text {
    line-height: 38px;
    font-size: 14px !important;
    font-weight: 500 !important;
    min-height: 38px;
    padding: 0 6px;
}

/* Match rounded corners on the active tab pill */
.editor-inline-tabs.e-tab .e-tab-header .e-toolbar-item.e-active {
    border-radius: 4px 4px 0 0;
}

/* Tab body — bordered panel so content reads as a grouped card.
   Meets the tab header flush on top, rounded on the other corners. */
.editor-inline-tabs.e-tab .e-content {
    border: 1px solid #dee2e6;
    border-top: none;
    border-radius: 0 4px 4px 4px;
    background: #ffffff;
}

/* Inner padding so inputs breathe inside the bordered body.
   min-height locks the content area to just-fits-the-dropdown
   (form-floating ~58px + 12px top/bottom padding) so the panel
   doesn't jump between tabs. Flex-column + justify-content:center
   vertically centers the single button in the File tab and keeps
   the dropdown-based tabs neatly centered too.
   `display: flex !important` is required because Syncfusion ships
   `.e-tab .e-content .e-item { display: block !important }`. */
.editor-inline-tabs.e-tab .e-content .e-item {
    padding: 12px;
    min-height: 82px;
    box-sizing: border-box;
    display: flex !important;
    flex-direction: column;
    justify-content: center;
}

/* Hide inactive tab content (Syncfusion's `display: block !important` for
   active items still applies; this rule overrides the default `display: none`
   we lost when adding `!important` above). */
.editor-inline-tabs.e-tab .e-content > .e-item:not(.e-active) {
    display: none !important;
}

/* The global `.e-tab .e-tab-content { top: 60px }` rule above
   assumes the 60px workspace header — reset to our shorter header. */
.editor-inline-tabs.e-tab .e-tab-content {
    top: 38px !important;
}

/* Reset the extra p-2 wrapper we added in the Razor fragments so
   padding doesn't stack on top of the .e-item padding above. */
.editor-inline-tabs.e-tab .e-content .e-item > .p-2 {
    padding: 0 !important;
}

/* Shrink inputs to fit the padded body — SfDropDownList renders a
   .form-control inside a .form-floating wrapper; both should
   honour the body width rather than overflowing. */
.editor-inline-tabs.e-tab .e-content .form-floating,
.editor-inline-tabs.e-tab .e-content .form-control {
    width: 100%;
    max-width: 100%;
}