/*
Theme Name: Echt-Check Forensik
Theme URI: https://echt-check.de/
Author: Antigravity AI & Echt-Check Team
Author URI: https://echt-check.de/
Description: Ein maßgeschneidertes, immersives Single-Page-Application Theme für die Echt-Check Forensik-Plattform. Nutzt TailwindCSS, Glassmorphismus und einen tiefen Dark-Mode, umschließt aber parallel die volle Power von WordPress-Plugins und Shortcodes.
Version: 3.0.1
Requires at least: 5.8
Tested up to: 6.4
Requires PHP: 7.4
License: Proprietary
Text Domain: echt-check
Tags: dark-mode, forensics, application, full-width, tailwindcss
*/

/* 
 * WICHTIG: Das eigentliche CSS-Styling für dieses Theme wird von TailwindCSS (via CDN)
 * in der functions.php oder im Kopf geladen. Diese style.css dient hauptsachlich
 * der Theme-Registrierung in WordPress! Alle lokalen Custom-Styles (die nicht in
 * Tailwind sind) könnten aber hier platziert werden.
 */

:root {
  --bg-dark: #0f172a;               /* slate-900 */
  --bg-panel: rgba(30, 41, 59, 0.7); /* slate-800 mit Alpha */
  --text-primary: #f8fafc;          /* slate-50 */
  --text-muted: #94a3b8;            /* slate-400 */
  --accent: #0ea5e9;                /* sky-500 */
}

body.wordpress-page-view {
  background-color: var(--bg-dark);
  color: var(--text-primary);
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  margin: 0;
  padding: 0;
  min-height: 100vh;
}

/* Wrapper für normale WordPress Seiten im Glassmorphismus */
.wp-glass-container {
  background: var(--bg-panel);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 2rem;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
  max-width: 900px;
  margin: 40px auto;
}

/* WordPress Content Styling (Headlines, Links, Listen) in dunklem Design */
.wp-glass-container h1, .wp-glass-container h2, .wp-glass-container h3 {
  color: var(--text-primary);
  margin-top: 1.5rem;
  margin-bottom: 1rem;
  font-weight: 700;
}
.wp-glass-container h1 { font-size: 2.25rem; }
.wp-glass-container h2 { font-size: 1.875rem; }

.wp-glass-container p {
  color: var(--text-muted);
  line-height: 1.7;
  margin-bottom: 1.25rem;
}

.wp-glass-container a {
  color: var(--accent);
  text-decoration: none;
  transition: color 0.2s;
}
.wp-glass-container a:hover {
  color: #38bdf8;
  text-decoration: underline;
}

.wp-glass-container ul, .wp-glass-container ol {
  color: var(--text-muted);
  margin-left: 1.5rem;
  margin-bottom: 1.25rem;
}

