:root {
    --oa-blue: #246bfe;
    --oa-blue-soft: #edf4ff;
    --oa-ink: #17213a;
    --oa-muted: #728097;
    --oa-line: #e5eaf2;
    --oa-canvas: #f7f9fc;
}

/* Keep order-status filters readable against their pale tab backgrounds. */
.panel-intro > .panel-heading .nav-tabs[data-field="state"] > li > a {
    color: #41546b !important;
    font-weight: 600;
}

.panel-intro > .panel-heading .nav-tabs[data-field="state"] > li > a:hover,
.panel-intro > .panel-heading .nav-tabs[data-field="state"] > li > a:focus {
    color: #24364d !important;
}

.panel-intro > .panel-heading .nav-tabs[data-field="state"] > li.active > a,
.panel-intro > .panel-heading .nav-tabs[data-field="state"] > li.active > a:hover,
.panel-intro > .panel-heading .nav-tabs[data-field="state"] > li.active > a:focus {
    color: #17213a !important;
}

body,
.wrapper {
    background: var(--oa-canvas) !important;
    color: var(--oa-ink);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
}

.main-header {
    border-bottom: 1px solid var(--oa-line);
    box-shadow: 0 2px 12px rgba(25, 43, 77, .035);
}

.skin-blue-light .main-header .logo,
.skin-blue-light .main-header .navbar,
.skin-black-blue .main-header .logo,
.skin-black-blue .main-header .navbar {
    color: var(--oa-ink) !important;
    background: #fff !important;
}

.main-header .logo {
    border-right: 1px solid var(--oa-line) !important;
    font-size: 17px;
    font-weight: 680;
    letter-spacing: -.02em;
}

.main-header .navbar .nav > li > a,
.main-header .navbar .navbar-nav > li > a {
    border-bottom: 2px solid transparent;
    color: #5d6b82 !important;
    background: #fff !important;
    font-size: 13px;
    font-weight: 520;
    transition: color .16s ease, background .16s ease, border-color .16s ease;
}

.main-header .navbar .nav > li > a:hover,
.main-header .navbar .nav > li > a:focus,
.main-header .navbar .nav > li.active > a,
.main-header .navbar .nav > li.open > a {
    border-bottom-color: var(--oa-blue);
    color: var(--oa-blue) !important;
    background: #f7faff !important;
}

#firstnav,
#firstnav > .nav-addtabs {
    border: 0 !important;
    background: #4e73df !important;
}
#firstnav > .nav-addtabs > li > a {
    min-width: 82px;
    padding-right: 12px !important;
    padding-left: 12px !important;
    text-align: center;
    color: #fff !important;
    background: transparent !important;
}
#firstnav > .nav-addtabs > li > a[title="销冠CRM"],
#firstnav > .nav-addtabs > li > a[title="AI中心"],
#firstnav > .nav-addtabs > li > a[title="知识库"] { min-width: 97px; }
#firstnav > .nav-addtabs > li.active > a,
#firstnav > .nav-addtabs > li > a:hover,
#firstnav > .nav-addtabs > li > a:focus {
    color: #fff !important;
    background: rgba(31, 76, 181, .19) !important;
}

.main-header .navbar .sidebar-toggle {
    color: #65748b !important;
    background: #fff !important;
}

.main-header .navbar .sidebar-toggle:hover {
    color: var(--oa-blue) !important;
    background: var(--oa-blue-soft) !important;
}

.skin-blue-light .wrapper,
.skin-blue-light .main-sidebar,
.skin-blue-light .left-side,
.skin-black-blue .wrapper,
.skin-black-blue .main-sidebar,
.skin-black-blue .left-side {
    background: #fff !important;
}

.main-sidebar {
    border-right: 1px solid var(--oa-line);
    box-shadow: none !important;
}

.sidebar .user-panel {
    border-bottom: 1px solid #edf1f6;
}

.sidebar .user-panel .info > p {
    color: #34425a !important;
    font-weight: 650;
}

.sidebar-form {
    border: 1px solid #e1e7ef !important;
    border-radius: 8px !important;
    background: #f8fafc !important;
}

.sidebar-form input,
.sidebar-form button {
    color: #66748a !important;
    background: transparent !important;
}

.sidebar-menu > li > a,
.sidebar-menu .treeview-menu > li > a {
    color: #56647a !important;
    font-size: 13px;
}

.sidebar-menu > li > a {
    min-height: 46px;
    padding-top: 13px;
    padding-bottom: 13px;
    border-left: 3px solid transparent !important;
}

.sidebar-menu > li.aitu-ai-pinned-entry {
    margin: 3px 9px 8px;
}

.sidebar-menu > li.aitu-ai-pinned-entry > a {
    min-height: 45px;
    padding-right: 13px;
    padding-left: 14px;
    border: 1px solid #d7e4fb !important;
    border-left: 3px solid var(--oa-blue) !important;
    border-radius: 8px;
    color: #2f67d8 !important;
    background: #edf4ff !important;
    font-weight: 650;
    box-shadow: 0 5px 14px rgba(52, 103, 214, .08);
}

.sidebar-menu > li.aitu-ai-pinned-entry > a:hover,
.sidebar-menu > li.aitu-ai-pinned-entry.active > a {
    color: #fff !important;
    border-color: var(--oa-blue) !important;
    background: var(--oa-blue) !important;
}

.sidebar-menu > li.aitu-ai-pinned-entry .pull-right-container {
    color: inherit;
    opacity: .72;
}

.sidebar-menu > li:hover > a,
.sidebar-menu > li.active > a,
.sidebar-menu > li.menu-open > a,
.sidebar-menu > li.treeview-open > a {
    border-left-color: var(--oa-blue) !important;
    color: var(--oa-blue) !important;
    background: var(--oa-blue-soft) !important;
}

.sidebar-menu .treeview-menu {
    background: #f9fbfe !important;
}

