/**
 * DevExpressTabModern.css
 * Ultra-Modern, Minimalist Enterprise Redesign for DevExpress ASPxTabControl & ASPxPageControl
 * Color Theme: #111726 (Deep Obsidian Midnight Navy)
 *
 * FIXES & DESIGN SPECIFICATIONS:
 * 1. 100% Blue Theme Neutralization: Purges all DevExpress MetropolisBlue #0072C6 borders, lines, and backgrounds on tab controls.
 * 2. Zero Dots / Ticks / Spacers: Completely eliminates .dxtc-spacer, .dxtc-leftIndent, .dxtc-rightIndent on the tab strip.
 * 3. Strict Strip Scoping: Tab strip resets are strictly isolated to .dxtc-stripContainer so form input control borders (.dxeTextBox, .dxeComboBox) remain 100% intact.
 * 4. Smooth Butter Animation: Fluid cubic-bezier micro-interactions on hover and active tab underline transitions.
 * 5. Razor-Sharp #111726 Active Indicator: Elegant 3px active underline with high-contrast obsidian typography.
 * 6. Clean Slate Inactive States: Modern slate-500 (#64748B) text with subtle ghost pill hover.
 */

:root {
    /* --- Core Tokens --- */
    --dtr-tab-primary: #111726;
    --dtr-tab-primary-rgb: 17, 23, 38;
    --dtr-tab-hover-bg: rgba(17, 23, 38, 0.05);
    --dtr-tab-hover-bg-active: rgba(17, 23, 38, 0.08);
    
    /* --- Text Colors --- */
    --dtr-tab-text-active: #111726;
    --dtr-tab-text-inactive: #64748b;
    --dtr-tab-text-hover: #111726;
    --dtr-tab-text-disabled: #cbd5e1;
    
    /* --- Dividers & Surfaces --- */
    --dtr-tab-divider: #e2e8f0;
    --dtr-tab-content-bg: #ffffff;
    
    /* --- Animation & Motion --- */
    --dtr-tab-easing: cubic-bezier(0.4, 0, 0.2, 1);
    --dtr-tab-duration: 0.22s;
    --dtr-tab-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ==========================================================================
   VISIBILITY SAFEGUARDS (Strictly Respect DevExpress ClientVisible, Visible & display:none)
   ========================================================================== */
.dxtcControl [style*="display:none"],
.dxtcControl [style*="display: none"],
.dxtcControl_MetropolisBlue [style*="display:none"],
.dxtcControl_MetropolisBlue [style*="display: none"],
.dxtcLite [style*="display:none"],
.dxtcLite [style*="display: none"],
.dxtcLite_MetropolisBlue [style*="display:none"],
.dxtcLite_MetropolisBlue [style*="display: none"],
.dxtc-tab[style*="display:none"],
.dxtc-tab[style*="display: none"],
.dxtc-tab_MetropolisBlue[style*="display:none"],
.dxtc-tab_MetropolisBlue[style*="display: none"],
li.dxtc-tab[style*="display:none"],
li.dxtc-tab[style*="display: none"],
td.dxtc-tab[style*="display:none"],
td.dxtc-tab[style*="display: none"],
.dxtc-link[style*="display:none"],
.dxtc-link[style*="display: none"],
.dxtc-link_MetropolisBlue[style*="display:none"],
.dxtc-link_MetropolisBlue[style*="display: none"],
.dxtc-tab a[style*="display:none"],
.dxtc-tab a[style*="display: none"],
.dxtc-tab[style*="display:none"] *,
.dxtc-tab[style*="display: none"] *,
.dxtc-scrollBtn[style*="display:none"],
.dxtc-scrollBtn[style*="display: none"],
.dxtc-closeBtn[style*="display:none"],
.dxtc-closeBtn[style*="display: none"] {
    display: none !important;
}

/* ==========================================================================
   1. TOTAL THEME BLUE PURGE & BASE RESETS (STRIP & HEADER ONLY)
   ========================================================================== */
.dxtcControl_MetropolisBlue,
.dxtcControl,
.dxtcLite_MetropolisBlue,
.dxtcLite,
.dxtcFixed {
    border: none !important;
    border-color: transparent !important;
    background: transparent !important;
    background-color: transparent !important;
    font-family: var(--dtr-tab-font) !important;
    box-sizing: border-box !important;
    margin-bottom: 16px !important;
}

/* Strip out default borders strictly on tab strip tables (NEVER touch content/editors) */
table.dxtcControl_MetropolisBlue,
table.dxtcControl,
table.dxtcLite_MetropolisBlue,
table.dxtcLite,
.dxtc-stripContainer table,
.dxtc-stripContainer table.dxtc-tabs,
.dxtc-strip table {
    border-collapse: collapse !important;
    border-spacing: 0 !important;
    border: none !important;
    border-color: transparent !important;
    background: transparent !important;
}

/* Purge table cell borders ONLY inside the tab strip container (NOT inside .dxtc-content editors) */
.dxtc-stripContainer td,
.dxtc-stripContainer th,
.dxtc-strip td,
.dxtc-tabs td,
td.dxtc-tab,
td.dxtc-activeTab,
td.dxtc-tabHover,
td.dxtc-tabDisabled {
    border: none !important;
    border-color: transparent !important;
    background: transparent !important;
}

/* ==========================================================================
   2. ELIMINATE ALL BLUE SPACERS, DOTS, TICKS & INDENTS ON TAB STRIP
   ========================================================================== */
.dxtc-spacer,
.dxtc-spacer_MetropolisBlue,
td.dxtc-spacer,
li.dxtc-spacer,
div.dxtc-spacer,
.dxtc-leftIndent,
.dxtc-leftIndent_MetropolisBlue,
td.dxtc-leftIndent,
li.dxtc-leftIndent,
.dxtc-rightIndent,
.dxtc-rightIndent_MetropolisBlue,
td.dxtc-rightIndent,
li.dxtc-rightIndent,
.dxtc-emptyTab,
.dxtc-emptyTab_MetropolisBlue,
td.dxtc-emptyTab,
li.dxtc-emptyTab {
    display: none !important;
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    border-color: transparent !important;
    background: transparent !important;
    background-color: transparent !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

/* ==========================================================================
   3. CLEAN TAB STRIP CONTAINER (ZERO BLUE LINES)
   ========================================================================== */
.dxtcLite_MetropolisBlue > .dxtc-stripContainer,
.dxtcLite > .dxtc-stripContainer,
.dxtcControl_MetropolisBlue .dxtc-stripContainer,
.dxtcControl .dxtc-stripContainer,
.dxtc-stripContainer,
.dxtc-stripContainer_MetropolisBlue,
.dxtc-stripContainerWrapper,
.dxtc-stripWrapper {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    border-color: transparent !important;
    border-bottom: 1px solid var(--dtr-tab-divider) !important; /* Clean neutral grey divider */
    padding: 0 4px !important;
    box-sizing: border-box !important;
    position: relative !important;
    margin-bottom: 0 !important;
}

/* Tab Strip List / Flex Alignment */
.dxtc-strip,
.dxtc-strip_MetropolisBlue,
.dxtc-tabs,
.dxtc-tabs_MetropolisBlue,
ul.dxtc-tabs,
table.dxtc-tabs {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    border: none !important;
    border-color: transparent !important;
    background: transparent !important;
}

ul.dxtc-strip,
ul.dxtc-tabs {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: flex-end !important;
    gap: 4px !important;
}

/* ==========================================================================
   4. INDIVIDUAL TABS (INACTIVE, HOVER, ACTIVE, DISABLED)
   ========================================================================== */

/* --- 4A. Inactive Tab --- */
.dxtc-tab,
.dxtc-tab_MetropolisBlue,
li.dxtc-tab,
td.dxtc-tab {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    border-color: transparent !important;
    border-bottom: none !important;
    border-radius: 6px 6px 0 0 !important;
    padding: 0 !important;
    margin: 0 2px 0 0 !important;
    cursor: pointer !important;
    position: relative !important;
    vertical-align: bottom !important;
    user-select: none !important;
}

/* Tab Links with Smooth Micro-Animation */
.dxtc-link:not([style*="display:none"]):not([style*="display: none"]),
.dxtc-link_MetropolisBlue:not([style*="display:none"]):not([style*="display: none"]),
.dxtc-tab:not([style*="display:none"]):not([style*="display: none"]) a:not([style*="display:none"]):not([style*="display: none"]),
.dxtc-tab:not([style*="display:none"]):not([style*="display: none"]) .dxtc-link:not([style*="display:none"]):not([style*="display: none"]),
.dxtc-tab:not([style*="display:none"]):not([style*="display: none"]) > a:not([style*="display:none"]):not([style*="display: none"]) {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 10px 18px 12px 18px !important;
    color: var(--dtr-tab-text-inactive) !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    letter-spacing: -0.01em !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    border: none !important;
    border-radius: 6px 6px 0 0 !important;
    background: transparent !important;
    background-color: transparent !important;
    transition: color var(--dtr-tab-duration) var(--dtr-tab-easing),
                background-color var(--dtr-tab-duration) var(--dtr-tab-easing),
                transform var(--dtr-tab-duration) var(--dtr-tab-easing),
                box-shadow var(--dtr-tab-duration) var(--dtr-tab-easing) !important;
    height: auto !important;
    line-height: 1.4 !important;
    position: relative !important;
}

.dxtc-text,
.dxtc-text_MetropolisBlue,
.dxtc-tab .dxtc-text {
    color: inherit !important;
    font-family: inherit !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    text-decoration: none !important;
}

/* --- 4B. Smooth Hover State --- */
.dxtc-tab:hover,
.dxtc-tabHover,
.dxtc-tabHover_MetropolisBlue,
.dxtc-hoverTab,
li.dxtc-tab:hover,
td.dxtc-tab:hover {
    background: transparent !important;
    border: none !important;
    border-color: transparent !important;
}

.dxtc-tab:hover .dxtc-link,
.dxtc-tab:hover a,
.dxtc-tabHover .dxtc-link,
.dxtc-tabHover a,
.dxtc-hoverTab .dxtc-link,
.dxtc-hoverTab a {
    color: var(--dtr-tab-text-hover) !important;
    background-color: var(--dtr-tab-hover-bg) !important;
    transform: translateY(-1.5px) !important;
    text-decoration: none !important;
}

.dxtc-tab:hover .dxtc-text,
.dxtc-tabHover .dxtc-text {
    color: var(--dtr-tab-text-hover) !important;
}

/* --- 4C. Active Tab (#111726 Hero Underline + Smooth Slide-Up Animation) --- */
.dxtc-activeTab,
.dxtc-activeTab_MetropolisBlue,
li.dxtc-activeTab,
td.dxtc-activeTab,
.dxtc-tab.dxtc-activeTab {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: none !important;
    border-color: transparent !important;
    border-bottom: none !important;
    box-shadow: none !important;
    position: relative !important;
    z-index: 5 !important;
}

/* Active Typography */
.dxtc-activeTab .dxtc-link,
.dxtc-activeTab a,
.dxtc-activeTab > a,
.dxtc-activeTab .dxtc-text,
.dxtc-activeTab span {
    color: var(--dtr-tab-text-active) !important;
    font-weight: 600 !important;
    text-shadow: none !important;
    text-decoration: none !important;
    background: transparent !important;
    background-color: transparent !important;
    transform: none !important;
}

/* Smooth Underline Keyframe Animation */
@keyframes dtrTabUnderlineIn {
    0% {
        opacity: 0;
        transform: scaleX(0.3);
    }
    100% {
        opacity: 1;
        transform: scaleX(1);
    }
}

/* Razor-Sharp #111726 Active Bottom Indicator Line */
.dxtc-activeTab::after,
.dxtc-activeTab_MetropolisBlue::after,
li.dxtc-activeTab::after,
td.dxtc-activeTab::after {
    content: "" !important;
    position: absolute !important;
    bottom: -1px !important;
    left: 0 !important;
    right: 0 !important;
    height: 3px !important;
    background: var(--dtr-tab-primary) !important;
    background-color: var(--dtr-tab-primary) !important;
    border-radius: 3px 3px 0 0 !important;
    z-index: 10 !important;
    animation: dtrTabUnderlineIn var(--dtr-tab-duration) var(--dtr-tab-easing) forwards !important;
    transform-origin: center bottom !important;
}

/* Suppress all pseudo top highlights and legacy blue theme borders */
.dxtc-activeTab::before,
.dxtc-tab::before {
    display: none !important;
}

/* Active Tab Hover State */
.dxtc-activeTab:hover .dxtc-link,
.dxtc-activeTab:hover a {
    background-color: var(--dtr-tab-hover-bg) !important;
    color: var(--dtr-tab-text-active) !important;
    transform: none !important;
}

/* --- 4D. Disabled Tab --- */
.dxtc-tabDisabled,
.dxtc-tabDisabled_MetropolisBlue,
li.dxtc-tabDisabled,
td.dxtc-tabDisabled {
    opacity: 0.35 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
    background: transparent !important;
    border: none !important;
}

.dxtc-tabDisabled .dxtc-link,
.dxtc-tabDisabled a,
.dxtc-tabDisabled .dxtc-text {
    color: var(--dtr-tab-text-disabled) !important;
}

/* ==========================================================================
   5. TAB CONTENT CONTAINER (CLEAN & NON-CLIPPING)
   ========================================================================== */
.dxtc-content,
.dxtc-content_MetropolisBlue,
.dxtc-contentCell,
.dxtc-contentCell_MetropolisBlue,
.dxtc-activeContent,
td.dxtc-contentCell {
    background: var(--dtr-tab-content-bg) !important;
    background-color: var(--dtr-tab-content-bg) !important;
    border: none !important;
    border-color: transparent !important;
    border-radius: 0 !important;
    padding: 20px 4px 10px 4px !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
    min-height: 180px !important;
    position: relative !important;
    z-index: 1 !important;
    overflow: visible !important;
}

.dxtc-content > div,
.dxtc-contentCell > div {
    width: 100% !important;
    box-sizing: border-box !important;
}

/* ==========================================================================
   6. FORM INPUT CONTROLS & EDITORS BORDER PRESERVATION
   ========================================================================== */
.dxtc-content .dxeTextBox_MetropolisBlue,
.dxtc-content .dxeButtonEdit_MetropolisBlue,
.dxtc-content .dxeMemo_MetropolisBlue,
.dxtc-content .dxeDateEdit_MetropolisBlue,
.dxtc-content .dxeSpinEdit_MetropolisBlue,
.dxtc-content .dxeComboBox_MetropolisBlue,
.dxtc-content .dxeListBox_MetropolisBlue,
.dxtc-contentCell .dxeTextBox_MetropolisBlue,
.dxtc-contentCell .dxeButtonEdit_MetropolisBlue,
.dxtc-contentCell .dxeMemo_MetropolisBlue,
.dxtc-contentCell .dxeDateEdit_MetropolisBlue,
.dxtc-contentCell .dxeSpinEdit_MetropolisBlue,
.dxtc-contentCell .dxeComboBox_MetropolisBlue,
.dxtc-contentCell .dxeListBox_MetropolisBlue,
.dxeTextBox_MetropolisBlue,
.dxeButtonEdit_MetropolisBlue,
.dxeMemo_MetropolisBlue,
.dxeDateEdit_MetropolisBlue,
.dxeSpinEdit_MetropolisBlue,
.dxeComboBox_MetropolisBlue {
    border: 1px solid #CBD5E1 !important;
    border-radius: 4px !important;
    background-color: #FFFFFF !important;
    box-sizing: border-box !important;
}

/* Editor Focus Rings */
.dxtc-content .dxeTextBox_MetropolisBlue.dxeFocused_MetropolisBlue,
.dxtc-content .dxeButtonEdit_MetropolisBlue.dxeFocused_MetropolisBlue,
.dxtc-content .dxeMemo_MetropolisBlue.dxeFocused_MetropolisBlue,
.dxtc-content .dxeDateEdit_MetropolisBlue.dxeFocused_MetropolisBlue,
.dxtc-content .dxeComboBox_MetropolisBlue.dxeFocused_MetropolisBlue,
.dxtc-contentCell .dxeTextBox_MetropolisBlue.dxeFocused_MetropolisBlue,
.dxtc-contentCell .dxeButtonEdit_MetropolisBlue.dxeFocused_MetropolisBlue,
.dxtc-contentCell .dxeMemo_MetropolisBlue.dxeFocused_MetropolisBlue,
.dxeTextBox_MetropolisBlue.dxeFocused_MetropolisBlue,
.dxeButtonEdit_MetropolisBlue.dxeFocused_MetropolisBlue,
.dxeComboBox_MetropolisBlue.dxeFocused_MetropolisBlue {
    border-color: #111726 !important;
    box-shadow: 0 0 0 2px rgba(17, 23, 38, 0.12) !important;
}

/* ==========================================================================
   7. VERTICAL / LEFT TAB POSITION (TabPosition="Left" e.g., Resume.aspx)
   ========================================================================== */
.dxtc-tabsPLeft,
.dxtc-leftAlign,
.dxtcControl[tabposition="Left"],
.dxtcLite[tabposition="Left"] {
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
}

/* Vertical Strip Container (Zero Blue) */
.dxtc-tabsPLeft > .dxtc-stripContainer,
.dxtc-leftAlign > .dxtc-stripContainer,
.dxtc-tabsPLeft .dxtc-stripContainerWrapper,
td.dxtc-stripContainer.dxtc-tabsPLeft {
    background: transparent !important;
    border: none !important;
    border-right: 1px solid var(--dtr-tab-divider) !important;
    padding: 8px 12px 8px 0 !important;
    min-width: 190px !important;
    max-width: 240px !important;
}

.dxtc-tabsPLeft .dxtc-strip,
.dxtc-tabsPLeft .dxtc-tabs,
.dxtc-tabsPLeft ul.dxtc-tabs {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    width: 100% !important;
}

.dxtc-tabsPLeft .dxtc-tab:not([style*="display:none"]):not([style*="display: none"]),
.dxtc-tabsPLeft li.dxtc-tab:not([style*="display:none"]):not([style*="display: none"]),
.dxtc-tabsPLeft td.dxtc-tab:not([style*="display:none"]):not([style*="display: none"]) {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    border-radius: 6px !important;
    border: none !important;
}

.dxtc-tabsPLeft .dxtc-tab .dxtc-link,
.dxtc-tabsPLeft .dxtc-tab a {
    justify-content: flex-start !important;
    padding: 9px 14px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    border-radius: 6px !important;
}

.dxtc-tabsPLeft .dxtc-tab:hover .dxtc-link,
.dxtc-tabsPLeft .dxtc-tab:hover a {
    background-color: var(--dtr-tab-hover-bg) !important;
    transform: translateX(2px) !important;
}

/* Vertical Active Tab */
.dxtc-tabsPLeft .dxtc-activeTab,
.dxtc-tabsPLeft li.dxtc-activeTab,
.dxtc-tabsPLeft td.dxtc-activeTab {
    background: var(--dtr-tab-hover-bg-active) !important;
    border-radius: 6px !important;
}

.dxtc-tabsPLeft .dxtc-activeTab .dxtc-link,
.dxtc-tabsPLeft .dxtc-activeTab a {
    color: var(--dtr-tab-primary) !important;
    font-weight: 600 !important;
    transform: none !important;
}

.dxtc-tabsPLeft .dxtc-activeTab::after {
    top: 4px !important;
    bottom: 4px !important;
    right: -13px !important;
    left: auto !important;
    width: 3px !important;
    height: auto !important;
    background: var(--dtr-tab-primary) !important;
    border-radius: 2px !important;
    animation: none !important;
}

.dxtc-tabsPLeft ~ .dxtc-content,
.dxtc-tabsPLeft .dxtc-contentCell,
.dxtc-tabsPLeft td.dxtc-contentCell {
    border: none !important;
    padding: 8px 16px 8px 24px !important;
    flex: 1 !important;
}

/* ==========================================================================
   8. BOTTOM & RIGHT TAB POSITIONS (Zero Blue)
   ========================================================================== */
.dxtc-tabsPBottom > .dxtc-stripContainer,
.dxtc-bottomAlign > .dxtc-stripContainer {
    border-top: 1px solid var(--dtr-tab-divider) !important;
    border-bottom: none !important;
    padding: 0 4px !important;
}

.dxtc-tabsPBottom .dxtc-tab,
.dxtc-bottomAlign .dxtc-tab {
    border-radius: 0 0 6px 6px !important;
}

.dxtc-tabsPBottom .dxtc-activeTab::after,
.dxtc-bottomAlign .dxtc-activeTab::after {
    top: -1px !important;
    bottom: auto !important;
    border-radius: 0 0 3px 3px !important;
}

.dxtc-tabsPRight > .dxtc-stripContainer,
.dxtc-rightAlign > .dxtc-stripContainer {
    border-left: 1px solid var(--dtr-tab-divider) !important;
    padding: 8px 0 8px 12px !important;
}

/* ==========================================================================
   9. TAB SCROLL & OVERFLOW BUTTONS (EnableTabScrolling="true")
   ========================================================================== */
.dxtc-scrollBtn:not([style*="display:none"]):not([style*="display: none"]),
.dxtc-scrollBtn_MetropolisBlue:not([style*="display:none"]):not([style*="display: none"]),
.dxtc-scrollBtnLeft:not([style*="display:none"]):not([style*="display: none"]),
.dxtc-scrollBtnRight:not([style*="display:none"]):not([style*="display: none"]),
.dxtc-scrollBtnTop:not([style*="display:none"]):not([style*="display: none"]),
.dxtc-scrollBtnBottom:not([style*="display:none"]):not([style*="display: none"]) {
    width: 26px !important;
    height: 26px !important;
    border-radius: 50% !important;
    border: 1px solid #cbd5e1 !important;
    background: #ffffff !important;
    color: var(--dtr-tab-primary) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
    cursor: pointer !important;
    transition: all var(--dtr-tab-duration) var(--dtr-tab-easing) !important;
    margin: 0 3px !important;
    vertical-align: middle !important;
}

.dxtc-scrollBtn:hover,
.dxtc-scrollBtnHover,
.dxtc-scrollBtn_MetropolisBlue:hover {
    background: var(--dtr-tab-primary) !important;
    color: #ffffff !important;
    border-color: var(--dtr-tab-primary) !important;
    box-shadow: 0 2px 5px rgba(17, 23, 38, 0.2) !important;
    transform: scale(1.06) !important;
}

.dxtc-scrollBtnDisabled,
.dxtc-scrollBtnDisabled_MetropolisBlue {
    opacity: 0.25 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
}

/* ==========================================================================
   10. TAB ICONS, CLOSE BUTTONS & BADGES
   ========================================================================== */
.dxtc-icon,
.dxtc-iconContainer,
.dxtc-tab img,
.dxtc-activeTab img {
    margin-right: 6px !important;
    vertical-align: middle !important;
    transition: transform var(--dtr-tab-duration) var(--dtr-tab-easing) !important;
}

.dxtc-tab:hover img {
    transform: scale(1.08) !important;
}

.dxtc-closeBtn:not([style*="display:none"]):not([style*="display: none"]),
.dxtc-closeBtn_MetropolisBlue:not([style*="display:none"]):not([style*="display: none"]) {
    width: 16px !important;
    height: 16px !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-left: 6px !important;
    opacity: 0.5 !important;
    cursor: pointer !important;
    transition: all 0.15s var(--dtr-tab-easing) !important;
}

.dxtc-closeBtn:hover,
.dxtc-closeBtnHover {
    opacity: 1 !important;
    background: rgba(17, 23, 38, 0.1) !important;
    transform: scale(1.1) !important;
}

/* Tab Badges / Counts */
.dxtc-tab .badge,
.dxtc-activeTab .badge {
    font-size: 11px !important;
    font-weight: 600 !important;
    padding: 2px 7px !important;
    border-radius: 10px !important;
    margin-left: 6px !important;
    vertical-align: middle !important;
    transition: background-color var(--dtr-tab-duration) var(--dtr-tab-easing) !important;
}

.dxtc-tab .badge {
    background: #f1f5f9 !important;
    color: #64748b !important;
}

.dxtc-activeTab .badge {
    background: var(--dtr-tab-primary) !important;
    color: #ffffff !important;
}

/* ==========================================================================
   11. RESPONSIVE OPTIMIZATIONS
   ========================================================================== */
@media (max-width: 768px) {
    .dxtc-tab .dxtc-link,
    .dxtc-tab a,
    .dxtc-activeTab .dxtc-link,
    .dxtc-activeTab a {
        padding: 8px 12px 10px 12px !important;
        font-size: 12.5px !important;
    }

    .dxtc-content,
    .dxtc-contentCell {
        padding: 12px 2px !important;
    }
}