/* =============================================================================
 * AUSLASTUNGSMONITOR.CSS — v7.0.0 "Slim Top-Bar"
 * Clean SaaS Look · Card-Based · Kaufland CI
 *
 * v7.0.0 — Top-Bar-Optimierung für Leitstand:
 *   - Header (.monitor-header) auf ~58px Höhe reduziert (war ~78px)
 *     Logo: 36px → 32px · Titel: 18px → 16px (font-weight 800 → 600)
 *   - Control-Bar (.ctrl-btn-group) zu Multi-Funktions-Zeile (~50px) erweitert:
 *     Nav-Buttons + Heute/Tomorrow + Screen-Info + Legende in EINER Zeile
 *   - .info-legend-row Container nicht mehr verwendet (display:none)
 *   - .screen-info als Standalone-Box deaktiviert (display:none) —
 *     Inhalte sind nun in der Control-Bar via .ctrl-screen-info
 *   - --monitor-chrome: 200px → 108px → ca. +30px Diagrammhöhe je Karte (3 Karten)
 *
 * Ersetzt die bestehende auslastungsmonitor.css komplett.
 * Abhängig von: style.css (Design-Tokens)
 * ============================================================================= */

/* ─────────────────────────── ROOT VARIABLES ─────────────────────────── */

.monitor-page {
  /* v7.1.0: Header (~58px) + Control-Bar (~50px) + Stack-Gaps (2×4px)
     + Sicherheitspuffer (4px) ≈ 120px
     Header ist jetzt INSIDE der .monitor-page (war vorher außen) und muss
     daher mit in die Chrome-Rechnung — sonst rutscht er aus dem Viewport. */
  --monitor-chrome: 120px;

  /* Default: 1 Diagramm pro Screen — wird via inline-Style überschrieben. */
  --card-count: 1;
}


/* ─────────────────────────── MONITOR PAGE ─────────────────────────── */

.monitor-page {
  background-color: var(--bg-page) !important;
  height: 100vh;
  min-height: 100vh;
  max-height: 100vh;
  overflow: hidden;
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
}


/* ─────────────────────────── MONITOR HEADER (Zeile 1, ~58px) ─────────── */

.monitor-header {
  background: var(--bg-card) !important;
  border-bottom: 1px solid var(--border-light) !important;
  /* v7.1.0: kein "position: sticky" mehr — Header ist jetzt erstes Flex-Item
     im .monitor-page Container und wird durch flex:0 0 auto fixiert. */
  padding: 8px 24px;          /* v7.0.0: kompakter, mehr horizontaler Atem */
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
  flex: 0 0 auto;
}

.monitor-header .monitor-title {
  font-size: 16px;            /* v7.0.0: 16px (war 18px) */
  font-weight: 600;           /* v7.0.0: 600 (war 800) — moderner */
  color: var(--text-primary);
  letter-spacing: -0.2px;
  line-height: 1.25;
}

.monitor-header .monitor-subtitle {
  font-size: 12px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 6px;
  line-height: 1.25;
}


/* ─────────────────────────── CONTROL BAR (Zeile 2, ~50px) ─────────── */

