/* ==========================================================================
   Doortje web-app — warme, rustige "met karakter"-richting.
   Alleen de visuele laag; functionaliteit, ID's en data-model onaangeroerd.
   Thema: body.light = crème (primair). body zonder .light = warme donkere variant.
   ========================================================================== */

/* ── Tokens (licht/crème = default) ── */
body{
  --paper:#FAF4EC; --surface:#FFFFFF; --surface-done:#FBF7F0; --line:#ECE2D5;
  --text:#3B3230; --text-soft:#7A6F68; --muted:#8B7F79; --faint:#A89A8F;
  --coral:#E8674A; --coral-2:#F08A6D; --coral-bg:#FDECE7; --coral-text:#B06A52;
  --danger:#D9583C;
  --amber:#E8B84A; --amber-line:#D9B877; --amber-text:#B58A2A;
  --green:#3F9B70;
  --cat-werk:#5B7FCE;      --cat-werk-bg:#EAF1FD;
  --cat-gezin:#C65685;     --cat-gezin-bg:#FBE8F0;
  --cat-gez:#3F9B70;       --cat-gez-bg:#E4F4EB;
  --cat-bood:#C98A2E;      --cat-bood-bg:#FBF1DC;
  --cat-neutral:#8B7F79;   --cat-neutral-bg:#F1EBE1;
  --card-shadow:0 8px 20px -15px rgba(120,80,40,.35);
  --fab-shadow:0 12px 24px -10px rgba(232,103,74,.9);
  --serif:"Instrument Serif",Georgia,"Times New Roman",serif;
  --sans:"Figtree",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --r-card:20px; --r-input:14px; --r-btn:14px;
}
/* ── Warme donkere variant ── */
body:not(.light){
  --paper:#211B18; --surface:#2C2521; --surface-done:#27201C; --line:#443A33;
  --text:#F3E9DE; --text-soft:#C6B7AB; --muted:#A89889; --faint:#837265;
  --coral:#F08A6D; --coral-2:#F5A184; --coral-bg:#3A2620;
  --coral-text:#EBA88F; --danger:#EE6A4C;
  --amber:#E8B84A; --amber-line:#8A6F36; --amber-text:#E0B562;
  --green:#59C08D;
  --cat-werk:#9CB6EE; --cat-werk-bg:#22304A;
  --cat-gezin:#E58FB6; --cat-gezin-bg:#43263A;
  --cat-gez:#7BD3A6; --cat-gez-bg:#1F3B2D;
  --cat-bood:#E5B872; --cat-bood-bg:#3D3320;
  --cat-neutral:#B6A89C; --cat-neutral-bg:#352D28;
  --card-shadow:0 10px 26px -18px rgba(0,0,0,.7);
}

*{box-sizing:border-box;}
html,body{margin:0; padding:0;}
body{
  background:var(--paper); color:var(--text);
  font-family:var(--sans); font-size:16px; line-height:1.5;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
a{color:var(--coral-text); text-decoration:none;}
button{font-family:inherit; cursor:pointer;}
h1,h2,h3{margin:0; font-weight:600;}
:focus-visible{outline:2px solid var(--coral); outline-offset:2px; border-radius:6px;}
.meta{color:var(--muted); font-size:.8rem;}

/* ── Login ── */
#login-screen{min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px;}
.login-card{
  background:var(--surface); border:1px solid var(--line); border-radius:28px;
  padding:44px 40px; text-align:center; max-width:360px; width:100%; box-shadow:var(--card-shadow);
}
.logo-block{display:flex; flex-direction:column; align-items:center; gap:12px;}
.logo-mark{
  width:64px; height:64px; border-radius:50%; display:grid; place-items:center;
  font-family:var(--serif); font-size:2.2rem; color:#fff;
  background:linear-gradient(135deg,var(--coral-2),var(--coral)); box-shadow:var(--fab-shadow);
}
.logo-word{font-family:var(--serif); font-size:2rem; letter-spacing:.01em; text-transform:none;}
.login-tagline{color:var(--muted); font-size:.95rem; margin:14px 0 26px;}
#login-button{
  width:100%; padding:14px 18px; border:none; border-radius:var(--r-btn);
  background:linear-gradient(135deg,var(--coral-2),var(--coral)); color:#fff;
  font-size:1rem; font-weight:600; box-shadow:var(--fab-shadow);
  transition:transform .15s ease, filter .15s ease;
}
#login-button:hover{transform:translateY(-1px); filter:brightness(1.03);}

/* ── App shell (mobiel = één kolom) ── */
#app{max-width:760px; margin:0 auto; padding:0 16px 120px;}
.side-brand{display:none;}

