:root {
  /* Basis kleuren */
  --primary-color: #ff7043;
  --secondary-color: #4fc3f7;
  --success-color: #81c784;
  --warning-color: #ffcc80;
  --accent-color: #ffa726;
  --danger-color: #e53935;

  --text-color: #333;
  --background-color: #f0f4f8;
  --card-background: #fffaf0;

  --navbar-background: #ffffff;
  --navbar-text: #333333;
  --navbar-border: #dddddd;
  --fab-size: 62px;
  --fab-gap: 10px;
  --fab-radius: 16px;
  --fab-shadow: 0 10px 28px rgba(16,24,40,.25);
  --fab-bg: #4f9cf9;
  --fab-col: #fff;
  --menu-bg: rgba(255,255,255,.98);
  --menu-bd: #e5e7eb;
  /* Fonts */
    --ff-base: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
}
  html,body{min-height:100%}
  body{background:var(--bg)}
  body::before{
    content:""; position:fixed; inset:-18vmax; z-index:-1; opacity:.6; pointer-events:none;
    background:
      radial-gradient(48vmax 48vmax at 18% -8%, var(--blob-1), transparent 60%),
      radial-gradient(46vmax 46vmax at 120% 0%, var(--blob-2), transparent 60%),
      radial-gradient(50vmax 50vmax at -10% 120%, var(--blob-3), transparent 60%);
    background-repeat:no-repeat; background-attachment:fixed;
  }
h1,h2,h3,h4,h5,h6,
.btn,.badge,.form-control,.navbar,.card,.alert {
  font-family: var(--ff-base) !important;
}

.theme-minecraft {
  --primary-color: #2e7d32;
  --secondary-color: #66bb6a;
  --success-color: #81c784;
  --warning-color: #d4a373;
  --accent-color: #c0ca33;
  --danger-color: #d32f2f;
  --text-color: #fff;
  --background-color: #1b4332;
  --card-background: #264d32;
    --navbar-background: #388e3c;
  --navbar-text: #ffffff;
  --navbar-border: #1b5e20;
}
.theme-princess {
  --primary-color: #f06292;
  --secondary-color: #ba68c8;
  --success-color: #f48fb1;
  --warning-color: #ffd54f;
  --accent-color: #ffb6b9;
  --danger-color: #e57373;
  --text-color: #4e342e;
  --background-color: #fff0f5;
  --card-background: #fffafc;
    --navbar-background: #f06292;
  --navbar-text: #ffffff;
  --navbar-border: #ad1457;
}
.theme-stitch {
  --primary-color: #039be5;
  --secondary-color: #26c6da;
  --success-color: #4dd0e1;
  --warning-color: #ffd54f;
  --accent-color: #00acc1;
  --danger-color: #d32f2f;
  --text-color: #003c4d;
  --background-color: #e0f7fa;
  --card-background: #f1fcfd;
      --navbar-background: #00bcd4;
    --navbar-text: #ffffff;
    --navbar-border: #008ba3;
}
.theme-mario {
  --primary-color: #e53935;
  --secondary-color: #1976d2;
  --success-color: #43a047;
  --warning-color: #fdd835;
  --accent-color: #ffa726;
  --danger-color: #c62828;
  --text-color: #000;
  --background-color: #ffebee;
  --card-background: #fffaf0;
      --navbar-background: #e53935;
    --navbar-text: #ffffff;
    --navbar-border: #b71c1c;
}
.theme-dark {
  --primary-color: #ff7043;
  --secondary-color: #4fc3f7;
  --success-color: #81c784;
  --warning-color: #ffcc80;
  --accent-color: #ffa726;
  --danger-color: #ef5350;
  --text-color: #ffffff;
  --background-color: #121212;
  --card-background: #1e1e1e;

  --navbar-background: #222222;
  --navbar-text: #ffffff;
  --navbar-border: #333333;
}
.theme-candy {
  --primary-color: #ff69b4;
  --secondary-color: #ffb6c1;
  --success-color: #98ee99;
  --warning-color: #ffd54f;
  --accent-color: #ff80ab;
  --danger-color: #ef5350;
  --text-color: #4e342e;
  --background-color: #fff0f5;
  --card-background: #fffafc;

  --navbar-background: #ff69b4;
  --navbar-text: #ffffff;
  --navbar-border: #ad1457;
}
.theme-space {
  --primary-color: #7e57c2;
  --secondary-color: #00bcd4;
  --success-color: #4db6ac;
  --warning-color: #ffd740;
  --accent-color: #ab47bc;
  --danger-color: #ef5350;
  --text-color: #ffffff;
  --background-color: #12132a;
  --card-background: #1e1f3b;

  --navbar-background: #2c2c54;
  --navbar-text: #ffffff;
  --navbar-border: #3c3c70;
}
.theme-roblox {
  --primary-color: #ff5722;
  --secondary-color: #2196f3;
  --success-color: #4caf50;
  --warning-color: #ffc107;
  --accent-color: #ff9800;
  --danger-color: #f44336;
  --text-color: #000000;
  --background-color: #f5f5f5;
  --card-background: #ffffff;

  --navbar-background: #212121;
  --navbar-text: #ffffff;
  --navbar-border: #424242;
}

