/* =============================================================
   FlagPlay Studio — Design System
   ============================================================= */

@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;700;800;900&family=Inter:wght@400;500;600&display=swap');

:root {
  --bg-base:        #0D1117;
  --bg-surface:     #161B22;
  --bg-elevated:    #21262D;
  --bg-hover:       #2D333B;
  --border:         #30363D;
  --border-muted:   #1E242B;

  --text-primary:   #E6EDF3;
  --text-secondary: #9CAABA;
  --text-muted:     #6E7681;

  --brand:          #F97316;
  --brand-hover:    #FB923C;
  --brand-subtle:   rgba(249,115,22,0.12);
  --brand-glow:     rgba(249,115,22,0.3);

  /* Sekundäre Brand-Farbe (Sky Blue) — Komplement zu Orange.
     Wird für Defense-Akzente, Sekundär-CTAs und Verlaufs-Highlights genutzt. */
  --brand-2:        #0EA5E9;
  --brand-2-hover:  #38BDF8;
  --brand-2-subtle: rgba(14,165,233,0.14);
  --brand-2-glow:   rgba(14,165,233,0.32);

  /* Brand companion: warm cream surface — pairs with orange in both modes */
  --surface-warm:   #1A1612;          /* dark mode: warm-tinted near-black surface */
  --surface-warm-hover: #221C16;
  --brand-soft:     rgba(249,115,22,0.06);

  /* Field-Hintergrund (für Plays — global) */
  --field-light:    #FFFFFF;
  --field-dark:     #111318;

  --success:  #4ADE80;
  --warning:  #FBBF24;
  --danger:   #F87171;

  --font-ui:      'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-display: 'Barlow Condensed', 'Impact', sans-serif;

  --r-sm:  4px;  --r-md: 8px;  --r-lg: 12px;  --r-xl: 16px;  --r-full: 9999px;
  --shadow-sm:  0 1px 3px rgba(0,0,0,.5);
  --shadow-md:  0 4px 12px rgba(0,0,0,.6);
  --shadow-lg:  0 8px 32px rgba(0,0,0,.7);
  --shadow-xl:  0 16px 48px rgba(0,0,0,.8);

  --header-h:     52px;
  --toolbar-w:    196px;
  --toolbar-wc:   50px;
  --routelib-w:   260px;
  --right-w:      300px;
}

/* Schmale Viewports (Editor ist desktop-orientiert): Seitenpanels stufenweise
   verkleinern, damit das Feld nutzbar bleibt — bei festen Breiten blieben sonst
   z.B. auf 1024px nur ~270px fürs Feld. Panels bleiben manuell einklappbar. */
@media (max-width: 1200px) {
  :root { --routelib-w: 210px; --right-w: 250px; }
}
@media (max-width: 1000px) {
  :root { --toolbar-w: 150px; --routelib-w: 180px; --right-w: 220px; }
}

[data-theme="light"] {
  /* Modernes warmes Neutral-System statt kühlem Grau —
     subtile creme-Töne harmonieren mit dem Orange des Corporate Designs. */
  --bg-base:      #FAF9F7;            /* subtle warm white — paper-feel */
  --bg-surface:   #FFFFFF;            /* pure white für Karten / Header */
  --bg-elevated:  #F4F2EE;            /* warm stone — ersetzt das alte kalte Grau */
  --bg-hover:     #ECE9E2;            /* slightly darker warm stone für Hover */
  --border:       #E2DDD3;            /* warmes weiches Border, kein kaltes Grau */
  --border-muted: #EFEBE3;
  --text-primary:   #1C1A18;          /* warm near-black */
  --text-secondary: #4A4540;
  --text-muted:     #8A857E;
  --brand-subtle:   rgba(249,115,22,0.10);
  --brand-glow:     rgba(249,115,22,0.45);
  --brand-soft:     rgba(249,115,22,0.05);
  --brand-2:        #0284C7;          /* etwas tiefer für Lesbarkeit auf weiß */
  --brand-2-hover:  #0EA5E9;
  --brand-2-subtle: rgba(2,132,199,0.10);
  --brand-2-glow:   rgba(2,132,199,0.30);
  --surface-warm:   #FFF6EC;          /* sehr dezenter Brand-Tint für Akzent-Hintergründe */
  --surface-warm-hover: #FFEFE0;
  --success:  #16A34A;                /* etwas tieferes Grün, lesbar auf hellem Grund */
  --warning:  #D97706;
  --danger:   #DC2626;
  --shadow-sm:  0 1px 2px rgba(28,26,24,.06);
  --shadow-md:  0 4px 12px rgba(28,26,24,.08);
  --shadow-lg:  0 8px 32px rgba(28,26,24,.12);
  --shadow-xl:  0 16px 48px rgba(28,26,24,.16);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; overflow: hidden; }
