/* ═══════════════════════════════════════════════════════════
   CAB Analyzer / 控气钎焊分析平台 — Global Stylesheet
   设计语言: 现代扁平 + 细腻阴影 + 微交互动画
   ═══════════════════════════════════════════════════════════ */

/* ── 设计变量 ──────────────────────────────────────── */
:root {
    /* 主色 */
    --brand-primary: #1B4F72;
    --brand-primary-dark: #0D2F47;
    --brand-primary-light: #2E86C1;
    --brand-accent: #3498DB;

    /* 语义色 */
    --success: #27AE60;
    --success-light: #D5F5E3;
    --warning: #F39C12;
    --warning-light: #FCF3CF;
    --danger: #E74C3C;
    --danger-light: #FADBD8;
    --info: #3498DB;
    --info-light: #D6EAF8;

    /* 中性色 */
    --gray-50: #F8F9FB;
    --gray-100: #F1F3F6;
    --gray-200: #E5E8EC;
    --gray-300: #D1D5DA;
    --gray-400: #9AA0A6;
    --gray-500: #6B7280;
    --gray-600: #4B5563;
    --gray-700: #374151;
    --gray-800: #1F2937;
    --gray-900: #111827;

    /* 背景 */
    --bg-body: #F0F2F5;
    --bg-card: #FFFFFF;
    --bg-subtle: #FAFBFC;

    /* 阴影 */
    --shadow-xs: 0 1px 2px rgba(16, 24, 40, 0.05);
    --shadow-sm: 0 1px 3px rgba(16, 24, 40, 0.08), 0 1px 2px rgba(16, 24, 40, 0.04);
    --shadow-md: 0 4px 12px rgba(16, 24, 40, 0.08), 0 2px 4px rgba(16, 24, 40, 0.04);
    --shadow-lg: 0 12px 24px rgba(16, 24, 40, 0.10), 0 4px 8px rgba(16, 24, 40, 0.05);
    --shadow-xl: 0 20px 40px rgba(16, 24, 40, 0.12);

    /* 圆角 */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-xl: 20px;

    /* 过渡 */
    --transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-base: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── 全局重置 ──────────────────────────────────────── */
body {
    /* 字体栈: 苹果 → Windows → 通用中文 → 西文 fallback
       Windows 上 "Microsoft YaHei UI" 优先于 "PingFang SC" */
    font-family: -apple-system, BlinkMacSystemFont,
                 "Segoe UI", "Microsoft YaHei UI", "Microsoft YaHei",
                 "PingFang SC", "Hiragino Sans GB",
                 "Source Han Sans SC", "Noto Sans CJK SC",
                 "WenQuanYi Micro Hei",
                 "Helvetica Neue", Helvetica, Arial, sans-serif;
    background: linear-gradient(180deg, #EEF2F7 0%, #F0F2F5 100%);
    color: var(--gray-800);
    font-size: 14px;
    line-height: 1.6;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--gray-900);
    font-weight: 600;
    letter-spacing: -0.01em;
}

h3 { font-size: 1.5rem; }
h5 { font-size: 1rem; }
h6 { font-size: 0.92rem; }

.text-muted {
    color: var(--gray-500) !important;
}

/* ── 主内容区 ──────────────────────────────────────── */
.main-content {
    margin-top: 0;
    min-height: calc(100vh - 58px);
    background: transparent;
    animation: pageSlideIn 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes pageSlideIn {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── 顶部导航栏 ──────────────────────────────────── */
.navbar {
    background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-primary-dark) 100%) !important;
    box-shadow: var(--shadow-md);
    border: none;
    backdrop-filter: blur(8px);
}

.navbar .navbar-brand, .navbar .fw-bold {
    color: #FFFFFF !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.navbar .text-light {
    color: rgba(255, 255, 255, 0.85) !important;
}

.navbar .form-control, .navbar .Select-control, .navbar input {
    background: rgba(255, 255, 255, 0.15) !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    color: #FFFFFF !important;
    border-radius: var(--radius-sm) !important;
    transition: all var(--transition-base);
}

.navbar .form-control:focus, .navbar input:focus {
    background: rgba(255, 255, 255, 0.25) !important;
    border-color: rgba(255, 255, 255, 0.5) !important;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.15) !important;
}

.navbar .form-control::placeholder {
    color: rgba(255, 255, 255, 0.6);
}

.navbar .btn-light {
    background: rgba(255, 255, 255, 0.2) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    color: #FFFFFF !important;
    transition: all var(--transition-base);
}

.navbar .btn-light:hover {
    background: rgba(255, 255, 255, 0.3) !important;
    transform: translateY(-1px);
}

