:root {
    --cp-nav-rail: #f1f3f6;
    --cp-nav-border: #d2dbe5;
    --cp-nav-ink: #213244;
    --cp-nav-muted: #4f6072;
    --cp-nav-selected: #d4e8f8;
    --cp-nav-blue: #2d6fa9;
    --cp-nav-subtab-font: 12px/16px Helvetica, Arial, Verdana, sans-serif;
    --cp-nav-subtab-padding: 3px 10px;
    --cp-nav-subtab-height: 24px;
    --cp-nav-highlight-inset: 2px;
}

/* A uniGUI sheet body marks one level below the shared workspace. */
.main-menu-detail .x-tab-bar-top:not(.x-uni-tabsheet .x-tab-bar-top) {
    background: var(--cp-nav-rail);
    box-shadow: inset 0 -1px var(--cp-nav-border);
}

/* The rail supplies the divider. Keep the content edge beneath it white. */
.main-menu-detail .x-tabpanel-child:not(.x-uni-tabsheet .x-tabpanel-child),
.main-menu-detail .x-uni-tabsheet .x-panel:not(.x-uni-tabsheet .x-uni-tabsheet .x-panel):has(> .cp-workspace-header, > .x-panel-bodyWrap > .x-tab-bar-top) {
    border-top-color: #fff;
}

.main-menu-detail .x-tab-bar-top:not(.x-uni-tabsheet .x-tab-bar-top) .x-tab-bar-body {
    padding: 0;
}

.main-menu-detail .x-tab-bar-top:not(.x-uni-tabsheet .x-tab-bar-top) .x-tab {
    height: 36px;
    padding: 9px 10px;
    margin: 0 !important;
    background: transparent;
    border-color: transparent;
    border-radius: 0;
    /* Crisp draws a mouse-focus frame with inset shadows. */
    box-shadow: none !important;
    outline: none !important;
}

