/* =========================================================
   STREAK — Stylesheet
   Hier wird AUSSCHLIESSLICH das Aussehen festgelegt.
   Die Farben stehen ganz oben als Variablen — ein Umschalten
   von data-theme="dark"/"light" tauscht automatisch alles.
   ========================================================= */

:root[data-theme="dark"] {
  --bg:        #0f1115;
  --surface:   #171a21;
  --surface-2: #1f242e;
  --border:    #2a313d;
  --text:      #e7ebf2;
  --text-dim:  #9aa4b2;
  --accent:    #6c5ce7;   /* Violett-Akzent */
  --accent-2:  #8e7bff;
  --done:      #22c55e;   /* Grün = erledigt */
  --done-bg:   rgba(34,197,94,0.15);
  --shadow:    0 8px 30px rgba(0,0,0,0.45);
}
:root[data-theme="light"] {
  --bg:        #f5f6f8;
  --surface:   #ffffff;
  --surface-2: #f0f1f4;
  --border:    #e2e5ea;
  --text:      #1a1d23;
  --text-dim:  #6b7280;
  --accent:    #6c5ce7;
  --accent-2:  #5b4bd4;
  --done:      #16a34a;
  --done-bg:   rgba(22,163,74,0.12);
  --shadow:    0 8px 30px rgba(0,0,0,0.08);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

.hidden { display: none !important; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  transition: background .25s ease, color .25s ease;
}
.wrap { max-width: 760px; margin: 0 auto; padding: 32px 20px 80px; }

/* ---------- Login / Registrierung ---------- */
.auth-wrap { min-height: 100vh; display: grid; place-items: center; padding: 20px; }
.auth-card {
  width: 100%; max-width: 380px; background: var(--surface);
  border: 1px solid var(--border); border-radius: 20px; padding: 32px 28px;
  box-shadow: var(--shadow);
}
.brand.center { flex-direction: column; text-align: center; gap: 10px; margin-bottom: 24px; }
.auth-card h1 { font-size: 24px; }
#authForm { display: flex; flex-direction: column; gap: 12px; }
#authForm input {
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px;
  padding: 13px 16px; color: var(--text); font-size: 15px;
}
#authForm input:focus { outline: 2px solid var(--accent); border-color: transparent; }
.auth-buttons { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.auth-buttons button {
  border: none; border-radius: 12px; padding: 13px; font-size: 15px; font-weight: 600; cursor: pointer;
}
#loginBtn { background: var(--accent); color: #fff; transition: filter .2s; }
#loginBtn:hover { filter: brightness(1.08); }
.ghost { background: transparent; color: var(--text-dim); border: 1px solid var(--border) !important; }
.ghost:hover { color: var(--text); }
.auth-msg { font-size: 13px; text-align: center; min-height: 18px; margin-top: 4px; }
.auth-msg.error { color: #ef4444; }
.auth-msg.ok { color: var(--done); }

/* ---------- Kopfzeile ---------- */
header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 28px; }
.header-actions { display: flex; gap: 8px; }
.brand { display: flex; align-items: center; gap: 12px; }
.logo {
  width: 40px; height: 40px; border-radius: 12px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  display: grid; place-items: center; font-size: 20px;
}
h1 { font-size: 20px; font-weight: 700; letter-spacing: -0.3px; }
.sub { font-size: 13px; color: var(--text-dim); }

.toggle {
  border: 1px solid var(--border); background: var(--surface);
  color: var(--text); border-radius: 999px; padding: 8px 14px;
  font-size: 13px; cursor: pointer; display: flex; align-items: center; gap: 8px;
  transition: background .2s;
}
.toggle:hover { background: var(--surface-2); }

/* ---------- Statistik-Karten ---------- */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 24px; }
.stat { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 16px 18px; }
.stat .num { font-size: 26px; font-weight: 700; }
.stat .lbl { font-size: 12px; color: var(--text-dim); margin-top: 2px; }
.ring { color: var(--accent); }

/* ---------- Neue Gewohnheit ---------- */
.add { display: flex; gap: 10px; margin-bottom: 22px; }
.add input {
  flex: 1; background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; padding: 13px 16px; color: var(--text); font-size: 15px;
}
.add input::placeholder { color: var(--text-dim); }
.add input:focus { outline: 2px solid var(--accent); border-color: transparent; }
.add button {
  background: var(--accent); color: #fff; border: none; border-radius: 12px;
  padding: 0 20px; font-size: 15px; font-weight: 600; cursor: pointer; transition: filter .2s;
}
.add button:hover { filter: brightness(1.08); }