/* 告警徽章 (导航栏) */
.navbar .badge {
    font-size: 0.7rem;
    padding: 0.25em 0.5em;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

/* ── 侧边栏 ──────────────────────────────────────── */
.sidebar {
    background: var(--bg-card) !important;
    border-right: 1px solid var(--gray-200) !important;
    box-shadow: 2px 0 8px rgba(16, 24, 40, 0.04);
    transition: all var(--transition-slow);
}

.sidebar-link {
    position: relative;
    color: var(--gray-600) !important;
    transition: all var(--transition-base) !important;
    font-weight: 500 !important;
    overflow: hidden;
}

.sidebar-link:hover {
    background: var(--gray-50) !important;
    color: var(--brand-primary) !important;
    transform: translateX(2px);
}

.sidebar-link.active,
.sidebar-link[class*="active"] {
    background: linear-gradient(90deg,
        rgba(46, 134, 193, 0.12) 0%,
        rgba(46, 134, 193, 0.04) 100%) !important;
    color: var(--brand-primary) !important;
    font-weight: 600 !important;
}

.sidebar-link.active::before,
.sidebar-link[class*="active"]::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 60%;
    background: var(--brand-accent);
    border-radius: 0 3px 3px 0;
}

.sidebar-link i {
    width: 20px;
    text-align: center;
    transition: transform var(--transition-base);
}

.sidebar-link:hover i {
    transform: scale(1.1);
}

/* ── 卡片 ──────────────────────────────────────────── */
.card {
    border: none !important;
    border-radius: var(--radius-md) !important;
    background: var(--bg-card) !important;
    box-shadow: var(--shadow-sm) !important;
    transition: all var(--transition-base);
    overflow: hidden;
}

.card:hover {
    box-shadow: var(--shadow-md) !important;
    transform: translateY(-2px);
}

.card-header {
    background: var(--bg-subtle) !important;
    border-bottom: 1px solid var(--gray-200) !important;
    font-weight: 600;
    color: var(--gray-800);
    padding: 0.85rem 1.1rem !important;
}

.card-body {
    padding: 1.2rem !important;
}

/* KPI 卡片特殊样式 */
.card.shadow-sm {
    position: relative;
    overflow: hidden;
}

.card.shadow-sm::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--brand-accent), var(--brand-primary-light));
    opacity: 0;
    transition: opacity var(--transition-base);
}

.card.shadow-sm:hover::before {
    opacity: 1;
}

/* KPI 卡片内部 H3 数值 */
.card-body h3 {
    font-size: 1.75rem !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em;
    margin-bottom: 0.25rem !important;
    line-height: 1.1;
}

/* ── Tab 导航 ──────────────────────────────────────── */
.nav-tabs {
    border-bottom: 2px solid var(--gray-200) !important;
    margin-bottom: 0;
}

.nav-tabs .nav-link {
    color: var(--gray-500) !important;
    background: transparent !important;
    border: none !important;
    padding: 0.75rem 1.25rem !important;
    font-weight: 500 !important;
    font-size: 0.92rem;
    position: relative;
    transition: all var(--transition-base);
}

.nav-tabs .nav-link:hover {
    color: var(--brand-primary) !important;
    background: var(--gray-50) !important;
    border: none !important;
}

.nav-tabs .nav-link.active {
    color: var(--brand-primary) !important;
    background: transparent !important;
    font-weight: 600 !important;
    border: none !important;
}

.nav-tabs .nav-link.active::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 1rem;
    right: 1rem;
    height: 3px;
    background: linear-gradient(90deg, var(--brand-primary), var(--brand-accent));
    border-radius: 3px 3px 0 0;
    animation: tabSlideIn 0.25s ease-out;
}

@keyframes tabSlideIn {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
}

/* ── 按钮 ──────────────────────────────────────────── */
.btn {
    font-weight: 500 !important;
    border-radius: var(--radius-sm) !important;
    padding: 0.5rem 1rem !important;
    transition: all var(--transition-base) !important;
    border: 1px solid transparent !important;
    letter-spacing: 0.01em;
}

.btn:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

.btn:active {
    transform: translateY(0);
}

.btn-primary {
    background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-primary-light) 100%) !important;
    border: none !important;
    color: white !important;
    box-shadow: 0 1px 3px rgba(27, 79, 114, 0.25) !important;
}

.btn-primary:hover {
    background: linear-gradient(135deg, var(--brand-primary-dark) 0%, var(--brand-primary) 100%) !important;
    box-shadow: 0 4px 12px rgba(27, 79, 114, 0.35) !important;
}

.btn-success {
    background: linear-gradient(135deg, #229954 0%, var(--success) 100%) !important;
    border: none !important;
    color: white !important;
    box-shadow: 0 1px 3px rgba(39, 174, 96, 0.25) !important;
}

.btn-success:hover {
    box-shadow: 0 4px 12px rgba(39, 174, 96, 0.35) !important;
}

.btn-outline-primary {
    color: var(--brand-primary) !important;
    border-color: var(--brand-primary) !important;
    background: transparent !important;
}

.btn-outline-primary:hover {
    background: var(--brand-primary) !important;
    color: white !important;
}

.btn-lg {
    padding: 0.75rem 1.5rem !important;
    font-size: 1rem !important;
}

.btn-sm {
    padding: 0.25rem 0.75rem !important;
    font-size: 0.82rem !important;
}

/* ── 表单控件 ──────────────────────────────────────── */
.form-control, .form-select {
    border: 1px solid var(--gray-300) !important;
    border-radius: var(--radius-sm) !important;
    padding: 0.5rem 0.75rem !important;
    font-size: 0.9rem !important;
    transition: all var(--transition-base) !important;
    background: white;
}

.form-control:focus, .form-select:focus {
    border-color: var(--brand-accent) !important;
    box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.15) !important;
    outline: none;
}