.main-menu-detail .x-tab-bar-top:not(.x-uni-tabsheet .x-tab-bar-top) .x-tab:focus-visible .x-tab-inner {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.main-menu-detail .x-tab-bar-top:not(.x-uni-tabsheet .x-tab-bar-top) .x-tab-active {
    background: #fff linear-gradient(var(--cp-nav-blue), var(--cp-nav-blue))
        center bottom / calc(100% - 16px) 2px no-repeat border-box;
    border-inline-color: var(--cp-nav-border);
}

.main-menu-detail .x-tab-bar-top:not(.x-uni-tabsheet .x-tab-bar-top) .x-tab-inner,
.main-menu-detail .x-tab-bar-top:not(.x-uni-tabsheet .x-tab-bar-top) .x-tab-icon-el {
    color: var(--cp-nav-muted);
}

.main-menu-detail .x-tab-bar-top:not(.x-uni-tabsheet .x-tab-bar-top) .x-tab-active :is(.x-tab-inner, .x-tab-icon-el) {
    color: var(--cp-nav-blue);
}

.main-menu-detail .x-tab-bar-top:not(.x-uni-tabsheet .x-tab-bar-top) .x-tab-close-btn {
    top: 50%;
    transform: translateY(-50%);
    opacity: .55;
}

.main-menu-detail .x-tab-bar-top:not(.x-uni-tabsheet .x-tab-bar-top) .x-tab:is(:hover, :focus-within) .x-tab-close-btn {
    opacity: 1;
}

.cp-workspace-tabs.x-tab-bar,
.cp-workspace-header {
    background: #fff;
    border-color: transparent;
}

.cp-workspace-tabs.x-tab-bar .x-tab {
    background: #fff;
    /* Ext adds an inset frame on mouse focus. Keep the shared outline continuous. */
    box-shadow: none !important;
    border-color: var(--cp-nav-border);
    border-inline-width: 0;
    border-radius: 0;
    margin-inline: 0 !important;
    padding: var(--cp-nav-subtab-padding);
    height: var(--cp-nav-subtab-height);
    isolation: isolate;
}

.cp-workspace-tabs.x-tab-bar .x-tab::before,
.cp-subtab-split::before {
    content: '';
    position: absolute;
    inset: var(--cp-nav-highlight-inset);
    border-radius: 999px;
    pointer-events: none;
    z-index: -1;
}

.cp-workspace-tabs.x-tab-bar .x-tab-active::before,
.cp-subtab-selected::before {
    background: var(--cp-nav-selected);
}

.cp-workspace-tabs.x-tab-bar .x-tab-active .x-tab-wrap {
    position: relative;
}

.cp-workspace-tabs.x-tab-bar .x-tab-inner {
    color: var(--cp-nav-muted);
    font: var(--cp-nav-subtab-font);
}

.cp-workspace-tabs.x-tab-bar .x-tab-active .x-tab-inner {
    color: var(--cp-nav-ink);
}

.cp-workspace-action {
    background: #fff;
    border: 1px solid var(--cp-nav-border);
    border-radius: 6px;
}

.cp-workspace-action .x-btn-inner,
.cp-workspace-action .x-btn-icon-el {
    color: var(--cp-nav-blue);
}

.cp-workspace-filter-action[data-filter-count]:not([data-filter-count=''])::after {
    content: attr(data-filter-count);
    position: absolute;
    top: -3px;
    right: -3px;
    min-width: 15px;
    padding: 0 3px;
    border-radius: 8px;
    background: var(--cp-nav-blue);
    color: #fff;
    text-align: center;
    font: 10px/15px Arial, sans-serif;
    pointer-events: none;
}

.cp-workspace-action:focus-visible,
.main-menu-detail .x-tab:focus-visible {
    outline: 2px solid var(--cp-nav-blue);
    outline-offset: -2px;
}

/* Both uniGUI and HTML hosts render Ext.tab.Panel through the same factory. */
.cp-workspace-navigation-host {
    flex: 1 1 0;
    min-width: 0;
    height: 36px;
}

.cp-workspace-tabs.x-tab-bar .x-tab-bar-body {
    padding: 3px 0;
}

.cp-workspace-tabs.x-tab-bar :is(.x-tab, .cp-subtab-split) {
    margin-inline: 0 !important;
    border: 1px solid var(--cp-nav-border);
    border-inline-width: 0;
    border-radius: 0;
    box-shadow: none;
}

.cp-workspace-tabs.x-tab-bar .cp-segment-first {
    border-inline-start-width: 1px;
    border-start-start-radius: 999px;
    border-end-start-radius: 999px;
}

.cp-workspace-tabs.x-tab-bar .cp-segment-last {
    border-inline-end-width: 1px;
    border-start-end-radius: 999px;
    border-end-end-radius: 999px;
}

.cp-workspace-tabs.x-tab-bar .cp-subtab-split {
    background: #fff;
    isolation: isolate;
    /* uniGUI's tab-bar buttons otherwise force padding to zero. */
    /* The arrow cell includes the right gutter, matching its native hit area. */
    padding: 3px 0 3px 10px !important;
}

.cp-subtab-split .x-btn-wrap {
    position: relative;
    display: flex;
    align-items: center;
    height: 16px;
}

.cp-subtab-split .x-btn-button {
    display: flex;
    align-items: center;
    height: 16px !important;
    min-height: 0;
}

.cp-subtab-split .x-btn-arrow-el {
    width: 32px !important;
}

.cp-subtab-split .x-btn-inner {
    padding: 0;
    color: var(--cp-nav-muted);
    font: var(--cp-nav-subtab-font);
}

.cp-subtab-selected .x-btn-inner {
    color: var(--cp-nav-ink);
}

.cp-subtab-split .x-btn-split-right::after {
    content: '';
    display: block;
    flex: 0 0 32px;
    width: 32px;
    height: 16px;
    vertical-align: middle;
    border: 0;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='7' fill='%232d6fa9'/%3E%3Cpath d='m4.5 6.5 3.5 3.5 3.5-3.5' fill='none' stroke='white' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
        center / 14px 14px no-repeat;
}

.cp-subtab-split:focus-visible {
    outline: 2px solid var(--cp-nav-blue);
    outline-offset: -2px;
}

.cp-subtab-menu {
    border: 1px solid #d2dbe5;
    border-radius: 6px;
    box-shadow: 0 6px 18px #21324426;
}

.cp-subtab-menu .x-menu-item-text {
    color: #213244;
    font: 12px/18px Helvetica, Arial, Verdana, sans-serif;
    margin: 0 10px 0 30px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cp-subtab-menu .x-menu-item-link {
    display: flex;
    align-items: center;
    padding: 4px 0;
    line-height: 18px;
}

.cp-subtab-menu .x-menu-item-icon {
    width: 12px;
    height: 12px;
    top: 50%;
    left: 10px;
    transform: translateY(-50%);
    background: none;
}

.cp-subtab-menu .x-menu-item-icon::before {
    content: none;
}

.cp-subtab-menu .x-menu-item-checked .x-menu-item-icon {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='m2 6 2.5 2.5L10 3' fill='none' stroke='%232d6fa9' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px 12px no-repeat;
}

/* A third-level panel is now a dropdown-backed card, not another framed workspace. */
.cp-subtab-panel,
.cp-subtab-card {
    border-width: 0 !important;
}