.ctrl-btn-group {
  display: flex;
  flex-wrap: nowrap;          /* v7.0.0: keine Umbrüche → eine Zeile */
  align-items: center;
  gap: 16px;                  /* v7.0.0: großzügiger, klare Element-Trennung */
  width: 100%;
  margin-bottom: 0;
  background: var(--bg-subtle, #FAFAF7);
  border-bottom: 1px solid var(--border-light);
  padding: 10px 24px;
  flex: 0 0 auto;
}

.ctrl-nav-group {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-shrink: 0;
}

.ctrl-btn {
  height: 30px;               /* v7.0.0: 30px (war 40px in v6.0) */
  border-radius: var(--radius-inner);
  font-weight: 500;
  font-size: 13px;
  border: 1px solid var(--border-light);
  cursor: pointer;
  transition: all var(--transition-fast);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 14px;
  background: var(--bg-card);
  color: var(--text-secondary);
  white-space: nowrap;
}

.ctrl-btn:hover {
  background: var(--bg-hover);
  border-color: var(--text-muted);
  color: var(--text-primary);
}

/* Heute/Nächster Tag Segmented Control — kompakter (24px Höhe via inline-Style) */
.seg-control {
  flex-shrink: 0;
}

/* Screen-Info inline in der Control-Bar */
.ctrl-screen-info {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.ctrl-screen-info .screen-title {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
  white-space: nowrap;
}

.ctrl-screen-info .screen-badge {
  font-size: 11px;
  padding: 3px 10px;
  background: var(--text-primary, #1A1D23);
  color: #FFFFFF;
  border-radius: 999px;
  font-weight: 500;
  letter-spacing: 0.4px;
  white-space: nowrap;
}

/* Vertikaler Trennstrich zwischen Screen-Info und Legende */
.ctrl-divider {
  width: 1px;
  height: 22px;
  background: var(--border-light, #D3D1C7);
  flex-shrink: 0;
}

/* Spacer der den Rest der Bar einnimmt */
.ctrl-spacer {
  flex: 1 1 auto;
  min-width: 0;
}


/* ─────────────────────────── INFO + LEGEND ROW (entfernt in v7.0) ─── */

/* Container .info-legend-row wird in v7.0 nicht mehr verwendet —
   Inhalte sind in .ctrl-btn-group integriert. */
.info-legend-row {
  display: none !important;
}


/* ─────────────────────────── DIAGRAMS CONTAINER ─────────────────────── */

#diagrams-container {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  /* v7.1.0: eigenes Padding, da .monitor-page jetzt p=0 hat
     (Header und Control-Bar haben bereits eigenes Padding) */
  padding: 8px 12px;
  gap: 8px;
}

#diagrams-container > div,
#diagrams-container .mantine-Stack-root,
#diagrams-container [data-mantine-stack] {
  flex: 1 1 auto;
  min-height: 0;
  display: flex !important;
  flex-direction: column !important;
}


/* ─────────────────────────── DIAGRAM CARDS ─────────────────────────── */

.diagram-card {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-card) !important;
  border-radius: var(--radius-card) !important;
  box-shadow: var(--shadow-card) !important;
  overflow: hidden;
  margin-bottom: 0;
  transition: box-shadow var(--transition-smooth);
  animation: fadeInUp 0.35s ease-out both;

  /* === ZERO-SCROLL CORE ===
   * Höhe = (Viewport − Chrome) / N
   * Mit v7.0 --monitor-chrome=108px statt 200px → ~30px mehr pro Diagramm */
  flex: 1 1 0;
  min-height: 150px;
  height: calc((100vh - var(--monitor-chrome)) / var(--card-count));
  max-height: calc((100vh - var(--monitor-chrome)) / var(--card-count));

  display: flex;
  flex-direction: column;
}

.diagram-card:nth-child(1) { animation-delay: 0.0s; }
.diagram-card:nth-child(2) { animation-delay: 0.08s; }
.diagram-card:nth-child(3) { animation-delay: 0.16s; }

.diagram-card:hover {
  box-shadow: var(--shadow-card-hover) !important;
}


/* ─────────────────────────── CARD-INTERNE STRUKTUR ─────────────────── */

.diagram-card > .mantine-Group-root:first-of-type,
.diagram-card > [data-mantine-group]:first-of-type {
  flex: 0 0 auto;
  padding: 6px 16px 4px !important;
  margin-bottom: 0 !important;
}

.diagram-card > .mantine-Group-root:first-of-type .mantine-Text-root {
  font-size: 14px !important;
  line-height: 1.25 !important;
  font-weight: 500 !important;
}

.diagram-card .mantine-ScrollArea-root,
.diagram-card [data-mantine-scrollarea] {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.diagram-card .mantine-ScrollArea-viewport,
.diagram-card [data-mantine-scrollarea-viewport] {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
}

.diagram-card .mantine-ScrollArea-viewport > div,
.diagram-card [data-mantine-scrollarea-viewport] > div {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}

.diagram-card .js-plotly-plot,
.diagram-card .plot-container,
.diagram-card .plotly {
  flex: 1 1 auto;
  min-height: 100px;
  width: 100% !important;
  height: 100% !important;
}


/* ─────────────────────────── DATA TABLE (CSS Grid) ─────────────────── */

.modern-data-table {
  background: var(--table-bg);
  border-radius: 0 0 var(--radius-card) var(--radius-card);
  overflow: hidden;
  margin-top: -1px;
  flex: 0 0 auto;
}

.modern-data-table .tbl-header {
  background: var(--table-header-bg) !important;
  color: var(--table-header-text) !important;
  font-size: 10px !important;       /* v7.0: 10px (war 9px) — etwas lesbarer */
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  padding: 4px 4px !important;
  border-bottom: 2px solid var(--table-border) !important;
}

.modern-data-table .tbl-label {
  background: var(--table-bg) !important;
  color: var(--text-primary) !important;
  font-weight: 600 !important;
  font-size: 12px !important;       /* v7.0: 12px (war 11px) — Lesbarkeit */
  padding: 4px 8px !important;
  border-right: 1px solid var(--table-border) !important;
  position: sticky;
  left: 0;
  z-index: 2;
}

.modern-data-table .tbl-data {
  font-family: var(--font-mono) !important;
  font-size: 12px !important;       /* v7.0: 12px (war 11px) */
  padding: 4px 6px !important;
  border-bottom: 1px solid var(--table-border) !important;
  transition: background var(--transition-fast);
}

.modern-data-table .tbl-stripe .tbl-label {
  background: var(--table-stripe) !important;
}

.modern-data-table .tbl-stripe .tbl-data {
  background: var(--table-stripe) !important;
}

.modern-data-table .tbl-data:hover {
  background: var(--table-hover) !important;
}

.modern-data-table .tbl-zero {
  color: var(--table-zero-color) !important;
  font-weight: 400 !important;
}


/* ─────────────────────────── LEGENDE (inline in Control-Bar) ────── */

.legend-container {
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 18px;                  /* v7.0: großzügige Trennung der Legend-Items */
  flex-shrink: 0;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 7px;
  cursor: default;
  transition: opacity var(--transition-fast);
  font-size: 12px;
  color: var(--text-secondary);
  white-space: nowrap;
}

.legend-item .legend-swatch {
  width: 11px;
  height: 11px;
  border-radius: 2px;
  flex-shrink: 0;
  border: 1px solid rgba(0, 0, 0, 0.08);
}

.legend-container:hover .legend-item:not(:hover) {
  opacity: 0.55;
}


/* ─────────────────────────── AUTO-ROTATION TOGGLE ─────────────────── */

.auto-rotation-toggle {
  display: flex;
  align-items: center;
  gap: 10px;                  /* v7.0: konsistenter Abstand */
  padding: 5px 14px;          /* v7.0: schlanker (war 6/12) */
  background: var(--bg-subtle);
  border-radius: 999px;       /* v7.0: voller Pill statt rounded-rect */
  border: 1px solid var(--border-light);
  transition: border-color var(--transition-fast);
  flex-shrink: 0;
}

.auto-rotation-toggle:hover {
  border-color: var(--kf-red);
}

.auto-rotation-toggle .mantine-Text-root {
  font-size: 12px !important;
}


/* ─────────────────────────── LIVE INDICATOR ───────────────────────── */

.live-indicator {
  display: flex;
  align-items: center;
  gap: 7px;
}

.live-indicator-dot {
  width: 7px;
  height: 7px;
  background-color: #639922;
  border-radius: 50%;
  animation: livePulse 2s ease-in-out infinite;
}

@keyframes livePulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.6; transform: scale(0.85); }
}


