/* ==========================================================================
   天府智能绿化系统 — 数据大屏 (dashboard.jsp)
   浅色主题，与全站同一套语言。

   这里不引入任何"深色大屏"套路，也不自造色板：底色用米色 --canvas-parchment，
   卡片是白底 + hairline + r-lg，也就是 apple.css 里 store-utility-card 的原样；
   强调色用 Action Blue --primary (#0066cc)。分层靠"卡片白 ← 米色底"的表面色差，
   与首页那块看板区（.dash）完全是同一种做法，所以不会割裂。

   sub-nav 直接用站点标准的浅色磨砂版本，这里不再做任何深色覆盖。
   ========================================================================== */

.screen {
  --screen-bg: var(--canvas-parchment);
  --screen-panel: var(--canvas);
  --screen-line: var(--hairline);
  --screen-accent: var(--primary);
  --screen-text: var(--ink);
  --screen-muted: var(--ink-muted-48);

  margin: 0;
  min-height: 100vh;
  background: var(--screen-bg);
  color: var(--screen-text);
  font-family: var(--font-text);
  /* A monitoring board is viewed wide; never trap it in the 1440px content
     lock the marketing pages use. */
  overflow-x: hidden;
}

/* ---------- Shell ----------
   The global nav (44px) and sub-nav (52px) sit above the board, so the shell
   fills the rest of the first viewport rather than a full one. */
.screen-shell {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  gap: var(--sp-lg);
  min-height: calc(100vh - 96px);
  padding: clamp(16px, 2vw, 32px) clamp(16px, 2.5vw, 40px);
}

/* ---------- Header ---------- */
.screen-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-lg) var(--sp-xl);
  flex-wrap: wrap;
}

.screen-eyebrow {
  margin: 0 0 var(--sp-xs);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--screen-accent);
}

.screen-title h1 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(26px, 2.4vw, 44px);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.374px;
  color: var(--screen-text);
}

.screen-sub {
  margin: var(--sp-xs) 0 0;
  font-size: 14px;
  line-height: 1.43;
  letter-spacing: -0.224px;
  color: var(--ink-muted-80);
}

.screen-clock {
  text-align: end;
  font-size: 13px;
  line-height: 1.43;
  color: var(--screen-muted);
  white-space: nowrap;
}

.screen-clock strong {
  display: block;
  font-size: clamp(20px, 1.7vw, 28px);
  font-weight: 600;
  letter-spacing: 0.231px;
  color: var(--screen-text);
  font-variant-numeric: tabular-nums;
}

.clock-colon {
  display: inline-block;
  transition: opacity 0.2s;
  animation: colon-fade 1s ease-in-out infinite;
}

@keyframes colon-fade {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

.live-status {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  margin-top: 3px;
  font-size: 12px;
  color: var(--ink-muted-80);
}

.live-dot {
  position: relative;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #34c759;
  display: inline-block;
  flex: none;
}

.live-dot::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 1.5px solid #34c759;
  opacity: 0.8;
  animation: pulse-ring 2s cubic-bezier(0.24, 0, 0.38, 1) infinite;
}

@keyframes pulse-ring {
  0% {
    transform: scale(0.6);
    opacity: 0.9;
  }
  60%, 100% {
    transform: scale(2.2);
    opacity: 0;
  }
}

/* ---------- Card surface ----------
   One shared surface for every card on the board: white + hairline + r-lg —
   the store-utility-card recipe, enhanced with subtle hover elevation. */
.panel {
  min-width: 0;
  padding: var(--sp-lg);
  background: var(--screen-panel);
  border: 1px solid var(--screen-line);
  border-radius: var(--r-card, 20px);
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.28s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.28s ease;
}

.panel:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px -4px rgba(0, 0, 0, 0.06), 0 4px 8px -2px rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 102, 204, 0.25);
}

.panel-title {
  display: flex;
  align-items: baseline;
  gap: var(--sp-xs);
  margin: 0 0 var(--sp-md);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.29;
  letter-spacing: -0.224px;
  color: var(--screen-text);
}

.panel-sub {
  margin-inline-start: auto;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: -0.12px;
  color: var(--screen-muted);
}

.chart {
  width: 100%;
  height: clamp(150px, 21vh, 240px);
}

.chart-tall {
  height: clamp(170px, 25vh, 280px);
}

/* ---------- KPI row ---------- */
.screen-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-md);
}

.kpi {
  min-width: 0;
  padding: var(--sp-lg);
  background: var(--screen-panel);
  border: 1px solid var(--screen-line);
  border-radius: var(--r-card, 20px);
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.28s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.28s ease;
}

.kpi:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px -4px rgba(0, 0, 0, 0.06), 0 4px 8px -2px rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 102, 204, 0.25);
}

.kpi-label {
  display: flex;
  align-items: center;
  gap: var(--sp-xs);
  margin: 0 0 var(--sp-xs);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.224px;
  color: var(--ink-muted-80);
}

.kpi-value {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(32px, 3vw, 54px);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.374px;
  color: var(--screen-text);
  font-variant-numeric: tabular-nums;
}

.kpi-num {
  font-variant-numeric: tabular-nums;
  display: inline-block;
  transition: transform 0.15s ease;
}

