/* ================================================================
   ADMIN: KACHELN v5.0.0 — CSS Design Overlay
   Glassmorphism Design System applied to existing kacheln.py

   Datei: fe-auslastungsmonitor/assets/kacheln.css
   Wird von Dash automatisch geladen.

   HINWEIS: Dieses Stylesheet verschönert die bestehende kacheln.py
   Seite OHNE Änderung am Python-Code. Es overridet Mantine's
   Standard-Styles für /admin/kacheln.
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,700&family=JetBrains+Mono:wght@400;600&display=swap');

:root {
    --kacheln-accent: #E1001A;
    --kacheln-accent-rgb: 225, 0, 26;
    --kacheln-green: #10b981;
    --kacheln-bg-card: rgba(255, 255, 255, 0.025);
    --kacheln-bg-card-hover: rgba(255, 255, 255, 0.05);
    --kacheln-border: rgba(255, 255, 255, 0.06);
    --kacheln-text-primary: #f0f1f5;
    --kacheln-text-muted: rgba(255, 255, 255, 0.25);
    --kacheln-font: 'DM Sans', -apple-system, 'Segoe UI', system-ui, sans-serif;
    --kacheln-mono: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
    --kacheln-noise: 0.012;
}

[data-mantine-color-scheme="light"] {
    --kacheln-bg-card: rgba(255, 255, 255, 0.65);
    --kacheln-bg-card-hover: rgba(255, 255, 255, 0.85);
    --kacheln-border: rgba(0, 0, 0, 0.06);
    --kacheln-text-primary: #0a0a0a;
    --kacheln-text-muted: rgba(0, 0, 0, 0.25);
    --kacheln-noise: 0.006;
}

/* ================================================================
   PAGE-LEVEL OVERRIDES
   Target: The container wrapping /admin/kacheln content
   ================================================================ */

/* All Papers (cards) on the kacheln page get glassmorphism */
[id*="kacheln"] .mantine-Paper-root,
.kacheln-page .mantine-Paper-root {
    background: var(--kacheln-bg-card) !important;
    backdrop-filter: blur(12px) saturate(1.1) !important;
    -webkit-backdrop-filter: blur(12px) saturate(1.1) !important;
    border: 1px solid var(--kacheln-border) !important;
    box-shadow: none !important;
    transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

[id*="kacheln"] .mantine-Paper-root:hover,
.kacheln-page .mantine-Paper-root:hover {
    background: var(--kacheln-bg-card-hover) !important;
    transform: translateY(-2px);
}

/* Modal papers should NOT lift on hover */
.mantine-Modal-content .mantine-Paper-root:hover {
    transform: none !important;
}

/* ================================================================
   KACHEL CARDS (the grid items)
   ================================================================ */

/* Title text in cards — always use text color, never primary */
[id*="kacheln"] .mantine-Paper-root .mantine-Text-root[data-fw="600"] {
    color: var(--kacheln-text-primary) !important;
    font-family: var(--kacheln-font) !important;
}

/* Badge overrides — glass style */
[id*="kacheln"] .mantine-Badge-root {
    backdrop-filter: blur(8px) !important;
    font-family: var(--kacheln-mono) !important;
    font-size: 11px !important;
    letter-spacing: 0.02em !important;
}

/* ================================================================
   BUTTONS — Kaufland Red consistency
   ================================================================ */
[id*="kacheln"] .mantine-Button-root[data-variant="filled"][data-color="red"] {
    background: var(--kacheln-accent) !important;
    border-color: var(--kacheln-accent) !important;
}

/* ================================================================
   MODAL OVERRIDES
   ================================================================ */
.mantine-Modal-content {
    backdrop-filter: blur(24px) saturate(1.2) !important;
    -webkit-backdrop-filter: blur(24px) saturate(1.2) !important;
}

/* Section papers in modals with left border accents */
.mantine-Modal-content .mantine-Paper-root {
    background: var(--kacheln-bg-card) !important;
    border: 1px solid var(--kacheln-border) !important;
}

/* ================================================================
   DIAGRAM CARDS (inside edit modal)
   ================================================================ */
.mantine-Modal-content .mantine-Paper-root .mantine-Group-root .mantine-ThemeIcon-root {
    border: 1px solid rgba(var(--kacheln-accent-rgb), 0.08);
}

/* ================================================================
   ALERTS — glass treatment
   ================================================================ */
[id*="kacheln"] .mantine-Alert-root {
    background: var(--kacheln-bg-card) !important;
    backdrop-filter: blur(12px) !important;
    border: 1px solid var(--kacheln-border) !important;
}

/* ================================================================
   WIZARD — template selection cards
   ================================================================ */
[id*="kacheln"] .mantine-SimpleGrid-root .mantine-Paper-root {
    border-radius: 12px !important;
}

/* ================================================================
   ANIMATION — stagger on kachel cards in grid
   ================================================================ */
@keyframes kachelnCardReveal {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

[id*="kacheln"] .mantine-SimpleGrid-root > * {
    animation: kachelnCardReveal 0.5s ease-out both;
}
[id*="kacheln"] .mantine-SimpleGrid-root > *:nth-child(1) { animation-delay: 0.08s; }
[id*="kacheln"] .mantine-SimpleGrid-root > *:nth-child(2) { animation-delay: 0.14s; }
[id*="kacheln"] .mantine-SimpleGrid-root > *:nth-child(3) { animation-delay: 0.20s; }
[id*="kacheln"] .mantine-SimpleGrid-root > *:nth-child(4) { animation-delay: 0.26s; }
[id*="kacheln"] .mantine-SimpleGrid-root > *:nth-child(5) { animation-delay: 0.32s; }
[id*="kacheln"] .mantine-SimpleGrid-root > *:nth-child(6) { animation-delay: 0.38s; }