.sidebar-menu .treeview-menu > li.active > a,
.sidebar-menu .treeview-menu > li > a:hover {
    color: var(--oa-blue) !important;
    background: #f1f6ff !important;
}

.content-wrapper,
.right-side,
.tab-content.tab-addtabs {
    background: var(--oa-canvas) !important;
}

.nav-addtabs {
    border-bottom: 1px solid var(--oa-line) !important;
    background: #fff !important;
}

.nav-addtabs > li > a {
    color: #647188 !important;
    background: #fff !important;
}

.nav-addtabs > li.active > a,
.nav-addtabs > li > a:hover {
    color: var(--oa-blue) !important;
    background: #f5f8ff !important;
}

.dropdown-menu {
    border-color: var(--oa-line);
    border-radius: 8px;
    box-shadow: 0 14px 34px rgba(25, 43, 77, .12);
}

.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
    color: var(--oa-blue);
    background: var(--oa-blue-soft);
}

/* AI-first OA shell v1 */
.ai-only-nav { display: none !important; }

.main-header {
    min-height: 63px;
    border-bottom: 0;
    box-shadow: 0 2px 9px rgba(28, 72, 167, .13);
}

.skin-blue-light .main-header .logo,
.skin-blue-light .main-header .navbar,
.skin-black-blue .main-header .logo,
.skin-black-blue .main-header .navbar,
.main-header .logo,
.main-header .navbar {
    color: #fff !important;
    background: #4e73df !important;
}

.main-header .logo {
    width: 248px;
    height: 63px;
    border-right: 1px solid rgba(255, 255, 255, .08) !important;
    line-height: 63px;
    font-size: 21px;
    font-weight: 500;
}

.main-header .navbar {
    min-height: 63px;
    margin-left: 248px;
}

.main-header .navbar .sidebar-toggle {
    min-height: 63px;
    padding: 22px 16px;
    color: #fff !important;
    background: #4e73df !important;
}