/* Algemeen layout */
body {
  background-color: var(--background-color);
  font-family: var(--font-family-main);
  color: var(--text-color);
}

.container {
  width: 100%;
  max-width: 1000px;
  padding: 15px;
  margin: auto;
}

.card {
  border-radius: 18px;
  background: var(--card-background);
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
}

.card-header {
  background: none;
  text-align: center;
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  font-weight: 700;
  color: var(--primary-color);
  border-bottom: none;
  font-family: var(--font-family-comic);
}

.card-header-full {
  width: 100%;
  background-color: var(--secondary-color);
  color: white;
  padding: 20px;
  font-size: clamp(1.6rem, 5vw, 2.2rem);
  font-family: var(--font-family-comic);
  text-align: center;
}

.card-body {
  padding: clamp(20px, 5vw, 40px);
}


h3, h2, h4 {
  color: var(--primary-color);
  font-weight: 700;
  font-family: var(--font-family-comic);
  text-align: center;
  margin-bottom: 25px;
  font-size: clamp(1.4rem, 2.5vw, 2rem);
}

label.form-label {
  font-weight: 600;
  color: #e65100;
  font-family: var(--font-family-comic);
}

textarea.form-control {
  font-size: 1.1rem;
  border-radius: 10px;
  border: 1px solid #ccc;
  background: #fff;
  resize: vertical;
  min-height: 140px;
  box-shadow: inset 2px 2px 5px #ccc;
  font-family: var(--font-family-comic);
  padding: 15px;
}

input[type="date"] {
  border-radius: 10px;
  border: 1px solid #ccc;
  background: #fff;
  padding: 10px;
  font-size: 1rem;
}



.btn-primary {
  background-color: var(--primary-color);
  color: #fff;
}

.btn-primary:hover {
  background-color: darken(var(--primary-color), 10%);
  transform: scale(0.98);
}

.btn-success {
  background-color: var(--success-color);
  color: #fff;
}

.btn-primary:hover {
  background-color: #e65c29; /* 10% donkerder dan #ff7043 */
}

.btn-warning {
  background-color: var(--warning-color);
  color: #333;
}

.btn-warning:hover {
  filter: brightness(0.95);   /* i.p.v. darken(...) */
  transform: scale(0.98);
}


.btn-outline-primary {
  background-color: #ffccbc;
  border-color: var(--primary-color);
  color: #bf360c;
  font-weight: 700;
  font-family: var(--font-family-comic);
  box-shadow: 2px 2px 6px rgb(255 111 0 / 0.5);
  transition: all 0.3s ease;
}

.btn-outline-primary:hover {
  background-color: var(--primary-color);
  color: white;
  box-shadow: 3px 3px 10px rgb(255 111 0 / 0.8);
}

footer {
  font-size: 0.9rem;
  color: #666;
  margin-top: 5rem;
}

