/* Modern Builder advanced - Chart Popup Design 2.3.216
   Responsive/Mobile-Optimierung für Trend-, Multitrend- und Balken-Popups.
   Wirkt nur auf Seiten mit body.modern-chart-popup. */
:root {
  --mcp-bg: #d9dde2;
  --mcp-panel: #eef2f6;
  --mcp-card: #ffffff;
  --mcp-card-soft: #f8fafc;
  --mcp-border: #cbd5df;
  --mcp-border-soft: #d9e3ec;
  --mcp-text: #102033;
  --mcp-muted: #63758a;
  --mcp-primary: #22374d;
  --mcp-primary-2: #304961;
  --mcp-accent: #0f5f91;
  --mcp-green: #0f7a3e;
  --mcp-red: #b42318;
  --mcp-shadow: 0 10px 26px rgba(15, 23, 42, .08);
  --mcp-radius: 14px;
  --mcp-vh: 1vh;
}

html {
  min-height: 100%;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body.modern-chart-popup,
body.modern-chart-popup * {
  box-sizing: border-box;
}
body.modern-chart-popup {
  margin: 0 !important;
  background: var(--mcp-bg) !important;
  color: var(--mcp-text) !important;
  font-family: Arial, Helvetica, sans-serif !important;
  line-height: 1.42;
  overflow-x: hidden;
}
body.modern-chart-popup.theme-dark {
  --mcp-bg: #111827;
  --mcp-panel: #172333;
  --mcp-card: #1f2937;
  --mcp-card-soft: #172333;
  --mcp-border: #334155;
  --mcp-border-soft: #26364a;
  --mcp-text: #e5edf6;
  --mcp-muted: #a7b4c4;
  --mcp-primary: #29435e;
  --mcp-primary-2: #365674;
  --mcp-accent: #38bdf8;
  background: var(--mcp-bg) !important;
  color: var(--mcp-text) !important;
}
body.modern-chart-popup.theme-material {
  --mcp-bg: #e4e7eb;
  --mcp-panel: #f3f6f9;
  --mcp-card: #ffffff;
  --mcp-card-soft: #f8fafc;
  --mcp-border: #c7d2de;
  --mcp-border-soft: #dbe3ec;
  --mcp-primary: #1e4f73;
  --mcp-primary-2: #2b6f9e;
  --mcp-accent: #1976d2;
}

body.modern-chart-popup .modern-chart-head,
body.modern-chart-popup #topbar,
body.modern-chart-popup #descBox {
  margin: 14px auto 10px !important;
  width: calc(100% - 28px) !important;
  box-sizing: border-box !important;
  border: 1px solid var(--mcp-border) !important;
  border-radius: var(--mcp-radius) !important;
  background: linear-gradient(180deg, var(--mcp-card), var(--mcp-card-soft)) !important;
  box-shadow: var(--mcp-shadow) !important;
  color: var(--mcp-text) !important;
  padding: 14px 18px !important;
}
body.modern-chart-popup .modern-chart-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
body.modern-chart-popup .modern-chart-title {
  margin: 0;
  font-size: 22px;
  font-weight: 900;
  letter-spacing: .01em;
  color: var(--mcp-text);
}
body.modern-chart-popup .modern-chart-subtitle {
  margin: 4px 0 0;
  color: var(--mcp-muted);
  font-size: 13px;
}
body.modern-chart-popup .modern-chart-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--mcp-border-soft);
  border-radius: 999px;
  background: var(--mcp-card-soft);
  color: var(--mcp-muted);
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 800;
}

body.modern-chart-popup #controls,
body.modern-chart-popup .toggle-wrap,
body.modern-chart-popup #infoBar {
  width: calc(100% - 28px) !important;
  margin: 0 auto 10px !important;
  box-sizing: border-box !important;
  border: 1px solid var(--mcp-border) !important;
  border-radius: var(--mcp-radius) !important;
  background: var(--mcp-card) !important;
  box-shadow: 0 6px 18px rgba(15, 23, 42, .05) !important;
  color: var(--mcp-text) !important;
}
body.modern-chart-popup #controls {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  padding: 12px 14px !important;
  position: sticky;
  top: 0;
  z-index: 20;
}
body.modern-chart-popup .toggle-wrap { padding: 10px 14px !important; }
body.modern-chart-popup #infoBar { padding: 9px 14px !important; font-size: 13px !important; color: var(--mcp-muted) !important; }