.main-header .navbar .sidebar-toggle:hover { color: #fff !important; background: rgba(255, 255, 255, .08) !important; }

.main-header .navbar .nav > li > a,
.main-header .navbar .navbar-nav > li > a {
    min-height: 63px;
    padding: 21px 14px 18px;
    border-right: 1px solid rgba(255, 255, 255, .06);
    border-bottom: 0;
    color: #fff !important;
    background: #4e73df !important;
    font-size: 13px;
    line-height: 24px;
}

.main-header .navbar .nav > li > a:hover,
.main-header .navbar .nav > li > a:focus,
.main-header .navbar .nav > li.active > a,
.main-header .navbar .nav > li.open > a {
    border-bottom: 0;
    color: #fff !important;
    background: rgba(31, 76, 181, .19) !important;
}

.main-sidebar { width: 248px; padding-top: 63px; }
.content-wrapper,
.right-side,
.main-footer { margin-left: 248px; }
.fixed .content-wrapper,
.fixed .right-side { padding-top: 63px; }
.multiplenav.fixed .content-wrapper,
.multiplenav.fixed .right-side { padding-top: 102px; }

.ai-sidebar-tools { display: none; }

body.ai-center-active #secondnav,
body.ai-center-active .aitu-ai-navbar-item,
body.ai-center-active #aitu-ai-assistant,
body.ai-center-active #aitu-ai-assistant-fab,
body.ai-center-active .aitu-ai-assistant-fab,
body.ai-center-active .control-sidebar,
body.ai-center-active .control-sidebar-bg { display: none !important; }

body.ai-center-active .ai-only-nav { display: block !important; }
body.ai-center-active .legacy-home-link,
body.ai-center-active .legacy-cache-link,
body.ai-center-active .legacy-language-link,
body.ai-center-active .legacy-fullscreen-link,
body.ai-center-active .legacy-control-link { display: none !important; }

body.ai-center-active .content-wrapper,
body.ai-center-active .right-side { padding-top: 63px !important; background: #fff !important; }
body.ai-center-active .content-wrapper { min-height: 100vh !important; }
body.ai-center-active .content-wrapper .tab-pane,
body.ai-center-active .content-wrapper iframe { background: #fff !important; }

body.ai-center-active .sidebar-form,
body.ai-center-active .sidebar-menu { display: none !important; }
body.ai-center-active .ai-sidebar-tools { display: block; padding: 0 0 28px; }
body.ai-center-active .main-sidebar,
body.ai-center-active .sidebar { background: #fff !important; }
body.ai-center-active .main-sidebar { border-right: 1px solid #dfe4ec; }

/* AI 工作台始终使用完整侧栏，避免沿用员工上次保存的折叠状态。 */
body.ai-center-active.sidebar-collapse .main-header .logo {
    width: 248px !important;
}
body.ai-center-active.sidebar-collapse .main-header .logo > .logo-mini {
    display: none !important;
}
body.ai-center-active.sidebar-collapse .main-header .logo > .logo-lg {
    display: block !important;
}
body.ai-center-active.sidebar-collapse .main-header .navbar {
    margin-left: 248px !important;
}
body.ai-center-active.sidebar-collapse .main-sidebar {
    width: 248px !important;
    transform: translate(0, 0) !important;
}
body.ai-center-active.sidebar-collapse .content-wrapper,
body.ai-center-active.sidebar-collapse .right-side,
body.ai-center-active.sidebar-collapse .main-footer {
    margin-left: 248px !important;
}
body.ai-center-active.sidebar-collapse .sidebar .user-panel > .image,
body.ai-center-active.sidebar-collapse .sidebar .user-panel > .info {
    display: block !important;
}

body.ai-center-active .navbar-nav > .user-menu .user-image {
    width: 26px !important;
    height: 26px !important;
    object-fit: cover;
}
body.ai-center-active .navbar-nav > .user-menu > .dropdown-menu {
    display: none !important;
}
body.ai-center-active .navbar-nav > .user-menu.open > .dropdown-menu {
    display: block !important;
}

body.ai-center-active .sidebar .user-panel {
    min-height: 92px;
    margin: 0;
    padding: 35px 29px 16px;
    border-bottom: 0;
}
body.ai-center-active .sidebar .user-panel .image img { width: 43px; height: 43px; }
body.ai-center-active .sidebar .user-panel .info { left: 84px; padding-top: 1px; }
body.ai-center-active .sidebar .user-panel .info > p { margin-bottom: 4px; color: #1e2738 !important; font-size: 15px; }
body.ai-center-active .sidebar .user-panel .info { color: #6b788b !important; font-size: 12px; }

.ai-new-conversation {
    width: calc(100% - 48px);
    height: 41px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 11px;
    margin: 12px 24px 18px;
    padding: 0 16px;
    border: 1px solid #d7dee9;
    border-radius: 6px;
    color: #202a3d;
    background: #fff;
    font-size: 14px;
}
.ai-new-conversation:hover { color: #2f6be1; border-color: #aac2f5; background: #f9fbff; }

.ai-workbench-current {
    position: relative;
    min-height: 50px;
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 0 28px;
    color: #3d70dc !important;
    background: #edf3ff;
    font-size: 15px;
    text-decoration: none;
}
.ai-workbench-current:before {
    position: absolute;
    top: 9px;
    bottom: 9px;
    left: 0;
    width: 4px;
    background: #4e7de6;
    content: "";
}
.ai-workbench-current:hover { color: #2f64d5 !important; background: #e8f0ff; text-decoration: none; }

.ai-recent-heading {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 25px 28px 12px;
    color: #263044;
    font-size: 14px;
}
.ai-conversation-list { padding: 0 28px 16px; }
.ai-conversation-list p { margin: 0 0 0 28px; color: #a2aab8; font-size: 12px; }
.ai-conversation-list button {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 9px;
    overflow: hidden;
    padding: 7px 8px;
    border: 0;
    border-radius: 5px;
    color: #6a7689;
    background: transparent;
    text-align: left;
    font-size: 12px;
}
.ai-conversation-list button span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ai-conversation-list button:hover,
.ai-conversation-list button.active { color: #3268d7; background: #f1f5fd; }

.ai-business-shortcuts { display: flex; flex-direction: column; padding-top: 2px; }
.ai-business-shortcuts a {
    min-height: 53px;
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr) 14px;
    align-items: center;
    gap: 11px;
    padding: 0 27px;
    color: #253044 !important;
    background: #fff;
    font-size: 14px;
    text-decoration: none;
}
.ai-business-shortcuts a:hover { color: #3268d7 !important; background: #f5f8fe; text-decoration: none; }
.ai-business-shortcuts a > i:first-child { color: #293346; text-align: center; }
.ai-business-shortcuts a > i:last-child { color: #78869a; text-align: right; }

@media (max-width: 1280px) {
    .main-header .navbar .nav > li > a,
    .main-header .navbar .navbar-nav > li > a { padding-right: 10px; padding-left: 10px; font-size: 12px; }
    #firstnav > .nav-addtabs > li > a { min-width: auto; }
    #firstnav > .nav-addtabs > li > a[title="销冠CRM"],
    #firstnav > .nav-addtabs > li > a[title="AI中心"],
    #firstnav > .nav-addtabs > li > a[title="知识库"] { min-width: 92px; }
}

@media (max-width: 767px) {
    .main-header .logo { width: 130px; height: 50px; line-height: 50px; }
    .main-header .navbar { min-height: 50px; margin-left: 0; }
    .main-header .navbar .sidebar-toggle { min-height: 50px; padding: 15px; }
    .main-sidebar { width: 230px; padding-top: 50px; }
    .content-wrapper, .right-side, .main-footer { margin-left: 0; }
    .fixed .content-wrapper, .fixed .right-side,
    .multiplenav.fixed .content-wrapper, .multiplenav.fixed .right-side,
    body.ai-center-active .content-wrapper, body.ai-center-active .right-side { padding-top: 50px !important; }
}

/* OA visual system v2 — calm blue/white surfaces with lightweight states. */
:root {
    --oa-blue: #3970e6;
    --oa-blue-hover: #2f63d3;
    --oa-blue-soft: #eef4ff;
    --oa-blue-softer: #f5f8ff;
    --oa-ink: #1f2a3d;
    --oa-muted: #748197;
    --oa-line: #e8edf4;
    --oa-canvas: #f6f8fb;
    --oa-radius: 10px;
}

body,
.wrapper {
    color: var(--oa-ink);
    background: var(--oa-canvas) !important;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* Keep the business bar and the content tabs on separate, predictable rows. */
.main-header {
    min-height: 60px;
    border: 0;
    box-shadow: 0 1px 0 rgba(255,255,255,.12), 0 5px 18px rgba(32,65,135,.09);
}

.main-header .logo {
    width: 248px;
    height: 60px;
    border-right-color: rgba(255,255,255,.1) !important;
    line-height: 60px;
    font-size: 20px;
    font-weight: 620;
    letter-spacing: -.02em;
}

.main-header .navbar {
    min-height: 60px;
    margin-left: 248px;
}

#firstnav {
    height: 60px;
    border: 0 !important;
    box-shadow: none;
}

#firstnav .sidebar-toggle {
    width: 46px;
    min-height: 60px;
    height: 60px;
    padding: 0;
    line-height: 60px;
    color: rgba(255,255,255,.9) !important;
    background: transparent !important;
}

#firstnav .sidebar-toggle:hover {
    color: #fff !important;
    background: rgba(255,255,255,.1) !important;
}

#firstnav > .nav-addtabs {
    left: 46px;
    height: 60px;
    border: 0 !important;
    background: transparent !important;
}

#firstnav > .nav-addtabs > li,
#firstnav > .nav-addtabs > li.active {
    height: 60px;
    margin: 0;
    border: 0;
    background: transparent;
}

#firstnav > .nav-addtabs > li > a,
#firstnav > .nav-addtabs > li.active > a {
    min-width: 78px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0 12px !important;
    border: 0 !important;
    line-height: 1;
    color: rgba(255,255,255,.9) !important;
    background: transparent !important;
    font-size: 13px;
    font-weight: 540;
}

#firstnav > .nav-addtabs > li > a:hover,
#firstnav > .nav-addtabs > li > a:focus,
#firstnav > .nav-addtabs > li.active > a {
    color: #fff !important;
    background: rgba(255,255,255,.11) !important;
}

#firstnav .navbar-custom-menu,
#firstnav .navbar-custom-menu > .navbar-nav,
#firstnav .navbar-custom-menu > .navbar-nav > li {
    height: 60px;
}

#firstnav .navbar-custom-menu > .navbar-nav > li > a {
    min-height: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 13px;
    border: 0;
    color: rgba(255,255,255,.9) !important;
    background: transparent !important;
    line-height: 1;
}

#firstnav .navbar-custom-menu > .navbar-nav > li > a:hover,
#firstnav .navbar-custom-menu > .navbar-nav > li.open > a {
    color: #fff !important;
    background: rgba(255,255,255,.1) !important;
}

#secondnav {
    top: 60px;
    height: 36px;
    padding: 2px 43px;
    border-bottom: 1px solid var(--oa-line);
    background: rgba(255,255,255,.98);
    box-shadow: none;
}

#secondnav .nav-addtabs {
    height: 32px;
    border: 0 !important;
    background: transparent !important;
}

#secondnav .nav-addtabs > li,
#secondnav .nav-addtabs > li.active {
    height: 32px;
    margin: 0 5px 0 0;
    padding: 0;
    border: 0;
    border-radius: 9px;
    background: transparent;
}

#secondnav .nav-addtabs > li > a,
#secondnav .nav-addtabs > li.active > a,
#secondnav .nav-addtabs > li > a:hover,
#secondnav .nav-addtabs > li > a:focus {
    height: 32px;
    display: flex;
    align-items: center;
    gap: 6px;
    overflow: hidden;
    padding: 0 12px;
    border: 0 !important;
    border-radius: 9px;
    color: #68758a !important;
    background: transparent !important;
    line-height: 32px;
    font-size: 12px;
    font-weight: 520;
    box-shadow: none;
}

