/* ----------------------------------------
   Gezond App - Master Theme Engine v21
   PaulusHollander.nl
---------------------------------------- */

/* ---------- Basiskleuren & variabelen ---------- */
:root {
  --bg:#0f172a;
  --card:#111827;
  --text:#e5e7eb;
  --accent:#22d3ee;
  --btn-bg:#0b1220;
  --btn-border:#1f2235;
  --transition:.4s ease;
  --bg-img:none;
}

*{box-sizing:border-box}

body {
  margin:0;
  font-family:system-ui,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text);
  background-color:var(--bg);
  background-image:var(--bg-img);
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  background-attachment:fixed;
  transition:background-color .6s ease, background-image 1s ease-in-out, color .4s ease;
}

/* Achtergrondlaag zodat foto nooit verdwijnt */
body::before {
  content:"";
  position:fixed;
  top:0;left:0;right:0;bottom:0;
  z-index:-1;
  background:var(--bg-img) center/cover no-repeat;
  opacity:1;
  transition:opacity .8s ease;
}

a{color:var(--accent);text-decoration:none}
.container{max-width:980px;margin:24px auto;padding:16px}

/* ---------- Kaarten / nav ---------- */
.card{
  background:var(--card);
  border:1px solid var(--btn-border);
  border-radius:16px;
  padding:16px;
  box-shadow:0 10px 20px rgba(0,0,0,.25);
  backdrop-filter:blur(6px);
  transition:background var(--transition),border var(--transition);
}
nav a{
  margin-right:12px;
  padding:8px 12px;
  background:var(--btn-bg);
  border-radius:10px;
  border:1px solid var(--btn-border);
  transition:background .3s ease;
}
nav a:hover{background:rgba(255,255,255,0.08)}

/* ---------- Knoppen / badges ---------- */
.logout-btn,.badge{
  background:var(--btn-bg);
  border:1px solid var(--btn-border);
  border-radius:10px;
  padding:8px 12px;
  color:var(--text);
  transition:background var(--transition),color var(--transition);
}
.logout-btn:hover,.badge:hover{opacity:.85}

/* ---------- Formulieren ---------- */
form input,form select,form button,textarea{
  padding:10px 12px;
  border-radius:10px;
  border:1px solid var(--btn-border);
  background:var(--btn-bg);
  color:var(--text);
  margin-right:8px;
  margin-bottom:8px;
  transition:background var(--transition),color var(--transition),border var(--transition);
}
form select,
form input[type="date"],
form input[type="time"],
form input[type="number"]{
  appearance:none;
  -webkit-appearance:none;
}
form button{
  cursor:pointer;
  background:linear-gradient(180deg,var(--btn-bg),#000);
}
form button:hover{opacity:.9}

/* ---------- Layout helpers ---------- */
.grid{display:grid;gap:12px}
.grid.cols-3{grid-template-columns:repeat(3,1fr)}
.row{display:flex;gap:8px;flex-wrap:wrap}

/* Kalender */
.calendar th,.calendar td{border:1px solid var(--btn-border);padding:8px;text-align:center}
.cell{width:100%;height:42px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:12px}
.cell.taken{background:#022c22;color:#34d399}
.cell.not-taken{background:#2c0b0b;color:#fca5a5}

/* ---------- Grafieken ---------- */
.card canvas{display:block;width:100%;max-height:240px;height:240px}

/* ---------- Datumpicker kleur ---------- */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator{filter:invert(1)}
body.theme-white input[type="date"]::-webkit-calendar-picker-indicator,
body.theme-white input[type="time"]::-webkit-calendar-picker-indicator{filter:invert(0)}

/* ---------- THEMA’S ---------- */

/* --- Blue (default clean) --- */
body.theme-blue{
  --bg:#0f172a;
  --card:#111827cc;
  --text:#e5e7eb;
  --accent:#22d3ee;
  --btn-bg:#0b1220;
  --btn-border:#1f2235;
  --bg-img:none;
}

/* --- Dark --- */
body.theme-dark{
  --bg:#000;
  --card:#101010cc;
  --text:#eaeaea;
  --accent:#22d3ee;
  --btn-bg:#1a1a1a;
  --btn-border:#333;
  --bg-img:none;
}

/* --- White --- */
body.theme-white{
  --bg:#f4f4f4;
  --card:#ffffffee;
  --text:#111;
  --accent:#007bff;
  --btn-bg:#eaeaea;
  --btn-border:#ccc;
  --bg-img:none;
}

/* --- Windows 95 --- */
body.theme-win95{
  --bg:#008080;
  --card:#c0c0c0;
  --text:#000;
  --accent:#000080;
  --btn-bg:#d4d0c8;
  --btn-border:#808080;
  --bg-img:url('assets/95.png');
}
body.theme-win95 .card{
  border:2px solid #808080;
  box-shadow:inset 2px 2px #fff,inset -2px -2px #404040;
  backdrop-filter:none;
}

/* --- Windows XP --- */
body.theme-xp{
  --bg:#1e90ff;
  --card:rgba(17,24,39,0.85);
  --text:#fff;
  --btn-bg:rgba(17,24,39,0.9);
  --btn-border:rgba(255,255,255,0.3);
  --bg-img:url('assets/xp.jpg');
}
body.theme-xp .card{
  backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,0.3);
}

/* --- Windows 7 / Frutiger Aero --- */
body.theme-win7{
  --bg:#0b2540;
  --card:rgba(17,24,39,0.85);
  --text:#fff;
  --btn-bg:rgba(17,24,39,0.9);
  --btn-border:rgba(255,255,255,0.4);
  --bg-img:url('assets/frutiger-aero.jpg');
}
body.theme-win7 .card{
  backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,0.4);
}

/* --- Pink 2005 Girly --- */
body.theme-pink{
  --bg:hotpink;
  --card:rgba(255,182,193,0.9);
  --text:#fff;
  --btn-bg:#ff69b4;
  --btn-border:#ffb6c1;
  --bg-img:url('assets/heart.jpg');
}
body.theme-pink .card{
  background:rgba(255,182,193,0.85);
  border:2px solid #ffb6c1;
  box-shadow:0 0 25px rgba(255,182,193,0.6);
}

/* ---------- Thema transitie ---------- */
body {
  transition: background-color .6s ease, background-image 1s ease-in-out, color .4s ease;
}