.kpi-unit {
  font-size: clamp(14px, 1vw, 18px);
  font-weight: 400;
  letter-spacing: 0.231px;
  color: var(--screen-muted);
}

.kpi-foot {
  margin: var(--sp-xs) 0 0;
  font-size: 12px;
  line-height: 1.43;
  letter-spacing: -0.12px;
  color: var(--screen-muted);
}

.kpi-foot.is-warn {
  color: var(--warning);
  font-weight: 600;
}

.dot-warn {
  position: relative;
}

.dot-warn::after {
  content: '';
  position: absolute;
  inset: -2.5px;
  border-radius: 50%;
  border: 1.5px solid var(--danger, #ff3b30);
  animation: pulse-ring 2.2s cubic-bezier(0.24, 0, 0.38, 1) infinite;
}

/* ---------- Three-column board ---------- */
.screen-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) minmax(0, 1fr);
  gap: var(--sp-md);
  align-items: stretch;
}

.screen-col {
  display: grid;
  grid-auto-rows: 1fr;
  gap: var(--sp-md);
  min-width: 0;
}

/* ---------- Recent care ticker ---------- */
.recent-list {
  display: flex;
  gap: var(--sp-sm);
  overflow-x: auto;
  padding-bottom: 2px;
}

.recent-item {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 200px;
  max-width: 260px;
  padding: 10px var(--sp-md);
  background: var(--canvas-parchment);
  border: 1px solid var(--screen-line);
  border-radius: var(--r-md);
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.22s ease,
              border-color 0.22s ease;
}

.recent-item:hover {
  transform: translateY(-2px);
  border-color: var(--screen-accent);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.recent-type {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.224px;
  color: var(--screen-text);
}

.recent-meta {
  font-size: 12px;
  line-height: 1.43;
  letter-spacing: -0.12px;
  color: var(--screen-muted);
  overflow-wrap: anywhere;
}

/* Empty state shared by every chart and the ticker. */
.screen-empty {
  margin: 0;
  padding: var(--sp-xl) 0;
  text-align: center;
  font-size: 14px;
  color: var(--screen-muted);
}

/* ---------- Offline notice ----------
   Mirrors index.jsp's honesty rule: a dead connection must read as "cannot
   reach the database", never as a board full of zeros. */
.screen-error {
  align-self: center;
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
}

.screen-error h2 {
  margin: 0 0 var(--sp-sm);
  font-family: var(--font-display);
  font-size: clamp(24px, 2vw, 34px);
  font-weight: 600;
  letter-spacing: -0.374px;
  color: var(--screen-text);
}

.screen-error p {
  margin: 0 0 var(--sp-sm);
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-muted-80);
}

.screen-error a {
  color: var(--screen-accent);
  font-weight: 600;
  text-decoration: none;
}

.screen-error a:hover {
  text-decoration: underline;
}

/* ---------- Responsive ----------
   The board is built for a wide display first; below 1200px the centre
   column drops under a two-up grid, and below 760px everything stacks. */
@media (max-width: 1200px) {
  .screen-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .screen-col-center {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  .screen-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .screen-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .screen-col-center {
    grid-column: auto;
    grid-row: auto;
  }

  .kpi-value {
    font-size: 34px;
  }
}

/* ---------- Entrance ----------
   One restrained rise-in for the board regions, matching the page-header
   entrance used elsewhere. Gated by reduced-motion, same as apple.css. */
@media (prefers-reduced-motion: no-preference) {
  .screen-head,
  .screen-kpis .kpi,
  .screen-grid .screen-col .panel,
  .screen-shell > .panel {
    animation: rise-in 360ms cubic-bezier(0.16, 1, 0.3, 1) backwards;
  }

  .screen-kpis .kpi:nth-child(2) { animation-delay: 60ms; }
  .screen-kpis .kpi:nth-child(3) { animation-delay: 120ms; }
  .screen-kpis .kpi:nth-child(4) { animation-delay: 180ms; }
  .screen-grid .screen-col .panel:nth-child(2) { animation-delay: 120ms; }
  .screen-shell > .panel { animation-delay: 200ms; }
}

/* ---------- Dark Mode Overrides for Dashboard ---------- */
[data-theme="dark"] .screen {
  --screen-bg: #000000;
  --screen-panel: #1c1c1e;
  --screen-line: rgba(255, 255, 255, 0.12);
  --screen-accent: #2997ff;
  --screen-text: #f5f5f7;
  --screen-muted: #98989d;
}

[data-theme="dark"] .panel,
[data-theme="dark"] .kpi {
  background: #1c1c1e !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  color: #f5f5f7 !important;
  box-shadow: 0 8px 24px -4px rgba(0, 0, 0, 0.6);
}

[data-theme="dark"] .panel:hover,
[data-theme="dark"] .kpi:hover {
  border-color: rgba(41, 151, 255, 0.45) !important;
  box-shadow: 0 16px 36px -6px rgba(0, 0, 0, 0.8), 0 0 12px rgba(41, 151, 255, 0.2) !important;
}

[data-theme="dark"] .panel-title,
[data-theme="dark"] .kpi-value {
  color: #f5f5f7 !important;
}

[data-theme="dark"] .panel-sub,
[data-theme="dark"] .kpi-label,
[data-theme="dark"] .kpi-unit,
[data-theme="dark"] .kpi-foot {
  color: #98989d !important;
}