#secondnav .nav-addtabs > li:hover,
#secondnav .nav-addtabs > li:focus {
    border: 0;
    background: #f6f8fb;
}

#secondnav .nav-addtabs > li.active {
    border: 0;
    background: var(--oa-blue-soft);
}

#secondnav .nav-addtabs > li.active > a {
    color: var(--oa-blue) !important;
    background: transparent !important;
    font-weight: 620;
}

#secondnav .nav-addtabs > li .close-tab {
    right: 3px;
    color: #9ba7b8;
}

.main-sidebar {
    width: 248px;
    padding-top: 60px;
    border-right: 1px solid var(--oa-line);
    background: #fff !important;
}

.multiplenav .main-sidebar { padding-top: 60px; }
.content-wrapper,
.right-side,
.main-footer { margin-left: 248px; }
.fixed .content-wrapper,
.fixed .right-side { padding-top: 60px; }
.multipletab.multiplenav .content-wrapper,
.multipletab.multiplenav .right-side,
.multiplenav.fixed .content-wrapper,
.multiplenav.fixed .right-side { padding-top: 96px; }

.sidebar .user-panel {
    min-height: 64px;
    margin: 0;
    padding: 12px 17px 10px;
    border-bottom: 0;
}

.sidebar .user-panel .image img {
    width: 36px;
    height: 36px;
    object-fit: cover;
}

.sidebar .user-panel .info {
    left: 62px;
    padding-top: 1px;
    color: #7c899c !important;
    font-size: 11px;
}

.sidebar .user-panel .info > p {
    margin-bottom: 3px;
    color: #2f3a4d !important;
    font-size: 14px;
    font-weight: 620;
}

.sidebar-form {
    height: 40px;
    margin: 5px 10px 9px !important;
    overflow: visible;
    border: 0 !important;
    border-radius: 10px !important;
    background: #f6f8fb !important;
    box-shadow: inset 0 0 0 1px #edf1f6;
}

.sidebar-form .form-control,
.sidebar-form .btn {
    height: 40px;
    border: 0 !important;
    box-shadow: none !important;
}

.sidebar-menu {
    padding: 3px 8px 22px;
}

.sidebar-menu > li,
.sidebar-menu > li.aitu-ai-pinned-entry {
    margin: 2px 0;
}

.sidebar-menu > li > a,
.sidebar-menu > li.aitu-ai-pinned-entry > a,
.sidebar-menu .treeview-menu > li > a {
    min-height: 42px;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 0 11px;
    border: 0 !important;
    border-radius: 9px;
    color: #56647a !important;
    background: transparent !important;
    font-size: 13px;
    font-weight: 480;
    box-shadow: none !important;
    transition: color .15s ease, background .15s ease;
}

.sidebar-menu > li > a > .fa,
.sidebar-menu .treeview-menu > li > a > .fa {
    width: 18px;
    color: #738198;
    text-align: center;
}

.sidebar-menu > li.aitu-ai-pinned-entry {
    position: relative;
    margin-bottom: 7px;
}

.sidebar-menu > li.aitu-ai-pinned-entry > a {
    padding-right: 12px;
    color: #3568d2 !important;
    background: #f1f5ff !important;
    font-weight: 620;
}

