/* ============================================================
   驾驶舱桌面端大屏适配样式
   针对 1920px / 2560px / 3000px / 3440px 等宽屏逐步放大布局，
   解决 3000x2000 等分辨率下字段过于紧凑、不美观的问题。
   ============================================================ */

:root {
  --dl-scale: 1;
  --dl-panel-pad: 16px;
  --dl-gap: 8px;
  --dl-font-xs: 10px;
  --dl-font-sm: 11px;
  --dl-font-md: 12px;
  --dl-left-w: 280px;
  --dl-right-w: 340px;
}

@media (min-width: 1920px) {
  :root {
    --dl-scale: 1.12;
    --dl-panel-pad: 18px;
    --dl-gap: 10px;
    --dl-font-xs: 11px;
    --dl-font-sm: 12px;
    --dl-font-md: 13px;
    --dl-left-w: 330px;
    --dl-right-w: 390px;
  }
}

@media (min-width: 2560px) {
  :root {
    --dl-scale: 1.28;
    --dl-panel-pad: 22px;
    --dl-gap: 12px;
    --dl-font-xs: 13px;
    --dl-font-sm: 14px;
    --dl-font-md: 15px;
    --dl-left-w: 400px;
    --dl-right-w: 470px;
  }
}

@media (min-width: 3000px) {
  :root {
    --dl-scale: 1.42;
    --dl-panel-pad: 26px;
    --dl-gap: 14px;
    --dl-font-xs: 14px;
    --dl-font-sm: 15px;
    --dl-font-md: 16px;
    --dl-left-w: 460px;
    --dl-right-w: 540px;
  }
}

@media (min-width: 3440px) {
  :root {
    --dl-scale: 1.55;
    --dl-panel-pad: 30px;
    --dl-gap: 16px;
    --dl-font-xs: 15px;
    --dl-font-sm: 16px;
    --dl-font-md: 18px;
    --dl-left-w: 520px;
    --dl-right-w: 600px;
  }
}