/* Frontend Styles from HTML */

    * {
      font-family: 'Inter', sans-serif;
      box-sizing: border-box
    }

    body {
      background: #060c18;
      color: #e2e8f0;
      min-height: 100vh
    }

    .glass {
      background: rgba(255, 255, 255, 0.04);
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-radius: 20px;
      backdrop-filter: blur(12px)
    }

    .glass-sm {
      background: rgba(255, 255, 255, 0.03);
      border: 1px solid rgba(255, 255, 255, 0.06);
      border-radius: 12px
    }

    /* Verdict Hero */
    .verdict-hero-safe {
      background: linear-gradient(135deg, rgba(16, 185, 129, 0.12), rgba(5, 150, 105, 0.06));
      border-color: rgba(16, 185, 129, 0.25)
    }

    .verdict-hero-warning {
      background: linear-gradient(135deg, rgba(245, 158, 11, 0.12), rgba(217, 119, 6, 0.06));
      border-color: rgba(245, 158, 11, 0.25)
    }

    .verdict-hero-danger {
      background: linear-gradient(135deg, rgba(239, 68, 68, 0.12), rgba(185, 28, 28, 0.06));
      border-color: rgba(239, 68, 68, 0.25)
    }

    .verdict-hero-info {
      background: linear-gradient(135deg, rgba(99, 102, 241, 0.10), rgba(67, 56, 202, 0.05));
      border-color: rgba(99, 102, 241, 0.2)
    }

    /* Phase indicator badges */
    .phase-dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.15);
      flex-shrink: 0;
      transition: background 0.3s
    }

    .phase-dot-safe {
      background: #10b981
    }

    .phase-dot-warning {
      background: #f59e0b
    }

    .phase-dot-danger {
      background: #ef4444
    }

    .phase-dot-loading {
      background: rgba(6, 182, 212, 0.5);
      animation: pulse 1s infinite
    }

    @keyframes pulse {

      0%,
      100% {
        opacity: .4
      }

      50% {
        opacity: 1
      }
    }

    /* Score bar */
    .score-bar {
      height: 8px;
      background: rgba(255, 255, 255, 0.06);
      border-radius: 999px;
      overflow: hidden
    }

    .score-fill {
      height: 100%;
      border-radius: 999px;
      transition: width 1s cubic-bezier(.4, 0, .2, 1)
    }

    .score-safe {
      background: linear-gradient(90deg, #059669, #10b981, #34d399)
    }

    .score-warning {
      background: linear-gradient(90deg, #d97706, #f59e0b, #fbbf24)
    }

    .score-danger {
      background: linear-gradient(90deg, #b91c1c, #ef4444, #f87171)
    }

    .score-info {
      background: linear-gradient(90deg, #4338ca, #6366f1, #a5b4fc)
    }

    /* Phase cards (accordion) */
    .phase-accordion {
      background: rgba(255, 255, 255, 0.025);
      border: 1px solid rgba(255, 255, 255, 0.06);
      border-radius: 14px;
      overflow: hidden;
      transition: border-color .2s
    }

    .phase-accordion:hover {
      border-color: rgba(255, 255, 255, 0.1)
    }

    .phase-accordion summary {
      list-style: none;
      cursor: pointer;
      padding: 14px 18px;
      display: flex;
      align-items: center;
      gap: 12px
    }

    .phase-accordion summary::-webkit-details-marker {
      display: none
    }

    .phase-accordion[open] summary {
      border-bottom: 1px solid rgba(255, 255, 255, 0.06)
    }

    .phase-accordion-body {
      padding: 18px
    }

    .chevron {
      margin-left: auto;
      transition: transform .25s;
      color: #475569;
      font-size: 12px
    }

    .phase-accordion[open] .chevron {
      transform: rotate(180deg)
    }

    /* Flag cards */
    .flag-card {
      padding: 11px 14px;
      border-radius: 10px;
      margin-bottom: 6px;
      border: 1px solid transparent
    }

    .flag-danger {
      background: rgba(239, 68, 68, 0.07);
      border-color: rgba(239, 68, 68, 0.18)
    }

    .flag-warning {
      background: rgba(245, 158, 11, 0.07);
      border-color: rgba(245, 158, 11, 0.18)
    }

    .flag-info {
      background: rgba(99, 102, 241, 0.07);
      border-color: rgba(99, 102, 241, 0.18)
    }

    .flag-safe {
      background: rgba(16, 185, 129, 0.07);
      border-color: rgba(16, 185, 129, 0.18)
    }

    .flag-header {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 3px;
      font-weight: 500;
      font-size: 13px
    }

    .flag-detail {
      font-size: 12px;
      color: #64748b;
      line-height: 1.5;
      margin-top: 2px
    }

    /* EXIF cells */
    .exif-cell {
      background: rgba(255, 255, 255, 0.03);
      border-radius: 8px;
      padding: 10px 12px
    }

    .exif-label {
      display: block;
      font-size: 10px;
      color: #475569;
      text-transform: uppercase;
      letter-spacing: .06em;
      margin-bottom: 2px
    }

    .exif-value {
      font-size: 12px;
      color: #cbd5e1;
      font-weight: 500;
      word-break: break-all
    }

    .exif-empty {
      grid-column: 1/-1;
      text-align: center;
      color: #334155;
      font-size: 13px;
      padding: 16px
    }

    /* Misc */
    .spinner {
      border: 2px solid rgba(255, 255, 255, 0.08);
      border-top-color: #06b6d4;
      border-radius: 50%;
      animation: spin .7s linear infinite
    }

    @keyframes spin {
      to {
        transform: rotate(360deg)
      }
    }

    #drop-zone.drag-active {
      border-color: #06b6d4 !important;
      background: rgba(6, 182, 212, 0.04)
    }

    canvas#particle-canvas {
      position: fixed;
      top: 0;
      left: 0;
      pointer-events: none;
      z-index: 0;
      opacity: .3
    }

    .hidden {
      display: none !important
    }

    .badge {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      font-size: 11px;
      font-weight: 600;
      padding: 3px 10px;
      border-radius: 999px
    }

    .badge-safe {
      background: rgba(16, 185, 129, 0.12);
      color: #34d399;
      border: 1px solid rgba(16, 185, 129, 0.2)
    }

    .badge-warning {
      background: rgba(245, 158, 11, 0.12);
      color: #fbbf24;
      border: 1px solid rgba(245, 158, 11, 0.2)
    }

    .badge-danger {
      background: rgba(239, 68, 68, 0.12);
      color: #f87171;
      border: 1px solid rgba(239, 68, 68, 0.2)
    }

    .badge-info {
      background: rgba(99, 102, 241, 0.12);
      color: #a5b4fc;
      border: 1px solid rgba(99, 102, 241, 0.2)
    }

    .badge-muted {
      background: rgba(255, 255, 255, 0.04);
      color: #475569;
      border: 1px solid rgba(255, 255, 255, 0.08)
    }

    /* Big verdict number */
    .verdict-number {
      font-size: 72px;
      font-weight: 900;
      line-height: 1;
      letter-spacing: -3px
    }

    .verdict-number-safe {
      color: #10b981
    }

    .verdict-number-warning {
      color: #f59e0b
    }

    .verdict-number-danger {
      color: #ef4444
    }

    .verdict-number-info {
      color: #6366f1
    }

    /* ─── Mobile Responsive ────────────────────────────────────────── */
    @media (max-width:480px) {

      /* Hero score: klein genug dass Verdict-Text nicht abgeschnitten wird */
      .verdict-number {
        font-size: 52px;
        letter-spacing: -2px
      }

      /* Bild-Vorschau kleiner */
      #image-preview {
        width: 72px !important;
        height: 72px !important;
        border-radius: 12px
      }

      /* Hero flex: bild oben, dann score+text */
      #result-hero>div:first-child {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px
      }

      /* Verdict-Text soll umbrechen, nicht overflow */
      #hero-verdict {
        font-size: 16px !important
      }

      /* H1 kleiner */
      h1.text-5xl {
        font-size: 1.875rem !important;
        line-height: 1.2
      }

      /* Header-Badge umbrechend */
      header .badge {
        font-size: 10px;
        padding: 3px 8px;
        max-width: 160px;
        text-align: center;
        line-height: 1.3
      }

      /* Drop-zone padding reduzieren */
      #drop-zone {
        padding: 2rem 1rem !important
      }

      /* Meta-info umbrechen */
      #result-hero .flex.gap-3 {
        flex-wrap: wrap;
        gap: 8px
      }

      /* Phase-punkte kompakter */
      #result-hero .flex.gap-3>div {
        gap: 4px
      }

      /* URL-Input stack */
      #tab-panel-url .flex.gap-3 {
        flex-direction: column
      }

      #url-submit-btn {
        width: 100%
      }
    }

    @media (max-width:360px) {
      .verdict-number {
        font-size: 44px
      }

      #image-preview {
        width: 60px !important;
        height: 60px !important
      }
    }