.sidebar-menu > li.aitu-ai-pinned-entry > a > .fa { color: #3970e6; }

/* AI 管理页继续收进固定工作台入口；独立的知识库一级菜单保留自己的侧栏首页。 */
.sidebar-menu > li:not(.aitu-ai-pinned-entry):has(> a[href*="/ai_center/"]):not(:has(> a[href*="/ai_center/knowledge"])) {
    display: none !important;
}

.sidebar-menu > li:hover > a,
.sidebar-menu > li.active > a,
.sidebar-menu > li.menu-open > a,
.sidebar-menu > li.treeview-open > a,
.sidebar-menu > li.aitu-ai-pinned-entry > a:hover,
.sidebar-menu > li.aitu-ai-pinned-entry.active > a {
    border: 0 !important;
    color: #2f63d3 !important;
    background: #eaf1ff !important;
}

.sidebar-menu > li:hover > a > .fa,
.sidebar-menu > li.active > a > .fa,
.sidebar-menu > li.aitu-ai-pinned-entry.active > a > .fa {
    color: #3970e6;
}

.sidebar-menu .treeview-menu {
    margin: 2px 0 5px 20px;
    padding: 3px;
    border-radius: 9px;
    background: #f8fafc !important;
}

.sidebar-menu .treeview-menu > li.active > a,
.sidebar-menu .treeview-menu > li > a:hover {
    color: #3568d2 !important;
    background: #eef4ff !important;
}

.content-wrapper,
.right-side,
.tab-content.tab-addtabs {
    background: var(--oa-canvas) !important;
}

.btn,
.form-control,
.input-group-addon,
.selectpicker,
.bootstrap-select > .dropdown-toggle {
    border-radius: 8px !important;
    box-shadow: none !important;
}

.btn-default {
    border-color: #e3e8ef !important;
    color: #5f6d81 !important;
    background: #fff !important;
}

.btn-default:hover,
.btn-default:focus {
    border-color: #d8e1ef !important;
    color: #3568d2 !important;
    background: #f6f9ff !important;
}

.panel,
.box,
.well,
.modal-content {
    border-color: var(--oa-line) !important;
    border-radius: 12px !important;
    box-shadow: 0 6px 22px rgba(42,62,96,.045) !important;
}

.dropdown-menu {
    padding: 6px;
    border: 1px solid var(--oa-line);
    border-radius: 10px;
    box-shadow: 0 14px 34px rgba(30,48,80,.11);
}

/* The AI module uses the same soft navigation language as the OA sidebar. */
body.ai-center-active .content-wrapper,
body.ai-center-active .right-side { padding-top: 60px !important; }

body.ai-center-active .main-sidebar { border-right-color: var(--oa-line); }

body.ai-center-active .sidebar .user-panel {
    min-height: 76px;
    padding: 18px 20px 10px;
}

body.ai-center-active .sidebar .user-panel .info { left: 70px; }

.ai-new-conversation {
    width: calc(100% - 20px);
    height: 40px;
    margin: 6px 10px 10px;
    padding: 0 13px;
    border: 0;
    border-radius: 9px;
    color: #58677d;
    background: #f6f8fb;
    box-shadow: none;
}

.ai-new-conversation:hover {
    border: 0;
    color: #3568d2;
    background: #eef4ff;
}

.ai-workbench-current {
    min-height: 44px;
    gap: 10px;
    margin: 3px 10px;
    padding: 0 13px;
    border-radius: 9px;
    color: #3568d2 !important;
    background: #eef4ff;
    font-size: 13px;
    font-weight: 620;
}

.ai-workbench-current:before { display: none; }
.ai-workbench-current:hover { color: #2f63d3 !important; background: #e7efff; }

.ai-business-shortcuts {
    gap: 2px;
    padding: 4px 8px;
}

.ai-business-shortcuts a {
    min-height: 44px;
    grid-template-columns: 18px minmax(0,1fr) 14px;
    gap: 9px;
    padding: 0 12px;
    border-radius: 9px;
    color: #56647a !important;
    font-size: 13px;
}

.ai-business-shortcuts a:hover {
    color: #3568d2 !important;
    background: #f1f5ff;
}

@media (max-width: 1280px) {
    #firstnav > .nav-addtabs > li > a,
    #firstnav > .nav-addtabs > li.active > a {
        min-width: auto;
        padding-right: 10px !important;
        padding-left: 10px !important;
        font-size: 12px;
    }
}

/*
 * OA semantic color normalization
 *
 * FastAdmin and several legacy modules use Bootstrap's success/info palettes
 * for ordinary actions such as Add, Edit, online state and completed state.
 * Keep destructive and warning colors intact, while mapping every positive
 * green/teal treatment to the product's blue system.
 */
.btn-success,
.btn-info,
.label-success,
.label-info,
.badge-success,
.badge-info,
.progress-bar-success,
.progress-bar-info,
.bg-green,
.bg-aqua,
.bg-success,
.bg-info,
.small-box.bg-green,
.small-box.bg-aqua,
.callout.callout-success,
.callout.callout-info,
.toast-primary,
.toast-success,
.toast-info,
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-success,
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-info,
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-success,
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-info,
.layui-layer-fast .layui-layer-btn .layui-layer-btn0 {
    border-color: var(--oa-blue) !important;
    color: #fff !important;
    background: var(--oa-blue) !important;
}

.btn-success:hover,
.btn-success:focus,
.btn-success.focus,
.btn-success:active,
.btn-success.active,
.open > .dropdown-toggle.btn-success,
.btn-info:hover,
.btn-info:focus,
.btn-info.focus,
.btn-info:active,
.btn-info.active,
.open > .dropdown-toggle.btn-info,
.layui-layer-fast .layui-layer-btn .layui-layer-btn0:hover,
.layui-layer-fast .layui-layer-btn .layui-layer-btn0:focus {
    border-color: #1f5cda !important;
    color: #fff !important;
    background: #1f5cda !important;
}

.btn-success.disabled,
.btn-success[disabled],
fieldset[disabled] .btn-success,
.btn-info.disabled,
.btn-info[disabled],
fieldset[disabled] .btn-info {
    border-color: #8eb2ff !important;
    color: #fff !important;
    background: #8eb2ff !important;
}

.alert-success,
.alert-info,
.list-group-item-success,
.list-group-item-info,
.table > thead > tr.success > th,
.table > tbody > tr.success > th,
.table > tfoot > tr.success > th,
.table > thead > tr.success > td,
.table > tbody > tr.success > td,
.table > tfoot > tr.success > td,
.table > thead > tr.info > th,
.table > tbody > tr.info > th,
.table > tfoot > tr.info > th,
.table > thead > tr.info > td,
.table > tbody > tr.info > td,
.table > tfoot > tr.info > td {
    border-color: #d4e3ff !important;
    color: #315fbd !important;
    background: var(--oa-blue-soft) !important;
}

.text-success,
.text-info,
.text-green,
.text-aqua,
a.text-success,
a.text-info {
    color: var(--oa-blue) !important;
}

.border-success,
.border-info,
.border-green,
.border-aqua {
    border-color: var(--oa-blue) !important;
}

.user-panel .status-success,
.user-panel .status-online,
.sidebar .user-panel .fa-circle,
.sidebar .user-panel i[class*="circle"] {
    color: var(--oa-blue) !important;
}

/* View-level styles may load after the shared theme; the extra body scope keeps
 * these custom cards on the same blue palette without touching warning/error UI. */
body .field-card.active {
    border-color: var(--oa-blue) !important;
    background: #f4f8ff !important;
}

body .field-card-header:focus {
    outline-color: rgba(36, 107, 254, .28) !important;
}

body .preview-box {
    border-left-color: var(--oa-blue) !important;
    background: #f7faff !important;
}

/* The iframe pages switch to an 18px content gutter below 820px. Because the
 * OA sidebar is 248px wide, mirror that breakpoint in the shell. The iframe
 * itself keeps a 15px page gutter, so 15px + 28px (or 18px) is the actual
 * content edge the tab pills need to follow. */
@media (max-width: 1068px) and (min-width: 768px) {
    #secondnav { padding-right: 33px; padding-left: 33px; }
}

@media (max-width: 767px) {
    .main-header .logo { width: 132px; height: 52px; line-height: 52px; font-size: 17px; }
    .main-header,
    .main-header .navbar,
    #firstnav,
    #firstnav .sidebar-toggle,
    #firstnav > .nav-addtabs { min-height: 52px; height: 52px; }
    .main-header .navbar { margin-left: 0; }
    #secondnav { top: 52px; padding-right: 33px; padding-left: 33px; }
    .main-sidebar { width: 230px; padding-top: 52px; }
    .fixed .content-wrapper,
    .fixed .right-side { padding-top: 52px; }
    .multipletab.multiplenav .content-wrapper,
    .multipletab.multiplenav .right-side { padding-top: 88px; }
}

/* OA visual system v3 — production navigation, responsive workspace and focus states. */
:root {
    --oa-sidebar-compact: 72px;
    --oa-header-height: 60px;
    --oa-tabbar-height: 36px;
    --oa-tab-height: calc(var(--oa-tabbar-height) - 4px);
    --oa-shell-offset: calc(var(--oa-header-height) + var(--oa-tabbar-height));
    --oa-focus-ring: 0 0 0 3px rgba(57, 112, 230, .22);
    --oa-shadow-menu: 0 18px 46px rgba(31, 48, 79, .16);
}

/* Rare system utilities live in the account menu instead of competing with business modules. */
.legacy-home-link,
.legacy-cache-link,
.legacy-language-link,
.legacy-fullscreen-link,
.legacy-control-link {
    display: none !important;
}

#firstnav > .nav-addtabs > li > a,
#firstnav > .nav-addtabs > li.active > a,
#firstnav .navbar-custom-menu > .navbar-nav > li > a {
    min-height: 60px !important;
    height: 60px !important;
}

