/* FTIP UI Foundation v1 — shared visual language for every business workspace. */
:root {
    --ftip-shell-max: 1680px;
    --ftip-shell-gap: var(--ftip-space-4, 16px);
    --ftip-page-padding-x: clamp(14px, 1.35vw, 24px);
    --ftip-page-padding-y: 18px;
    --ftip-surface: var(--ftip-surface-raised, #ffffff);
    --ftip-surface-subtle: var(--ftip-surface-muted, #f8fafc);
    --ftip-line: var(--ftip-border-subtle, #dfe7f1);
    --ftip-title: var(--ftip-text-strong, #17324d);
    --ftip-muted: var(--ftip-text-muted, #6b7f93);
    --ftip-radius: 10px;
    --ftip-shadow: 0 4px 18px rgba(30, 58, 95, .07);
}

.main {
    padding: var(--ftip-page-padding-y) var(--ftip-page-padding-x);
    background: #f3f6fa;
}

.ftip-page-stage {
    width: min(100%, var(--ftip-shell-max));
    min-height: 100%;
    margin: 0 auto;
    animation: ftip-page-enter .16s ease-out;
}

.ftip-page-stage > * { min-width: 0; }

@keyframes ftip-page-enter {
    from { opacity: .55; transform: translateY(3px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Existing modules keep their names and behavior, but share one header rhythm.
 * Geometry belongs here; business-area colour remains explicit below so lazy
 * module CSS cannot turn later pages into visually unrelated headers. */
:is(.ph,.ac-page-header,.settings-page-header,.partners-page-header,.profile-page-header,
    .pu-page-header,.kb-page-header,.am-page-header,.tpl-page-header,.ev-page-header,
    .ar-page-header,.maps-page-header,.sr-page-header,.at-page-header,.sd-page-header,
    .perf-page-header,.qa-page-header,.mq-page-header,.cc-page-header,.lm-page-header,
    .system-page-header,.dev-workspace-title,.ai-page-title) {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    flex-wrap: nowrap !important;
    gap: 12px !important;
    min-height: 62px;
    max-height: 62px;
    box-sizing: border-box;
    margin: 0 0 var(--ftip-shell-gap) !important;
    padding: 12px 18px !important;
    border: 1px solid var(--ftip-line) !important;
    border-radius: var(--ftip-radius) !important;
    box-shadow: var(--ftip-shadow) !important;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
}

/* Standard-three business colours. All page titles remain one row. */
.ph-dashboard { background: linear-gradient(135deg,#eff6ff,#dbeafe) !important; border-left-color:#3b82f6 !important; }
.ph-acquisition,.ph-dark,.ac-page-header,.dev-workspace-title,
:is(.ar-page-header,.maps-page-header,.sr-page-header,.at-page-header,.sd-page-header,
    .perf-page-header,.qa-page-header,.cc-page-header) {
    background: linear-gradient(135deg,#1e3a5f,#2d5a87) !important;
    border-left-color:#3b82f6 !important;
}
.ph-leads,.ev-page-header,.lm-page-header {
    background: linear-gradient(135deg,#ecfdf5,#d1fae5) !important;
    border-left-color:#10b981 !important;
}
.ph-followup { background: linear-gradient(135deg,#fff7ed,#ffedd5) !important; border-left-color:#f97316 !important; }
.ph-templates,.tpl-page-header { background: linear-gradient(135deg,#f5f3ff,#ede9fe) !important; border-left-color:#8b5cf6 !important; }
.ph-marketing { background: linear-gradient(135deg,#fdf2f8,#fce7f3) !important; border-left-color:#ec4899 !important; }
.ph-ai { background: linear-gradient(135deg,#dbeafe,#bfdbfe) !important; border-left-color:#3b82f6 !important; }
.ai-page-title { background: linear-gradient(135deg,#dbeafe,#bfdbfe) !important; border-left-color:#3b82f6 !important; }
.ph-knowledge,.kb-page-header,.am-page-header { background: linear-gradient(135deg,#fff1f2,#ffe4e6) !important; border-left-color:#f43f5e !important; }
.ph-admin,.settings-page-header,.partners-page-header,.profile-page-header,
.pu-page-header,.system-page-header,.mq-page-header {
    background: linear-gradient(135deg,#f8fafc,#e8eef5) !important;
    border-left-color:#64748b !important;
}

:is(.ph,.ac-page-header,.settings-page-header,.partners-page-header,.profile-page-header,
    .pu-page-header,.kb-page-header,.am-page-header,.tpl-page-header,.ev-page-header,
    .ar-page-header,.maps-page-header,.sr-page-header,.at-page-header,.sd-page-header,
    .perf-page-header,.qa-page-header,.mq-page-header,.cc-page-header,.lm-page-header,
    .system-page-header,.dev-workspace-title,.ai-page-title)
    :is(strong,h1,.header-title,.header-title-zh,[class$="-header-title"]) {
    color: var(--ftip-title) !important;
    font-size: 18px !important;
    font-weight: 700 !important;
}

:is(.ph,.ac-page-header,.settings-page-header,.partners-page-header,.profile-page-header,
    .pu-page-header,.kb-page-header,.am-page-header,.tpl-page-header,.ev-page-header,
    .ar-page-header,.maps-page-header,.sr-page-header,.at-page-header,.sd-page-header,
    .perf-page-header,.qa-page-header,.mq-page-header,.cc-page-header,.lm-page-header,
    .system-page-header,.dev-workspace-title,.ai-page-title)
    :is(small,.header-title-en,[class$="-header-subtitle"]) {
    color: var(--ftip-muted) !important;
}

/* Dark acquisition headers need explicit contrast after late-loaded modules. */
:is(.ph-acquisition,.ph-dark,.ac-page-header,.dev-workspace-title,
    .ar-page-header,.maps-page-header,.sr-page-header,.at-page-header,.sd-page-header,
    .perf-page-header,.qa-page-header,.cc-page-header)
    :is(strong,h1,.ph-title,.header-title,.header-title-zh,[class$="-header-title"]) {
    color: #fff !important;
}
:is(.ph-acquisition,.ph-dark,.ac-page-header,.dev-workspace-title,
    .ar-page-header,.maps-page-header,.sr-page-header,.at-page-header,.sd-page-header,
    .perf-page-header,.qa-page-header,.cc-page-header)
    :is(small,p,.ph-sub,.header-title-en,[class$="-header-subtitle"]) {
    color: #bfdbfe !important;
}

/* One page stage owns the outer spacing. Business pages must not add a second
 * perimeter, which previously made the five lead pages visibly misaligned. */
.ftip-page-stage > :is(.page-container,.cl-page,.email-verify-page) {
    width: 100%;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box;
}

/* Normalize the most common content surfaces without changing component structure. */
:is(.ac-panel,.card,.settings-section,.partners-section,.profile-section,.tpl-content-card) {
    border-color: var(--ftip-line) !important;
    border-radius: var(--ftip-radius) !important;
    box-shadow: var(--ftip-shadow);
}

.ftip-route-loading {
    display: grid;
    gap: 14px;
    min-height: 420px;
}
.ftip-route-loading__header,
.ftip-route-loading__line,
.ftip-route-loading__card {
    overflow: hidden;
    position: relative;
    border: 1px solid #e7edf5;
    border-radius: var(--ftip-radius);
    background: #fff;
}
.ftip-route-loading__header { height: 64px; }
.ftip-route-loading__line { width: 42%; height: 34px; }
.ftip-route-loading__grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 14px; }
.ftip-route-loading__card { height: 108px; }
.ftip-route-loading__body { height: 260px; }
.ftip-route-loading__header::after,
.ftip-route-loading__line::after,
.ftip-route-loading__card::after {
    content: '';
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(90deg,transparent,rgba(224,234,247,.75),transparent);
    animation: ftip-skeleton 1.25s infinite;
}

@keyframes ftip-skeleton { to { transform: translateX(100%); } }

.page-load-error {
    display: grid;
    place-items: center;
    gap: 10px;
    min-height: 320px;
    padding: 32px;
    border: 1px solid #fecaca;
    border-radius: var(--ftip-radius);
    background: #fff7f7;
    color: #b42318;
    text-align: center;
}
.page-load-error strong { color: #991b1b; font-size: 17px; }
.page-load-error span { max-width: 560px; color: #7f1d1d; line-height: 1.6; }
.page-load-error button { min-height: 38px; padding: 0 16px; border: 1px solid #dc2626; border-radius: 8px; background: #fff; color: #b91c1c; cursor: pointer; }

/* UI-12：公共响应式与可访问性护栏，不改各业务组件的数据结构。 */
.ftip-page-stage :is(.el-table,.table-container,[class$="-table-wrap"],[class$="-table-container"]) { max-width: 100%; }
.ftip-page-stage :is(.el-table__body-wrapper,.el-scrollbar__wrap,[class$="-table-wrap"]) { overflow-x: auto; }
.ftip-page-stage .el-table .cell { min-width: 0; }
.ftip-page-stage :is(button,[role="button"],a,input,select,textarea):focus-visible { outline: 0; box-shadow: var(--ftip-focus-ring); }
.el-overlay .el-dialog { width: min(var(--el-dialog-width, 720px), calc(100vw - 28px)); max-height: calc(100vh - 28px); margin: 14px auto !important; display: flex; flex-direction: column; }
.el-overlay .el-dialog__body { min-height: 0; overflow: auto; }
.ftip-empty-state,.ftip-error-state { display: grid; place-items: center; gap: 8px; min-height: 220px; padding: 28px; border: 1px dashed var(--ftip-line); border-radius: var(--ftip-radius); text-align: center; }
.ftip-empty-state { background: var(--ftip-surface-subtle); color: var(--ftip-muted); }
.ftip-error-state { background: #fff7f7; border-color: #fecaca; color: #b42318; }
.ftip-runtime-error { position: fixed; top: 70px; right: 18px; z-index: 10020; display: flex; align-items: center; gap: 10px; max-width: min(520px,calc(100vw - 36px)); padding: 12px 14px; border: 1px solid #fecaca; border-radius: 10px; background: #fff7f7; box-shadow: 0 12px 28px rgba(127,29,29,.18); color: #991b1b; }
.ftip-runtime-error button { border: 0; background: transparent; color: inherit; cursor: pointer; font-size: 18px; }

/* 高频表单与工具栏：桌面保持紧凑，小屏允许换行，不遮挡主操作。 */
.ftip-page-stage :is(.el-form,.el-dialog__body) { max-width: 100%; }
.ftip-page-stage :is(.el-input,.el-select,.el-date-editor,.el-cascader) { max-width: 100%; }
.ftip-page-stage :is(.el-button,button) { min-height: var(--ftip-control-height); }
.ftip-page-stage :is(.toolbar,[class$="-toolbar"],[class$="-actions"],[class$="-filters"]) { min-width: 0; }
.ftip-page-stage :is(.toolbar,[class$="-toolbar"],[class$="-actions"],[class$="-filters"]) > * { min-width: 0; }
.ftip-page-stage :is(.ph,[class$="-page-header"],.system-page-header,.dev-workspace-title,.ai-page-title) :is(.ph-actions,[class$="-actions"],.ai-title-action) { display: flex; flex-wrap: nowrap; gap: var(--ftip-space-2); margin-left: auto; flex-shrink: 0; }
.ftip-page-stage :is(.ftip-empty-state,.ftip-error-state) > span { max-width: 620px; line-height: 1.6; }

@media (max-width: 900px) {
    .ftip-route-loading__grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    :is(.ph,.ac-page-header,.settings-page-header,.partners-page-header,.profile-page-header,
        .pu-page-header,.kb-page-header,.am-page-header,.tpl-page-header,.ev-page-header,
        .ar-page-header,.maps-page-header,.sr-page-header,.at-page-header,.sd-page-header,
        .perf-page-header,.qa-page-header,.mq-page-header,.cc-page-header,.lm-page-header,
        .system-page-header,.dev-workspace-title,.ai-page-title) {
        align-items: center !important;
        gap: 10px;
    }
    .ftip-page-stage .ph { flex-wrap: nowrap; }
}

@media (max-width: 620px) {
    .main { padding: 10px; }
    .ftip-page-stage { width: 100%; }
    .el-overlay .el-dialog { width: calc(100vw - 16px); max-height: calc(100vh - 16px); margin: 8px auto !important; }
    .ftip-runtime-error { top: 62px; right: 8px; max-width: calc(100vw - 16px); }
    .el-overlay .el-dialog__header { padding: 14px 16px 10px; }
    .el-overlay .el-dialog__body { padding: 12px 16px; }
    .el-overlay .el-dialog__footer { padding: 10px 16px 14px; }
    .el-overlay .el-dialog__footer > * { margin: 3px; }
}

@media (prefers-reduced-motion: reduce) {
    .ftip-page-stage { animation: none; }
    .ftip-route-loading__header::after,
    .ftip-route-loading__line::after,
    .ftip-route-loading__card::after { animation: none; }
}
/* IA-4 全站业务路径：不侵入页面标题，统一提供可返回、可定位的单行路径。 */
.ftip-breadcrumb{display:flex;align-items:center;gap:12px;min-height:38px;margin:0 0 10px;padding:0 14px;border:1px solid #e4eaf2;border-radius:8px;background:#fff;color:#718096;font-size:13px;overflow:hidden}
.ftip-breadcrumb ol{display:flex;align-items:center;min-width:0;margin:0;padding:0;list-style:none;white-space:nowrap;overflow:hidden}
.ftip-breadcrumb li{display:flex;align-items:center;min-width:0}
.ftip-breadcrumb li+li::before{content:'›';padding:0 8px;color:#a0aec0}
.ftip-breadcrumb button{border:0;background:transparent;color:#316fa8;cursor:pointer;font:inherit;padding:3px 0}
.ftip-breadcrumb li:last-child span{color:#203a5f;font-weight:600;overflow:hidden;text-overflow:ellipsis}
.ftip-breadcrumb__back{flex:0 0 auto;padding-right:12px!important;border-right:1px solid #e4eaf2!important}
.ftip-breadcrumb__share{flex:0 0 auto;margin-left:auto;padding-left:12px!important;border-left:1px solid #e4eaf2!important}
@media(max-width:768px){.ftip-breadcrumb{margin-bottom:8px;padding:0 10px}.ftip-breadcrumb ol{overflow:auto}.ftip-breadcrumb li:nth-child(2){display:none}.ftip-breadcrumb li:nth-child(3)::before{display:none}}
@media(max-width:560px){.ftip-breadcrumb__share{font-size:0}.ftip-breadcrumb__share::after{content:'复制链接';font-size:12px}}
