/* charts.css
 * Extracted from public/styles.css (Phase 0.3).
 * Lazy-loaded by public/modules/panels/nav.js on openPanel('charts')
 * or relevant tab switch in switchMode().
 */

.finance-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 12px;
}

.finance-kpi {
  background: var(--md-sys-color-surface-container-high);
  border-radius: var(--md-sys-shape-corner-md);
  padding: 16px;
  text-align: center;
}

.kpi-label {
  font-size: var(--md-sys-typescale-label-medium-size);
  line-height: var(--md-sys-typescale-label-medium-line);
  font-weight: var(--md-sys-typescale-label-medium-weight);
  letter-spacing: var(--md-sys-typescale-label-medium-tracking);
  color: var(--md-sys-color-on-surface-variant);
  text-transform: uppercase;
  margin-bottom: 4px;
}

.kpi-value {
  font-size: var(--md-sys-typescale-title-large-size);
  line-height: var(--md-sys-typescale-title-large-line);
  font-weight: var(--md-sys-typescale-title-large-weight);
  letter-spacing: var(--md-sys-typescale-title-large-tracking);
  color: var(--md-sys-color-on-surface);
}

.kpi-value.kpi-negative { color: var(--md-sys-color-error); }

.kpi-delta {
  font-size: var(--md-sys-typescale-label-medium-size);
  line-height: var(--md-sys-typescale-label-medium-line);
  font-weight: var(--md-sys-typescale-label-medium-weight);
  letter-spacing: var(--md-sys-typescale-label-medium-tracking);
  margin-top: 4px;
}

.delta-good { color: var(--md-sys-color-success-fg); }

.delta-bad { color: var(--md-sys-color-error); }

.kpi-lastmonth {
  font-size: var(--md-sys-typescale-label-small-size);
  line-height: var(--md-sys-typescale-label-small-line);
  letter-spacing: var(--md-sys-typescale-label-small-tracking);
  color: var(--md-sys-color-on-surface-variant);
  margin-top: 4px;
}

.finance-kpi.kpi-large { grid-column: span 2; }

.finance-kpi.kpi-large .kpi-value {
  font-size: var(--md-sys-typescale-headline-small-size);
  line-height: var(--md-sys-typescale-headline-small-line);
}

.finance-kpi.kpi-alert {
  border: 1px solid var(--md-sys-color-error);
  background: var(--md-sys-color-error-container);
}

.finance-kpi.kpi-stale .kpi-value { opacity: 0.45; }

.finance-kpi.kpi-stale .kpi-label::after { content: ' \21BB'; font-size: var(--md-sys-typescale-body-small-size); opacity: 0.5; }

.kpi-sparkline-inline { margin: 4px 0 2px; opacity: 0.7; }

.kpi-comparison { margin-top: 4px; }

.kpi-delta.hidden { display: none; }

.chart-container { width: 100%; overflow: hidden; }

.chart-svg { width: 100%; height: auto; display: block; }

.chart-hover-target { cursor: crosshair; }

.chart-dot { transition: opacity var(--md-sys-motion-duration-short1) var(--md-sys-motion-easing-standard); }

.chart-tip { transition: opacity var(--md-sys-motion-duration-short1) var(--md-sys-motion-easing-standard); }

.data-health-ok {
  color: var(--md-sys-color-success-fg);
  background: var(--md-sys-color-success-bg);
  border: 1px solid var(--md-sys-color-success-fg);
}

.data-health-warn {
  color: var(--md-sys-color-warning-fg);
  background: var(--md-sys-color-warning-bg);
  border: 1px solid var(--md-sys-color-warning-fg);
}

@media (min-width: 1024px) {
  #finance-content {
    max-width: 1100px;
    margin: 0 auto;
    padding: 16px 32px;
  }

  #marketing-content {
    max-width: 1100px;
    margin: 0 auto;
    padding: 16px 32px;
  }

  .finance-kpis {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 16px;
  }

  .finance-kpi {
    padding: 20px;
  }

  .kpi-value {
    font-size: var(--md-sys-typescale-headline-small-size);
    line-height: var(--md-sys-typescale-headline-small-line);
  }

  .finance-kpi.kpi-large .kpi-value {
    font-size: var(--md-sys-typescale-headline-medium-size);
    line-height: var(--md-sys-typescale-headline-medium-line);
  }
}

@media (min-width: 1280px) {
  .dash-grid {
    display: grid;
    grid-template-columns: 180px minmax(0, 1fr);
    gap: 24px;
    margin-top: 8px;
  }

  .dash-sidebar {
    position: sticky;
    top: 4px;
    align-self: start;
    max-height: calc(100vh - 24px);
  }
  .dash-sidebar-inner {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 4px 0;
  }

  .dash-nav-link {
    display: block;
    padding: 8px 12px;
    border-radius: var(--md-sys-shape-corner-sm);
    font-size: var(--md-sys-typescale-label-large-size);
    line-height: var(--md-sys-typescale-label-large-line);
    font-weight: var(--md-sys-typescale-label-large-weight);
    letter-spacing: var(--md-sys-typescale-label-large-tracking);
    color: var(--md-sys-color-on-surface-variant);
    text-decoration: none;
    border-left: 2px solid transparent;
    transition: background var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard),
                color var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard),
                border-color var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard);
    cursor: pointer;
    position: relative;
    isolation: isolate;
    -webkit-tap-highlight-color: transparent;
  }
  .dash-nav-link::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: var(--md-sys-color-on-surface);
    opacity: 0;
    pointer-events: none;
    z-index: -1;
    transition: opacity var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard);
  }
  @media (hover: hover) {
    .dash-nav-link:hover::after { opacity: var(--md-sys-state-hover-opacity); }
  }
  .dash-nav-link:active::after { opacity: var(--md-sys-state-pressed-opacity); }
  .dash-nav-link.active {
    background: var(--md-sys-color-surface-container);
    color: var(--md-sys-color-primary);
    border-left-color: var(--md-sys-color-primary);
  }

  .dash-content {
    min-width: 0;
  }

  .dash-section {
    scroll-margin-top: 8px;
    margin-bottom: 28px;
  }
  .dash-section:last-child {
    margin-bottom: 12px;
  }
}

@media (pointer: coarse) {
  .dash-nav-link { min-height: 48px; display: flex; align-items: center; }
}