@media (min-width: 1920px) {
  /* 覆盖 dashboard-inject 对侧栏的 max-width 限制 */
  .sci-dashboard-panel {
    max-width: none !important;
  }

  /* 顶部栏 */
  .fixed.top-0.left-0.right-0.z-50 {
    min-height: calc(56px * var(--dl-scale)) !important;
    padding-left: calc(20px * var(--dl-scale)) !important;
    padding-right: calc(20px * var(--dl-scale)) !important;
  }

  /* 左侧 glass-panel 固定面板 */
  .glass-panel.fixed.left-4.z-40 {
    left: calc(16px * var(--dl-scale)) !important;
    top: calc(72px * var(--dl-scale)) !important;
    bottom: calc(80px * var(--dl-scale)) !important;
    width: var(--dl-left-w) !important;
    padding: var(--dl-panel-pad) !important;
    border-radius: calc(12px * var(--dl-scale)) !important;
  }

  /* 右侧 glass-panel 固定面板 */
  .glass-panel.fixed.right-3.z-40 {
    right: calc(12px * var(--dl-scale)) !important;
    top: calc(72px * var(--dl-scale)) !important;
    bottom: calc(80px * var(--dl-scale)) !important;
    width: var(--dl-right-w) !important;
    padding: var(--dl-panel-pad) !important;
    border-radius: calc(12px * var(--dl-scale)) !important;
  }

  /* 左侧面板展开/收起按钮 */
  .fixed.z-40.flex.items-center.justify-center.cursor-pointer.transition-all.duration-300.hover\:scale-110 {
    top: calc(80px * var(--dl-scale)) !important;
    width: calc(28px * var(--dl-scale)) !important;
    height: calc(28px * var(--dl-scale)) !important;
  }
  .fixed.z-40.flex.items-center.justify-center.cursor-pointer.transition-all.duration-300.hover\:scale-110[style*="left: 12px"] {
    left: calc(12px * var(--dl-scale)) !important;
  }
  .fixed.z-40.flex.items-center.justify-center.cursor-pointer.transition-all.duration-300.hover\:scale-110[style*="right: 12px"] {
    right: calc(12px * var(--dl-scale)) !important;
  }

  /* 底部状态栏 */
  .fixed.bottom-4.left-1\/2.-translate-x-1\/2.z-50 {
    bottom: calc(16px * var(--dl-scale)) !important;
    min-height: calc(44px * var(--dl-scale)) !important;
    padding-left: calc(20px * var(--dl-scale)) !important;
    padding-right: calc(20px * var(--dl-scale)) !important;
    border-radius: calc(12px * var(--dl-scale)) !important;
  }

  /* 视图切换按钮 */
  #sci-view-toggle {
    left: calc(var(--dl-left-w) + 24px) !important;
    top: calc(64px * var(--dl-scale)) !important;
    border-radius: calc(8px * var(--dl-scale)) !important;
  }
  #sci-view-toggle button {
    padding: calc(5px * var(--dl-scale)) calc(14px * var(--dl-scale)) !important;
    font-size: calc(12px * var(--dl-scale)) !important;
  }

  /* ===== 原生 React 面板内部通用放大 ===== */
  .glass-panel.fixed.left-4.z-40 > div,
  .glass-panel.fixed.right-3.z-40 > div {
    gap: var(--dl-gap) !important;
  }

  .glass-panel.fixed.left-4.z-40 .grid.grid-cols-2.gap-1,
  .glass-panel.fixed.left-4.z-40 .grid.grid-cols-2.gap-2,
  .glass-panel.fixed.right-3.z-40 .grid.grid-cols-2.gap-1,
  .glass-panel.fixed.right-3.z-40 .grid.grid-cols-2.gap-2 {
    gap: var(--dl-gap) !important;
  }

  .glass-panel.fixed.left-4.z-40 .grid.grid-cols-2.gap-1 > div,
  .glass-panel.fixed.left-4.z-40 .grid.grid-cols-2.gap-2 > div,
  .glass-panel.fixed.right-3.z-40 .grid.grid-cols-2.gap-1 > div,
  .glass-panel.fixed.right-3.z-40 .grid.grid-cols-2.gap-2 > div {
    padding: calc(10px * var(--dl-scale)) !important;
    border-radius: calc(8px * var(--dl-scale)) !important;
  }

  /* 原生面板标题字号 */
  .glass-panel.fixed.left-4.z-40 .font-display.text-xs,
  .glass-panel.fixed.right-3.z-40 .font-display.text-sm,
  .glass-panel.fixed.left-4.z-40 .font-display.text-sm {
    font-size: var(--dl-font-md) !important;
  }

  /* 原生面板小字号统一放大 */
  .glass-panel.fixed.left-4.z-40 .text-\[8px\],
  .glass-panel.fixed.right-3.z-40 .text-\[8px\],
  .glass-panel.fixed.left-4.z-40 .text-\[9px\],
  .glass-panel.fixed.right-3.z-40 .text-\[9px\] {
    font-size: var(--dl-font-xs) !important;
  }

  .glass-panel.fixed.left-4.z-40 .text-\[10px\],
  .glass-panel.fixed.right-3.z-40 .text-\[10px\],
  .glass-panel.fixed.left-4.z-40 .text-\[11px\],
  .glass-panel.fixed.right-3.z-40 .text-\[11px\],
  .glass-panel.fixed.left-4.z-40 .text-xs,
  .glass-panel.fixed.right-3.z-40 .text-xs {
    font-size: var(--dl-font-sm) !important;
  }

  .glass-panel.fixed.left-4.z-40 .text-\[12px\],
  .glass-panel.fixed.right-3.z-40 .text-\[12px\],
  .glass-panel.fixed.left-4.z-40 .text-sm,
  .glass-panel.fixed.right-3.z-40 .text-sm {
    font-size: var(--dl-font-md) !important;
  }

  .glass-panel.fixed.left-4.z-40 .font-display.text-\[22px\],
  .glass-panel.fixed.right-3.z-40 .font-display.text-\[22px\] {
    font-size: calc(22px * var(--dl-scale)) !important;
  }

  /* 排名行、列表项 */
  .glass-panel.fixed.left-4.z-40 .sci-ranking-list > div,
  .glass-panel.fixed.right-3.z-40 [class*="overflow-y-auto"] > div > div {
    padding: calc(6px * var(--dl-scale)) calc(8px * var(--dl-scale)) !important;
  }

  /* 更新记录区域 */
  .glass-panel.fixed.left-4.z-40 .sci-update-list > div {
    font-size: var(--dl-font-xs) !important;
    padding: calc(4px * var(--dl-scale)) calc(6px * var(--dl-scale)) !important;
    margin-bottom: calc(2px * var(--dl-scale)) !important;
  }

  /* ===== view-toggle-inject 注入的右侧经营面板 ===== */
  .sci-replaced-content {
    gap: var(--dl-gap) !important;
  }

  .sci-business-content,
  .sci-risk-content {
    gap: calc(12px * var(--dl-scale)) !important;
  }

  /* 标题行 */
  .sci-left-style-header,
  .sci-right-style-header {
    padding-right: calc(36px * var(--dl-scale)) !important;
  }
  .sci-right-style-header {
    padding-left: calc(24px * var(--dl-scale)) !important;
    padding-right: calc(24px * var(--dl-scale)) !important;
    padding-bottom: calc(10px * var(--dl-scale)) !important;
    margin-bottom: calc(8px * var(--dl-scale)) !important;
  }
  .sci-left-style-header .sci-panel-icon {
    width: calc(18px * var(--dl-scale)) !important;
    height: calc(18px * var(--dl-scale)) !important;
  }
  .sci-left-style-header h3,
  .sci-right-style-title-row h3 {
    font-size: var(--dl-font-md) !important;
  }
  .sci-left-style-header .count,
  .sci-right-style-sub {
    font-size: var(--dl-font-xs) !important;
  }

  /* 右侧 KPI 2x2 网格 */
  .sci-left-kpi-grid {
    gap: var(--dl-gap) !important;
  }
  .sci-left-kpi-card {
    padding: calc(8px * var(--dl-scale)) !important;
    border-radius: calc(8px * var(--dl-scale)) !important;
    min-height: calc(60px * var(--dl-scale)) !important;
  }
  .sci-kpi-label-row {
    gap: calc(5px * var(--dl-scale)) !important;
    margin-bottom: calc(3px * var(--dl-scale)) !important;
  }
  .sci-kpi-label-row .sci-kpi-icon {
    width: calc(12px * var(--dl-scale)) !important;
    height: calc(12px * var(--dl-scale)) !important;
  }
  .sci-left-kpi-card .label {
    font-size: var(--dl-font-xs) !important;
  }
  .sci-left-kpi-card .label.sci-kpi-title-large {
    font-size: var(--dl-font-md) !important;
  }
  .sci-left-kpi-card .value {
    font-size: calc(18px * var(--dl-scale)) !important;
    margin-bottom: calc(3px * var(--dl-scale)) !important;
  }
  .sci-left-kpi-card .delta {
    font-size: var(--dl-font-xs) !important;
    margin-top: calc(1px * var(--dl-scale)) !important;
  }

  /* 分段标题 */
  .sci-left-section-title {
    font-size: var(--dl-font-sm) !important;
    gap: calc(6px * var(--dl-scale)) !important;
    padding-top: calc(8px * var(--dl-scale)) !important;
    margin-top: calc(2px * var(--dl-scale)) !important;
  }

  /* 排名列表 */
  .sci-left-rank-list {
    padding-right: calc(2px * var(--dl-scale)) !important;
  }
  .sci-left-rank-item {
    gap: calc(8px * var(--dl-scale)) !important;
    padding: calc(6px * var(--dl-scale)) calc(8px * var(--dl-scale)) !important;
    margin-bottom: calc(2px * var(--dl-scale)) !important;
    border-radius: calc(6px * var(--dl-scale)) !important;
  }
  .sci-left-rank-index {
    width: calc(16px * var(--dl-scale)) !important;
    font-size: var(--dl-font-xs) !important;
  }
  .sci-left-rank-title {
    font-size: var(--dl-font-sm) !important;
  }
  .sci-left-rank-meta {
    font-size: var(--dl-font-xs) !important;
  }
  .sci-left-rank-value {
    font-size: var(--dl-font-sm) !important;
  }

  /* ===== view-toggle-inject 注入的左侧风险面板 ===== */
  .sci-right-tabs {
    gap: calc(6px * var(--dl-scale)) !important;
    padding: calc(8px * var(--dl-scale)) 0 calc(10px * var(--dl-scale)) !important;
    margin-bottom: calc(8px * var(--dl-scale)) !important;
  }
  .sci-right-tab {
    gap: calc(6px * var(--dl-scale)) !important;
    padding: calc(5px * var(--dl-scale)) calc(7px * var(--dl-scale)) !important;
    border-radius: calc(6px * var(--dl-scale)) !important;
    font-size: var(--dl-font-xs) !important;
  }
  .sci-right-tab-icon {
    width: calc(16px * var(--dl-scale)) !important;
    height: calc(16px * var(--dl-scale)) !important;
  }
  .sci-right-tab-count {
    font-size: var(--dl-font-xs) !important;
  }
  .sci-risk-list {
    padding-left: calc(2px * var(--dl-scale)) !important;
  }
  .sci-risk-group {
    margin-bottom: calc(8px * var(--dl-scale)) !important;
  }
  .sci-risk-group-title {
    font-size: var(--dl-font-xs) !important;
    gap: calc(6px * var(--dl-scale)) !important;
    margin-bottom: calc(5px * var(--dl-scale)) !important;
  }
  .sci-risk-group-title::before {
    width: calc(3px * var(--dl-scale)) !important;
    height: calc(10px * var(--dl-scale)) !important;
    border-radius: calc(2px * var(--dl-scale)) !important;
  }
  .sci-risk-item {
    padding: calc(8px * var(--dl-scale)) !important;
    margin-bottom: calc(5px * var(--dl-scale)) !important;
    border-radius: calc(8px * var(--dl-scale)) !important;
  }
  .sci-risk-title-wrap {
    gap: calc(6px * var(--dl-scale)) !important;
  }
  .sci-risk-dot {
    width: calc(5px * var(--dl-scale)) !important;
    height: calc(5px * var(--dl-scale)) !important;
    margin-top: calc(4px * var(--dl-scale)) !important;
  }
  .sci-risk-title {
    font-size: var(--dl-font-sm) !important;
  }
  .sci-risk-meta {
    font-size: var(--dl-font-xs) !important;
    margin-top: calc(5px * var(--dl-scale)) !important;
    gap: calc(6px * var(--dl-scale)) !important;
  }
  .sci-risk-tag {
    gap: calc(4px * var(--dl-scale)) !important;
    padding: calc(2px * var(--dl-scale)) calc(6px * var(--dl-scale)) !important;
    border-radius: calc(4px * var(--dl-scale)) !important;
    font-size: var(--dl-font-xs) !important;
  }
  .sci-risk-detail {
    margin-top: calc(5px * var(--dl-scale)) !important;
    padding: calc(6px * var(--dl-scale)) calc(8px * var(--dl-scale)) !important;
    border-radius: calc(6px * var(--dl-scale)) !important;
    font-size: var(--dl-font-xs) !important;
  }

  /* ===== 弹窗 ===== */
  .sci-modal-content,
  .fixed.inset-0.z-\[100\].flex.items-center.justify-center > .relative {
    width: calc(760px * var(--dl-scale)) !important;
    max-width: 85vw !important;
    padding: calc(24px * var(--dl-scale)) !important;
    border-radius: calc(16px * var(--dl-scale)) !important;
  }
  .sci-modal-header {
    padding: calc(14px * var(--dl-scale)) calc(18px * var(--dl-scale)) !important;
  }
  .sci-modal-header h3 {
    font-size: calc(16px * var(--dl-scale)) !important;
  }
  .sci-modal-close {
    font-size: calc(24px * var(--dl-scale)) !important;
  }
  .sci-modal-body {
    padding: calc(16px * var(--dl-scale)) calc(18px * var(--dl-scale)) !important;
  }
  .sci-empty {
    font-size: var(--dl-font-sm) !important;
    padding: calc(24px * var(--dl-scale)) 0 !important;
  }

  /* dashboard-inject 的更新记录弹窗 */
  .sci-update-modal-content {
    width: calc(720px * var(--dl-scale)) !important;
    max-width: 85vw !important;
    padding: calc(16px * var(--dl-scale)) calc(18px * var(--dl-scale)) !important;
  }
  .sci-update-modal-header {
    padding: calc(14px * var(--dl-scale)) calc(18px * var(--dl-scale)) !important;
  }
  .sci-update-modal-header h3 {
    font-size: calc(16px * var(--dl-scale)) !important;
  }
  .sci-update-modal-item {
    font-size: var(--dl-font-xs) !important;
    padding: calc(8px * var(--dl-scale)) calc(10px * var(--dl-scale)) !important;
    margin-bottom: calc(6px * var(--dl-scale)) !important;
  }
}