body {
  font-family: var(--font-ui);
  background: var(--bg-base);
  color: var(--text-primary);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
button { cursor: pointer; border: none; background: none; font: inherit; color: inherit; }
input, select, textarea { font: inherit; color: inherit; border: none; background: none; outline: none; }

/* ============================================================
   LAYOUT
   ============================================================ */
/* height:100dvh = sichtbare Viewport-Höhe auf Mobil (ohne URL-Leiste) → nichts
   wird unten abgeschnitten; 100vh als Fallback für ältere Browser. */
#app { display: flex; flex-direction: column; height: 100vh; height: 100dvh; overflow: hidden; }

/* HEADER */
#app-header {
  height: var(--header-h);
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 0;
  padding: 0 12px;
  flex-shrink: 0;
  z-index: 10;
  box-shadow: var(--shadow-sm);
}
.header-left { display:flex; align-items:center; gap:10px; min-width:0; }
.header-center { display:flex; align-items:center; gap:5px; justify-content:center; min-width: 0; }
.header-logo { display:flex; align-items:center; gap:7px; flex-shrink:0; }
.logo-icon { width:28px; height:28px; background:var(--brand); border-radius:var(--r-md); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.logo-text { font-family:var(--font-display); font-size:18px; font-weight:800; letter-spacing:.02em; }
.logo-text span { color:var(--brand); }
.header-divider { width:1px; height:24px; background:var(--border); flex-shrink:0; }
/* Header-Overflow-Menü ("Mehr": Spiegeln / Leeren) */
.header-more-wrap { position: relative; display: inline-flex; }
.header-more-menu {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 60;
  background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--r-md);
  box-shadow: 0 10px 30px rgba(0,0,0,.25); padding: 6px; display: flex; flex-direction: column; gap: 4px; min-width: 170px;
}
.header-more-menu[hidden] { display: none; }
.header-more-menu .btn { width: 100%; justify-content: flex-start; }
/* Offense/Defense-Auswahl im Neu-Play-Dialog */
.np-side-btn { flex: 1; padding: 9px 8px; border-radius: var(--r-sm); background: var(--bg-elevated); border: 1px solid var(--border); color: var(--text-secondary); font-size: 13px; font-weight: 700; cursor: pointer; }
.np-side-btn:hover { color: var(--text-primary); border-color: var(--text-muted); }
.np-side-btn.active { background: var(--brand); border-color: var(--brand); color: #fff; }
.header-play-info {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.header-play-info.is-dirty #play-name-input {
  background: color-mix(in srgb, var(--warning) 10%, transparent);
  border-color: color-mix(in srgb, var(--warning) 55%, var(--border));
}

/* Dirty-Indikator nur am Save-Button — der Plus-Button bleibt ruhig.
   Vorher hatte auch der Plus-Button einen Box-Shadow-Transition, der bei
   jedem render() neu triggerte und so "wackelte" während Player-Drag. */
.btn-primary.is-dirty#btn-save {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--warning) 35%, transparent);
}

#play-name-input {
  background: transparent;
  font-size: 15px; font-weight: 600;
  color: var(--text-primary);
  width: 200px; padding: 5px 9px;
  border-radius: var(--r-sm);
  border: 1px solid transparent;
  transition: background .15s, border-color .15s;
}
#play-name-input:hover { background: var(--bg-elevated); border-color: var(--border); }
#play-name-input:focus { background: var(--bg-elevated); border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand-glow); }

/* Prominenter Playbook-Button im linken Header (ehemals Dropdown-Position) */
.header-pb-prominent {
  display: flex; align-items: center; gap: 7px;
  padding: 6px 14px; border-radius: var(--r-md);
  color: var(--brand);
  background: var(--brand-subtle);
  border: 1px solid var(--brand);
  font-size: 13px; font-weight: 700;
  flex-shrink: 0; white-space: nowrap;
  transition: background .12s, color .12s, transform .08s;
}
.header-pb-prominent:hover {
  background: var(--brand);
  color: #fff;
}
.header-pb-prominent:active { transform: translateY(1px); }
.header-pb-prominent svg { flex-shrink: 0; }