#firstnav .navbar-custom-menu > .navbar-nav > .user-menu > a {
    padding-right: 16px;
    padding-left: 14px;
}

.navbar-nav > .user-menu > .dropdown-menu {
    width: 292px;
    overflow: hidden;
    border: 1px solid var(--oa-line);
    border-radius: 12px;
    box-shadow: var(--oa-shadow-menu);
}

.navbar-nav > .user-menu > .dropdown-menu > .user-header {
    height: auto;
    min-height: 142px;
    padding: 20px 18px 16px;
    background: linear-gradient(145deg, #3970e6, #2859c8) !important;
}

.oa-account-actions {
    padding: 10px 12px !important;
    border-bottom: 1px solid var(--oa-line);
    background: #fff !important;
}

.oa-account-action-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
}

.oa-account-action-grid > a {
    min-height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 6px;
    border-radius: 9px;
    color: #65738a;
    background: #f7f9fc;
    font-size: 11px;
}

.oa-account-action-grid > a:hover,
.oa-account-action-grid > a:focus {
    color: var(--oa-blue);
    background: var(--oa-blue-soft);
}

.navbar-nav > .user-menu > .dropdown-menu > .user-footer {
    padding: 11px 12px;
    background: #fff;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: none !important;
    box-shadow: var(--oa-focus-ring) !important;
}

.sidebar-menu > li > a .pull-right-container {
    right: 12px;
    color: #9aa6b8;
}

.sidebar-menu > li.active > a .pull-right-container,
.sidebar-menu > li:hover > a .pull-right-container {
    color: var(--oa-blue);
}

.table > thead > tr > th {
    color: #65738a;
    background: #f8fafc;
    font-weight: 620;
}

.table > tbody > tr:hover > td {
    background: #f8fbff;
}

/* 768–1180px is the common laptop/split-window range. A compact navigation rail
 * keeps the workspace usable; hover or keyboard focus reveals the full menu. */
