/* ============================================================
   static/css/bigscreen.css —— 投屏模式（大屏）专属皮肤 + 动效层

   洛川 2026-10-28 拍板的三条硬约束：
     ① 动效分三级 full / reduced / off，日常办公默认 reduced；
     ② 渐变背景 + 玻璃质感 = 投屏模式专属，日常页零污染；
     ③ 驾驶舱自动刷新间隔 1 小时（/api/dashboard 一次要跑 24 个组件的多表 COUNT）。

   唯一的写代码铁律：所有选择器必须挂在 body.bigscreen 之下。
   退出投屏模式 → 本文件样式整体失效 → 回到 P2-7 精修过的扁平原生皮，
   不留任何残余（这是「不污染日常页」的技术保证，改动本文件时务必守住）。

   无障碍：跟随 prefers-reduced-motion —— 系统要求减弱动效时，哪怕正处在
   投屏模式也一律降级为静态。与站内既有先例同口径：
   theme.css:533 / theme.css:943 / landing-park-ops.css:225 / onboarding-wizard.css:325
   ============================================================ */

/* ---------- 投屏底色：深空渐变（仅投屏模式） ---------- */
body.bigscreen {
    background: linear-gradient(160deg, #060A18 0%, #0C1430 45%, #122048 100%);
    background-attachment: fixed;
    color: #E8ECF6;
}
body.bigscreen .main-content { background: transparent; }

/* ---------- 玻璃质感：卡片 / 统计卡（仅投屏模式） ----------
   backdrop-filter 本站早有先例（theme.css:386 modal 遮罩），此处只是把它从
   「临时浮层」借到「投屏卡片」上；日常页一律不加，因为纯色卡片叠毛玻璃
   只会降低文字对比度（招商同事天天读数据，对比度优先）。 */
body.bigscreen .dash-page .card,
body.bigscreen .dash-page .stat-card {
    background: rgba(255, 255, 255, .16);
    border: 1px solid rgba(255, 255, 255, .3);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 8px 28px rgba(0, 0, 0, .28);
    color: #E8ECF6;
}
body.bigscreen .dash-page .card .section-title,
body.bigscreen .dash-page .card-body,
body.bigscreen .dash-page .stat-info p { color: #AEB8CE; }

/* ---------- KPI 数字：投屏远看也要读得清 ---------- */
body.bigscreen .dash-page .stat-info h3 {
    color: #FFFFFF;
    font-size: 2.4rem;
    font-weight: 700;
    letter-spacing: -.01em;
}
body.bigscreen .dash-page .stat-icon { background: rgba(255, 255, 255, .12) !important; }

/* ---------- 投屏下页面头部：标题与工具条在暗底上必须清晰 ---------- */
body.bigscreen .page-header {
    background: transparent !important;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
}
body.bigscreen .page-title { color: #FFFFFF !important; }
body.bigscreen .page-subtitle { color: #AEB8CE !important; }
body.bigscreen .page-header .btn-outline-primary {
    color: #DCE3F2;
    border-color: rgba(255, 255, 255, .3);
}
body.bigscreen .page-header .btn-outline-primary:hover { background: rgba(255, 255, 255, .12); }

/* ---------- 列表自动播放（轮播）—— 投屏模式专属 ----------
   滚动依赖「容器内两份相同内容 + translateY(0 → -50%)」实现无缝循环；
   暂停不用 JS：hover / focus-within 直接由 CSS animation-play-state 兜住，
   键盘 Tab 走焦点时同样暂停（无障碍，与只用 hover 的方案的关键差别）。 */
@keyframes kj-marquee-up {
    from { transform: translateY(0); }
    to   { transform: translateY(-50%); }
}

body.bigscreen .kj-marquee-box {
    position: relative;
    max-height: 220px;
    overflow: hidden;
    /* 上下渐隐，避免硬切边 */
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);
}
body.bigscreen .kj-marquee-inner {
    animation: kj-marquee-up 32s linear infinite;
    will-change: transform;
}
/* 鼠标悬停暂停（BOSS 指定）—— 命中盒子即停，含其内部的卡片/链接区域 */
body.bigscreen .kj-marquee-box:hover .kj-marquee-inner,
body.bigscreen .kj-marquee-box:focus-within .kj-marquee-inner,
body.bigscreen .kj-marquee-inner.is-paused { animation-play-state: paused; }

/* ---------- 进度动画：只服务于本身就有百分比语义的元素 ----------
   纯装饰用途不启用（避免页面上到处是「假繁忙」的常驻动画）。 */
body.bigscreen .kj-progress-track {
    height: 6px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .14);
    overflow: hidden;
}
body.bigscreen .kj-progress-bar {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #3B82F6, #22D3EE);
    transition: width .8s ease-out;
}

/* ---------- 投屏控制条 ---------- */
body.bigscreen #kjBigscreenBar {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 1200;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(10, 16, 38, .72);
    border: 1px solid rgba(255, 255, 255, .16);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    font-size: 12px;
    color: #C7D0E4;
}
body.bigscreen #kjBigscreenBar button {
    border: 1px solid rgba(255, 255, 255, .22);
    background: transparent;
    color: #DCE3F2;
    border-radius: 999px;
    padding: 4px 10px;
    cursor: pointer;
    font-size: 12px;
}
body.bigscreen #kjBigscreenBar button:hover { background: rgba(255, 255, 255, .12); }
body.bigscreen #kjBigscreenBar button.is-active { background: #2563EB; border-color: #2563EB; color: #fff; }