body.modern-chart-popup label { color: var(--mcp-text); font-weight: 800; font-size: 13px; }
body.modern-chart-popup input,
body.modern-chart-popup select,
body.modern-chart-popup button {
  font-family: inherit !important;
  font-size: 13px !important;
  border-radius: 10px !important;
  border: 1px solid var(--mcp-border) !important;
  padding: 8px 10px !important;
  box-sizing: border-box !important;
}
body.modern-chart-popup input,
body.modern-chart-popup select {
  background: var(--mcp-card-soft) !important;
  color: var(--mcp-text) !important;
}
body.modern-chart-popup input[type="date"],
body.modern-chart-popup select {
  min-height: 38px;
}
body.modern-chart-popup button {
  background: var(--mcp-primary) !important;
  color: #fff !important;
  cursor: pointer !important;
  font-weight: 900 !important;
  box-shadow: 0 3px 8px rgba(15, 23, 42, .08) !important;
  min-height: 38px;
  touch-action: manipulation;
}
body.modern-chart-popup button:hover { background: var(--mcp-primary-2) !important; }
body.modern-chart-popup button:disabled { opacity: .55 !important; cursor: not-allowed !important; }
body.modern-chart-popup button.action,
body.modern-chart-popup #btnRefresh,
body.modern-chart-popup button[onclick*="loadData"],
body.modern-chart-popup button[onclick*="Anzeigen"] { background: var(--mcp-accent) !important; }
body.modern-chart-popup button[onclick*="close"],
body.modern-chart-popup button[id*="Close"] { background: #7f1d1d !important; }

body.modern-chart-popup #chartWrap,
body.modern-chart-popup #chartdiv {
  box-sizing: border-box !important;
}
body.modern-chart-popup #chartWrap {
  width: calc(100% - 28px) !important;
  margin: 0 auto 10px !important;
  padding: 0 !important;
}
body.modern-chart-popup #chartdiv {
  width: calc(100% - 28px) !important;
  margin: 0 auto 10px !important;
  background: var(--mcp-card) !important;
  border: 1px solid var(--mcp-border) !important;
  border-radius: var(--mcp-radius) !important;
  box-shadow: var(--mcp-shadow) !important;
  overflow: hidden !important;
  min-height: 360px;
}
body.modern-chart-popup #chartWrap #chartdiv { width: 100% !important; margin: 0 !important; }

body.modern-chart-popup #stats {
  width: calc(100% - 28px) !important;
  margin: 0 auto 14px !important;
  box-sizing: border-box !important;
  background: var(--mcp-card) !important;
  color: var(--mcp-text) !important;
  border: 1px solid var(--mcp-border) !important;
  border-radius: var(--mcp-radius) !important;
  box-shadow: 0 6px 18px rgba(15, 23, 42, .05) !important;
  padding: 12px 14px !important;
}
body.modern-chart-popup .stat-card,
body.modern-chart-popup .stat-line {
  background: var(--mcp-card-soft) !important;
  border: 1px solid var(--mcp-border-soft) !important;
  border-radius: 12px !important;
  padding: 8px 10px !important;
  margin: 4px 0 !important;
}
body.modern-chart-popup .stat-title { color: var(--mcp-muted) !important; }
body.modern-chart-popup .stat-value { color: var(--mcp-text) !important; }