.form-label, label {
    font-weight: 500 !important;
    color: var(--gray-700) !important;
    margin-bottom: 0.35rem !important;
}

/* ── 输入组 ──────────────────────────────────────── */
.input-group-text {
    background: var(--gray-50) !important;
    border-color: var(--gray-300) !important;
    color: var(--gray-500) !important;
}

/* ── 复选框 / 单选按钮 ────────────────────────────── */
.form-check-input {
    border-color: var(--gray-300) !important;
    cursor: pointer;
}

.form-check-input:checked {
    background-color: var(--brand-primary) !important;
    border-color: var(--brand-primary) !important;
}

.form-check-input:focus {
    box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.2) !important;
}

.form-check-label {
    cursor: pointer;
    transition: color var(--transition-fast);
}

.form-check-label:hover {
    color: var(--brand-primary);
}

/* ── 表格 ──────────────────────────────────────────── */
.table {
    font-size: 0.88rem;
    color: var(--gray-800);
    margin-bottom: 0;
}

.table thead th {
    background: linear-gradient(180deg, var(--brand-primary) 0%, var(--brand-primary-dark) 100%) !important;
    color: white !important;
    font-weight: 600 !important;
    font-size: 0.82rem !important;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    border: none !important;
    padding: 0.75rem 0.85rem !important;
}

.table tbody tr {
    transition: background var(--transition-fast);
}

.table-hover tbody tr:hover {
    background: rgba(52, 152, 219, 0.05) !important;
}

.table-striped tbody tr:nth-of-type(odd) {
    background-color: var(--gray-50);
}

.table td {
    padding: 0.65rem 0.85rem !important;
    vertical-align: middle;
    border-top: 1px solid var(--gray-100) !important;
}

/* Dash DataTable */
.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner th {
    background-color: var(--brand-primary) !important;
    color: white !important;
    font-weight: 600 !important;
    font-size: 0.8rem !important;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    padding: 10px 12px !important;
    border: none !important;
}

.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner td {
    font-size: 0.82rem !important;
    padding: 8px 12px !important;
    border-bottom: 1px solid var(--gray-100) !important;
}

/* ── Accordion 手风琴 ────────────────────────────── */
.accordion-item {
    border: 1px solid var(--gray-200) !important;
    border-radius: var(--radius-sm) !important;
    margin-bottom: 0.5rem !important;
    overflow: hidden;
    background: var(--bg-card);
}

.accordion-button {
    background: var(--bg-subtle) !important;
    color: var(--gray-800) !important;
    font-weight: 500 !important;
    box-shadow: none !important;
    padding: 0.85rem 1.1rem !important;
    transition: all var(--transition-base);
}

.accordion-button:not(.collapsed) {
    background: linear-gradient(90deg, rgba(52, 152, 219, 0.08), rgba(52, 152, 219, 0.02)) !important;
    color: var(--brand-primary) !important;
    font-weight: 600 !important;
    box-shadow: inset 0 -1px 0 var(--gray-200) !important;
}

.accordion-button:focus {
    box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.15) !important;
}

.accordion-body {
    padding: 1rem 1.1rem !important;
    background: var(--bg-card);
}

/* ── Badge 徽章 ──────────────────────────────────── */
.badge {
    font-weight: 500 !important;
    padding: 0.35em 0.65em !important;
    border-radius: var(--radius-sm) !important;
    letter-spacing: 0.02em;
}

/* ── Alert 提示 ──────────────────────────────────── */
.alert {
    border: none !important;
    border-radius: var(--radius-sm) !important;
    border-left: 4px solid transparent !important;
    padding: 0.85rem 1.1rem !important;
    font-size: 0.9rem;
    box-shadow: var(--shadow-xs);
}

.alert-success {
    background: var(--success-light) !important;
    border-left-color: var(--success) !important;
    color: #186A3B !important;
}

.alert-warning {
    background: var(--warning-light) !important;
    border-left-color: var(--warning) !important;
    color: #7D6608 !important;
}

.alert-danger {
    background: var(--danger-light) !important;
    border-left-color: var(--danger) !important;
    color: #943126 !important;
}

.alert-info {
    background: var(--info-light) !important;
    border-left-color: var(--info) !important;
    color: #1B4F72 !important;
}

