/* =============================================================
   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;
}

[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
   ============================================================ */
#app { display: flex; flex-direction: column; height: 100vh; 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; }
.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-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));
}

.header-play-info.is-dirty #btn-header-new-play,
.btn-primary.is-dirty {
  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); }

.header-pb-btn {
  display: flex; align-items: center; gap: 5px;
  padding: 4px 8px; border-radius: var(--r-sm);
  color: var(--text-secondary); font-size: 13px; font-weight: 600;
  flex-shrink: 0; white-space: nowrap; max-width: 160px; min-width: 0;
}
.header-pb-btn:hover { background: var(--bg-elevated); color: var(--text-primary); }
.header-pb-btn.has-filter { color: var(--brand); }
#header-pb-name {
  max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pb-chevron { flex-shrink: 0; opacity: 0.6; }

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

/* Playbook dropdown */
#pb-dropdown {
  position: fixed;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  z-index: 200;
  min-width: 190px;
  overflow: hidden;
  padding: 4px 0;
}
.pb-dd-item {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 14px; font-size: 13px; font-weight: 500;
  cursor: pointer; color: var(--text-secondary);
  transition: background .1s, color .1s;
}
.pb-dd-item:hover { background: var(--bg-elevated); color: var(--text-primary); }
.pb-dd-item.active { color: var(--brand); background: var(--brand-subtle); }
.pb-dd-item svg { flex-shrink: 0; }
.pb-dd-item-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pb-dd-divider { height: 1px; background: var(--border-muted); margin: 4px 0; }

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

/* 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-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; }

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