/* ---------- 动效降级：off（含系统 prefers-reduced-motion 命中） ----------
   关掉一切位移动画，保留静态可读性；玻璃/渐变属「静态装饰」保留，
   因为它们不占注意力，只是视觉基底。 */
body.bigscreen[data-motion="off"] .kj-marquee-inner {
    animation: none !important;
    transform: none !important;
}
body.bigscreen[data-motion="off"] .kj-progress-bar { transition: none; }

/* reduced：保留数字滚动与进度条（有信息量），关掉列表轮播与涟漪（会抢注意力） */
body.bigscreen[data-motion="reduced"] .kj-marquee-inner {
    animation: none;
    transform: none;
}

/* ---------- 进入投屏的入场：卡片依次淡入上浮（full 级专属） ----------
   存在的意义：让「切到投屏」这件事肉眼可见。此前只有静态皮生效，
   切过去像什么都没发生 —— 这条动画是最直观的「模式已切换」信号。 */
@keyframes kj-enter-up {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
}
body.bigscreen[data-motion="full"] #widgetGrid > [data-widget] {
    animation: kj-enter-up .5s ease-out both;
}
body.bigscreen[data-motion="full"] #widgetGrid > [data-widget]:nth-child(2) { animation-delay: .06s; }
body.bigscreen[data-motion="full"] #widgetGrid > [data-widget]:nth-child(3) { animation-delay: .12s; }
body.bigscreen[data-motion="full"] #widgetGrid > [data-widget]:nth-child(4) { animation-delay: .18s; }
body.bigscreen[data-motion="full"] #widgetGrid > [data-widget]:nth-child(5) { animation-delay: .24s; }
body.bigscreen[data-motion="full"] #widgetGrid > [data-widget]:nth-child(n+6) { animation-delay: .3s; }

/* ---------- 系统级兜底：与站内四份 CSS 同口径 ---------- */
@media (prefers-reduced-motion: reduce) {
    body.bigscreen .kj-marquee-inner {
        animation: none !important;
        transform: none !important;
    }
    body.bigscreen .kj-progress-bar { transition: none !important; }
}

/* ---------- 全局筛选条压暗（Vue 版 .global-filter-bar，2026-10-29 实测发现亮白突兀） ---------- */
body.bigscreen .global-filter-bar {
    background: rgba(13, 20, 45, .72);
    border: 1px solid rgba(255, 255, 255, .14);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 14px;
    color: #C7D0E4;
    box-shadow: 0 8px 28px rgba(0, 0, 0, .35);
}
body.bigscreen .global-filter-bar .gf-title { color: #AEB9D6; }
body.bigscreen .global-filter-bar .form-select {
    background-color: rgba(255, 255, 255, .08);
    border-color: rgba(255, 255, 255, .22);
    color: #E4EAF6;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23c7d0e4' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}
body.bigscreen .global-filter-bar .btn-outline-secondary {
    color: #C7D0E4;
    border-color: rgba(255, 255, 255, .3);
}

/* ---------- 纯大屏：投屏时隐藏左侧导航（2026-10-29 洛川拍板） ---------- */
body.bigscreen #sidebar { display: none !important; }
body.bigscreen .main-content { margin-left: 0 !important; }

/* ---------- 涟漪地图卡片（投屏专属，随 .dash-page 暗色基底） ---------- */
body.bigscreen .kj-map-ripple-card {
    background: rgba(13, 20, 45, .55);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 16px;
    padding: 14px 18px 8px;
    box-shadow: 0 10px 34px rgba(0, 0, 0, .4);
    animation: kj-enter-up .5s ease-out both;
}
body.bigscreen .kj-map-ripple-card .kj-map-title {
    color: #AEB9D6;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    gap: 6px;
}
body.bigscreen .kj-map-ripple-card .kj-map-empty {
    color: #64748b;
    font-size: 13px;
    text-align: center;
    padding: 60px 0;
}

/* ---------- 跟踪动态 timeline 白底气泡压暗（2026-10-29 实测发现亮白突兀） ---------- */
body.bigscreen .timeline-content {
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .1);
    box-shadow: none;
    color: #C7D0E4;
}
body.bigscreen .timeline-item::before {
    background: rgba(56, 189, 248, .8) !important;
    box-shadow: none !important;
}