/* ── Section 分区标题 ────────────────────────────── */
h5.border-bottom,
h5.mt-4 {
    padding-bottom: 0.65rem !important;
    border-bottom: 2px solid var(--gray-200) !important;
    position: relative;
    color: var(--gray-800) !important;
    font-weight: 600 !important;
    margin-top: 1.75rem !important;
    margin-bottom: 1.25rem !important;
}

h5.border-bottom::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 48px;
    height: 2px;
    background: linear-gradient(90deg, var(--brand-primary), var(--brand-accent));
}

/* ── 图表容器 ──────────────────────────────────────── */
.js-plotly-plot, .plotly {
    border-radius: var(--radius-sm);
}

/* ── 评级颜色 ──────────────────────────────────────── */
.grade-excellent {
    color: var(--success) !important;
    font-weight: 700 !important;
    text-shadow: 0 1px 0 rgba(39, 174, 96, 0.1);
}
.grade-good {
    color: #2979FF !important;
    font-weight: 700 !important;
}
.grade-acceptable {
    color: var(--warning) !important;
    font-weight: 700 !important;
}
.grade-poor {
    color: #FF5252 !important;
    font-weight: 700 !important;
}
.grade-critical {
    color: #D50000 !important;
    font-weight: 700 !important;
}

/* ── 温度参考线颜色 ──────────────────────────────── */
.temp-577 { color: #9B59B6; }
.temp-595 { color: #3498DB; }
.temp-600 { color: #E67E22; }
.temp-605 { color: #27AE60; }
.temp-610 { color: #2ECC71; }
.temp-615 { color: #E74C3C; }

/* ── 滚动条美化 ──────────────────────────────────── */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: var(--gray-300);
    border-radius: 4px;
    transition: background var(--transition-base);
}
::-webkit-scrollbar-thumb:hover {
    background: var(--gray-400);
}

/* ── 加载动画 ──────────────────────────────────────── */
._dash-loading {
    margin: 35vh auto;
    text-align: center;
    color: var(--brand-primary);
}

.dash-spinner {
    border-color: var(--gray-200) !important;
    border-top-color: var(--brand-accent) !important;
}

/* ── Dropdown (Plotly Dash) ──────────────────────── */
.Select-control {
    border: 1px solid var(--gray-300) !important;
    border-radius: var(--radius-sm) !important;
    transition: all var(--transition-base);
}

.Select-control:hover {
    border-color: var(--brand-accent) !important;
}

.is-focused .Select-control {
    border-color: var(--brand-accent) !important;
    box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.15) !important;
}

/* ── 文件选择器 (PAQ/MES) ────────────────────────── */
.file-picker-list {
    max-height: 260px;
    overflow-y: auto;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-sm);
    padding: 8px;
    background: var(--bg-subtle);
}

.file-picker-list .form-check {
    padding: 6px 10px;
    margin: 0;
    border-radius: 4px;
    transition: background var(--transition-fast);
}

.file-picker-list .form-check:hover {
    background: var(--gray-100);
}

/* ── ButtonGroup 快捷按钮 ────────────────────────── */
.btn-group .btn {
    border-radius: 0 !important;
    border: 1px solid var(--gray-300) !important;
    background: white !important;
    color: var(--gray-700) !important;
}

.btn-group .btn:hover {
    background: var(--gray-50) !important;
    border-color: var(--brand-primary) !important;
    color: var(--brand-primary) !important;
    transform: none;
    z-index: 2;
}

.btn-group .btn:first-child {
    border-radius: var(--radius-sm) 0 0 var(--radius-sm) !important;
}

.btn-group .btn:last-child {
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0 !important;
}

/* ── 响应式 ──────────────────────────────────────── */
/* ── 导航栏品牌区 (2026-08 重做) ──────────────────────────────
   原为通用 Font Awesome 火焰图标 + "名字 版本" 一行 + "中文名 · TmsBook.com"。
   现: 自制标识(钎焊温度曲线) + 名字独占一行 + 版本做成小胶囊 + 中文名作副行。
   整块可点击回首页 —— 品牌区回首页是用户的普遍预期, 此前不可点。          */
.navbar-brand-link {
    display: flex;
    align-items: center;
    text-decoration: none !important;
    /* 必须写死浅色, 不能用 inherit: .navbar 自身的 color 是正文深灰
       (rgb(31,41,55)), inherit 会把品牌名变成深色压在深蓝底上 ——
       实测对比度从 21:1 掉到 ~1.6:1, 几乎看不见 (审计 2026-08)。 */
    color: #FFFFFF !important;
    padding: 2px 4px;
    margin-left: -4px;                  /* 抵消 padding, 视觉左边缘不位移 */
    border-radius: 8px;
    transition: background-color var(--transition-base);
}
.navbar-brand-link:hover {
    background: rgba(255, 255, 255, 0.08);
}
.navbar-brand-link:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.7);
    outline-offset: 1px;
}

.navbar-brand-mark {
    width: 34px;
    height: 34px;
    flex: none;
    margin-right: 10px;
}

.navbar-brand-name {
    font-size: 1.02rem;
    font-weight: 650;
    letter-spacing: 0.005em;
    line-height: 1.15;
    white-space: nowrap;
    color: #FFFFFF;
}

/* 版本胶囊 —— 低对比, 不与名字抢视线, 但随时可读 */
.navbar-brand-ver {
    margin-left: 0.42rem;
    padding: 0.06rem 0.34rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.16);
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    line-height: 1.5;
    white-space: nowrap;
}