@media (min-width: 768px) and (max-width: 1180px) {
    body:not(.ai-center-active) .main-header .logo {
        width: var(--oa-sidebar-compact);
        padding: 0 6px;
        font-size: 13px;
    }

    body:not(.ai-center-active) .main-header .logo > .logo-lg {
        display: none !important;
    }

    body:not(.ai-center-active) .main-header .logo > .logo-mini {
        display: block !important;
        margin: 0;
        font-size: 13px;
        font-weight: 650;
    }

    body:not(.ai-center-active) .main-header .navbar {
        margin-left: var(--oa-sidebar-compact) !important;
    }

    body.sidebar-mini.sidebar-collapse:not(.ai-center-active) .main-header .logo {
        width: var(--oa-sidebar-compact) !important;
    }

    body.sidebar-mini.sidebar-collapse:not(.ai-center-active) .main-header .navbar {
        margin-left: var(--oa-sidebar-compact) !important;
    }

    body:not(.ai-center-active) .main-sidebar {
        width: var(--oa-sidebar-compact) !important;
        overflow: hidden;
        z-index: 1028;
        transition: width .18s ease, box-shadow .18s ease;
    }

    body:not(.ai-center-active) .content-wrapper,
    body:not(.ai-center-active) .right-side,
    body:not(.ai-center-active) .main-footer {
        margin-left: var(--oa-sidebar-compact) !important;
    }

    body.sidebar-mini.sidebar-collapse:not(.ai-center-active) .main-sidebar {
        width: var(--oa-sidebar-compact) !important;
    }

    body.sidebar-mini.sidebar-collapse:not(.ai-center-active) .content-wrapper,
    body.sidebar-mini.sidebar-collapse:not(.ai-center-active) .right-side,
    body.sidebar-mini.sidebar-collapse:not(.ai-center-active) .main-footer {
        margin-left: var(--oa-sidebar-compact) !important;
    }

    body:not(.ai-center-active) .main-sidebar:hover,
    body:not(.ai-center-active) .main-sidebar:focus-within {
        width: 248px !important;
        box-shadow: var(--oa-shadow-menu) !important;
    }

    body:not(.ai-center-active) .sidebar .user-panel {
        min-height: 64px;
        padding: 12px 18px 10px;
    }

    body:not(.ai-center-active) .sidebar .user-panel .image {
        float: none !important;
    }

    body:not(.ai-center-active) .sidebar .user-panel .info,
    body:not(.ai-center-active) .sidebar-form,
    body:not(.ai-center-active) .sidebar-menu > li > a > span,
    body:not(.ai-center-active) .sidebar-menu > li > a > .pull-right-container,
    body:not(.ai-center-active) .sidebar-menu .treeview-menu {
        display: none !important;
    }

    body:not(.ai-center-active) .sidebar-menu {
        padding-right: 9px;
        padding-left: 9px;
        overflow: hidden;
    }

    body:not(.ai-center-active) .sidebar-menu > li > a,
    body:not(.ai-center-active) .sidebar-menu > li.aitu-ai-pinned-entry > a {
        justify-content: center;
        gap: 0;
        padding-right: 0;
        padding-left: 0;
    }

    body:not(.ai-center-active) .sidebar-menu > li.aitu-ai-pinned-entry > .aitu-ai-menu-toggle {
        display: none;
    }

    body:not(.ai-center-active) .sidebar-menu > li > a > .fa {
        width: 24px;
        margin: 0;
        font-size: 15px;
    }

    body:not(.ai-center-active) .main-sidebar:hover .sidebar .user-panel,
    body:not(.ai-center-active) .main-sidebar:focus-within .sidebar .user-panel {
        padding-right: 17px;
        padding-left: 17px;
    }

    body:not(.ai-center-active) .main-sidebar:hover .sidebar .user-panel .image,
    body:not(.ai-center-active) .main-sidebar:focus-within .sidebar .user-panel .image {
        float: left !important;
    }

    body:not(.ai-center-active) .main-sidebar:hover .sidebar .user-panel .info,
    body:not(.ai-center-active) .main-sidebar:focus-within .sidebar .user-panel .info,
    body:not(.ai-center-active) .main-sidebar:hover .sidebar-form,
    body:not(.ai-center-active) .main-sidebar:focus-within .sidebar-form,
    body:not(.ai-center-active) .main-sidebar:hover .sidebar-menu > li > a > span,
    body:not(.ai-center-active) .main-sidebar:focus-within .sidebar-menu > li > a > span,
    body:not(.ai-center-active) .main-sidebar:hover .sidebar-menu > li > a > .pull-right-container,
    body:not(.ai-center-active) .main-sidebar:focus-within .sidebar-menu > li > a > .pull-right-container {
        display: block !important;
    }

    body:not(.ai-center-active) .main-sidebar:hover .sidebar-menu,
    body:not(.ai-center-active) .main-sidebar:focus-within .sidebar-menu {
        padding-right: 8px;
        padding-left: 8px;
    }

    body:not(.ai-center-active) .main-sidebar:hover .sidebar-menu > li > a,
    body:not(.ai-center-active) .main-sidebar:focus-within .sidebar-menu > li > a,
    body:not(.ai-center-active) .main-sidebar:hover .sidebar-menu > li.aitu-ai-pinned-entry > a,
    body:not(.ai-center-active) .main-sidebar:focus-within .sidebar-menu > li.aitu-ai-pinned-entry > a {
        justify-content: flex-start;
        gap: 9px;
        padding-right: 48px;
        padding-left: 11px;
    }

    body:not(.ai-center-active) .main-sidebar:hover .sidebar-menu > li.aitu-ai-pinned-entry > .aitu-ai-menu-toggle,
    body:not(.ai-center-active) .main-sidebar:focus-within .sidebar-menu > li.aitu-ai-pinned-entry > .aitu-ai-menu-toggle {
        display: inline-flex;
    }

    body:not(.ai-center-active) .main-sidebar:hover .sidebar-menu > li.active > .treeview-menu,
    body:not(.ai-center-active) .main-sidebar:focus-within .sidebar-menu > li.active > .treeview-menu,
    body:not(.ai-center-active) .main-sidebar:hover .sidebar-menu > li.menu-open > .treeview-menu,
    body:not(.ai-center-active) .main-sidebar:focus-within .sidebar-menu > li.menu-open > .treeview-menu {
        display: block !important;
    }

    #firstnav > .nav-addtabs > li > a,
    #firstnav > .nav-addtabs > li.active > a {
        padding-right: 9px !important;
        padding-left: 9px !important;
    }
}