.navbar.fixed-bottom {
  background-color: var(--navbar-background, #f9f9f9);
  border-top: 1px solid rgba(0,0,0,0.1);
  box-shadow: 0 -2px 6px rgba(0,0,0,0.1);
  display: flex;
  justify-content: space-around;
  padding: 0.5rem 0;
  width: 100%;
  position: fixed;
  bottom: 0;
  z-index: 1000;
  overflow-x: auto;
  white-space: nowrap;
}

.navbar.fixed-bottom a {
  text-decoration: none;
  font-family: var(--font-family-comic, 'Comic Sans MS', cursive);
  flex: 1 0 auto; /* belangrijk: altijd in 1 regel, geen wrapping */
  max-width: 140px; /* zorgt dat ze niet super breed worden op tablets */
}

.navbar.fixed-bottom .nav-button {
  background: var(--button-background, #ffffff);
  color: var(--button-text, #333333);
  padding: 0.7rem 0.3rem;
  margin: 0 0.2rem;
  border-radius: 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(0, 0, 0, 0.15);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  transition: all 0.2s ease;
  min-height: 64px; /* minimaal tap target */
}

.navbar.fixed-bottom .nav-button:hover {
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
  transform: translateY(-2px);
}

.navbar.fixed-bottom .icon {
  font-size: 2rem;
  margin-bottom: 0.25rem;
  line-height: 1;
}

.navbar.fixed-bottom small {
  font-size: 0.85rem;
  font-weight: 500;
  line-height: 1;
}


#adminMenu {
  animation: slideUp 0.3s ease-out;
}

@keyframes slideUp {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

.mood-btn {
  font-size: 2rem;
  padding: 10px;
  border-radius: 50%;
  border: 3px solid var(--accent-color);
  background: #fff3e0;
  margin: 10px;
  box-shadow: 2px 4px 10px rgba(255,165,0,0.3);
  transition: 0.3s ease;
}

.mood-btn:hover {
  background: #ffe0b2;
  transform: scale(1.1);
}

.task-item {
  border-radius: 20px;
  padding: 25px 20px;
  margin-bottom: 20px;
  font-size: 1.4rem;
  background: #fff3e0;
  box-shadow: 2px 4px 10px rgba(255,165,0,0.3);
}

.task-item.done {
  background: #a5d6a7;
  color: #2e7d32;
}

.points-banner {
  background: #ffe082;
  border-radius: 50px;
  font-size: 1.8rem;
  text-align: center;
  padding: 20px 30px;
  margin: 20px auto;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.notification-popup {
  position: fixed;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%);
  width: 300px;
  background: var(--card-background);
  color: var(--text-color);
  border-radius: 20px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.3);
  z-index: 99999;
  padding: 15px;
}

.notification-header {
  font-weight: bold;
  font-family: var(--font-family-comic);
  text-align: center;
  margin-bottom: 10px;
}

@media (max-width: 600px) {
  .points-banner { font-size: 1.3rem; padding: 15px 20px; }
}
.badge-popup {
    position: fixed;
    top: 30%;
    left: 50%;
    transform: translateX(-50%);
    background: gold;
    padding: 20px 30px;
    font-size: 24px;
    border-radius: 15px;
    box-shadow: 0 0 15px rgba(0,0,0,0.3);
    z-index: 9999;
}
body {
  background-color: #f0f8ff;
  font-family: 'Comic Sans MS', 'Arial Rounded MT Bold', sans-serif;
}

/* HUD Box */
.game-hud-box {
  font-weight: bold;
  font-size: 1.4rem;
  background: #ffffffdd;
  border: 2px solid #ccc;
  padding: 10px 20px;
  border-radius: 15px;
  box-shadow: 0 3px 6px rgba(0,0,0,0.2);
}

/* Buttons */
.game-button {
  font-size: 1.2rem;
  border-radius: 15px;
  padding: 10px 20px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
  border: none;
  background-color: #007bff;
  color: white;
}

/* Game Over scherm */
.game-over {
  font-size: 1.5rem;
  border-radius: 20px;
  padding: 30px;
  background: linear-gradient(to bottom, #e0ffe0, #b3ffb3);
  box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

/* Badge popup */
.game-badge-popup {
  position: fixed;
  top: 30%;
  left: 50%;
  transform: translateX(-50%);
  background: gold;
  padding: 20px 30px;
  font-size: 28px;
  border-radius: 20px;
  box-shadow: 0 0 20px rgba(0,0,0,0.4);
  z-index: 9999;
  animation: popup 0.3s ease-out;
}

@keyframes popup {
  from { transform: translateX(-50%) scale(0.7); opacity: 0; }
  to { transform: translateX(-50%) scale(1); opacity: 1; }
}

/* Input fields specifiek voor Math Race */
.game-input {
  font-size: 1.5rem;
  text-align: center;
  border-radius: 15px;
  border: 2px solid #aaa;
  width: 50%;
  margin: auto;
}

.breath-box { display:flex; justify-content:center; align-items:center; min-height:110px; }
.breath-circle {
  width:80px; height:80px; border-radius:50%;
  background: radial-gradient(circle, rgba(99,102,241,.25), rgba(99,102,241,.05));
  border:2px solid rgba(99,102,241,.5);
  animation: breathe 4s ease-in-out infinite;
}
@keyframes breathe {
  0% { transform: scale(1);   }
  25%{ transform: scale(1.2); }
  50%{ transform: scale(1.25);}
  75%{ transform: scale(1.2); }
  100%{transform: scale(1);   }
}

.fab-dock{
  position: fixed;
  right: calc(16px + env(safe-area-inset-right, 0px));
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  z-index: 1200;
}

/* Toggle knop */
.fab-toggle{
  width: var(--fab-size);
  height: var(--fab-size);
  border-radius: 50%;
  border: none;
  background: var(--fab-bg);
  color: var(--fab-col);
  display: grid;
  place-items: center;
  box-shadow: var(--fab-shadow);
  cursor: pointer;
  transition: transform .18s ease, filter .18s ease;
  position: relative;
}
.fab-toggle:hover{ filter: brightness(1.05); }
.fab-dock{
  position: fixed;
  right: calc(16px + env(safe-area-inset-right, 0px));
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  z-index: 1200;
  isolation: isolate; /* NEW */
}

.fab-menu{
  position: absolute;
  right: 0;
  bottom: calc(var(--fab-size) + 1px);
  display: grid;
  grid-auto-rows: 44px;
  gap: var(--fab-gap);
  padding: 10px;
  background: var(--menu-bg);
  border: 1px solid var(--menu-bd);
  border-radius: var(--fab-radius);
  box-shadow: 0 16px 50px rgba(16,24,40,.20);
  min-width: 210px;
  pointer-events: auto;
  z-index: 1210; /* NEW */
}

.fab-menu[hidden]{ display: none !important; }

/* Items */
.fab-item{
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  background: #fff;
  color: #0f172a;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
  transition: transform .12s ease, background .15s ease, box-shadow .15s ease;
}
.fab-item:hover{ transform: translateY(-1px); background: #f8fafc; }
.fab-item i{ font-size: 1.1rem; line-height: 1; }

/* In/uitklap animatie (stagger) */
.fab-menu .fab-item{
  opacity: 0; transform: translateY(8px);
  transition: opacity .18s ease, transform .18s ease;
}
.fab-dock[data-open="1"] .fab-menu .fab-item{
  opacity: 1; transform: translateY(0);
}
.fab-menu .fab-item:nth-child(1){ transition-delay: 0ms; }
.fab-menu .fab-item:nth-child(2){ transition-delay: 20ms; }
.fab-menu .fab-item:nth-child(3){ transition-delay: 40ms; }
.fab-menu .fab-item:nth-child(4){ transition-delay: 60ms; }
.fab-menu .fab-item:nth-child(5){ transition-delay: 80ms; }
.fab-menu .fab-item:nth-child(6){ transition-delay: 100ms; }
.fab-menu .fab-item:nth-child(7){ transition-delay: 120ms; }
.fab-menu .fab-item:nth-child(8){ transition-delay: 140ms; }

/* (VERWIJDERD) Oude hover-open hack die klik blokkeerde:
@media (hover: hover) and (pointer: fine){
  .fab-dock:hover .fab-menu[hidden] { display: grid !important; }
  .fab-dock:hover .fab-item{ opacity: 1; transform: translateY(0); }
}
*/

/* Dark mode */
:root[data-theme="dark"]{
  --menu-bg: rgba(15,23,42,.95);
  --menu-bd: #1f2937;
}
:root[data-theme="dark"] .fab-item{
  background: #0b1220; border-color:#1f2937; color:#e6edf5;
}

/* Badge op FAB-knop */
.fab-badge{
  position:absolute; 
  top:-4px; right:-4px;
  min-width:20px; height:20px;
  padding:0 6px;
  background:#dc3545; color:#fff;
  border:2px solid #fff;
  border-radius:999px;
  font-size:12px; line-height:16px;
  text-align:center;
  font-weight:700;
  box-shadow:0 1px 4px rgba(0,0,0,.25);
  animation: fabPulse 2s ease-in-out infinite;
}

/* Badge op Meldingen-item in menu */
.menu-badge{
  position:absolute;
  top:6px; right:12px;
  min-width:18px; height:18px;
  background:#dc3545; color:#fff;
  border-radius:999px;
  font-size:11px; line-height:18px;
  text-align:center;
  font-weight:700;
  border:2px solid #fff;
  box-shadow:0 1px 4px rgba(0,0,0,.25);
}

/* Pulse animatie */
@keyframes fabPulse { 
  0%{ transform:scale(1); } 
  50%{ transform:scale(1.1); } 
  100%{ transform:scale(1); } 
}

/* ===== Scrim & wrapper ==================================================== */

/* Scrim & wrapper */
.modal-scrim{
  position: fixed; inset: 0;
  background: rgba(15,23,42,.45);
  backdrop-filter: blur(2px);
  z-index: 2000;
  display: none;
  pointer-events: none;
}

.modal-wrap,
.task-modal-wrap{
  position: fixed; inset: 0;
  z-index: 2100;
  display: none;              /* JS of aria-hidden toggle toont 'm */
  place-items: center;        /* <-- centreren */
  pointer-events: none;
}

/* Open states (via aria of class) */
.modal-scrim.is-open,
.modal-wrap.is-open,
.task-modal-wrap.is-open,
.modal-wrap[aria-hidden="false"],
.task-modal-wrap[aria-hidden="false"],
html[data-modal-open="1"] .modal-scrim{
  display: grid;
  pointer-events: auto;
}

/* Optionele “front” bump voor stacked modals */
.modal-scrim.is-front{ z-index: 10000; }
.modal-wrap.is-front,
.task-modal-wrap.is-front{ z-index: 10010; }

/* Kaart/content */
.modal-card,
.modal-inner{
  width: min(720px, 94vw);
  max-height: min(82vh, 900px);
  overflow: auto;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  box-shadow: 0 24px 80px rgba(0,0,0,.35);
  pointer-events: auto;
}

/* Wanneer open (JS zet aria-hidden="false") */
.modal-wrap[aria-hidden="false"],
html[data-modal-open="1"] .modal-scrim{
  display: grid;
  pointer-events: auto;
}

/* ===== Kaart/content ====================================================== */
/* Gebruik óf .modal óf .modal-card als content container */
.modal-card{
  width: min(680px, 92vw);
  max-height: min(82vh, 900px);
  overflow: auto;              /* scroll binnen modal, geen page scroll */
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  box-shadow: 0 24px 80px rgba(0,0,0,.35);
  pointer-events: auto;        /* vang kliks in content */
}

/* Structuur (als je .modal-card sub-secties gebruikt) */
.modal-head{
  padding: 14px 16px;
  font-weight: 900;
  border-bottom: 1px solid #e5e7eb;
  display: flex; align-items: center; gap: 10px;
}
.modal-body{ padding: 16px; }
.modal-foot{
  padding: 12px 16px;
  border-top: 1px solid #e5e7eb;
  display: flex; gap: 8px; justify-content: flex-end;
}

/* Utility */
.hide{ display: none !important; }

/* Body lock wanneer een modal open is */
html[data-modal-open="1"]{
  overflow: hidden;
  overscroll-behavior: contain;
}

/* FAB mag nooit boven modals komen */
.fab-dock{ z-index: 1200; }

/* Mobile tweaks: tikdoel, safe areas */
@media (max-width: 480px){
  .modal-card{
    width: min(96vw, 560px);
    border-radius: 14px;
  }
}

/* Dark mode vriendelijk (optioneel) */
:root[data-theme="dark"] .modal-card{
  background: #0b1220;
  border-color: #1f2937;
  color: #e6edf5;
}
:root[data-theme="dark"] .modal-head{ border-bottom-color:#1f2937; }
:root[data-theme="dark"] .modal-foot{ border-top-color:#1f2937; }
/* Zorg dat FAB nooit onzichtbaar blijft door vreemde styles */
#fabDock{
  visibility: visible !important;
  opacity: 1 !important;
}

/* ===== Dashboard ==================================================== */
  .dash-hero{
    display:flex; align-items:center; justify-content:space-between; gap:16px;
    background:rgba(255,255,255,.94);
    border:1px solid #e2e8f0; border-radius:24px; padding:18px 22px; box-shadow:0 8px 24px rgba(0,0,0,.10);
    backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
    margin-top:24px; margin-bottom:18px;
  }
  .points-chip{ display:flex; align-items:center; gap:10px; background:linear-gradient(135deg,#fff8e1,#ffe082);
    padding:10px 14px; border-radius:999px; box-shadow:0 8px 24px rgba(0,0,0,.10); border:1px solid #ffe5a6; font-weight:700; }
  .card-g{ background:rgba(255,255,255,.84); border:1px solid #e2e8f0; border-radius:18px; box-shadow:0 8px 24px rgba(0,0,0,.10); overflow:hidden; }
/* Basis + theming hooks */
.card-head{
  display:flex; align-items:center; gap:10px;
  padding:14px 16px;
  font-weight:800; letter-spacing:.2px;
  border-bottom:1px solid #e2e8f0;
  border-radius: 12px 12px 0 0;
  background: var(--card-head-bg, linear-gradient(135deg,#f8fafc,#eef2f7));
  color: var(--card-head-fg, #0f172a);
}

/* Variants (lichte, toegankelijke contrasten) */
.card-head.head-primary  { --card-head-bg: linear-gradient(135deg,#e0f2ff,#dbeafe); --card-head-fg:#0b3b7a; }
.card-head.head-success  { --card-head-bg: linear-gradient(135deg,#dcfce7,#ecfdf5); --card-head-fg:#065f46; }
.card-head.head-warning  { --card-head-bg: linear-gradient(135deg,#fff7ed,#fffbeb); --card-head-fg:#7c2d12; }
.card-head.head-purple   { --card-head-bg: linear-gradient(135deg,#ede9fe,#f5f3ff); --card-head-fg:#5b21b6; }
.card-head.head-pink     { --card-head-bg: linear-gradient(135deg,#ffe4e6,#ffeef1); --card-head-fg:#9f1239; }
.card-head.head-slate    { --card-head-bg: linear-gradient(135deg,#f1f5f9,#e2e8f0); --card-head-fg:#0f172a; }

/* Donker thema – iets krachtiger tinten */
:root[data-theme="dark"] .card-head{
  border-bottom-color:#1f2937;
  --card-head-bg: linear-gradient(135deg,#0b1220,#0f172a);
  --card-head-fg:#e6edf5;
}
:root[data-theme="dark"] .card-head.head-primary { --card-head-bg: linear-gradient(135deg,#0b2540,#123154); --card-head-fg:#dbeafe; }
:root[data-theme="dark"] .card-head.head-success { --card-head-bg: linear-gradient(135deg,#0f2d23,#123528); --card-head-fg:#bbf7d0; }
:root[data-theme="dark"] .card-head.head-warning { --card-head-bg: linear-gradient(135deg,#2b1e0a,#3a2a11); --card-head-fg:#fde68a; }
:root[data-theme="dark"] .card-head.head-purple  { --card-head-bg: linear-gradient(135deg,#1b1133,#22154a); --card-head-fg:#ddd6fe; }
:root[data-theme="dark"] .card-head.head-pink    { --card-head-bg: linear-gradient(135deg,#3a0a12,#4a0f18); --card-head-fg:#fecdd3; }
:root[data-theme="dark"] .card-head.head-slate   { --card-head-bg: linear-gradient(135deg,#0b1220,#0f172a); --card-head-fg:#e6edf5; }  .card-body{ padding:18px; }
  .quick-grid{ display:grid; gap:12px; grid-template-columns: 1fr 1fr; }
  @media (max-width: 576px){ .quick-grid{ grid-template-columns: 1fr; } }
  .quick-tile{ border:1px solid #e2e8f0; border-radius:14px; background:#fff; padding:14px; font-weight:700; display:flex; align-items:center; gap:10px; justify-content:center; }
  .quick-actions .action-card{ display:flex; align-items:center; gap:12px; padding:14px 16px; border:1px solid #e5e7eb; border-radius:12px; background:#fff; box-shadow:0 2px 6px rgba(0,0,0,.05); }
  .quick-actions .icon-wrap{ width:48px; height:48px; display:flex; align-items:center; justify-content:center; border-radius:10px; font-size:1.5rem; }
  .mood-grid{ display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 10px; position: relative; }
  .mood-grid form{ margin:0; display:block; }
  .mood-grid.locked::after{ content:""; position:absolute; inset:0; border-radius:12px; background: rgba(255,255,255,0.6); backdrop-filter: blur(2px); z-index: 5; }
  .mood-grid.locked .mood-btn{ pointer-events: none; opacity: .65; }
  .mood-btn{ display:flex; flex-direction:column; align-items:center; justify-content:center; border:1px solid #e2e8f0; border-radius:14px; background:#fff; padding:10px 6px; font-weight:700; width:100%; height:100%; }
  .mood-ico{ font-size: 1.8rem; margin-bottom: 4px; }
  
  /* ===== Global FAB Dock (linksonder) ===== */
.global-fab-wrap {
  position: fixed;
  left: 20px;
  bottom: 20px;
  z-index: 1300;
}
.global-fab-main {
  width: 56px; height: 56px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  background: #4f9cf9;
  color: #fff;
  font-size: 28px;
  line-height: 0;
  box-shadow: 0 6px 18px rgba(16,24,40,.18);
}
.global-fab-main:focus-visible { outline: 3px solid #bfdbfe; outline-offset: 3px; }

.global-fab-menu {
  position: absolute;
  left: 0;
  bottom: 64px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid #e5e7eb;
  box-shadow: 0 10px 30px rgba(0,0,0,.18);
  transform-origin: bottom left;
  transform: scale(.96) translateY(6px);
  opacity: 0;
  pointer-events: none;
  transition: .15s ease;
}
.global-fab-wrap.open .global-fab-menu {
  transform: scale(1) translateY(0);
  opacity: 1;
  pointer-events: auto;
}

.global-fab-item {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid #e5e7eb;
  background: #fff;
  color: #111827;
  font-weight: 800;
  border-radius: 999px;
  padding: 8px 12px;
  cursor: pointer;
  white-space: nowrap;
}
.global-fab-item:hover { filter: brightness(1.02); }

.global-fab-badge {
  display: inline-grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  padding: 0 6px;
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 900;
  background: #ef4444;
  color: #fff;
  margin-left: 4px;
}

@media (max-width:480px){
  .global-fab-wrap { left: 12px; bottom: 14px; }
  .global-fab-main { width: 48px; height: 48px; font-size: 22px; }
}
/* ===== Groceries (gekopieerd uit tasks, net iets compacter) ===== */
.gro-backdrop{ position:fixed; inset:0; background:rgba(0,0,0,.35); z-index:1290; }
.gro-modal {
  position: fixed;
  left: 20px;               /* <-- was right: 20px */
  bottom: 90px;             /* iets boven de FAB */
  z-index: 1310;
  width: min(420px, 90vw);
  max-height: 70vh;
  overflow: hidden;

  background: #fff;
  color: #111;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .22);
}
.gro-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px 14px; background:#f8fafc; border-bottom:1px solid #e5e7eb; font-weight:900; }
.gro-close{ background:transparent; border:1px solid #e5e7eb; border-radius:8px; padding:6px 8px; cursor:pointer; }
.gro-body{ padding:10px 12px; overflow:auto; max-height:calc(70vh - 120px); }
.gro-foot{ display:flex; gap:8px; padding:10px 12px; border-top:1px solid #e5e7eb; background:#f8fafc; }
.gro-input{ flex:1; border:1px solid #e5e7eb; border-radius:10px; padding:10px 12px; background:#fff; }
.gro-add{ border:none; border-radius:10px; padding:10px 14px; font-weight:900; background:#4f9cf9; color:#fff; cursor:pointer; }
.gro-list{ display:flex; flex-direction:column; gap:8px; }
.gro-row{ display:flex; align-items:center; gap:10px; padding:10px 12px; background:#fff; border:1px solid #e5e7eb; border-radius:12px; }
.gro-row input[type="checkbox"]{ width:20px; height:20px; }
.gro-title{ flex:1; font-weight:800; }
.gro-title.checked{ opacity:.6; text-decoration:line-through; }
.gro-trash{ background:transparent; border:1px solid #e5e7eb; border-radius:8px; padding:6px 8px; cursor:pointer; }
.gro-empty{ text-align:center; color:#6b7280; padding:16px; border:1px dashed #e5e7eb; border-radius:12px; background:#fff; }

@media (max-width: 480px) {
  .gro-modal {
    left: 12px;             /* ook links op mobiel */
    right: 12px;            /* behoud marge aan beide zijden */
    width: auto;
  }
}
/* ===== Calendar-specifieke FAB (linksonder) ===== */
.cal-fab-wrap{
  position:fixed; left:20px; bottom:20px; z-index:1300;
}
.cal-fab-main{
  width:56px; height:56px; border-radius:50%; border:none; cursor:pointer;
  background:#4f9cf9; color:#fff; font-size:28px; line-height:0;
  box-shadow:0 6px 18px rgba(16,24,40,.18);
}
.cal-fab-main:focus-visible{ outline:3px solid #bfdbfe; outline-offset:3px; }

.cal-fab-menu{
  position:absolute; left:0; bottom:64px; display:flex; flex-direction:column; gap:8px;
  padding:8px; border-radius:12px; background:#fff; border:1px solid #e5e7eb;
  box-shadow:0 10px 30px rgba(0,0,0,.18);
  transform-origin: bottom left; transform: scale(.96) translateY(6px); opacity:0; pointer-events:none;
  transition:.15s ease;
}
.cal-fab-wrap.open .cal-fab-menu{ transform:scale(1) translateY(0); opacity:1; pointer-events:auto; }

.cal-fab-item{
  display:flex; align-items:center; gap:8px;
  border:1px solid #e5e7eb; background:#fff; color:#111827; font-weight:800;
  border-radius:999px; padding:8px 12px; cursor:pointer; white-space:nowrap;
}
.cal-fab-item:hover{ filter:brightness(1.02); }

.cal-fab-badge{
  display:inline-grid; place-items:center; min-width:18px; height:18px;
  padding:0 6px; border-radius:999px; font-size:.75rem; font-weight:900;
  background:#ef4444; color:#fff; margin-left:4px;
}

@media (max-width:480px){
  .cal-fab-wrap{ left:12px; bottom:14px; }
  .cal-fab-main{ width:48px; height:48px; font-size:22px; }
}
/* ================================
  Appointment Modal (scoped)
  — enkel voor de afspraak-planner
================================ */
#apScrim{
  position:fixed; inset:0;
  background:rgba(0,0,0,.35);
  z-index:2000;
  display:none; /* JS toont deze */
}

#apModal .modal-inner{
  width:min(720px,94vw);
  background:#fff; border:1px solid #eef2f7; border-radius:14px;
  box-shadow:0 20px 80px rgba(0,0,0,.20);
  overflow:hidden; display:flex; flex-direction:column;
}

/* Header / Body / Footer */
#apModal .modal-header{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:12px 14px; border-bottom:1px solid #edf2f7;
}
#apModal .modal-title{ font-weight:900; font-size:1.05rem; }
#apModal .modal-close{ border:none; background:transparent; font-size:22px; line-height:1; cursor:pointer; opacity:.7; }

#apModal .modal-body{ max-height:min(76vh, 720px); overflow:auto; padding:12px 14px; }
@supports (height: 100dvh){
  #apModal .modal-body{ max-height:80dvh; }
}

#apModal .modal-footer{
  padding:12px 14px; border-top:1px solid #edf2f7;
  display:flex; justify-content:flex-end; gap:10px;
}

/* Form velden */
#apModal .modal-field{ display:flex; flex-direction:column; gap:6px; min-width:0; }
#apModal .modal-field label{ font-weight:800; font-size:.9rem; margin-bottom:2px; }
#apModal .modal-field input[type="text"],
#apModal .modal-field input[type="date"],
#apModal .modal-field input[type="time"],
#apModal .modal-field select,
#apModal .modal-field textarea{
  border:1px solid #e5e7eb; border-radius:10px; padding:8px 10px; font:inherit; background:#fff;
}
#apModal .modal-field textarea{ min-height:74px; resize:vertical; }

#apModal .badge-note{ font-size:.8rem; opacity:.7; }
#apModal .alert-inline{
  margin-top:8px; padding:8px 10px; border-radius:10px;
  background:#fff8f0; border:1px solid #ffe4c7; color:#7a4a00;
}

/* View vs Edit */
#apModal .modal-inner.is-view .modal-field input,
#apModal .modal-inner.is-view .modal-field select,
#apModal .modal-inner.is-view .modal-field textarea{
  background:#f8fafc; color:#6b7280; border-color:#e5e7eb; pointer-events:none;
}
#apModal .modal-inner.is-view .modal-field input::placeholder,
#apModal .modal-inner.is-view .modal-field textarea::placeholder{ color:#9aa3af; }
#apModal .modal-inner.is-view .modal-field input[type="checkbox"]{ opacity:.6; pointer-events:none; }

/* CTA-logic */
#apModal #apEdit{ display:none; }
#apModal #apSave{ display:none; }
#apModal .modal-inner.is-view  #apEdit{ display:inline-block; }
#apModal .modal-inner.is-edit  #apSave{ display:inline-block; }
#apModal .modal-inner.is-view  #apDelete{ display:none !important; }

/* Layout helpers binnen apModal */
#apModal .modal-grid2{ display:grid; grid-template-columns:1fr 1fr; gap:8px; align-items:start; }
#apModal .modal-grid3{ display:grid; gap:10px; align-items:start; grid-template-columns:minmax(0,1fr) minmax(0,1fr) 260px; }
#apModal .color-field{ grid-row:span 2; }
#apModal .date-inline{ display:flex; align-items:center; gap:10px; flex-wrap:nowrap; }
#apModal .chk-inline{ display:inline-flex; align-items:center; gap:6px; }
#apModal .time-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; align-items:end; }
#apModal .time-grid input[type="time"]{ font-size:16px; line-height:1.2; } /* iOS anti-zoom */

/* Kleurkiezer */
#apModal .modal-colorbar{
  padding:8px 10px; border:1px dashed #edf2f7; border-radius:10px;
}
#apModal .modal-colorbar label{ display:block; font-weight:800; font-size:.9rem; margin-bottom:6px; }
#apModal .color-grid{ display:flex; flex-wrap:wrap; gap:8px; width:100%; }
#apModal .color-swatch{
  width:28px; height:28px; border-radius:6px;
  border:1px solid rgba(0,0,0,.15); background:var(--sw);
  cursor:pointer; transition:transform .08s ease, box-shadow .08s ease;
  display:inline-block; box-sizing:border-box;
}
#apModal .color-swatch:hover{ transform:translateY(-1px); }
#apModal .color-swatch.is-selected{ box-shadow:0 0 0 2px #00000033, inset 0 0 0 2px #fff; }
#apModal #apColorLabel{
  display:inline-block; margin-top:6px; opacity:.8;
  font-variant-numeric:tabular-nums;
  font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

/* In view kleurkiezer verbergen */
#apModal .modal-inner.is-view .modal-colorbar{ display:none !important; }

@media (max-width:480px){
  #apModal .modal-inner{
    width:min(96vw, 560px);
    border-radius:14px;
  }
}

/* Dark theme tweaks */
:root[data-theme="dark"] #apModal .modal-inner{
  background:#0b1220; border-color:#1f2937; color:#e6edf5;
}
:root[data-theme="dark"] #apModal .modal-header{ border-bottom-color:#1f2937; }
:root[data-theme="dark"] #apModal .modal-footer{ border-top-color:#1f2937; }

/* WhatsApp knop – subtieler */
.gro-share{
  background:linear-gradient(135deg,#25d366,#1ebe57);
  color:#fff;
  border:none;
  font-size:.85rem;
  font-weight:700;
  border-radius:6px;
  padding:3px 8px;
  line-height:1.2;
  cursor:pointer;
  box-shadow:0 2px 4px rgba(0,0,0,.1);
  transition:all .2s ease;
}
.gro-share:hover{
  filter:brightness(1.1);
  transform:translateY(-1px);
}
.gro-share::before{
  content:"📤";
  margin-right:4px;
}
/* Wrapper centreert het kind */
.modal-wrap{
  position: fixed;
  inset: 0;
  display: none;            /* JS of aria opent 'm */
  place-items: center;
  z-index: 2100;
  pointer-events: none;
}
.modal-wrap[aria-hidden="false"],
.modal-wrap.is-open{
  display: grid;
  pointer-events: auto;
}

/* Scrim onder de modal */
html[data-modal-open="1"] #berichtScrim,
#berichtScrim.is-open{ display:block; }

/* ===== Scoped fix: Bericht-modal ===== */
#berichtModal > .modal-card{
  display: flex;
  flex-direction: column;
  width: min(480px, 92vw);
  max-height: min(62vh, 700px);
  overflow: hidden;                 /* scroll in body, niet in de wrapper */
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  box-shadow: 0 24px 80px rgba(0,0,0,.35);
  pointer-events: auto;             /* content blijft klikbaar */
}

#berichtModal .modal-head{
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px;
  font-weight: 800;
  border-bottom: 1px solid #e5e7eb;
}

#berichtModal .modal-body{
  padding: 16px;
  overflow: auto;                   /* eigen scroll */
  max-height: calc(82vh - 14px - 48px - 50px); /* vh - head - margins - foot approx */
}

#berichtModal .modal-foot{
  padding: 12px 16px;
  border-top: 1px solid #e5e7eb;
  display: flex; gap: 8px; justify-content: flex-end;
}

/* Form consistency binnen deze modal */
#berichtModal .form-label{ font-weight: 700; margin-bottom: .35rem; }
#berichtModal .form-control,
#berichtModal .form-select,
#berichtModal textarea{
  width: 100%;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 10px 12px;
  background: #fff;
}
#berichtModal textarea{ min-height: 96px; resize: vertical; }

/* Radio’s rijtje */
#berichtModal .d-flex.gap-3{ column-gap: 1rem; row-gap: .5rem; flex-wrap: wrap; }

/* Utility binnen deze modal */
#berichtModal .hide{ display: none !important; }

/* Donker thema (optioneel) */
:root[data-theme="dark"] #berichtModal > .modal-card{
  background:#0b1220; border-color:#1f2937; color:#e6edf5;
}
:root[data-theme="dark"] #berichtModal .modal-head{ border-bottom-color:#1f2937; }
:root[data-theme="dark"] #berichtModal .modal-foot{ border-top-color:#1f2937; }
:root[data-theme="dark"] #berichtModal .form-control,
:root[data-theme="dark"] #berichtModal .form-select,
:root[data-theme="dark"] #berichtModal textarea{
  background:#0f172a; border-color:#1f2937; color:#e6edf5;
}

/* Klein scherm: iets vriendelijker */
@media (max-width: 480px){
  #berichtModal > .modal-card{ width: min(96vw, 560px); border-radius: 14px; }
  #berichtModal .modal-body{ padding: 14px; }
}
.modal-body {
  overflow-y: auto;          /* zorgt dat scrollen kan */
  -ms-overflow-style: none;  /* verbergt scrollbar in IE/Edge */
  scrollbar-width: none;     /* verbergt scrollbar in Firefox */
}
.modal-body::-webkit-scrollbar {
  display: none;             /* verbergt scrollbar in Chrome/Safari */
}