/* 中文副行 —— 加字距让 8 个汉字与上方英文名等宽感更接近 */
.navbar-brand-sub {
    margin-top: 1px;
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    color: rgba(255, 255, 255, 0.62);
    line-height: 1.2;
    white-space: nowrap;
}

/* ── 响应式: 侧栏图标条 + 导航栏收纳 (审计 2026-08) ────────────
   实测问题:
   · ≤992px 时 .sidebar 被压成 60px 图标条, 但外层 Bootstrap 列是固定的
     col-2 (16.67%), 不会跟着收 —— 992px 视口下留出约 105px 死空白
     (占视口 10.6%), 恰好出现在横向空间最紧张的时候。
   · 导航栏的日期下拉(内联 160px)与搜索框(内联 220px)是固定宽度, 内联样式
     压过 flex 收缩, 各元素固定宽度合计 776px → 768px 及以下必然横向溢出。
   故列宽必须与内容一起收, 且窄屏要逐级收纳导航栏元素。            */
@media (max-width: 992px) {
    .sidebar {
        width: 60px !important;
    }
    .sidebar-link span {
        display: none;
    }
    .sidebar-link i {
        margin: 0 auto !important;
    }
    /* 列宽跟随内容收到 60px, 否则 col-2 继续占位留白 */
    .sidebar-col {
        flex: 0 0 60px !important;
        max-width: 60px !important;
        width: 60px !important;
    }
    /* 主内容回收侧栏让出的宽度 (覆盖 col-10 的 83.33%)。
       注意必须是 flex-basis:0 + min-width:0, 不能用 auto:
       .sidebar 是 position:fixed 的悬浮条, .sidebar-col 只是占位;
       若主列取内容宽度(auto), 60px + 满宽 > 容器 → 换行到第二行 left:0,
       正好被那条固定侧栏压住左边 60px 内容 (实测 430/768px 均复现)。 */
    .main-col {
        flex: 1 1 0 !important;
        min-width: 0 !important;
        max-width: none !important;
        width: auto !important;
    }
    .main-content {
        padding: 1.25rem !important;   /* p-4 的 1.5rem 在窄屏偏浪费 */
    }
}

/* 导航栏逐级收纳 —— 先让搜索框可伸缩, 再依次隐藏次要元素 */
@media (max-width: 1200px) {
    .navbar-search .form-control {
        width: 150px !important;       /* 覆盖内联 220px, 腾出 70px */
    }
}

@media (max-width: 992px) {
    .navbar-brand-sub { display: none; }   /* 中文副行让位, 主名保留 */
    .navbar-search .form-control { width: 120px !important; }
}

@media (max-width: 768px) {
    h3 { font-size: 1.25rem; }
    .card-body h3 { font-size: 1.45rem !important; }
    .card-body { padding: 0.9rem !important; }

    /* 全局日期选择器在此宽度已无处安放; 各分析页内均有自己的日期控件,
       隐藏它不会让任何页面失去选日期的能力 */
    .navbar-datepicker { display: none !important; }
    .navbar-search { flex-grow: 1 !important; }
    .navbar-search .form-control {
        width: auto !important;
        min-width: 0 !important;       /* 允许真正收缩, 否则仍撑破 */
    }
    .main-content { padding: 1rem !important; }
}

@media (max-width: 576px) {
    /* 手机: 只留品牌名 + 告警/下载入口, 搜索走各页内的搜索 */
    .navbar-search { display: none !important; }
}

/* ── Iframe 边框 ─────────────────────────────────── */
iframe {
    border: 1px solid var(--gray-200) !important;
    border-radius: var(--radius-sm) !important;
    box-shadow: var(--shadow-sm);
    background: white;
}

/* ── 数据空状态 ──────────────────────────────────── */
.text-center.py-5 {
    color: var(--gray-400);
}

.text-center.py-5 i {
    color: var(--gray-300);
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.05));
}

/* ── 动画: 淡入 ──────────────────────────────────── */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.card, .alert, .accordion-item {
    animation: fadeIn 0.35s ease-out;
}