@media (min-width: 893px) and (max-width: 1180px) {
    #secondnav { padding-right: 43px; padding-left: 43px; }
}

@media (min-width: 768px) and (max-width: 892px) {
    #secondnav { padding-right: 33px; padding-left: 33px; }
}

@media (max-width: 767px) {
    .navbar-nav > .user-menu > .dropdown-menu {
        right: 6px;
        width: min(292px, calc(100vw - 12px));
    }

    #firstnav .navbar-custom-menu > .navbar-nav > .user-menu > a {
        padding-right: 12px;
        padding-left: 12px;
    }
}

/* Stable shell geometry: the legacy settings drawer used to make .wrapper
 * scrollable. Clicking an addtab anchor could therefore move the whole admin
 * shell, clipping the header and placing the iframe underneath the tab bar. */
/* This stylesheet is also loaded by iframe pages. Lock only the outer tab
 * shell; locking every html/body makes long business pages impossible to scroll.
 * Do not force overflow:auto on children: dialogs must retain their own locks. */
html.oa-tab-shell,
html.oa-tab-shell > body#tabs {
    height: 100%;
    overflow: hidden !important;
}

html.oa-tab-shell > body#tabs > .wrapper {
    height: 100vh;
    min-height: 100vh;
    overflow: hidden !important;
}

.control-sidebar,
.control-sidebar-bg {
    position: fixed !important;
    top: var(--oa-header-height);
    bottom: 0;
    height: auto !important;
}

.control-sidebar {
    padding-top: 0;
    overflow-y: auto;
}

#secondnav {
    top: var(--oa-header-height);
    height: var(--oa-tabbar-height);
    box-sizing: border-box;
}

#secondnav .nav-addtabs,
#secondnav .nav-addtabs > li,
#secondnav .nav-addtabs > li.active {
    height: var(--oa-tab-height);
}

#secondnav .nav-addtabs > li > a,
#secondnav .nav-addtabs > li.active > a,
#secondnav .nav-addtabs > li > a:hover,
#secondnav .nav-addtabs > li > a:focus {
    height: var(--oa-tab-height);
    min-height: var(--oa-tab-height);
    line-height: var(--oa-tab-height);
}

/* Reserve a dedicated hit area for closable tabs. The addtabs close glyph is
 * absolutely positioned, so without this space it sits on top of the label. */
#secondnav .nav-addtabs > li:has(> .close-tab) > a,
#secondnav .nav-addtabs > li:has(> .close-tab).active > a,
#secondnav .nav-addtabs > li:has(> .close-tab) > a:hover,
#secondnav .nav-addtabs > li:has(> .close-tab) > a:focus {
    padding-right: 34px;
}

#secondnav .nav-addtabs > li > .close-tab {
    top: 50%;
    right: 5px;
    width: 20px;
    height: 20px;
    margin-top: 0;
    border-radius: 6px;
    color: #98a5b8;
    line-height: 20px;
    text-align: center;
    transform: translateY(-50%);
}

#secondnav .nav-addtabs > li > .close-tab::before {
    content: "\f00d";
    font-family: FontAwesome;
    font-size: 11px;
    line-height: 20px;
}

#secondnav .nav-addtabs > li:hover > .close-tab,
#secondnav .nav-addtabs > li:focus-within > .close-tab {
    display: block;
    color: #65748a;
    background: #e8edf5;
}

.content-wrapper,
.right-side {
    height: 100vh;
    min-height: 100vh !important;
    overflow: hidden;
}

.tab-addtabs .tab-pane > iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

/* The outer layout is not a Bootstrap container: its negative row gutters
 * otherwise make every phone page 30px wider. Keep nested form grids intact. */
body.inside-header #main > .tab-content > #content > .row {
    margin-left: 0;
    margin-right: 0;
}
body.inside-header #main > .tab-content > #content > .row > .col-xs-12 {
    padding-left: 0;
    padding-right: 0;
}

.multipletab.multiplenav .content-wrapper,
.multipletab.multiplenav .right-side,
.multiplenav.fixed .content-wrapper,
.multiplenav.fixed .right-side {
    padding-top: var(--oa-shell-offset);
}

@media (max-width: 767px) {
    :root {
        --oa-header-height: 52px;
    }

    /* Desktop's 248px gutter and the older 50px !important offset must not
     * squeeze mobile iframe pages or cover their top controls with the tabbar. */
    html.oa-tab-shell body#tabs:not(.ai-center-active) .content-wrapper,
    html.oa-tab-shell body#tabs:not(.ai-center-active) .right-side {
        margin-left: 0 !important;
        padding-top: var(--oa-shell-offset) !important;
    }

    #firstnav > .nav-addtabs,
    #firstnav > .nav-addtabs > li,
    #firstnav > .nav-addtabs > li.active,
    #firstnav > .nav-addtabs > li > a,
    #firstnav > .nav-addtabs > li.active > a,
    #firstnav .navbar-custom-menu > .navbar-nav > li > a {
        min-height: var(--oa-header-height) !important;
        height: var(--oa-header-height) !important;
    }
}