/* ─────────────────────────── SCREEN INFO (Legacy entfernt in v7.0) ─ */

/* Eigenständiger .screen-info Container wird in v7.0 nicht mehr verwendet —
   Titel + Badge sind in .ctrl-btn-group integriert (.ctrl-screen-info). */
.screen-info {
  display: none !important;
}


/* ─────────────────────────── PAGINATION ─────────────────────────── */

.pagination-container {
  position: fixed !important;
  bottom: 12px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  background: var(--bg-card) !important;
  border: 1px solid var(--border-card) !important;
  border-radius: var(--radius-card) !important;
  box-shadow: var(--shadow-elevated) !important;
  z-index: 1000 !important;
  padding: 6px 12px !important;
}

.pagination-dot {
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
  padding: 0;
}

.pagination-dot:hover {
  opacity: 0.8;
  transform: scale(1.1);
}


/* ─────────────────────────── RESPONSIVE ─────────────────────────── */

@media (max-width: 1280px) {
  /* Auf schmaleren Screens: Control-Bar darf umbrechen */
  .ctrl-btn-group {
    flex-wrap: wrap;
    gap: 10px;
  }
  .ctrl-divider {
    display: none;
  }
}

@media (max-width: 768px) {
  /* Tablet hochkant — Zero-Scroll-Logik deaktivieren */
  .monitor-page {
    height: auto;
    max-height: none;
    overflow: visible;
  }

  .diagram-card {
    height: auto;
    max-height: none;
    min-height: 320px;
  }

  .monitor-header {
    padding: 8px 12px;
  }

  .ctrl-btn-group {
    flex-direction: column;
    gap: 8px;
    align-items: stretch;
    padding: 10px 12px;
  }

  .ctrl-nav-group {
    width: 100%;
    justify-content: space-between;
  }

  .ctrl-spacer {
    display: none;
  }
}


/* ─────────────────────────── PRINT ─────────────────────────── */

@media print {
  .monitor-page {
    background: white !important;
    height: auto;
    max-height: none;
    overflow: visible;
  }

  .diagram-card {
    box-shadow: none !important;
    border: 1px solid #ccc !important;
    break-inside: avoid;
    height: auto;
    max-height: none;
  }

  .pagination-container,
  .ctrl-btn-group,
  .auto-rotation-toggle {
    display: none !important;
  }
}