/* ── 技术资料库: Markdown 渲染 ────────────────────── */
.docs-markdown-body h1 { font-size: 1.6rem; border-bottom: 2px solid var(--gray-200); padding-bottom: 0.4rem; margin: 1.5rem 0 1rem; }
.docs-markdown-body h2 { font-size: 1.3rem; border-bottom: 1px solid var(--gray-200); padding-bottom: 0.3rem; margin: 1.3rem 0 0.8rem; color: var(--brand-primary); }
.docs-markdown-body h3 { font-size: 1.1rem; margin: 1.1rem 0 0.6rem; }
.docs-markdown-body h4 { font-size: 1rem; margin: 1rem 0 0.5rem; }
.docs-markdown-body p  { margin: 0.5rem 0; }
.docs-markdown-body ul, .docs-markdown-body ol { padding-left: 1.5rem; margin: 0.5rem 0; }
.docs-markdown-body li { margin: 0.2rem 0; }
.docs-markdown-body blockquote { border-left: 4px solid var(--brand-accent); padding: 0.5rem 1rem; margin: 0.8rem 0; background: var(--gray-50); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; color: var(--gray-600); }
.docs-markdown-body pre { background: var(--gray-800); color: #E5E7EB; padding: 1rem; border-radius: var(--radius-sm); overflow-x: auto; font-size: 0.82rem; line-height: 1.5; margin: 0.8rem 0; }
.docs-markdown-body code { background: rgba(46, 134, 193, 0.08); color: var(--brand-primary); padding: 0.15em 0.4em; border-radius: 3px; font-size: 0.88em; }
.docs-markdown-body pre code { background: transparent; color: inherit; padding: 0; }
.docs-markdown-body table { width: 100%; border-collapse: collapse; margin: 0.8rem 0; font-size: 0.85rem; }
.docs-markdown-body table th { background: var(--brand-primary); color: white; padding: 0.5rem 0.75rem; text-align: left; font-weight: 600; font-size: 0.82rem; }
.docs-markdown-body table td { padding: 0.45rem 0.75rem; border-bottom: 1px solid var(--gray-200); }
.docs-markdown-body table tr:nth-child(even) { background: var(--gray-50); }
.docs-markdown-body table tr:hover { background: rgba(52, 152, 219, 0.05); }
.docs-markdown-body hr { border: none; border-top: 1px solid var(--gray-200); margin: 1.5rem 0; }
.docs-markdown-body img { max-width: 100%; border-radius: var(--radius-sm); box-shadow: var(--shadow-sm); margin: 0.5rem 0; }
.docs-markdown-body a { color: var(--brand-accent); text-decoration: none; }
.docs-markdown-body a:hover { text-decoration: underline; }

/* 文档目录 hover */
.doc-link-hover:hover { background: var(--gray-50) !important; }

/* ── AG Grid 品牌化 (替代 dash_table 后统一表头风格, 2026-06) ── */
.ag-theme-quartz {
    --ag-header-background-color: #1B4F72;   /* BRAND_COLOR */
    --ag-header-foreground-color: #ffffff;
    --ag-header-cell-hover-background-color: #2E86C1;  /* ACCENT */
    --ag-font-size: 13px;
    --ag-row-hover-color: #eef5fb;
    --ag-selected-row-background-color: #d6e9f8;
}
.ag-theme-quartz .ag-header-cell-text { font-weight: 600; }

/* ═══════════════════════════════════════════════════════════
   技术资料库 · 现代审美 UI (v1.7.0 重构)
   精致技术文档风 — 工业蓝品牌 · 柔和深度 · 流畅微交互
   ═══════════════════════════════════════════════════════════ */
.docs-page { --docs-gap: 1rem; }

/* ── 工具条 + 收纳/释放按钮 ── */
.docs-toolbar { display: flex; margin-bottom: var(--docs-gap); }
.docs-toggle-btn.btn {
  display: inline-flex; align-items: center; gap: .1rem;
  background: var(--bg-card); color: var(--gray-600);
  border: 1px solid var(--gray-200); border-radius: 999px;
  padding: .42rem 1rem; font-size: .82rem; font-weight: 600;
  box-shadow: var(--shadow-xs); transition: all var(--transition-base);
}
.docs-toggle-btn.btn:hover {
  color: var(--brand-primary); border-color: var(--brand-accent);
  box-shadow: var(--shadow-sm); transform: translateY(-1px);
}
.docs-toggle-btn.btn:active { transform: translateY(0); }

/* ── 左侧目录面板 ── */
.docs-sidebar-panel {
  background: var(--bg-card); border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg); padding: 1rem .85rem;
  box-shadow: var(--shadow-sm); position: sticky; top: 1rem;
}
#docs-sidebar-col { transition: max-width .25s ease, flex-basis .25s ease, opacity .2s ease; }

/* ── 搜索框 ── */
.docs-search { border-radius: 999px; overflow: hidden;
  border: 1px solid var(--gray-200); background: var(--gray-50);
  transition: all var(--transition-base); }
.docs-search:focus-within {
  border-color: var(--brand-accent); background: var(--bg-card);
  box-shadow: 0 0 0 3px rgba(52,152,219,.15); }
.docs-search .docs-search-icon {
  background: transparent; border: none; color: var(--gray-400); padding-left: 1rem; }
.docs-search .form-control {
  background: transparent; border: none; box-shadow: none !important;
  font-size: .85rem; color: var(--gray-800); padding: .5rem .6rem; }