body.modern-chart-popup #layout {
  border: 1px solid var(--mcp-border) !important;
  border-radius: var(--mcp-radius) !important;
  overflow: hidden !important;
  background: var(--mcp-card) !important;
  box-shadow: var(--mcp-shadow) !important;
  width: calc(100% - 28px) !important;
  margin: 0 auto 14px !important;
}
body.modern-chart-popup #sidebar,
body.modern-chart-popup #main {
  background: var(--mcp-card) !important;
  color: var(--mcp-text) !important;
}
body.modern-chart-popup #sidebar { border-color: var(--mcp-border) !important; }
body.modern-chart-popup .point-item {
  border: 1px solid var(--mcp-border-soft) !important;
  border-radius: 12px !important;
  background: var(--mcp-card-soft) !important;
  margin-bottom: 8px !important;
}
body.modern-chart-popup .point-item:hover { background: #eef6ff !important; }
body.modern-chart-popup.theme-dark .point-item:hover { background: #213347 !important; }
body.modern-chart-popup .group-title { color: var(--mcp-text) !important; }
body.modern-chart-popup .group-sub,
body.modern-chart-popup .hint,
body.modern-chart-popup small { color: var(--mcp-muted) !important; }

/* Tablet: Controls kompakter, aber weiterhin horizontal nutzbar */
@media (max-width: 900px) {
  body.modern-chart-popup #controls {
    position: static;
    gap: 8px !important;
  }
  body.modern-chart-popup .modern-chart-title { font-size: 20px; }
  body.modern-chart-popup #chartdiv { min-height: 340px; }
}

/* Handy quer/klein: Controls werden als Kartenraster angeordnet. */
@media (max-width: 700px) {
  body.modern-chart-popup {
    font-size: 14px;
  }
  body.modern-chart-popup .modern-chart-head,
  body.modern-chart-popup #topbar,
  body.modern-chart-popup #descBox,
  body.modern-chart-popup #controls,
  body.modern-chart-popup .toggle-wrap,
  body.modern-chart-popup #infoBar,
  body.modern-chart-popup #chartdiv,
  body.modern-chart-popup #stats,
  body.modern-chart-popup #layout,
  body.modern-chart-popup #chartWrap {
    width: calc(100% - 14px) !important;
  }
  body.modern-chart-popup .modern-chart-head,
  body.modern-chart-popup #topbar,
  body.modern-chart-popup #descBox {
    margin-top: 7px !important;
    padding: 11px 12px !important;
    border-radius: 12px !important;
  }
  body.modern-chart-popup .modern-chart-title { font-size: 18px; }
  body.modern-chart-popup .modern-chart-subtitle { font-size: 12px; }

  body.modern-chart-popup #controls {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch !important;
    gap: 8px !important;
    padding: 10px !important;
    border-radius: 12px !important;
  }
  body.modern-chart-popup #controls label {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    min-width: 0 !important;
    width: 100% !important;
  }
  body.modern-chart-popup #controls input,
  body.modern-chart-popup #controls select,
  body.modern-chart-popup #controls button {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 42px !important;
    padding: 9px 10px !important;
  }
  body.modern-chart-popup #controls > span,
  body.modern-chart-popup #yearWrap,
  body.modern-chart-popup #statusInfo {
    width: 100% !important;
    min-width: 0 !important;
  }
  body.modern-chart-popup #statusInfo {
    grid-column: 1 / -1;
    margin-left: 0 !important;
    text-align: left;
    padding: 4px 2px;
  }
  body.modern-chart-popup #yearWrap label { width: 100%; }

  body.modern-chart-popup #chartdiv {
    height: calc(var(--mcp-vh, 1vh) * 58) !important;
    min-height: 320px !important;
    max-height: 620px !important;
    border-radius: 12px !important;
  }
  body.modern-chart-popup #chartWrap #chartdiv {
    height: calc(var(--mcp-vh, 1vh) * 58) !important;
  }
  body.modern-chart-popup #stats {
    padding: 10px !important;
    gap: 8px !important;
  }
  body.modern-chart-popup #stats .stat-card,
  body.modern-chart-popup #stats .stat-line {
    padding: 9px 10px !important;
  }

  /* Kategorie-Multitrend: Auswahl oben scrollbar, Diagramm darunter. */
  body.modern-chart-popup #layout {
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
    max-height: none !important;
  }
  body.modern-chart-popup #sidebar {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    max-height: calc(var(--mcp-vh, 1vh) * 42) !important;
    overflow: auto !important;
    -webkit-overflow-scrolling: touch;
    border-right: 0 !important;
    border-bottom: 1px solid var(--mcp-border) !important;
  }
  body.modern-chart-popup #main {
    min-height: 0 !important;
    width: 100% !important;
  }
  body.modern-chart-popup .sidebar-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px !important;
  }
  body.modern-chart-popup .sidebar-actions button { width: 100% !important; }
}

