/* flashcards/app.css */
/* Modernes Theme + manueller Dark/Light-Toggle per html[data-theme] */

/* ===== Variablen (Light als Basis) ===== */
:root{
  --bg: #f5f7ff;
  --bg2:#eaf0ff;
  --panel:#ffffff;
  --soft:#f4f6fb;
  --text:#1b2140;
  --muted:#677193;
  --primary:#4f46e5;      /* Indigo 600 */
  --primary-2:#6366f1;
  --accent:#10b981;       /* Emerald */
  --danger:#ef4444;       /* Red */
  --radius:14px;
  --shadow: 0 10px 30px rgba(0,0,0,.08);
}
html[data-theme="dark"]{
  --bg:#0b1020;
  --bg2:#11162a;
  --panel:#151a2f;
  --soft:#101529;
  --text:#e8ecff;
  --muted:#9aa3bf;
  --shadow: 0 10px 30px rgba(0,0,0,.35);
}

/* ===== Base ===== */
*{ box-sizing:border-box }
html,body{ height:100% }
body{
  margin:0;
  background:
    radial-gradient(1200px 800px at -10% -20%, rgba(79,70,229,.18), transparent 60%),
    radial-gradient(1200px 800px at 110% 120%, rgba(16,185,129,.12), transparent 60%),
    linear-gradient(180deg, var(--bg), var(--bg2));
  font-family: ui-sans-serif, -apple-system, Segoe UI, Roboto, Inter, system-ui, Arial, sans-serif;
  color: var(--text);
}

/* Header */
.header{ max-width:1100px; margin:32px auto 18px; padding:0 20px; }
.brand{ display:flex; align-items:center; gap:10px; }
.brand-badge{
  width:38px; height:38px; border-radius:12px;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  box-shadow: 0 8px 24px rgba(79,70,229,.35);
}
.brand h1{ margin:0; font-size:22px; font-weight:700; letter-spacing:.2px; }
.nav{ display:flex; gap:10px; flex-wrap:wrap; margin-top:12px; align-items:center }
.nav a, .nav button{
  text-decoration:none; color:var(--text); background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12); padding:8px 12px; border-radius:10px;
  transition:.2s; backdrop-filter: blur(6px); cursor:pointer;
}
.nav a:hover, .nav button:hover{ transform: translateY(-1px); }

/* Container & Panels */
.container{ max-width:1100px; margin:0 auto 60px; padding:0 20px; }
.panel{ background: var(--panel); border:1px solid rgba(255,255,255,.12);
  border-radius: var(--radius); box-shadow: var(--shadow); }

/* Toolbar */
.toolbar{
  display:flex; gap:12px; align-items:center; flex-wrap:wrap;
  padding:14px; background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border-bottom:1px solid rgba(255,255,255,.08);
  border-top-left-radius: var(--radius); border-top-right-radius: var(--radius);
}
.toolbar label{ font-size:13px; color:var(--muted); }
.spacer{ flex:1 }

/* Inputs */
.input, .select, .file, .textarea{
  background: var(--soft); border:1px solid rgba(0,0,0,.06);
  color: var(--text); border-radius:10px; padding:10px 12px; outline:none;
  transition:.2s; min-height:40px;
}
.input:focus, .select:focus, .textarea:focus{ border-color: var(--primary-2); box-shadow: 0 0 0 3px rgba(79,70,229,.15); }
.select{ padding-right: 30px }
.textarea{ resize: vertical }

/* Buttons */
.btn{
  appearance:none; border:none; cursor:pointer;
  padding:10px 14px; border-radius:10px; font-weight:600;
  color:#fff; background: linear-gradient(135deg, var(--primary), var(--primary-2));
  box-shadow: 0 6px 20px rgba(79,70,229,.35); transition:.2s;
}
.btn:hover{ transform: translateY(-1px); }
.btn.ghost{ background: transparent; color: var(--text); border:1px solid rgba(255,255,255,.18) }
.btn.danger{ background: linear-gradient(135deg, var(--danger), #f87171); box-shadow: 0 6px 20px rgba(239,68,68,.35) }
.btn.success{ background: linear-gradient(135deg, var(--accent), #34d399); box-shadow: 0 6px 20px rgba(16,185,129,.35) }

/* Grid */
.grid{ display:grid; gap:16px; padding:16px }
.grid-2{ grid-template-columns: repeat(2, minmax(0,1fr)); }
@media (max-width: 900px){ .grid-2{ grid-template-columns: 1fr } }

/* Flashcard */
.flash-wrap{ padding:20px; display:grid; gap:16px; justify-items:center; }
.flash-card{
  width: min(720px, 100%); min-height: 260px; padding:24px 20px; text-align:center;
  border-radius: 16px; border:1px dashed rgba(255,255,255,.18);
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  box-shadow: var(--shadow); cursor:pointer; user-select:none; transition:.2s;
}
.flash-card:hover{ transform: translateY(-2px); }
.face{ white-space: pre-wrap; }
.face img{ max-width: 100%; max-height: 180px; border-radius:12px; margin-top:10px }
.meta{ display:flex; gap:14px; flex-wrap:wrap; justify-content:center; color:var(--muted); font-size:13px; }

/* Progress */
.progress{ width:min(720px,100%); height:10px; background:rgba(0,0,0,.08); border-radius:999px; overflow:hidden }
html[data-theme="dark"] .progress{ background:rgba(255,255,255,.1) }
.progress > div{ height:100%; width:0%; background: linear-gradient(90deg, var(--primary), var(--accent)); }

/* Badges / Chips */
.badges{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center }
.badge{
  padding:6px 10px; font-size:12px; color:#fff;
  border-radius:999px; background: linear-gradient(135deg, rgba(79,70,229,.9), rgba(99,102,241,.9));
  border:1px solid rgba(255,255,255,.2);
}
.chips{ display:flex; flex-wrap:wrap; gap:8px; padding:8px 16px 16px }
.chip{
  padding:6px 10px; border-radius:999px; border:1px solid rgba(0,0,0,.08);
  background: var(--soft); color: var(--text); cursor:pointer; user-select:none;
}
.chip:hover{ transform: translateY(-1px); }
.chip.active{
  color:#fff; border-color: transparent;
  background: linear-gradient(135deg, var(--primary), var(--primary-2));
}

/* Tables (Tags-Verwaltung) */
.table{ width:100%; border-collapse: collapse }
.table th, .table td{ border-bottom:1px solid rgba(255,255,255,.12); padding:12px 10px }
.table th{ color:var(--muted); font-weight:600; text-align:left }

/* Helper */
.muted{ color:var(--muted) }
.stack{ display:flex; gap:10px; flex-wrap:wrap; align-items:center }