/* ---------- Gewohnheiten-Liste ---------- */
.habit {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 16px; padding: 18px 20px; margin-bottom: 14px; box-shadow: var(--shadow);
}
.habit-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.habit-name { display: flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 600; }
.dot { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); }
.habit-right { display: flex; align-items: center; gap: 10px; }
.streak {
  font-size: 13px; color: var(--text-dim); display: flex; align-items: center; gap: 5px;
  background: var(--surface-2); padding: 5px 11px; border-radius: 999px;
}
.del {
  background: none; border: none; color: var(--text-dim); cursor: pointer;
  font-size: 18px; line-height: 1; padding: 4px; border-radius: 8px; transition: color .2s, background .2s;
}
.del:hover { color: #ef4444; background: var(--surface-2); }

/* 7-Tage-Raster */
.week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; }
.day { text-align: center; }
.day .dname { font-size: 11px; color: var(--text-dim); margin-bottom: 6px; }
.box {
  width: 100%; aspect-ratio: 1 / 1; border-radius: 10px;
  border: 1px solid var(--border); background: var(--surface-2);
  display: grid; place-items: center; cursor: pointer; font-size: 16px;
  transition: all .15s ease; color: transparent; user-select: none;
}
.box:hover { border-color: var(--accent); }
.box.done { background: var(--done-bg); border-color: var(--done); color: var(--done); }
.box.today { box-shadow: 0 0 0 2px var(--accent) inset; }

/* ---------- Sonstiges ---------- */
.empty { text-align: center; color: var(--text-dim); margin-top: 40px; font-size: 15px; }
footer { margin-top: 36px; text-align: center; }
.badge {
  display: inline-block; background: var(--surface-2); border: 1px solid var(--border);
  color: var(--text-dim); padding: 4px 10px; border-radius: 999px; font-size: 12px;
}

/* ---------- Bearbeiten-Button + nicht geplante Tage ---------- */
.edit {
  background: none; border: none; color: var(--text-dim); cursor: pointer;
  font-size: 16px; line-height: 1; padding: 5px 7px; border-radius: 8px; transition: color .2s, background .2s;
}
.edit:hover { color: var(--accent); background: var(--surface-2); }
.box.off { cursor: default; color: var(--text-dim); opacity: .35; }
.box.off:hover { border-color: var(--border); }
.box.future { cursor: default; color: var(--text-dim); opacity: .2; }
.box.future:hover { border-color: var(--border); }

/* ---------- Wochen-Navigation ---------- */
.weeknav { display: flex; align-items: center; justify-content: center; gap: 16px; margin-bottom: 16px; }
.weeknav #weekLabel { font-size: 14px; color: var(--text); min-width: 150px; text-align: center; }
.weeknav button {
  width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--border);
  background: var(--surface); color: var(--text); font-size: 18px; cursor: pointer; line-height: 1;
}
.weeknav button:hover:not(:disabled) { background: var(--surface-2); }
.weeknav button:disabled { opacity: .35; cursor: default; }

/* ---------- Modal (Bearbeiten-Fenster) ---------- */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.55);
  display: grid; place-items: center; padding: 20px; z-index: 50;
}
.modal {
  width: 100%; max-width: 420px; background: var(--surface);
  border: 1px solid var(--border); border-radius: 20px; padding: 24px;
  box-shadow: var(--shadow);
}
.modal h2 { font-size: 18px; margin-bottom: 16px; }
.modal label { display: block; font-size: 13px; color: var(--text-dim); margin: 14px 0 6px; }
.modal input[type="text"] {
  width: 100%; background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 12px; padding: 12px 14px; color: var(--text); font-size: 15px;
}
.modal input[type="text"]:focus { outline: 2px solid var(--accent); border-color: transparent; }

.swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.swatch {
  width: 28px; height: 28px; border-radius: 50%; border: 2px solid transparent; cursor: pointer;
}
.swatch.sel { border-color: var(--text); }

.weekday-pick { display: flex; flex-wrap: wrap; gap: 6px; }
.daychip {
  border: 1px solid var(--border); background: var(--surface-2); color: var(--text-dim);
  border-radius: 10px; padding: 7px 10px; font-size: 13px; cursor: pointer; min-width: 42px;
}
.daychip.sel { background: var(--accent); color: #fff; border-color: transparent; }

.modal-actions { display: flex; gap: 8px; margin-top: 20px; }
.modal-actions.secondary { margin-top: 8px; }
.modal-actions button {
  flex: 1; border: none; border-radius: 12px; padding: 11px; font-size: 14px; font-weight: 600; cursor: pointer;
}
#editSave { background: var(--accent); color: #fff; }
#editSave:hover { filter: brightness(1.08); }
.modal-actions .ghost { background: transparent; color: var(--text-dim); border: 1px solid var(--border); }
.modal-actions .ghost:hover { color: var(--text); }
.modal-actions .danger { background: transparent; color: #ef4444; border: 1px solid var(--border); }
.modal-actions .danger:hover { background: rgba(239,68,68,0.1); }