/* Refined cool-blue finish: restrained gradients, consistent surfaces and existing layout. */
:root {
  --local-ink: #26384a;
  --local-muted: #7b8998;
  --local-blue: #3978c5;
  --local-blue-dark: #2e67ad;
  --local-blue-soft: #edf4fc;
  --local-line: #e5eaf0;
  --local-page: #f5f8fc;
}
html, body, #app { min-height: 100%; }
body { background: radial-gradient(ellipse at 78% -18%, #eaf2fc 0, transparent 46%), linear-gradient(145deg,#f8fafc 0%,#f3f7fb 100%) !important; color: var(--local-ink) !important; }
.layout { background: transparent !important; }
.layout .topbar { background: linear-gradient(105deg,#fff 0%,#fbfdff 48%,#edf4fc 100%) !important; border-bottom: 1px solid #dfe7f1 !important; box-shadow: 0 2px 10px rgba(37,70,111,.055) !important; }
.layout .brand { background: transparent !important; }
.layout .brand-title { color: #2e4b6a !important; }
.layout .brand-sub { color: var(--local-muted) !important; }
.layout .sider { background: linear-gradient(180deg,#fff 0%,#fcfdff 100%) !important; border-right: 1px solid #e2e9f1 !important; box-shadow: 1px 0 8px rgba(38,66,100,.025) !important; }
.layout .sidebar-user { border-bottom-color: #e9eef4 !important; }
.layout .sidebar-avatar { background: linear-gradient(145deg,#eaf2fb,#f5f8fc) !important; color: #59738f !important; }
.layout .sidebar-user strong { color: var(--local-ink) !important; }
.layout .sidebar-user span, .layout .sidebar-caption { color: var(--local-muted) !important; }
.layout .menu { background: transparent !important; }
.layout .menu .el-menu-item { color: #536477 !important; }
.layout .menu .el-menu-item .el-icon { color: #8594a5 !important; }
.layout .menu .el-menu-item:hover { background: linear-gradient(90deg,#f1f6fc,#f8fafd) !important; color: var(--local-blue) !important; }
.layout .menu .el-menu-item.is-active { background: linear-gradient(100deg,#e9f2fd 0%,#f5f8fd 100%) !important; color: #326fae !important; border-left-color: #5a91d0 !important; box-shadow: inset 0 0 0 1px rgba(72,125,186,.055) !important; }
.layout .menu .el-menu-item.is-active .el-icon { color: var(--local-blue) !important; }
.layout .sidebar-footer { border-top-color: #e9eef4 !important; color: var(--local-muted) !important; }
.layout .sidebar-footer-dot { background: #59ae87 !important; }
.layout .workspace-lock { background: linear-gradient(180deg,#fff,#f7f9fc) !important; border-color: #dce3eb !important; color: #637386 !important; }
.layout .workspace-lock:hover { background: #f1f5fa !important; }
.layout .main { background: transparent !important; }
.layout .workspace-title { color: var(--local-ink) !important; }
.layout .workspace-title > span { color: var(--local-muted) !important; }
.layout .preview-badge { color: var(--local-blue) !important; border-color: #d9e5f4 !important; background: linear-gradient(100deg,#f7faff,#edf4fc) !important; }
.layout .tabbar { background: linear-gradient(180deg,#fff 0%,#f9fbfe 100%) !important; border-bottom: 1px solid #e1e8f0 !important; box-shadow: 0 2px 6px rgba(32,58,88,.035) !important; padding: 0 14px !important; }
.layout .tabbar-scroll { gap: 4px !important; }
.layout .tab { min-height: 42px !important; padding: 0 16px !important; border: 0 !important; border-radius: 6px 6px 0 0 !important; background: transparent !important; color: #68788b !important; top: 0 !important; }
.layout .tab:hover { background: linear-gradient(180deg,#f4f8fd,#edf3fa) !important; color: var(--local-blue) !important; }
.layout .tab.active { background: linear-gradient(180deg,#f4f8fe 0%,#eaf2fc 100%) !important; color: #326fae !important; box-shadow: inset 0 -2px 0 #5b91cf, inset 0 1px 0 #fff !important; }
.layout .tab.active::after { display: none !important; }
.layout .tab-close:hover, .layout .tab.active .tab-refresh:hover { background: #e4edf8 !important; color: var(--local-blue) !important; }
.page { background: transparent !important; }
.page-title { color: var(--local-ink) !important; }
.page-title::before { background: linear-gradient(180deg,#6b9bd2,#3978c5) !important; }
.card, .el-card { background: linear-gradient(160deg,#fff 0%,#fff 72%,#fbfcfe 100%) !important; border-color: #e3e9f0 !important; box-shadow: 0 3px 12px rgba(35,58,85,.045),0 1px 2px rgba(35,58,85,.025) !important; }
.toolbar { background: linear-gradient(110deg,#fff 0%,#fbfcfe 100%) !important; border: 1px solid #e3e9f0 !important; border-radius: 7px !important; padding: 9px 10px !important; box-shadow: 0 2px 8px rgba(35,58,85,.035) !important; }
.toolbar .el-input__wrapper, .toolbar .el-select__wrapper { background: #fff !important; box-shadow: 0 0 0 1px #e2e8ef inset !important; }
.el-button, .toolbar .el-button { border-radius: 5px !important; background: linear-gradient(180deg,#fff 0%,#f0f4f8 100%) !important; border-color: #dfe6ee !important; color: #536579 !important; box-shadow: 0 1px 1px rgba(33,54,77,.035) !important; }
.el-button:hover:not(.is-disabled) { background: linear-gradient(180deg,#fff 0%,#e8eef5 100%) !important; border-color: #d1dce8 !important; color: #354b62 !important; }
.el-button.is-disabled, .el-button.is-disabled:hover { background: linear-gradient(180deg,#f8f9fb,#f0f2f5) !important; border-color: #e7ebf0 !important; color: #a0aab6 !important; box-shadow: none !important; }
.el-button--primary, .el-button--primary.is-disabled, .el-button--primary.is-disabled:hover { background: linear-gradient(115deg,#4b8bd3 0%,#3575bd 58%,#316eaf 100%) !important; border-color: #3978bd !important; color: #fff !important; box-shadow: 0 2px 5px rgba(48,105,171,.18),inset 0 1px 0 rgba(255,255,255,.18) !important; }
.el-button--primary:hover:not(.is-disabled) { background: linear-gradient(115deg,#4382c8,#2e67a8) !important; }
.el-button--danger, .el-button--danger.is-disabled, .el-button--danger.is-disabled:hover { background: linear-gradient(180deg,#fffafa,#f9eeee) !important; border-color: #ecd9d9 !important; color: #a95d5d !important; }
.el-button--danger:hover:not(.is-disabled) { background: linear-gradient(180deg,#fff7f7,#f5e4e4) !important; border-color: #e6cccc !important; }
.el-button--warning, .el-button--warning.is-disabled, .el-button--warning.is-disabled:hover { background: linear-gradient(180deg,#fffdf8,#f8f2e6) !important; border-color: #e9dfca !important; color: #97733a !important; }
.el-button--warning:hover:not(.is-disabled) { background: linear-gradient(180deg,#fffaf0,#f3ead7) !important; }
.el-button--success, .el-button--success.is-disabled, .el-button--success.is-disabled:hover { background: linear-gradient(180deg,#f9fdf9,#edf5ef) !important; border-color: #d7e7db !important; color: #4f8060 !important; }
.el-button--info, .el-button--info.is-disabled, .el-button--info.is-disabled:hover { background: linear-gradient(180deg,#fff,#f0f3f7) !important; border-color: #e1e7ef !important; color: #647487 !important; }
.el-button.is-text, .el-button.is-link { background: linear-gradient(180deg,#fff,#f0f4f8) !important; border-color: #dfe6ee !important; }
.el-table { border-color: #e3e9f0 !important; --el-table-border-color: #e3e9f0 !important; --el-table-row-hover-bg-color: #f4f8fd !important; }
.el-table th.el-table__cell { background: linear-gradient(180deg,#f8fafd,#f0f4f9) !important; color: #596b7e !important; border-bottom-color: #e3e9f0 !important; }
.el-table td.el-table__cell { color: #3c4b5b !important; border-bottom-color: #edf0f4 !important; }
.el-table__body tr:nth-child(2n) > td.el-table__cell { background: #fcfdfe !important; }
.el-table__body tr:hover > td.el-table__cell { background: #f4f8fd !important; }
.el-table__body tr:has(.el-checkbox.is-checked, .el-checkbox__input.is-checked) > td.el-table__cell { background: #edf4fc !important; }
.el-table .el-checkbox__input.is-checked .el-checkbox__inner { background: var(--local-blue) !important; border-color: var(--local-blue) !important; }
.table-pagination { background: linear-gradient(180deg,#fff,#fafbfd) !important; border-top-color: #e3e9f0 !important; }
.el-pagination.is-background .el-pager li.is-active { background: linear-gradient(135deg,#4b8bd3,#326fae) !important; }
.tfoot-stats { background: linear-gradient(110deg,#f4f8fd,#eaf2fb) !important; border-color: #dce7f3 !important; }
.el-input__wrapper.is-focus, .el-select__wrapper.is-focused, .el-textarea__inner:focus { box-shadow: 0 0 0 1px #6d9dd0 inset,0 0 0 2px rgba(77,132,192,.08) !important; }
.el-tag--primary { --el-tag-bg-color: #eef4fb !important; --el-tag-border-color: #d4e1f0 !important; --el-tag-text-color: #416f9e !important; }
.el-tag--warning { --el-tag-bg-color: #fbf5e9 !important; --el-tag-border-color: #ecdfc4 !important; --el-tag-text-color: #97733a !important; }
.el-tag--success { --el-tag-bg-color: #edf6f0 !important; --el-tag-border-color: #d5e8db !important; --el-tag-text-color: #4f8060 !important; }
.el-tag--danger { --el-tag-bg-color: #fbefef !important; --el-tag-border-color: #efdada !important; --el-tag-text-color: #a95d5d !important; }
@media (max-width: 768px) { .toolbar { padding: 8px !important; } }

/* Popovers are teleported outside the page tree; style their global Element Plus roots explicitly. */
.el-popper.is-light,
.el-select__popper.el-popper,
.el-dropdown__popper.el-popper,
.el-cascader__dropdown.el-popper,
.el-picker__popper.el-popper {
  --el-bg-color-overlay: #fff;
  --el-border-color-light: #e3e9f0;
  --el-border-color-lighter: #edf1f5;
  --el-text-color-primary: #34475b;
  --el-text-color-regular: #526579;
  --el-color-primary: #3978c5;
  background: linear-gradient(155deg,#fff 0%,#fff 68%,#f8fafd 100%) !important;
  border: 1px solid #e1e8f0 !important;
  border-radius: 9px !important;
  box-shadow: 0 12px 30px rgba(32,54,82,.14), 0 2px 7px rgba(32,54,82,.06) !important;
}
.el-popper.is-light .el-popper__arrow::before { background: #fff !important; border-color: #e1e8f0 !important; }
.el-select__popper .el-select-dropdown,
.el-cascader__dropdown,
.el-dropdown__popper .el-dropdown-menu {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
.el-select-dropdown__item { color: #526579 !important; border-radius: 5px !important; margin: 2px 5px !important; }
.el-select-dropdown__item.hover,
.el-select-dropdown__item:hover { background: linear-gradient(90deg,#edf4fc,#f7f9fc) !important; color: #326fae !important; }
.el-select-dropdown__item.selected { color: #326fae !important; font-weight: 600 !important; }
.el-dropdown-menu__item { color: #526579 !important; }
.el-dropdown-menu__item:not(.is-disabled):hover { background: #f1f6fc !important; color: #326fae !important; }
.el-picker-panel,
.el-date-picker,
.el-date-range-picker,
.el-time-panel,
.el-time-range-picker {
  --el-datepicker-inrange-bg-color: #eef4fb;
  --el-datepicker-inrange-hover-bg-color: #e3edf9;
  --el-datepicker-active-color: #3978c5;
  background: linear-gradient(155deg,#fff 0%,#fff 70%,#f9fbfd 100%) !important;
  border: 0 !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  color: #34475b !important;
}
.el-picker-panel__icon-btn { color: #718198 !important; }
.el-date-table th { color: #7c8b9d !important; border-bottom-color: #e7ecf2 !important; }
.el-date-table td.available:hover { color: #326fae !important; }
.el-date-table td.today .el-date-table-cell__text { color: #3978c5 !important; }
.el-date-table td.current:not(.disabled) .el-date-table-cell__text,
.el-date-table td.selected .el-date-table-cell__text,
.el-month-table td.current:not(.disabled) .cell,
.el-year-table td.current:not(.disabled) .cell { background: linear-gradient(135deg,#4b8bd3,#326fae) !important; color: #fff !important; }
.el-date-range-picker__content.is-left { border-right-color: #e7ecf2 !important; }
.el-picker-panel__footer { background: #fbfcfe !important; border-top-color: #e7ecf2 !important; }
.el-overlay { background-color: rgba(29,43,60,.34) !important; backdrop-filter: blur(2px); }
.el-overlay .el-dialog,
.el-overlay .el-message-box {
  background: linear-gradient(145deg,#fff 0%,#fff 72%,#f8fafd 100%) !important;
  border: 1px solid rgba(222,231,241,.9) !important;
  border-radius: 12px !important;
  box-shadow: 0 22px 65px rgba(28,47,73,.2), 0 4px 14px rgba(28,47,73,.08) !important;
  overflow: hidden;
}
.el-overlay .el-dialog__header,
.el-overlay .el-message-box__header { background: linear-gradient(105deg,#fff 0%,#f5f8fc 100%) !important; border-bottom: 1px solid #edf1f5 !important; }
.el-overlay .el-dialog__title,
.el-overlay .el-message-box__title { color: #2f4359 !important; font-weight: 650 !important; }
.el-overlay .el-dialog__body,
.el-overlay .el-message-box__content { color: #526579 !important; }
.el-overlay .el-dialog__footer,
.el-overlay .el-message-box__btns { background: linear-gradient(180deg,#fff,#fafbfd) !important; border-top: 1px solid #edf1f5 !important; }

/* Keep order actions visibly distinct when selection enables them; gray only truly disabled actions. */
.row-actions .el-button:not(.is-disabled) {
  transition: background .16s ease, border-color .16s ease, box-shadow .16s ease, transform .16s ease !important;
}
.row-actions .el-button--primary:not(.is-disabled) {
  background: linear-gradient(115deg,#4b8bd3 0%,#3575bd 58%,#316eaf 100%) !important;
  border-color: #3978bd !important;
  color: #fff !important;
  box-shadow: 0 2px 5px rgba(48,105,171,.18), inset 0 1px 0 rgba(255,255,255,.18) !important;
}
.row-actions .el-button--primary:not(.is-disabled):hover {
  background: linear-gradient(115deg,#4382c8,#2e67a8) !important;
  border-color: #326eaf !important;
}
.row-actions .el-button--danger:not(.is-disabled) {
  background: linear-gradient(180deg,#fffafa,#f9eeee) !important;
  border-color: #ecd9d9 !important;
  color: #a95d5d !important;
}
.row-actions .el-button--danger:not(.is-disabled):hover {
  background: linear-gradient(180deg,#fff7f7,#f5e4e4) !important;
  border-color: #e6cccc !important;
}
.row-actions .el-button--warning:not(.is-disabled) {
  background: linear-gradient(180deg,#fffdf8,#f8f2e6) !important;
  border-color: #e9dfca !important;
  color: #97733a !important;
}
.row-actions .el-button--warning:not(.is-disabled):hover {
  background: linear-gradient(180deg,#fffaf0,#f3ead7) !important;
}
.row-actions .el-button.is-disabled,
.row-actions .el-button.is-disabled:hover {
  background: linear-gradient(180deg,#f8f9fb,#f0f2f5) !important;
  border-color: #e7ebf0 !important;
  color: #a0aab6 !important;
  box-shadow: none !important;
}

/* macOS-inspired folder tabs: soft raised paper tabs, same order and geometry. */
.layout .tabbar {
  background: linear-gradient(180deg,#f4f6f9 0%,#edf1f6 100%) !important;
  border-bottom: 1px solid #dce3eb !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9) !important;
  padding: 7px 14px 0 !important;
}
.layout .tabbar-scroll { align-items: flex-end !important; gap: 5px !important; }
.layout .tab {
  position: relative !important;
  top: 0 !important;
  min-height: 42px !important;
  padding: 0 18px !important;
  margin: 0 !important;
  border: 1px solid #dfe5ed !important;
  border-bottom: 0 !important;
  border-radius: 11px 11px 0 0 !important;
  background: linear-gradient(180deg,#f8fafc 0%,#e9eef4 100%) !important;
  color: #6d7d90 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9) !important;
  transition: background .18s ease, color .18s ease, box-shadow .18s ease, transform .18s ease !important;
}
.layout .tab:hover:not(.active) {
  background: linear-gradient(180deg,#fff 0%,#f1f4f8 100%) !important;
  color: #456d9d !important;
  transform: translateY(-1px) !important;
}
.layout .tab.active {
  z-index: 1 !important;
  min-height: 44px !important;
  background: linear-gradient(180deg,#fff 0%,#fff 78%,#fbfcfe 100%) !important;
  border-color: #dce4ed !important;
  border-bottom: 1px solid #fff !important;
  color: #315f91 !important;
  box-shadow: 0 -2px 9px rgba(46,70,101,.055), inset 0 1px 0 #fff !important;
  margin-bottom: -1px !important;
}
.layout .tab.active::after { display: none !important; }
.layout .tab-close { color: #a4afbd !important; border-radius: 50% !important; }
.layout .tab-close:hover,
.layout .tab.active .tab-refresh:hover {
  background: #eaf0f7 !important;
  color: #4c6f98 !important;
}

/* High-contrast, light hover state for the folder tabs (including their icons). */
.layout .tabbar .tab:hover:not(.active) {
  background: linear-gradient(180deg,#ffffff 0%,#f4f7fb 100%) !important;
  border-color: #dfe6ef !important;
  color: #4e6279 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.98), 0 -1px 5px rgba(40,62,90,.035) !important;
  transform: translateY(-1px) !important;
}
.layout .tabbar .tab:hover:not(.active) .tab-title,
.layout .tabbar .tab:hover:not(.active) .tab-ico,
.layout .tabbar .tab:hover:not(.active) .el-icon {
  color: #4e6279 !important;
}
.layout .tabbar .tab.active:hover {
  background: linear-gradient(180deg,#fff 0%,#fff 78%,#fbfcfe 100%) !important;
  color: #315f91 !important;
}
.layout .tabbar .tab.active:hover .tab-title,
.layout .tabbar .tab.active:hover .tab-ico,
.layout .tabbar .tab.active:hover .el-icon { color: #315f91 !important; }
.layout .tabbar .tab:hover .tab-close:hover,
.layout .tabbar .tab:hover .tab-refresh:hover {
  background: #edf2f8 !important;
  color: #45698f !important;
}

/* Fleet content switcher: quiet, folder-like tabs aligned with the workspace tabs. */
.fleet-tabbar {
  display: flex !important;
  gap: 5px !important;
  padding: 10px 14px 0 !important;
  background: linear-gradient(180deg,#f5f7fa 0%,#eef2f7 100%) !important;
  border-bottom: 1px solid #dfe6ee !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9) !important;
}
.fleet-tabbar .fleet-tab {
  position: relative !important;
  justify-content: center !important;
  min-height: 46px !important;
  padding: 9px 22px !important;
  border: 1px solid transparent !important;
  border-bottom: 0 !important;
  border-radius: 10px 10px 0 0 !important;
  background: transparent !important;
  color: #65768a !important;
  box-shadow: none !important;
  font-weight: 600 !important;
  transition: background .16s ease,color .16s ease,box-shadow .16s ease,transform .16s ease !important;
}
.fleet-tabbar .fleet-tab:hover:not(.active) {
  background: linear-gradient(180deg,#fff,#f4f7fb) !important;
  color: #45698f !important;
  transform: translateY(-1px) !important;
}
.fleet-tabbar .fleet-tab.active {
  color: #326fae !important;
  background: linear-gradient(180deg,#fff 0%,#fff 78%,#f8fbff 100%) !important;
  border-color: #dfe6ee !important;
  box-shadow: 0 -2px 8px rgba(38,61,90,.045),inset 0 1px 0 #fff !important;
}
.fleet-tabbar .fleet-tab.active::after {
  content: "" !important;
  position: absolute !important;
  left: 16px !important;
  right: 16px !important;
  bottom: 0 !important;
  height: 2px !important;
  border-radius: 2px 2px 0 0 !important;
  background: linear-gradient(90deg,#6fa0d6,#3978c5) !important;
}
.fleet-tabbar .fleet-tab-icon,
.fleet-tabbar .fleet-tab .el-icon { color: inherit !important; }
@media (max-width: 600px) {
  .fleet-tabbar { gap: 2px !important; padding-left: 8px !important; padding-right: 8px !important; }
  .fleet-tabbar .fleet-tab { flex: 1 1 0 !important; padding-left: 8px !important; padding-right: 8px !important; font-size: 13px !important; }
}

/* Match the status dropdown height to the adjacent dispatch search/date controls. */
.toolbar .dispatch-status {
  width: 110px !important;
  flex: 0 0 110px !important;
  height: 32px !important;
  min-height: 32px !important;
  box-sizing: border-box !important;
}
.toolbar .dispatch-status .el-select__wrapper {
  height: 32px !important;
  min-height: 32px !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
}

/* Folder-shaped workspace tabs inspired by the supplied macOS folder reference. */
.layout .tabbar {
  align-items: flex-end !important;
  padding: 12px 14px 0 !important;
  background: linear-gradient(180deg,#f5f7fa 0%,#edf1f6 100%) !important;
  border-bottom: 1px solid #dce4ed !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.92) !important;
}
.layout .tabbar-scroll { align-items: flex-end !important; gap: 8px !important; }
.layout .tabbar .tab,
.layout .tabbar .tab.active {
  isolation: isolate !important;
  position: relative !important;
  top: 0 !important;
  height: 39px !important;
  min-height: 39px !important;
  margin: 10px 0 0 !important;
  padding: 0 17px !important;
  border: 1px solid #d8e3ed !important;
  border-bottom: 0 !important;
  border-radius: 0 10px 0 0 !important;
  background: linear-gradient(180deg,#eaf2fa 0%,#dce8f4 100%) !important;
  color: #526b84 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95),0 -1px 4px rgba(38,61,90,.025) !important;
  overflow: visible !important;
  transition: background .16s ease,color .16s ease,box-shadow .16s ease,transform .16s ease !important;
}
.layout .tabbar .tab::before,
.layout .tabbar .tab.active::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  z-index: -1 !important;
  top: -10px !important;
  left: -1px !important;
  width: 44% !important;
  min-width: 58px !important;
  max-width: 88px !important;
  height: 11px !important;
  border: 1px solid #d8e3ed !important;
  border-bottom: 0 !important;
  border-radius: 9px 9px 0 0 !important;
  background: inherit !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95) !important;
  pointer-events: none !important;
}
.layout .tabbar .tab:hover:not(.active) {
  background: linear-gradient(180deg,#f6faff 0%,#e8f0f8 100%) !important;
  color: #3f6388 !important;
  transform: translateY(-1px) !important;
}
.layout .tabbar .tab.active {
  z-index: 2 !important;
  background: linear-gradient(180deg,#a6e2f6 0%,#7acbed 15%,#55b8e4 100%) !important;
  border-color: #64b9de !important;
  color: #174d70 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.72),0 -2px 8px rgba(38,103,145,.10) !important;
}
.layout .tabbar .tab.active::before {
  background: linear-gradient(180deg,#b8eafa 0%,#8bd6f0 100%) !important;
  border-color: #64b9de !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.78) !important;
}
.layout .tabbar .tab.active::after { display: none !important; }
.layout .tabbar .tab .tab-title,
.layout .tabbar .tab .tab-ico,
.layout .tabbar .tab .el-icon { color: inherit !important; }
.layout .tabbar .tab .tab-close { color: rgba(43,75,101,.58) !important; border-radius: 50% !important; }
.layout .tabbar .tab .tab-close:hover,
.layout .tabbar .tab .tab-refresh:hover { background: rgba(255,255,255,.58) !important; color: #244f70 !important; }
.layout .tabbar .tab.active:hover {
  background: linear-gradient(180deg,#b1e7f8 0%,#82d1ef 15%,#5dbfe8 100%) !important;
  color: #174d70 !important;
}
@media (max-width: 600px) {
  .layout .tabbar .tab,
  .layout .tabbar .tab.active { padding-left: 12px !important; padding-right: 12px !important; }
  .layout .tabbar .tab::before,
  .layout .tabbar .tab.active::before { min-width: 48px !important; }
}

/* Compact folder tabs: use the original neutral palette, with a much shorter folder lip. */
.layout .tabbar {
  padding: 8px 14px 0 !important;
  background: linear-gradient(180deg,#f5f7fa 0%,#edf1f6 100%) !important;
  border-bottom: 1px solid #dce4ed !important;
}
.layout .tabbar-scroll { align-items: flex-end !important; gap: 6px !important; }
.layout .tabbar .tab,
.layout .tabbar .tab.active {
  isolation: isolate !important;
  position: relative !important;
  top: 0 !important;
  height: 35px !important;
  min-height: 35px !important;
  margin: 5px 0 0 !important;
  padding: 0 16px !important;
  border: 1px solid #dfe6ee !important;
  border-bottom: 0 !important;
  border-radius: 0 8px 0 0 !important;
  background: linear-gradient(180deg,#f8fafc 0%,#e9eef4 100%) !important;
  color: #68788b !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95) !important;
}
.layout .tabbar .tab::before,
.layout .tabbar .tab.active::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  z-index: -1 !important;
  top: -5px !important;
  left: -1px !important;
  width: 42% !important;
  min-width: 44px !important;
  max-width: 70px !important;
  height: 6px !important;
  border: 1px solid #dfe6ee !important;
  border-bottom: 0 !important;
  border-radius: 7px 7px 0 0 !important;
  background: inherit !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95) !important;
  pointer-events: none !important;
}
.layout .tabbar .tab:hover:not(.active) {
  background: linear-gradient(180deg,#fff 0%,#f2f5f8 100%) !important;
  color: #536a83 !important;
}
.layout .tabbar .tab.active {
  z-index: 2 !important;
  height: 37px !important;
  min-height: 37px !important;
  background: linear-gradient(180deg,#fff 0%,#fff 78%,#fbfcfe 100%) !important;
  border-color: #dfe6ee !important;
  border-bottom: 1px solid #fff !important;
  color: #3978c5 !important;
  box-shadow: 0 -1px 5px rgba(38,61,90,.035),inset 0 1px 0 #fff !important;
}
.layout .tabbar .tab.active::before {
  background: linear-gradient(180deg,#fff 0%,#f3f6fa 100%) !important;
  border-color: #dfe6ee !important;
}
.layout .tabbar .tab.active::after { display: none !important; }
.layout .tabbar .tab .tab-title,
.layout .tabbar .tab .tab-ico,
.layout .tabbar .tab .el-icon { color: inherit !important; }
.layout .tabbar .tab .tab-close { color: #9aa7b6 !important; }
.layout .tabbar .tab .tab-close:hover,
.layout .tabbar .tab .tab-refresh:hover { background: #edf2f7 !important; color: #536a83 !important; }
.layout .tabbar .tab.active:hover { background: linear-gradient(180deg,#fff,#fbfcfe) !important; color: #3978c5 !important; }

/* Match the fleet's internal tabs to the same compact folder profile and palette. */
.fleet-tabbar {
  align-items: flex-end !important;
  gap: 6px !important;
  padding: 8px 14px 0 !important;
  background: linear-gradient(180deg,#f5f7fa 0%,#edf1f6 100%) !important;
  border-bottom: 1px solid #dce4ed !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.92) !important;
}
.fleet-tabbar .fleet-tab,
.fleet-tabbar .fleet-tab.active {
  isolation: isolate !important;
  position: relative !important;
  top: 0 !important;
  min-height: 35px !important;
  margin: 5px 0 0 !important;
  padding: 0 17px !important;
  border: 1px solid #dfe6ee !important;
  border-bottom: 0 !important;
  border-radius: 0 8px 0 0 !important;
  background: linear-gradient(180deg,#f8fafc 0%,#e9eef4 100%) !important;
  color: #68788b !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95) !important;
  font-weight: 600 !important;
}
.fleet-tabbar .fleet-tab::before,
.fleet-tabbar .fleet-tab.active::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  z-index: -1 !important;
  top: -5px !important;
  left: -1px !important;
  width: 42% !important;
  min-width: 44px !important;
  max-width: 70px !important;
  height: 6px !important;
  border: 1px solid #dfe6ee !important;
  border-bottom: 0 !important;
  border-radius: 7px 7px 0 0 !important;
  background: inherit !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95) !important;
  pointer-events: none !important;
}
.fleet-tabbar .fleet-tab:hover:not(.active) {
  background: linear-gradient(180deg,#fff 0%,#f2f5f8 100%) !important;
  color: #536a83 !important;
}
.fleet-tabbar .fleet-tab.active {
  min-height: 37px !important;
  background: linear-gradient(180deg,#fff 0%,#fff 78%,#fbfcfe 100%) !important;
  border-color: #dfe6ee !important;
  border-bottom: 1px solid #fff !important;
  color: #3978c5 !important;
  box-shadow: 0 -1px 5px rgba(38,61,90,.035),inset 0 1px 0 #fff !important;
}
.fleet-tabbar .fleet-tab.active::before { background: linear-gradient(180deg,#fff,#f3f6fa) !important; border-color: #dfe6ee !important; }
.fleet-tabbar .fleet-tab.active::after { display: none !important; }
.fleet-tabbar .fleet-tab-icon,
.fleet-tabbar .fleet-tab .el-icon { color: inherit !important; }
@media (max-width: 600px) {
  .layout .tabbar .tab,
  .layout .tabbar .tab.active,
  .fleet-tabbar .fleet-tab,
  .fleet-tabbar .fleet-tab.active { padding-left: 10px !important; padding-right: 10px !important; }
  .layout .tabbar .tab::before,
  .layout .tabbar .tab.active::before,
  .fleet-tabbar .fleet-tab::before,
  .fleet-tabbar .fleet-tab.active::before { min-width: 38px !important; }
}

/* Remove the detached folder-lip pseudo layer: it created a visible doubled/overlapping arc. */
.layout .tabbar .tab::before,
.layout .tabbar .tab.active::before,
.fleet-tabbar .fleet-tab::before,
.fleet-tabbar .fleet-tab.active::before {
  content: none !important;
  display: none !important;
}
.layout .tabbar .tab,
.layout .tabbar .tab.active,
.fleet-tabbar .fleet-tab,
.fleet-tabbar .fleet-tab.active {
  border-top-left-radius: 8px !important;
  border-top-right-radius: 8px !important;
  margin-top: 0 !important;
}

/* Fleet tab strip: remove the full-width blue wash; keep only the active tab distinct. */
.fleet-tabbar {
  background: #fff !important;
  background-image: none !important;
  box-shadow: none !important;
  border-bottom: 1px solid #e3e9f0 !important;
}

/* Force-clear the fleet strip's theme-colored background; this element carries Vue scope attrs. */
.card .fleet-tabbar,
.fleet-tabbar.fleet-tabbar {
  background: #fff !important;
  background-color: #fff !important;
  background-image: none !important;
  box-shadow: none !important;
}



/* The parent owns the action; the child owns its form, with no DOM proxies. */
.fleet-panel > .page > .page-header { display:none !important; }