.docs-search .form-control::placeholder { color: var(--gray-400); }

/* ── 搜索结果面板 ── */
.docs-search-results-panel {
  background: var(--gray-50); border: 1px solid var(--gray-200);
  border-radius: var(--radius-md); padding: .6rem; margin-bottom: .9rem; }
.docs-search-head { display: flex; justify-content: space-between; align-items: center;
  margin-bottom: .4rem; }
.docs-search-count { font-size: .76rem; color: var(--gray-500); font-weight: 600; }
.docs-search-clear { font-size: .76rem; color: var(--brand-accent); text-decoration: none; cursor: pointer; }
.docs-search-clear:hover { text-decoration: underline; }
.docs-search-list { max-height: 320px; overflow-y: auto; }
.docs-search-result { cursor: pointer; padding: .5rem .55rem; border-radius: var(--radius-sm);
  transition: background var(--transition-fast); }
.docs-search-result:hover { background: rgba(52,152,219,.08); }
.docs-search-result + .docs-search-result { border-top: 1px solid var(--gray-200); }

/* ── 目录滚动区 ── */
.docs-tree-scroll { max-height: calc(100vh - 320px); overflow-y: auto; margin: 0 -.2rem; padding: 0 .2rem; }
.docs-tree-scroll::-webkit-scrollbar, .docs-search-list::-webkit-scrollbar,
.docs-preview-body::-webkit-scrollbar { width: 7px; }
.docs-tree-scroll::-webkit-scrollbar-thumb, .docs-search-list::-webkit-scrollbar-thumb,
.docs-preview-body::-webkit-scrollbar-thumb { background: var(--gray-300); border-radius: 999px; }
.docs-tree-scroll::-webkit-scrollbar-thumb:hover { background: var(--gray-400); }

/* ── 手风琴 (分类) ── */
.docs-accordion .accordion-item { background: transparent; border: none; margin-bottom: .15rem; }
.docs-accordion .accordion-button {
  background: transparent; color: var(--gray-700); font-size: .85rem; font-weight: 600;
  padding: .55rem .6rem; border-radius: var(--radius-sm); box-shadow: none;
  transition: all var(--transition-fast); }
.docs-accordion .accordion-button:hover { background: var(--gray-100); color: var(--brand-primary); }
.docs-accordion .accordion-button:not(.collapsed) {
  background: rgba(52,152,219,.07); color: var(--brand-primary); box-shadow: none; }
.docs-accordion .accordion-button:focus { box-shadow: none; border: none; }
.docs-accordion .accordion-button::after {
  width: .9rem; height: .9rem; background-size: .9rem; opacity: .5; }
.docs-accordion .accordion-button i { width: 18px; text-align: center; margin-right: .5rem;
  color: var(--brand-accent); font-size: .85rem; }
.docs-accordion .accordion-button .badge {
  background: var(--gray-100) !important; color: var(--gray-500) !important;
  font-weight: 600; border-radius: 999px; padding: .2em .5em; }
.docs-accordion .accordion-button:not(.collapsed) .badge {
  background: rgba(52,152,219,.15) !important; color: var(--brand-primary) !important; }
.docs-accordion .accordion-body { padding: .15rem 0 .4rem .4rem; }

/* ── 文件链接 ── */
.docs-file-link {
  position: relative; display: flex; align-items: center; cursor: pointer;
  padding: .4rem .55rem .4rem .7rem; margin-left: .4rem; border-radius: var(--radius-sm);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--gray-600); transition: all var(--transition-fast);
  border-left: 2px solid transparent; }
.docs-file-link i { width: 14px; font-size: .72rem; color: var(--gray-400); margin-right: .5rem;
  transition: color var(--transition-fast); }
.docs-file-link span { font-size: .82rem; }
.docs-file-link:hover {
  background: var(--gray-100); color: var(--gray-900);
  border-left-color: var(--gray-300); transform: translateX(2px); }
.docs-file-link:hover i { color: var(--brand-accent); }
.docs-file-link.active {
  background: rgba(52,152,219,.10); color: var(--brand-primary); font-weight: 600;
  border-left-color: var(--brand-accent); }
.docs-file-link.active i { color: var(--brand-primary); }

/* ── 右侧预览卡 ── */
.docs-preview-card {
  position: relative; background: var(--bg-card); border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-md); overflow: hidden; }
.docs-preview-card::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg, var(--brand-primary), var(--brand-accent)); z-index: 2; }

/* ── 预览标题栏 ── */
.docs-preview-titlebar {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  padding: .95rem 1.4rem; border-bottom: 1px solid var(--gray-100);
  background: linear-gradient(180deg, var(--bg-subtle), var(--bg-card)); }
.docs-preview-titlebar--empty { color: var(--gray-500); font-weight: 600; font-size: .9rem; }
.docs-file-titlegroup { display: flex; align-items: center; min-width: 0; }
.docs-file-ico {
  flex: none; width: 34px; height: 34px; border-radius: var(--radius-sm);
  display: inline-flex; align-items: center; justify-content: center; margin-right: .7rem;
  background: rgba(52,152,219,.12); color: var(--brand-primary); font-size: .95rem; }
