/**
 * File: C:\xampp\htdocs\charapp\assets\css\app.css
 * 
 * Purpose:
 * - Design Tokens (CSS Variables)
 * - Base HTML/Body Styles
 * - Layout Basics + Tabbar Padding Fix
 * - Containers & Cards
 * - Buttons & Inputs (Global)
 * - Grid & Row Helpers
 * - Topbar
 * 
 * Dependencies:
 * - None (Core Foundation)
 * 
 * Load Order: 1 (FIRST - defines CSS variables)
 */

/* =========================
   Design Tokens
   ========================= */
:root{
  --bg:#0e1116;
  --card:#161b22;
  --muted:#8b949e;
  --text:#e6edf3;
  --accent:#5dd6c9;
  --danger:#ff6b6b;
  --line:rgba(255,255,255,.08);

  --r:14px;
  --pad:14px;

  --tabbarH:72px;
  --safeB: env(safe-area-inset-bottom, 0px);
  
  /* Extra tokens (UI Polish) */
  --exp:#4da3ff;
  --gold:#ffd36b;
  --violet:#b08cff;
  --ok:#43d19e;
}

/* =========================
   Base
   ========================= */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans";
  background:var(--bg);
  color:var(--text);
}

/* =========================
   Layout Fix (WICHTIG)
   ========================= */
/* 👉 verhindert, dass Content unter der Tabbar verschwindet */
.app,
.body-with-tabbar{
  padding-bottom: calc(var(--tabbarH) + var(--safeB) + 16px);
}

/* =========================
   Topbar
   ========================= */
.topbar{
  position:sticky;
  top:0;
  z-index:10;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 14px;
  background:linear-gradient(180deg, rgba(14,17,22,.92), rgba(14,17,22,.78));
  backdrop-filter: blur(10px);
  border-bottom:1px solid var(--line);
}
.brand{display:flex; gap:10px; align-items:center; font-weight:800}
.actions{display:flex; gap:10px}

/* =========================
   Containers & Cards
   ========================= */
.app{
  padding:var(--pad);
  max-width:980px;
  margin:0 auto;
}

.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:var(--pad);
  box-shadow:0 6px 18px rgba(0,0,0,.25);
}

.grid{display:grid; gap:12px}
@media(min-width:860px){
  .grid2{grid-template-columns:1.2fr .8fr}
}

.row{display:flex; justify-content:space-between; align-items:center}
.muted{color:var(--muted)}
.small{font-size:12px}

hr{
  border:0;
  border-top:1px solid var(--line);
  margin:12px 0;
}

/* =========================
   Buttons & Inputs
   ========================= */
.btn, .ghost{
  border-radius:12px;
  padding:10px 12px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.04);
  color:var(--text);
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:10px;
}
.btn:hover,.ghost:hover{background:rgba(255,255,255,.07)}
.btn.primary{
  background:rgba(93,214,201,.16);
  border-color:rgba(93,214,201,.35);
}
.btn.danger{
  background:rgba(255,107,107,.12);
  border-color:rgba(255,107,107,.35);
}

input,select,textarea{
  width:100%;
  border-radius:12px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.03);
  color:var(--text);
  padding:10px 12px;
}