/* Handy hochkant: alles einspaltig und fingerfreundlich. */
@media (max-width: 520px) {
  body.modern-chart-popup #controls {
    grid-template-columns: 1fr;
  }
  body.modern-chart-popup #controls button,
  body.modern-chart-popup #controls input,
  body.modern-chart-popup #controls select {
    min-height: 44px !important;
  }
  body.modern-chart-popup #chartdiv,
  body.modern-chart-popup #chartWrap #chartdiv {
    height: calc(var(--mcp-vh, 1vh) * 56) !important;
    min-height: 300px !important;
  }
  body.modern-chart-popup #stats {
    grid-template-columns: 1fr !important;
  }
  body.modern-chart-popup .stat-value { font-size: 16px !important; }
  body.modern-chart-popup .sidebar-actions {
    grid-template-columns: 1fr !important;
  }
}

/* Sehr kleine Displays: Chart behält lesbare Mindestfläche. */
@media (max-width: 380px) {
  body.modern-chart-popup .modern-chart-head,
  body.modern-chart-popup #topbar,
  body.modern-chart-popup #descBox,
  body.modern-chart-popup #controls,
  body.modern-chart-popup .toggle-wrap,
  body.modern-chart-popup #infoBar,
  body.modern-chart-popup #chartdiv,
  body.modern-chart-popup #stats,
  body.modern-chart-popup #layout,
  body.modern-chart-popup #chartWrap {
    width: calc(100% - 10px) !important;
  }
  body.modern-chart-popup #chartdiv,
  body.modern-chart-popup #chartWrap #chartdiv {
    min-height: 280px !important;
  }
}

/* Step 2.3.205/2.3.206: Achsenbeschriftungen kompakter halten. Die eigentliche amCharts-
   Formatierung erfolgt per JS-Helfer, diese Regeln helfen bei externen SVG/Text-Labels. */
body.modern-chart-popup .am5-axis-label,
body.modern-chart-popup svg text {
  font-size: 11px;
}
@media (max-width: 700px) {
  body.modern-chart-popup .am5-axis-label,
  body.modern-chart-popup svg text {
    font-size: 10px;
  }
}
@media (max-width: 520px) {
  body.modern-chart-popup .am5-axis-label,
  body.modern-chart-popup svg text {
    font-size: 9px;
  }
}

/* Step 2.3.206: Multi-/Kategorie-Trends etwas kompakter.
   Die konkreten amCharts-Achsenwerte werden per JS/PHP gesetzt. */
body.modern-chart-popup .mcp-compact-axis-note { display: none; }

/* Step 2.3.207: Cursor-/Lineal-Tooltip-Labels in Multi- und Kategorie-Trends kompakter.
   Die wirksame Größe wird zusätzlich direkt in den amCharts-Tooltips gesetzt. */
body.modern-chart-popup .mcp-tooltip-compact-note { display: none; }
body.modern-chart-popup .am5-tooltip-label,
body.modern-chart-popup [class*="tooltip"] text {
  font-size: 10px;
}
@media (max-width: 700px) {
  body.modern-chart-popup .am5-tooltip-label,
  body.modern-chart-popup [class*="tooltip"] text {
    font-size: 9px;
  }
}


/* 2.3.212 Trend-Komfort: bessere Bedienbarkeit der Steuerleiste */
.modern-chart-popup #controls button[title*="Zoom"],
.modern-chart-popup #controls #btnResetZoom {
  background: #eef6ff;
  color: #0f3f6f;
  border-color: #bfdbfe;
  font-weight: 800;
}
.modern-chart-popup #controls button[title*="Zoom"]:hover,
.modern-chart-popup #controls #btnResetZoom:hover {
  background: #dbeafe;
  color: #0b2f53;
}
@media (max-width: 700px) {
  .modern-chart-popup #controls button[title*="Zoom"],
  .modern-chart-popup #controls #btnResetZoom {
    flex: 1 1 150px;
  }
}