/* ── Header ── */
.masthead{display:flex; align-items:flex-start; justify-content:space-between; gap:16px; padding:22px 2px 16px;}
.mast-date{font-size:.82rem; font-weight:600; color:var(--coral-text); text-transform:none; letter-spacing:.01em;}
.mast-hello{font-family:var(--serif); font-weight:400; font-size:2.4rem; line-height:1.05; margin-top:2px; letter-spacing:.005em;}
.mast-tools{display:flex; align-items:center; gap:8px;}
.mast-counter{display:none;}
.mast-tool{
  width:38px; height:38px; border-radius:50%; border:1px solid var(--line);
  background:var(--surface); color:var(--text-soft); font-size:1rem;
  display:grid; place-items:center; transition:border-color .2s, color .2s, background .2s;
}
.mast-tool:hover{color:var(--coral); border-color:var(--coral);}
.mast-avatar{
  width:42px; height:42px; border-radius:50%; display:grid; place-items:center;
  font-family:var(--serif); font-size:1.4rem; color:#fff;
  background:linear-gradient(135deg,var(--coral-2),var(--coral)); box-shadow:var(--fab-shadow);
}

/* ── Tabs (pill-navigatie) ── */
.nav-tabs{
  display:flex; gap:6px; padding:6px; margin:0 0 18px;
  background:var(--surface); border:1px solid var(--line); border-radius:999px;
  overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none;
}
.nav-tabs::-webkit-scrollbar{display:none;}
.nav-tab{
  flex:1 1 auto; display:flex; align-items:center; justify-content:center; gap:8px;
  padding:9px 14px; border:none; background:transparent; border-radius:999px;
  color:var(--muted); font-size:.92rem; font-weight:600; white-space:nowrap;
  transition:background .2s, color .2s;
}
.nav-tab .nt-num{display:none;}
.nav-tab .nt-count{
  font-size:.72rem; font-weight:700; min-width:20px; height:20px; padding:0 6px;
  display:inline-grid; place-items:center; border-radius:999px;
  background:var(--paper); color:var(--muted); font-variant-numeric:tabular-nums;
}
.nav-tab.active{background:var(--coral); color:#fff;}
.nav-tab.active .nt-count{background:rgba(255,255,255,.28); color:#fff;}

/* ── Toolbar ── */
.toolbar{display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-bottom:18px;}
.search-box{
  flex:1 1 200px; min-width:0; padding:11px 15px; font-size:.95rem;
  border:none; border-radius:var(--r-input); background:var(--surface); color:var(--text);
  box-shadow:inset 0 0 0 1.5px var(--line); text-transform:none;
}
.search-box::placeholder{color:var(--faint); text-transform:none; letter-spacing:0;}
.filter-chips{display:flex; flex-wrap:wrap; gap:7px;}
.chip{
  padding:7px 13px; border-radius:999px; border:1px solid var(--line);
  background:var(--surface); color:var(--text-soft); font-size:.85rem; font-weight:500;
  white-space:nowrap; transition:background .2s, color .2s, border-color .2s;
}
.chip:hover{border-color:var(--coral);}
.chip.active{background:var(--text); color:var(--paper); border-color:var(--text);}
.tag-manage-btn,.tag-wipe-btn{
  padding:8px 13px; border-radius:999px; border:1px solid var(--line);
  background:var(--surface); color:var(--text-soft); font-size:.8rem; font-weight:600;
}
.tag-wipe-btn{color:var(--danger); margin-top:8px; width:100%;}
.bulk-actions{display:flex; align-items:center; gap:8px; width:100%; margin-top:4px; font-size:.85rem; color:var(--muted);}
.bulk-actions button{
  padding:7px 12px; border-radius:999px; border:1px solid var(--line);
  background:var(--surface); color:var(--text); font-size:.82rem; font-weight:600;
}
.bulk-done,.bulk-accept{color:var(--green); border-color:var(--green);}
.bulk-delete,.bulk-deny{color:var(--danger); border-color:var(--danger);}

/* ── Secties ── */
.todos-sections{display:block;}
.todos-section{display:none;}
.todos-section.m-active{display:block;}
.section-head{display:flex; align-items:baseline; gap:10px; margin:4px 2px 14px;}
.section-head h2{font-family:var(--serif); font-weight:400; font-size:1.5rem;}
.section-count{color:var(--faint); font-size:.85rem; font-variant-numeric:tabular-nums;}
.notes-list,.rules-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px;}
.empty{
  padding:34px 20px; text-align:center; color:var(--faint); font-size:.95rem;
  background:var(--surface); border:1px dashed var(--line); border-radius:var(--r-card);
  display:flex; flex-direction:column; align-items:center; gap:6px;
}
.empty strong{display:none;}

/* ── Todo-kaart ── */
.note-item{
  position:relative; display:flex; align-items:flex-start; gap:14px;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-card);
  padding:16px 16px 15px; box-shadow:var(--card-shadow); animation:fadeUp .38s ease both;
}
.note-item.prio-1{box-shadow:inset 3px 0 0 var(--coral), var(--card-shadow);}
.note-item.prio-3{box-shadow:inset 3px 0 0 #CDD9EA, var(--card-shadow);}
body:not(.light) .note-item.prio-3{box-shadow:inset 3px 0 0 #4A5A72, var(--card-shadow);}
.note-item.urgent-late{background:var(--coral-bg);}
.note-item.urgent-late.prio-1{box-shadow:inset 3px 0 0 var(--coral), var(--card-shadow);}

.note-checkbox{
  position:absolute; top:10px; right:10px; width:16px; height:16px;
  accent-color:var(--coral); opacity:.35; transition:opacity .2s; margin:0; cursor:pointer;
}
.note-checkbox:hover,.note-checkbox:checked{opacity:1;}

.note-action-toggle{
  flex:0 0 auto; width:26px; height:26px; margin-top:1px; border-radius:50%;
  border:2px solid #CBBFB4; background:transparent; color:transparent;
  display:grid; place-items:center; font-size:.8rem; line-height:1;
  transition:background .2s, border-color .2s, color .2s; cursor:pointer;
}
body:not(.light) .note-action-toggle{border-color:#5F5348;}
.note-action-toggle:hover{border-color:var(--green);}
.note-action-toggle.done{background:var(--green); border-color:var(--green); color:#fff;}
.note-item.waiting .note-action-toggle{border-style:dashed; border-color:var(--amber-line);}

.note-body{flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:7px;}
.note-text{font-size:1.02rem; font-weight:600; line-height:1.35; color:var(--text); cursor:pointer; word-break:break-word;}
.note-item.done .note-text{text-decoration:line-through; color:var(--muted); font-weight:500;}
.note-item.done{background:var(--surface-done);}
.note-desc{font-size:.9rem; color:var(--text-soft); line-height:1.5; cursor:pointer; white-space:pre-wrap;}
.note-desc[data-collapsed="true"]{display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}
.note-link{font-size:.82rem; color:var(--coral-text); font-weight:600; word-break:break-all;}

.note-tags{display:flex; flex-wrap:nowrap; gap:6px; overflow-x:auto; scrollbar-width:none; padding-bottom:1px;}
.note-tags::-webkit-scrollbar{display:none;}
.meta-tag,.meta-person{
  white-space:nowrap; padding:3px 10px; border-radius:999px; font-size:.75rem; font-weight:600;
  background:var(--cat-neutral-bg); color:var(--cat-neutral);
}
.meta-person{color:var(--muted); font-weight:500;}
.meta-tag.cat-werk{background:var(--cat-werk-bg); color:var(--cat-werk);}
.meta-tag.cat-gezin{background:var(--cat-gezin-bg); color:var(--cat-gezin);}
.meta-tag.cat-gezondheid{background:var(--cat-gez-bg); color:var(--cat-gez);}
.meta-tag.cat-boodschappen{background:var(--cat-bood-bg); color:var(--cat-bood);}

.note-footer{display:flex; align-items:center; gap:10px; margin-top:3px;}
.note-meta{
  flex:1 1 auto; min-width:0; display:flex; flex-wrap:wrap; gap:5px 12px;
  font-size:.78rem; color:var(--muted); font-weight:500;
}
.meta-due.overdue{color:var(--danger); font-weight:700;}
.meta-waiting{color:var(--amber-text); font-weight:600;}
.note-actions{display:flex; align-items:center; gap:2px; flex:0 0 auto;}
.note-icon-btn{
  width:32px; height:32px; border:none; background:transparent; border-radius:10px;
  font-size:.95rem; display:grid; place-items:center; color:var(--faint);
  transition:background .2s, transform .1s;
}
.note-icon-btn:hover{background:var(--paper); transform:translateY(-1px);}

/* ── FAB-rail (mobiele zwevende koraal-pill) ── */
.fab-rail{
  position:fixed; left:0; right:0; bottom:0; z-index:40;
  display:flex; align-items:center; justify-content:flex-end; gap:14px;
  padding:14px 18px calc(14px + env(safe-area-inset-bottom));
  background:linear-gradient(to top,var(--paper) 62%,transparent); pointer-events:none;
}
.fab-info{display:none;}
.fab{
  pointer-events:auto; display:inline-flex; align-items:center; gap:8px;
  padding:14px 22px; border:none; border-radius:999px; color:#fff; font-size:1rem; font-weight:700;
  background:linear-gradient(135deg,var(--coral-2),var(--coral)); box-shadow:var(--fab-shadow);
  transition:transform .15s ease, filter .15s ease;
}
.fab:hover{transform:translateY(-2px);}
.fab .plus{font-size:1.25rem; line-height:1;}

/* ── Colophon / account ── */
.colophon{margin-top:26px; padding-top:16px; border-top:1px solid var(--line);}
.user-bar{color:var(--muted); font-size:.82rem;}
.user-bar a{color:var(--coral-text); font-weight:600;}

/* ── Regels-overlay ── */
.overlay-bg{position:fixed; inset:0; z-index:60; background:rgba(40,26,16,.42); display:none; align-items:stretch; justify-content:flex-end;}
.overlay-bg.open{display:flex; animation:fade .2s ease;}
.overlay-panel{
  width:min(520px,100%); background:var(--paper); overflow-y:auto;
  padding:22px 22px calc(30px + env(safe-area-inset-bottom));
  box-shadow:-20px 0 50px -30px rgba(0,0,0,.5); animation:slideIn .28s ease;
}
.overlay-head{display:flex; align-items:center; gap:12px; margin-bottom:18px;}
.overlay-head h3{font-family:var(--serif); font-weight:400; font-size:1.7rem;}
.overlay-head .stats{flex:1 1 auto; color:var(--muted); font-size:.8rem;}
.overlay-close{width:38px; height:38px; border-radius:50%; border:1px solid var(--line); background:var(--surface); color:var(--text-soft); font-size:1rem;}
.rules-section{margin-bottom:22px;}
.rules-section summary{list-style:none; cursor:pointer;}
.rules-section summary::-webkit-details-marker{display:none;}
.rules-list li{
  display:flex; align-items:flex-start; gap:12px; background:var(--surface);
  border:1px solid var(--line); border-radius:16px; padding:14px 15px; box-shadow:var(--card-shadow);
  animation:fadeUp .34s ease both;
}
.rules-list li.denied{opacity:.6;}
.rule-checkbox{margin-top:3px; accent-color:var(--coral); width:16px; height:16px; opacity:.4;}
.rule-checkbox:hover,.rule-checkbox:checked{opacity:1;}
.rule-body{flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:6px;}
.rule-text{font-size:.98rem; font-weight:500; line-height:1.4; color:var(--text);}
.rules-list li.accepted::before{
  content:"✓"; flex:0 0 auto; width:24px; height:24px; margin-top:1px; border-radius:50%;
  background:var(--green); color:#fff; display:grid; place-items:center; font-size:.75rem;
}
.rule-actions{display:flex; align-items:center; gap:6px; flex:0 0 auto;}
.accept-btn,.deny-btn,.rule-actions .edit-btn{
  border:1px solid var(--line); background:var(--surface); color:var(--text-soft);
  border-radius:999px; padding:7px 12px; font-size:.82rem; font-weight:600; white-space:nowrap;
}
.accept-btn{color:var(--green); border-color:var(--green);}
.deny-btn{color:var(--coral-text); background:var(--coral-bg); border-color:transparent;}

/* ── Bottom-sheet (add/edit + tag-beheer) ── */
.mobile-sheet-bg{position:fixed; inset:0; z-index:70; background:rgba(40,26,16,.42); display:none; align-items:flex-end; justify-content:center;}
.mobile-sheet-bg.open{display:flex; animation:fade .2s ease;}
.mobile-sheet{
  width:min(560px,100%); max-height:92vh; overflow-y:auto; background:var(--paper);
  border-radius:26px 26px 0 0; padding:10px 20px calc(24px + env(safe-area-inset-bottom));
  box-shadow:0 -20px 50px -30px rgba(0,0,0,.5); animation:sheetUp .3s ease;
}
.handle{width:42px; height:5px; border-radius:999px; background:var(--line); margin:6px auto 14px;}
.mobile-sheet h3{font-family:var(--serif); font-weight:400; font-size:1.7rem; margin-bottom:12px;}
.label-row{font-size:.78rem; font-weight:600; color:var(--muted); margin:16px 0 8px; letter-spacing:.01em;}
.text-row textarea,.text-row input,.tag-manage-add-row input{
  width:100%; padding:12px 14px; font-family:inherit; font-size:.98rem; color:var(--text);
  background:var(--surface); border:none; border-radius:var(--r-input);
  box-shadow:inset 0 0 0 1.5px var(--line); resize:vertical;
}
.text-row textarea::placeholder,.text-row input::placeholder{color:var(--faint);}
.chip-row,.date-row,.prio-row,.status-row{display:flex; flex-wrap:wrap; gap:8px;}
.chip-row .chip,.sheet-date,.sheet-due,.sheet-recur,.sheet-prio,.sheet-status{
  padding:9px 15px; border-radius:999px; border:1px solid var(--line);
  background:var(--surface); color:var(--text-soft); font-size:.88rem; font-weight:600;
}
.sheet-date.active,.sheet-due.active,.sheet-recur.active,.sheet-status.active{background:var(--text); color:var(--paper); border-color:var(--text);}
.sheet-prio.active{background:var(--coral); color:#fff; border-color:var(--coral);}
.chip-row .chip.active{background:var(--coral); color:#fff; border-color:var(--coral);}
input[type="date"]{
  margin-top:8px; padding:11px 14px; border-radius:var(--r-input); border:none;
  box-shadow:inset 0 0 0 1.5px var(--line); background:var(--surface); color:var(--text);
  font-family:inherit; font-size:.95rem;
}
.submit-row{display:flex; gap:10px; margin-top:24px;}
.submit-row .submit,.tag-manage-add-row .submit{
  flex:1 1 auto; padding:14px; border:none; border-radius:var(--r-btn); color:#fff;
  font-size:1rem; font-weight:700; background:linear-gradient(135deg,var(--coral-2),var(--coral)); box-shadow:var(--fab-shadow);
}
.submit-row .cancel{
  flex:0 0 auto; padding:14px 20px; border-radius:var(--r-btn); font-size:1rem; font-weight:600;
  background:var(--surface); color:var(--text-soft); border:1px solid var(--line);
}
.sheet-delete{display:block; width:100%; margin-top:14px; padding:12px; border-radius:var(--r-btn); background:transparent; border:1px solid var(--line); color:var(--danger); font-weight:600;}
.tag-manage-list{display:flex; flex-wrap:wrap; gap:8px;}
.tag-manage-add-row{display:flex; gap:8px; align-items:center;}
.tag-manage-add-row input{flex:1 1 auto;}
.tag-manage-add-row .submit{flex:0 0 auto; width:auto; padding:12px 18px;}

/* ── Animaties ── */
@keyframes fadeUp{from{opacity:0; transform:translateY(14px);} to{opacity:1; transform:none;}}
@keyframes fade{from{opacity:0;} to{opacity:1;}}
@keyframes slideIn{from{transform:translateX(30px); opacity:.4;} to{transform:none; opacity:1;}}
@keyframes sheetUp{from{transform:translateY(30px); opacity:.6;} to{transform:none; opacity:1;}}
@media (prefers-reduced-motion:reduce){ *{animation:none !important;} }

/* ── Desktop (≥900px): vaste zijbalk + 2-koloms kaartraster ── */
@media (min-width:900px){
  #app{
    max-width:1120px; padding:0 0 24px; min-height:100vh; display:grid; gap:0;
    grid-template-columns:272px 1fr;
    grid-template-rows:auto auto 1fr;
    grid-template-areas:
      "brand  header"
      "nav    main"
      "account main";
  }
  .side-brand{grid-area:brand; display:flex; align-items:center; gap:12px; padding:24px 22px 18px; border-right:1px solid var(--line); background:var(--surface);}
  .side-avatar{width:40px; height:40px; border-radius:50%; display:grid; place-items:center; font-family:var(--serif); font-size:1.35rem; color:#fff; background:linear-gradient(135deg,var(--coral-2),var(--coral)); box-shadow:var(--fab-shadow);}
  .side-word{font-family:var(--serif); font-size:1.7rem;}
  .masthead{grid-area:header; padding:26px 32px 20px; margin:0;}
  .mast-avatar{display:none;}
  .nav-tabs{grid-area:nav; flex-direction:column; gap:4px; border:none; border-right:1px solid var(--line); background:var(--surface); border-radius:0; padding:14px; margin:0; overflow:visible;}
  .nav-tab{justify-content:flex-start; border-radius:12px; padding:11px 14px;}
  .colophon{grid-area:account; margin:0; border-top:none; border-right:1px solid var(--line); background:var(--surface); padding:16px 22px calc(20px + env(safe-area-inset-bottom)); display:flex; align-items:flex-end;}
  main.content{grid-area:main; padding:22px 32px 0; overflow-x:hidden;}
  .notes-list{display:grid; grid-template-columns:1fr 1fr; gap:14px; align-items:start;}
  .fab-rail{display:none;}
}