/* =============================================================================
 * STYLE.CSS — GLOBALES DESIGN-SYSTEM v6.0.0
 * Auslastungsmonitor · Clean SaaS Look · Kaufland CI
 *
 * Neue Datei: Wird von Dash automatisch aus /assets/ geladen.
 * Definiert globale Design-Tokens, Reset-Overrides und shared Komponenten.
 *
 * Farb-Schema:
 *   Akzent:        #E10915 (Kaufland-Rot)
 *   Hintergrund:   #F4F7F6 (Helles Grau-Grün)
 *   Cards:         #FFFFFF / #2B2D31 (dark)
 *   Text:          #1A1D23 / #E8EAED (dark)
 * ============================================================================= */

/* ─────────────────────────── DESIGN TOKENS ─────────────────────────── */

:root {
  /* ── Kaufland Brand ── */
  --kf-red:              #E10915;
  --kf-red-hover:        #C40812;
  --kf-red-light:        rgba(225, 9, 21, 0.08);
  --kf-red-glow:         rgba(225, 9, 21, 0.20);
  --kf-red-surface:      #FFF0F1;

  /* ── Neutral Palette ── */
  --bg-page:             #F4F7F6;
  --bg-card:             #FFFFFF;
  --bg-card-elevated:    #FFFFFF;
  --bg-input:            #FFFFFF;
  --bg-subtle:           #F0F2F4;
  --bg-hover:            #F8F9FA;

  /* ── Borders & Shadows ── */
  --border-light:        #E2E6EA;
  --border-card:         rgba(0, 0, 0, 0.06);
  --shadow-card:         0 1px 3px rgba(0, 0, 0, 0.04),
                         0 6px 16px rgba(0, 0, 0, 0.03);
  --shadow-card-hover:   0 4px 12px rgba(0, 0, 0, 0.06),
                         0 12px 32px rgba(0, 0, 0, 0.04);
  --shadow-elevated:     0 8px 24px rgba(0, 0, 0, 0.08),
                         0 2px 6px rgba(0, 0, 0, 0.04);
  --radius-card:         12px;
  --radius-inner:        8px;
  --radius-pill:         20px;

  /* ── Typography ── */
  --font-sans:           'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:           'JetBrains Mono', 'Fira Code', 'SF Mono', monospace;
  --text-primary:        #1A1D23;
  --text-secondary:      #4A5568;
  --text-muted:          #94A3B8;
  --text-on-accent:      #FFFFFF;

  /* ── Status Colors ── */
  --status-ok:           #10B981;
  --status-ok-bg:        rgba(16, 185, 129, 0.10);
  --status-warn:         #F59E0B;
  --status-warn-bg:      rgba(245, 158, 11, 0.10);
  --status-error:        #EF4444;
  --status-error-bg:     rgba(239, 68, 68, 0.10);

  /* ── Chart / Data ── */
  --chart-green:         #08E077;
  --chart-yellow:        #FFEF00;
  --chart-red:           #FF0000;
  --chart-blue:          #5E97F6;
  --chart-silver:        #C0C0C0;

  /* ── Table ── */
  --table-bg:            #FFFFFF;
  --table-stripe:        #F8FAFB;
  --table-border:        #EDF0F3;
  --table-header-bg:     #F4F7F6;
  --table-header-text:   #64748B;
  --table-hover:         #F0F4F8;
  --table-zero-color:    #CBD5E1;

  /* ── Transitions ── */
  --transition-fast:     0.15s ease;
  --transition-normal:   0.25s ease;
  --transition-smooth:   0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Dark Mode Overrides ── */
[data-mantine-color-scheme="dark"] {
  --bg-page:             #1A1D23;
  --bg-card:             #2B2D31;
  --bg-card-elevated:    #313338;
  --bg-input:            #2B2D31;
  --bg-subtle:           #313338;
  --bg-hover:            #36383E;

  --border-light:        #3F4248;
  --border-card:         rgba(255, 255, 255, 0.06);
  --shadow-card:         0 1px 3px rgba(0, 0, 0, 0.2),
                         0 6px 16px rgba(0, 0, 0, 0.15);
  --shadow-card-hover:   0 4px 12px rgba(0, 0, 0, 0.25),
                         0 12px 32px rgba(0, 0, 0, 0.2);
  --shadow-elevated:     0 8px 24px rgba(0, 0, 0, 0.3),
                         0 2px 6px rgba(0, 0, 0, 0.15);

  --text-primary:        #E8EAED;
  --text-secondary:      #B0B8C4;
  --text-muted:          #6B7280;

  --table-bg:            #2B2D31;
  --table-stripe:        rgba(255, 255, 255, 0.03);
  --table-border:        rgba(255, 255, 255, 0.06);
  --table-header-bg:     #313338;
  --table-header-text:   #94A3B8;
  --table-hover:         rgba(255, 255, 255, 0.04);
  --table-zero-color:    #4A5568;

  --kf-red-light:        rgba(225, 9, 21, 0.12);
  --kf-red-surface:      rgba(225, 9, 21, 0.08);
}


/* ─────────────────────────── GLOBAL OVERRIDES ─────────────────────────── */

/* Page Background */
#app-shell-main {
  background-color: var(--bg-page) !important;
}