/* Step 2.3.213: Legende/Serienauswahl kompakter und besser bedienbar. */
body.modern-chart-popup .series-controlbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  padding: 2px 0 8px;
  border-bottom: 1px solid var(--mcp-border-soft);
  margin-bottom: 8px;
}
body.modern-chart-popup .series-controlbar-sidebar {
  background: var(--mcp-card-soft);
  border: 1px solid var(--mcp-border-soft);
  border-radius: 12px;
  padding: 9px;
  margin: 8px 0 12px;
}
body.modern-chart-popup .series-control-title {
  font-weight: 900;
  font-size: 13px;
  color: var(--mcp-text);
}
body.modern-chart-popup .series-control-summary {
  font-size: 12px;
  font-weight: 800;
  color: var(--mcp-muted);
  margin-right: auto;
}
body.modern-chart-popup .series-control-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
body.modern-chart-popup button.mcp-mini-btn,
body.modern-chart-popup .mcp-mini-btn {
  min-height: 30px !important;
  padding: 5px 9px !important;
  font-size: 12px !important;
  border-radius: 999px !important;
  box-shadow: none !important;
  background: var(--mcp-primary) !important;
  color: #fff !important;
}
body.modern-chart-popup button.mcp-mini-btn-muted,
body.modern-chart-popup .mcp-mini-btn-muted {
  background: var(--mcp-card-soft) !important;
  color: var(--mcp-text) !important;
  border-color: var(--mcp-border) !important;
}
body.modern-chart-popup .series-toggle-list {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  align-items: center;
}
body.modern-chart-popup .series-toggle-chip,
body.modern-chart-popup .toggle-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 260px;
  padding: 5px 8px;
  border: 1px solid var(--mcp-border-soft);
  border-radius: 999px;
  background: var(--mcp-card-soft);
  font-size: 12px;
  line-height: 1.2;
  overflow: hidden;
}
body.modern-chart-popup .series-toggle-chip input,
body.modern-chart-popup .toggle-item input {
  width: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  flex: 0 0 auto;
}
body.modern-chart-popup .color-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  flex: 0 0 10px;
  box-shadow: 0 0 0 1px rgba(0,0,0,.08);
}
body.modern-chart-popup .series-toggle-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
@media (max-width: 700px) {
  body.modern-chart-popup .series-controlbar {
    align-items: stretch;
  }
  body.modern-chart-popup .series-control-title,
  body.modern-chart-popup .series-control-summary,
  body.modern-chart-popup .series-control-actions {
    width: 100%;
  }
  body.modern-chart-popup .series-control-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  body.modern-chart-popup .series-control-actions .mcp-mini-btn {
    width: 100% !important;
    min-height: 34px !important;
    padding: 6px 7px !important;
  }
  body.modern-chart-popup .series-toggle-chip,
  body.modern-chart-popup .toggle-item {
    max-width: 100%;
    width: 100%;
    border-radius: 12px;
    padding: 7px 8px;
  }
  body.modern-chart-popup .series-toggle-list {
    gap: 6px;
  }
}
@media (max-width: 420px) {
  body.modern-chart-popup .series-control-actions {
    grid-template-columns: 1fr;
  }
}