/* Onboarding-Pulse: blinkt bei aktivem Tutorial-Step */
.tut-pulse {
  position: relative;
  animation: tut-pulse-anim 1.4s ease-in-out infinite;
}
@keyframes tut-pulse-anim {
  0%, 100% { box-shadow: 0 0 0 0 var(--brand-glow, rgba(74, 222, 128, .55)); }
  50%      { box-shadow: 0 0 0 10px rgba(74, 222, 128, 0);    }
}

.header-new-play-btn {
  flex-shrink: 0; width: 30px; height: 30px; padding: 0;
  border-radius: var(--r-md);
}

.header-actions { display:flex; align-items:center; gap:5px; flex-shrink:0; justify-content:flex-end; min-width: 0; }

/* Language Switcher */
.lang-switcher { display:flex; align-items:center; gap:2px; background:var(--bg-elevated); border-radius:var(--r-sm); padding:2px; flex-shrink:0; }
.lang-btn { padding:3px 7px; border:none; background:none; border-radius:calc(var(--r-sm) - 1px); font-size:11px; font-weight:700; color:var(--text-muted); cursor:pointer; transition:background .12s, color .12s; line-height:1.4; }
.lang-btn.active { background:var(--bg-hover); color:var(--text-primary); }
.lang-btn:hover { color:var(--text-primary); }

/* Header-Buttons: Spiegeln, Leeren, Abspielen */
.header-btn-danger { color: var(--warning) !important; }
.header-btn-danger:hover { border-color: var(--warning) !important; background: rgba(255,170,0,.08) !important; }
.header-btn-play {
  background: var(--brand-subtle); border: 1px solid var(--brand);
  color: var(--brand); font-weight: 600;
}
.header-btn-play:hover { background: var(--brand); color: #fff; }
.header-btn-stop {
  background: rgba(239,68,68,.1); border: 1px solid #EF4444; color: #EF4444; font-weight: 600;
}
.header-btn-stop:hover { background: #EF4444; color: #fff; }

/* BUTTONS */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 5px; padding: 6px 13px; border-radius: var(--r-md);
  font-size: 14px; font-weight: 500;
  transition: background .12s, color .12s, box-shadow .12s;
  white-space: nowrap;
}
.btn > svg {
  flex-shrink: 0;
}
.btn-ghost    { color: var(--text-secondary); }
.btn-ghost:hover { background: var(--bg-elevated); color: var(--text-primary); }
.btn-secondary { background: var(--bg-elevated); color: var(--text-primary); border: 1px solid var(--border); }
.btn-secondary:hover { background: var(--bg-hover); }
.btn-primary { background: var(--brand); color: white; font-weight: 600; }
.btn-primary:hover { background: var(--brand-hover); }
.btn-danger { background: rgba(248,113,113,.15); color: var(--danger); border: 1px solid rgba(248,113,113,.3); }
.btn-danger:hover { background: rgba(248,113,113,.25); }
.btn-icon { width: 30px; height: 30px; padding: 0; border-radius: var(--r-md); }
.btn:disabled { opacity: .4; cursor: not-allowed; }

/* Theme toggle icon swap (dark shows moon, light shows sun) */
.btn .th-sun { display: none; }
.btn .th-moon { display: block; }
[data-theme="light"] .btn .th-sun { display: block; }
[data-theme="light"] .btn .th-moon { display: none; }

/* MAIN */
#app-main { flex: 1; display: flex; overflow: hidden; position: relative; }

@media (max-width: 1480px) {
  #app-header {
    grid-template-columns: minmax(0, 1fr) minmax(420px, auto) minmax(250px, auto);
    padding: 0 8px;
    column-gap: 6px;
  }
  #play-name-input {
    width: 150px;
  }
  .header-center .btn {
    padding-inline: 10px;
    font-size: 13px;
  }
}

@media (max-width: 1280px) {
  #app-header {
    grid-template-columns: minmax(0, 1fr) minmax(350px, auto) minmax(220px, auto);
  }
  .logo-text {
    display: none;
  }
  .header-center .btn span {
    display: none;
  }
  .header-center .btn {
    min-width: 32px;
    padding-inline: 9px;
  }
}

/* imweb24 Designbüro-Logo im Footer — als CSS-Mask, damit es theme-abhängig
   eingefärbt werden kann: Weiß im dunklen Design, Türkis (#01A09E) im hellen. */
.imw-logo {
  display: inline-block;
  background-color: #fff;
  -webkit-mask: url(/imweb24-logo.svg) center / contain no-repeat;
          mask: url(/imweb24-logo.svg) center / contain no-repeat;
  vertical-align: middle;
}
html[data-theme="light"] .imw-logo { background-color: #01A09E; }