﻿.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;
}