/* Global Header — Clean elevated bar */
#global-header {
  border-bottom: 3px solid var(--kf-red) !important;
  background-color: var(--bg-card) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
}


/* ─────────────────────────── SHARED: CARD COMPONENT ─────────────────────────── */

.saas-card {
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  transition: box-shadow var(--transition-smooth),
              transform var(--transition-smooth),
              border-color var(--transition-smooth);
}

.saas-card:hover {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-2px);
  border-color: rgba(225, 9, 21, 0.10);
}


/* ─────────────────────────── SHARED: LIVE INDICATOR ─────────────────────────── */

@keyframes livePulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.5);
  }
  50% {
    box-shadow: 0 0 0 6px rgba(16, 185, 129, 0);
  }
}

.live-indicator {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  background: var(--status-ok-bg);
  font-size: 11px;
  font-weight: 700;
  color: var(--status-ok);
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.live-indicator-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--status-ok);
  animation: livePulse 2s ease-in-out infinite;
}


/* ─────────────────────────── SHARED: SEGMENTED CONTROL ─────────────────────────── */

.seg-control-modern {
  display: inline-flex;
  background: var(--bg-subtle);
  border-radius: var(--radius-inner);
  padding: 3px;
  gap: 2px;
}

.seg-control-modern .seg-btn-modern {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 18px;
  border: none;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-fast);
  background: transparent;
  color: var(--text-muted);
  white-space: nowrap;
}

.seg-control-modern .seg-btn-modern:hover {
  color: var(--text-secondary);
  background: var(--bg-hover);
}

.seg-control-modern .seg-btn-modern.seg-active {
  background: var(--kf-red);
  color: var(--text-on-accent);
  box-shadow: 0 2px 8px var(--kf-red-glow);
}


/* ─────────────────────────── SHARED: MODERNIZED TABLE (CSS Grid) ─────────────── */

.modern-table-grid {
  --mt-cell-pad:   5px 6px;
  --mt-font-size:  11px;
  --mt-font-mono:  var(--font-mono);
  --mt-radius:     0 0 var(--radius-card) var(--radius-card);

  background: var(--table-bg);
  border-radius: var(--mt-radius);
  overflow: hidden;
}

/* Zebra striping via nth-child on "row groups" is handled in Python.
   The CSS classes here provide base styling. */

.modern-table-grid .mt-header-cell {
  background: var(--table-header-bg);
  color: var(--table-header-text);
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  padding: 8px 6px;
  text-align: center;
  border-bottom: 2px solid var(--table-border);
}

.modern-table-grid .mt-label-cell {
  background: var(--table-bg);
  color: var(--text-primary);
  font-weight: 700;
  font-size: 11px;
  padding: 6px 10px;
  text-align: left;
  border-right: 1px solid var(--table-border);
  position: sticky;
  left: 0;
  z-index: 2;
}

.modern-table-grid .mt-data-cell {
  font-family: var(--mt-font-mono);
  font-size: var(--mt-font-size);
  padding: var(--mt-cell-pad);
  text-align: right;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--table-border);
  transition: background var(--transition-fast);
}

/* Zebra Stripe */
.modern-table-grid .mt-row-stripe .mt-label-cell,
.modern-table-grid .mt-row-stripe .mt-data-cell {
  background: var(--table-stripe);
}

/* Hover on data cells */
.modern-table-grid .mt-data-cell:hover {
  background: var(--table-hover);
}

/* Zero/null value treatment — dezent */
.modern-table-grid .mt-zero {
  color: var(--table-zero-color);
  font-weight: 400;
}


/* ─────────────────────────── SHARED: SKELETON LOADING ─────────────────────────── */

@keyframes skeletonShimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.skeleton-bar {
  background: linear-gradient(
    90deg,
    var(--bg-subtle) 25%,
    var(--bg-hover) 50%,
    var(--bg-subtle) 75%
  );
  background-size: 200% 100%;
  animation: skeletonShimmer 1.5s ease-in-out infinite;
  border-radius: 6px;
}


/* ─────────────────────────── SHARED: FADE-IN ANIMATION ─────────────────────────── */

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translateX(-8px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}


/* ─────────────────────────── SCROLLBAR GLOBAL ─────────────────────────── */

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--border-light);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--text-muted);
}


/* ─────────────────────────── ACCESSIBILITY ─────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}