/* Step 2.3.214: Trend-Polish - kompakte Statuschips und lesbarere Statistik-Karten. */
body.modern-chart-popup .trend-polish-bar {
  width: calc(100% - 28px) !important;
  margin: 0 auto 10px !important;
  box-sizing: border-box !important;
  border: 1px solid var(--mcp-border-soft) !important;
  border-radius: var(--mcp-radius) !important;
  background: linear-gradient(180deg, var(--mcp-card-soft), var(--mcp-card)) !important;
  box-shadow: 0 5px 16px rgba(15, 23, 42, .04) !important;
  color: var(--mcp-muted) !important;
  padding: 9px 12px !important;
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
  flex-wrap: wrap !important;
  font-size: 12px !important;
}
body.modern-chart-popup .trend-polish-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 100%;
  border: 1px solid var(--mcp-border-soft);
  border-radius: 999px;
  background: var(--mcp-card);
  color: var(--mcp-muted);
  padding: 5px 8px;
  line-height: 1.2;
  white-space: nowrap;
}
body.modern-chart-popup .trend-polish-chip b {
  color: var(--mcp-text);
  font-weight: 900;
}
body.modern-chart-popup .trend-stat-card {
  margin-bottom: 8px !important;
}
body.modern-chart-popup .trend-stat-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(78px, 1fr));
  gap: 7px;
  margin-top: 7px;
}
body.modern-chart-popup .trend-stat-grid span,
body.modern-chart-popup .trend-stat-empty {
  display: flex;
  flex-direction: column;
  gap: 2px;
  border: 1px solid var(--mcp-border-soft);
  border-radius: 10px;
  background: var(--mcp-card);
  color: var(--mcp-text);
  padding: 7px 8px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
body.modern-chart-popup .trend-stat-grid b {
  color: var(--mcp-muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .02em;
}
body.modern-chart-popup .trend-stat-empty {
  color: var(--mcp-muted);
  font-weight: 800;
  margin-top: 7px;
}
@media (max-width: 900px) {
  body.modern-chart-popup .trend-stat-grid {
    grid-template-columns: repeat(3, minmax(78px, 1fr));
  }
}
@media (max-width: 700px) {
  body.modern-chart-popup .trend-polish-bar {
    width: calc(100% - 14px) !important;
    border-radius: 12px !important;
    padding: 8px !important;
    gap: 6px !important;
  }
  body.modern-chart-popup .trend-polish-chip {
    width: 100%;
    border-radius: 10px;
    white-space: normal;
  }
  body.modern-chart-popup .trend-stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 420px) {
  body.modern-chart-popup .trend-stat-grid {
    grid-template-columns: 1fr;
  }
}


/* Step 2.3.215: Single-Trend-Polish - nutzt dieselben Statuschips/Statistikkarten auch in graphen01/trend.php. */
body.modern-chart-popup .trend-single-polish-note {
  color: var(--mcp-muted);
  font-size: 12px;
  font-weight: 800;
}
body.modern-chart-popup #trendPolishBar:empty {
  display: none !important;
}
body.modern-chart-popup .trend-stat-card .stat-title {
  font-weight: 900;
  color: var(--mcp-text) !important;
}


/* Step 2.3.216: Trend-Mobile-/Export-Polish.
   Mobile Bedienung, Exportstatus und PDF-Screenshot werden robuster ohne Daten-/Backend-Aenderung. */
body.modern-chart-popup .mcp-export-status {
  position: fixed;
  right: 14px;
  bottom: 14px;
  z-index: 9999;
  display: none;
  max-width: min(420px, calc(100vw - 28px));
  border: 1px solid var(--mcp-border-soft);
  border-radius: 14px;
  background: rgba(255,255,255,.96);
  color: var(--mcp-text);
  box-shadow: 0 12px 34px rgba(15, 23, 42, .16);
  padding: 10px 12px;
  font-size: 13px;
  font-weight: 900;
}
body.modern-chart-popup.theme-dark .mcp-export-status {
  background: rgba(31,41,55,.96);
}
body.modern-chart-popup.mcp-exporting .mcp-export-status {
  display: block;
}
body.modern-chart-popup.mcp-exporting #controls button {
  opacity: .78;
}
body.modern-chart-popup #controls button[onclick*="export"],
body.modern-chart-popup #controls button[onclick*="CSV"],
body.modern-chart-popup #controls button[onclick*="PDF"] {
  background: #0f5f91 !important;
}
body.modern-chart-popup #controls button[onclick*="exportCSV"],
body.modern-chart-popup #controls button[onclick*="exportPDF"] {
  min-width: 74px;
}
body.modern-chart-popup.mcp-export-mode #controls {
  position: static !important;
}
body.modern-chart-popup.mcp-export-mode .mcp-export-status {
  display: none !important;
}
body.modern-chart-popup.mcp-export-mode #chartdiv,
body.modern-chart-popup.mcp-export-mode #chartWrap #chartdiv {
  min-height: 430px !important;
}
body.modern-chart-popup.mcp-export-mode #layout {
  max-height: none !important;
}
body.modern-chart-popup.mcp-export-mode #sidebar {
  max-height: none !important;
}
body.modern-chart-popup.mcp-export-mode .trend-polish-chip {
  white-space: normal;
}
@media (max-width: 700px) {
  body.modern-chart-popup .mcp-export-status {
    left: 7px;
    right: 7px;
    bottom: 7px;
    max-width: none;
    border-radius: 12px;
  }
  body.modern-chart-popup #controls button[onclick*="exportCSV"],
  body.modern-chart-popup #controls button[onclick*="exportPDF"] {
    min-height: 44px !important;
  }
  body.modern-chart-popup.mcp-export-mode #controls {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  body.modern-chart-popup.mcp-export-mode #chartdiv,
  body.modern-chart-popup.mcp-export-mode #chartWrap #chartdiv {
    height: 520px !important;
    min-height: 520px !important;
  }
}
@media (max-width: 520px) {
  body.modern-chart-popup.mcp-export-mode #controls {
    grid-template-columns: 1fr;
  }
  body.modern-chart-popup.mcp-export-mode .trend-stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}