.docs-file-title { font-size: 1.02rem; font-weight: 700; color: var(--gray-900);
  letter-spacing: -.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.docs-file-meta { display: flex; align-items: center; gap: .5rem; flex: none; }
.docs-meta-pill {
  font-size: .72rem; color: var(--gray-500); background: var(--gray-100);
  border-radius: 999px; padding: .25em .7em; white-space: nowrap; }
.docs-ghost-btn {
  display: inline-flex; align-items: center; font-size: .76rem; font-weight: 600;
  color: var(--brand-primary); background: var(--bg-card);
  border: 1px solid var(--gray-200); border-radius: 999px; padding: .3rem .85rem;
  text-decoration: none; transition: all var(--transition-base); }
.docs-ghost-btn:hover {
  color: #fff; background: var(--brand-primary); border-color: var(--brand-primary);
  box-shadow: var(--shadow-sm); }

/* ── 预览正文 ── */
.docs-preview-body {
  max-height: calc(100vh - 230px); overflow-y: auto; padding: 1.6rem 2rem;
  font-size: .92rem; line-height: 1.75; }
.docs-markdown-body > *:first-child { margin-top: 0; }
.docs-markdown-body img { display: block; margin: 1rem auto; }
.docs-markdown-body img + em, .docs-markdown-body img + p > em:only-child {
  display: block; text-align: center; color: var(--gray-500); font-size: .82rem; }

/* ── 空状态 ── */
.docs-empty { text-align: center; padding: 2.6rem 1rem 1.2rem; }
.docs-empty-icon {
  width: 76px; height: 76px; margin: 0 auto 1.1rem; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, rgba(27,79,114,.10), rgba(52,152,219,.16));
  color: var(--brand-primary); font-size: 1.9rem; }
.docs-empty-title { font-weight: 700; color: var(--gray-800); margin: 0 0 .35rem; }
.docs-empty-sub { color: var(--gray-500); font-size: .88rem; margin: 0; }

/* ── 统计卡 ── */
.docs-stats { padding: .5rem 1.4rem 2rem; }
.docs-stat-total { text-align: center; margin-bottom: 1.1rem; }
.docs-stat-total-num { font-size: 1.7rem; font-weight: 800; color: var(--brand-primary);
  letter-spacing: -.02em; margin-right: .4rem; }
.docs-stat-total-label { font-size: .85rem; color: var(--gray-500); }
.docs-stat-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)); gap: .7rem;
  max-width: 760px; margin: 0 auto; }
.docs-stat-card {
  text-align: center; padding: .9rem .5rem; border-radius: var(--radius-md);
  background: var(--bg-subtle); border: 1px solid var(--gray-200);
  transition: all var(--transition-base); }
.docs-stat-card:hover {
  transform: translateY(-3px); box-shadow: var(--shadow-md);
  border-color: var(--brand-accent); background: var(--bg-card); }
.docs-stat-ico { font-size: 1.2rem; color: var(--brand-accent); margin-bottom: .45rem; display: block; }
.docs-stat-num { font-size: 1.25rem; font-weight: 800; color: var(--gray-900); line-height: 1; }
.docs-stat-label { font-size: .72rem; color: var(--gray-500); margin-top: .3rem; }

/* ═══ 响应式: iPad / 手机 ═══ */
@media (max-width: 991.98px) {
  .docs-sidebar-panel { position: static; }
  .docs-tree-scroll { max-height: 46vh; }
  .docs-preview-body { max-height: calc(100vh - 200px); padding: 1.2rem 1.3rem; }
  .docs-preview-titlebar { padding: .8rem 1.1rem; }
}
@media (max-width: 767.98px) {
  .docs-toggle-btn.btn { width: 100%; justify-content: center; }
  .docs-tree-scroll { max-height: 40vh; }
  .docs-preview-body { max-height: none; padding: 1rem 1rem; font-size: .9rem; }
  .docs-markdown-body h1 { font-size: 1.3rem; }
  .docs-markdown-body h2 { font-size: 1.12rem; }
  .docs-markdown-body table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .docs-file-title { font-size: .95rem; }
  .docs-stat-grid { grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); }
}

/* ── 子类分组标签 (顶层类内的子目录分节, v1.7.0 分层导航) ── */
.docs-subgroup-label {
  display: flex; align-items: center; justify-content: space-between;
  margin: .6rem .4rem .15rem; padding: .12rem .3rem;
  font-size: .68rem; font-weight: 700; letter-spacing: .02em;
  color: var(--gray-400); border-bottom: 1px dashed var(--gray-200);
}
.docs-subgroup-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.docs-subgroup-count { flex: none; color: var(--gray-300); font-weight: 600; margin-left: .4rem; }
.docs-subgroup-label ~ .docs-file-link { margin-left: .95rem; }