/* ==========================================================================
   LexVidi — base styles
   Copied 1:1 from lexvici-mockup-v4.html (the definitive design reference).
   Do not restyle existing rules without discussing it first — only add to
   the "extensions" section at the bottom for functionality the mockup
   didn't cover yet (forms, drag-and-drop, empty states, login screen).
   ========================================================================== */

:root{
  --ink:#1a1917;
  --paper:#ffffff;
  --stone:#f7f6f4;
  --line:#e8e6e2;
  --accent:#FF7663;
  --accent-tint:#fff2f0;
  --muted:#7a7774;
  --ok:#00be8c;
  --wait:#5BA8D4;
  --blocked:#d9534f;
  --gold:#F5C842;
  --red:#e2574c;
  --amber:#f0a93c;
  --green:#4caf7d;
}
*{box-sizing:border-box;}
body{
  margin:0;
  background:var(--stone);
  color:var(--ink);
  font-family:'DM Sans',sans-serif;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.brand{font-family:'Poppins',sans-serif;}

.topbar{background:var(--accent); height:90px; display:flex; align-items:center; position:sticky; top:0; z-index:40;}
.topbar-inner{
  max-width:1280px; margin:0 auto; width:100%;
  display:flex; align-items:center; padding:0 24px; gap:16px; flex-wrap:wrap;
}
.brand{
  font-weight:800; font-size:1.3rem; letter-spacing:0.02em; text-transform:uppercase;
  color:#fff; display:flex; align-items:center; gap:8px; flex-shrink:0;
}
.brand .dot{width:9px;height:9px;border-radius:50%;background:#fff;display:inline-block;}

.mobile-menu-btn{
  display:none; background:none; border:none; color:#fff; font-size:1.5rem;
  cursor:pointer; margin-left:auto; padding:4px 6px; line-height:1;
}

/* header-right: mirrors Lex Dex #header-right exactly — margin-left:auto, flat pipe-separated row */
.header-right{ margin-left:auto; display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.version-label{ font-size:0.68rem; color:rgba(255,255,255,0.4); font-weight:400; margin-right:6px; }

.header-link{
  background:none; border:none; padding:0;
  font-size:0.95rem; font-weight:600; cursor:pointer;
  font-family:'DM Sans',sans-serif; color:#fff;
  transition:opacity 0.15s; letter-spacing:0.01em; text-decoration:none; position:relative;
}
.header-link:hover{opacity:0.65;}
.header-link.active{
  text-decoration:underline; text-decoration-color:#fff;
  text-decoration-thickness:2px; text-underline-offset:4px;
}
.header-link + .header-link::before{
  content:'|'; margin:0 12px; opacity:0.35; font-weight:300;
}
.header-link.utility{ font-size:0.78rem; opacity:0.5; font-weight:400; }
.header-link.utility:hover{ opacity:0.8; }

.shell{max-width:1280px; margin:0 auto; padding:32px 28px 80px;}
.view{display:none;}
.view.active{display:block;}

.page-head{margin-bottom:24px;}
.page-head h1{font-size:1.6rem; font-weight:700; margin:0 0 4px;}
.page-head p{margin:0; color:var(--muted); font-size:0.92rem;}

/* ---------- priority stoplight ---------- */
.prio{
  width:9px; height:9px; border-radius:50%; flex-shrink:0; margin-top:4px;
  box-shadow:0 0 0 2px #fff;
}
.prio-rood{background:var(--red);}
.prio-oranje{background:var(--amber);}
.prio-groen{background:var(--green);}
.recur-icon{
  font-size:0.72rem; color:var(--muted); margin-left:5px;
}
.mail-link{
  font-size:0.72rem; color:var(--muted); text-decoration:none; margin-left:6px;
  border-bottom:1px dotted var(--muted);
}
.mail-link:hover{color:var(--accent); border-color:var(--accent);}

/* ---------- year/quarter goals strip ---------- */
.year-strip{
  display:flex; gap:14px; overflow-x:auto; margin-bottom:26px; padding-bottom:4px;
}
.year-card{
  background:var(--paper); border:1px solid var(--line); border-radius:14px;
  padding:16px 18px; min-width:230px; flex-shrink:0;
  border-top:3px solid var(--accent);
}
.year-card .yc-period{
  font-size:0.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em;
  color:var(--accent); margin-bottom:6px;
}
.year-card h4{margin:0 0 8px; font-size:0.92rem; font-family:'Poppins',sans-serif; font-weight:700;}
.yc-progress-track{background:var(--line); height:6px; border-radius:4px; overflow:hidden; margin-bottom:6px;}
.yc-progress-fill{background:var(--accent); height:100%;}
.yc-note{font-size:0.75rem; color:var(--muted);}

/* ---------- home grid ---------- */
.home-grid{display:grid; grid-template-columns:1fr 340px; gap:28px; align-items:start;}
.projects-col{display:flex; flex-direction:column; gap:18px;}

.proj-card{
  background:var(--paper); border:1px solid var(--line); border-radius:14px;
  padding:20px 22px; position:relative; overflow:hidden;
}
.proj-card::before{content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--dot,var(--accent));}
.proj-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:12px;}
.proj-title-wrap{display:flex; align-items:center; gap:10px;}
.proj-dot{width:10px;height:10px;border-radius:50%; background:var(--dot,var(--accent)); flex-shrink:0;}
.proj-title{font-family:'Poppins',sans-serif; font-weight:700; font-size:1.05rem;}
.status-badge{
  font-size:0.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
  padding:4px 10px; border-radius:20px; color:#fff;
}
.status-bezig{background:var(--wait);}
.status-geblokkeerd{background:var(--blocked);}
.status-klaar{background:var(--ok);}

.goal-line{display:flex; align-items:center; gap:8px; font-size:0.87rem; padding:6px 0; border-top:1px solid var(--line);}
.goal-line:first-of-type{border-top:none;}
.goal-status-dot{width:6px;height:6px;border-radius:50%; flex-shrink:0;}
.gs-bezig{background:var(--wait);}
.gs-wacht{background:var(--gold);}
.goal-line .goal-name{flex:1; font-weight:500;}
.goal-count{color:var(--muted); font-size:0.78rem;}

.proposal{
  margin-top:10px; border:1.5px dashed var(--accent); background:var(--accent-tint);
  border-radius:10px; padding:10px 12px; display:flex; align-items:flex-start; gap:10px; font-size:0.83rem;
}
.proposal .p-icon{
  font-size:0.68rem; font-weight:800; color:var(--accent); text-transform:uppercase; letter-spacing:.03em;
  background:#fff; border:1px solid var(--accent); border-radius:6px; padding:2px 6px; flex-shrink:0; margin-top:1px;
}
.proposal .p-body{flex:1; line-height:1.4;}
.proposal .p-actions{display:flex; gap:6px; flex-shrink:0;}
.p-btn{width:26px; height:26px; border-radius:50%; border:none; cursor:pointer; font-size:0.85rem; font-weight:700; display:flex; align-items:center; justify-content:center;}
.p-yes{background:var(--ok); color:#fff;}
.p-no{background:#fff; color:var(--muted); border:1px solid var(--line) !important;}

.proj-footer{margin-top:14px; padding-top:12px; border-top:1px solid var(--line); font-size:0.78rem; color:var(--muted); display:flex; justify-content:space-between;}
.proj-footer a{color:var(--accent); text-decoration:none; font-weight:600;}

.time-col{background:var(--paper); border:1px solid var(--line); border-radius:14px; padding:20px; position:sticky; top:84px;}
.time-col h2{font-size:1rem; margin:0 0 14px;}
.time-group{margin-bottom:18px;}
.time-group:last-child{margin-bottom:0;}
.time-group h3{
  font-family:'Inter',sans-serif; font-size:0.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em;
  color:var(--muted); margin:0 0 8px; display:flex; align-items:center; gap:6px;
}
.time-group h3::after{content:""; flex:1; height:1px; background:var(--line);}
.todo-item{display:flex; align-items:flex-start; gap:9px; padding:7px 0; font-size:0.86rem;}
.todo-item input[type=checkbox]{margin-top:3px; width:15px; height:15px; accent-color:var(--accent); flex-shrink:0; cursor:pointer;}
.todo-item .todo-main{flex:1; line-height:1.35;}
.todo-item .todo-tag{display:inline-block; font-size:0.68rem; font-weight:700; color:var(--dot,var(--accent)); margin-top:2px;}

/* ---------- project view ---------- */
.proj-header{
  background:var(--paper); border:1px solid var(--line); border-radius:14px; padding:22px 26px; margin-bottom:22px;
  display:flex; align-items:center; gap:14px; border-left:5px solid var(--wait);
}
.proj-header .proj-dot{width:14px;height:14px;}
.proj-header-text{flex:1;}
.proj-header-text h1{font-size:1.4rem; margin:0 0 4px;}
.proj-header-text p{margin:0; color:var(--muted); font-size:0.88rem;}
.notes-btn{
  background:none; border:1px solid var(--line); border-radius:20px;
  padding:6px 16px; font-size:0.8rem; font-weight:600; cursor:pointer;
  font-family:'DM Sans',sans-serif; color:var(--muted);
  transition:border-color 0.15s, color 0.15s;
  display:flex; align-items:center; gap:6px; white-space:nowrap;
}
.notes-btn:hover{border-color:var(--accent); color:var(--accent);}

/* ---------- add buttons: mirrors Lex Dex btn-ghost / btn-panel ---------- */
.add-btn{
  background:none; border:1px solid var(--line); border-radius:20px;
  padding:6px 16px; font-size:0.8rem; font-weight:600; cursor:pointer;
  font-family:'DM Sans',sans-serif; color:var(--muted);
  transition:border-color 0.15s, color 0.15s;
}
.add-btn:hover{border-color:var(--accent); color:var(--accent);}
.add-btn-inline{
  background:none; border:none; color:var(--accent); font-weight:600; font-size:0.8rem;
  cursor:pointer; padding:4px 0; font-family:'DM Sans',sans-serif;
  opacity:0.9; transition:opacity .15s;
}
.add-btn-inline:hover{opacity:1; text-decoration:underline;}
.add-project-card{
  background:none; border:1.5px dashed var(--line); border-radius:14px;
  padding:18px 22px; color:var(--muted); font-family:'DM Sans',sans-serif; font-weight:600; font-size:0.9rem;
  display:flex; align-items:center; justify-content:center; gap:8px; cursor:pointer;
  transition:all .15s; min-height:60px;
}
.add-project-card:hover{border-color:var(--accent); color:var(--accent); background:var(--accent-tint);}
.year-card.add-year{
  display:flex; align-items:center; justify-content:center; min-width:150px;
  border:1.5px dashed var(--line); border-top:1.5px dashed var(--line); background:none;
  color:var(--muted); font-family:'DM Sans',sans-serif; font-weight:600; font-size:0.85rem; cursor:pointer; gap:6px;
}
.year-card.add-year:hover{border-color:var(--accent); color:var(--accent);}
.page-head-row{display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;}
.add-subtask-row{
  display:flex; align-items:center; gap:8px; margin:6px 0 0 25px; font-size:0.8rem;
}

.goal-card{background:var(--paper); border:1px solid var(--line); border-radius:14px; padding:20px 24px; margin-bottom:16px;}
.goal-card-head{display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:8px; gap:10px;}
.goal-card-title{display:flex; align-items:center; gap:10px; flex-wrap:wrap;}
.goal-card-title h3{font-size:1.02rem; margin:0;}
.goal-head-right{display:flex; align-items:center; gap:10px; flex-shrink:0;}
.goal-deadline{font-size:0.78rem; color:var(--muted); white-space:nowrap;}
.goal-desc{font-size:0.85rem; color:var(--muted); line-height:1.5; margin:0 0 14px; padding-bottom:14px; border-bottom:1px solid var(--line);}

.action-item{padding:9px 0; border-top:1px solid var(--line); font-size:0.9rem;}
.action-item:first-of-type{border-top:none;}
.action-row{display:flex; align-items:flex-start; gap:10px;}
.action-row input[type=checkbox]{margin-top:3px; width:16px; height:16px; accent-color:var(--accent); cursor:pointer; flex-shrink:0;}
.action-row .a-main{flex:1; display:flex; align-items:flex-start; gap:6px; flex-wrap:wrap;}
.a-text{flex:1; min-width:160px;}
.action-row .a-deadline{font-size:0.76rem; color:var(--muted); white-space:nowrap;}
.action-item.done .a-text{text-decoration:line-through; color:var(--muted);}
.action-item.done{opacity:0.6;}

.subtasks{margin:8px 0 0 25px; padding-left:14px; border-left:2px solid var(--line);}
.subtask-item{display:flex; align-items:center; gap:8px; font-size:0.82rem; padding:4px 0; color:var(--ink);}
.subtask-item input{width:13px; height:13px; accent-color:var(--accent);}
.subtask-item.done{color:var(--muted); text-decoration:line-through;}
.subtask-progress{font-size:0.72rem; color:var(--muted); margin-left:25px; margin-top:2px;}

.goal-card.collapsed{
  padding:12px 24px; display:flex; align-items:center; justify-content:space-between;
  background:var(--stone); border-style:dashed;
}
.goal-card.collapsed .goal-card-title{gap:10px;}
.goal-card.collapsed .status-badge{background:var(--ok);}
.close-x{background:none; border:none; color:var(--muted); font-size:1.1rem; cursor:pointer; width:28px; height:28px; border-radius:50%;}
.close-x:hover{background:var(--line);}

.general-block h2{margin:28px 0 12px; color:var(--muted); font-weight:700; text-transform:uppercase; font-size:0.78rem; letter-spacing:.05em;}

/* ---------- notes modal (matches Lex Dex #editor-panel) ---------- */
.modal-overlay{
  display:none; position:fixed; inset:0; background:rgba(0,0,0,0.35); z-index:100;
  align-items:center; justify-content:center; padding:30px;
}
.modal-overlay.open{display:flex;}
.notes-modal{
  background:#fff; width:100%; max-width:640px; height:85vh; max-height:820px;
  border-radius:10px; box-shadow:0 20px 60px rgba(0,0,0,0.25);
  display:flex; flex-direction:column; overflow:hidden;
}
.notes-modal-head{
  background:var(--accent); padding:0 18px; height:48px; flex-shrink:0;
  display:flex; align-items:center; gap:10px;
}
.notes-modal-head h3{
  color:#fff; font-family:'Poppins',sans-serif; font-size:0.85rem; font-weight:700;
  letter-spacing:0.04em; text-transform:uppercase; margin:0; flex:1;
}
.notes-modal-head .nm-sub{display:none;}
.modal-close{
  background:none; border:none; color:#fff; font-size:0.85rem; cursor:pointer;
  font-family:'DM Sans',sans-serif; font-weight:600; opacity:0.85; transition:opacity .15s;
  padding:0;
}
.modal-close:hover{opacity:1;}
.notes-modal-toolbar{
  display:flex; gap:2px; padding:6px 10px; border-bottom:1px solid var(--line); flex-shrink:0;
}
.notes-modal-toolbar button{
  background:none; border:1px solid transparent; border-radius:5px; padding:3px 8px;
  font-size:0.82rem; cursor:pointer; color:var(--ink); font-family:'DM Sans',sans-serif;
  min-width:28px; text-align:center; transition:background 0.1s;
}
.notes-modal-toolbar button:hover{background:var(--stone); border-color:var(--line);}
.notes-modal-body{
  flex:1; overflow-y:auto; padding:20px; font-family:'DM Sans',sans-serif;
  font-size:0.9rem; line-height:1.8; color:var(--ink); outline:none;
}
.notes-modal-body:empty::before{content:"Begin hier met schrijven…"; color:#ccc; pointer-events:none;}
.notes-modal-foot{
  padding:8px 12px; border-top:1px solid var(--line); flex-shrink:0;
  font-size:0.72rem; color:var(--muted); text-align:right;
}

/* ---------- history view ---------- */
.history-day{margin-bottom:22px;}
.history-day h3{font-size:0.82rem; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; margin:0 0 10px;}
.history-entry{
  display:flex; align-items:flex-start; gap:12px; background:var(--paper); border:1px solid var(--line);
  border-radius:10px; padding:12px 16px; margin-bottom:8px; font-size:0.88rem;
}
.hist-icon{width:22px; height:22px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:0.72rem; flex-shrink:0; color:#fff; font-weight:700;}
.hist-done{background:var(--ok);}
.hist-approved{background:var(--wait);}
.hist-rejected{background:var(--muted);}
.hist-main{flex:1;}
.hist-tag{font-size:0.72rem; color:var(--muted); margin-top:2px;}

/* ---------- instructions view ---------- */
.instr-item{
  background:var(--paper); border:1px solid var(--line); border-radius:12px; padding:16px 18px;
  margin-bottom:12px; display:flex; align-items:flex-start; justify-content:space-between; gap:14px;
}
.instr-main{flex:1;}
.instr-context{font-size:0.76rem; color:var(--muted); margin-bottom:4px;}
.instr-text{font-size:0.9rem;}
.instr-actions{display:flex; gap:6px; flex-shrink:0;}
.instr-actions button{
  background:var(--stone); border:1px solid var(--line); border-radius:8px; padding:6px 10px;
  font-size:0.76rem; cursor:pointer; color:var(--ink); font-family:'Inter',sans-serif;
}
.instr-actions button:hover{background:var(--accent-tint); border-color:var(--accent); color:var(--accent);}

@media (max-width: 900px){
  .home-grid{grid-template-columns:1fr;}
  .time-col{position:static; order:1;}
  .projects-col{order:2;}
  .notes-modal-body{padding:24px 22px;}
  .topbar{height:auto; min-height:90px;}
  .topbar-inner{padding:14px 24px;}
}

@media (max-width: 700px){
  .topbar{height:90px; min-height:90px;}
  .topbar-inner{padding:0 20px;}
  .mobile-menu-btn{display:block;}

  .header-right{
    display:none;
    position:fixed; top:90px; left:0; right:0; bottom:0;
    background:var(--accent);
    flex-direction:column; align-items:flex-start; gap:16px;
    padding:22px 24px 24px; overflow-y:auto;
    z-index:55; margin-left:0;
  }
  .header-right.mobile-open{display:flex;}
  .version-label{margin-right:0; order:99;}
  .header-link{font-size:1.05rem;}
  .header-link + .header-link::before{content:none;}
  .header-link.utility{font-size:0.85rem; opacity:0.7;}
  .save-indicator{margin-left:0;}
  .settings-wrap{width:100%;}
  .settings-menu{
    position:static; box-shadow:none; border:none; margin-top:10px;
    width:100%; padding:0; background:rgba(255,255,255,0.97);
  }

  .shell{padding:20px 16px 60px;}
  .page-head h1{font-size:1.35rem;}
  .page-head-row{align-items:flex-start;}

  .year-strip{margin-bottom:20px;}
  .year-card{min-width:200px;}

  .proj-header{
    flex-wrap:wrap; padding:18px 18px; gap:10px;
  }
  .proj-header-text{min-width:100%;}
  .proj-header .notes-btn, .proj-header .add-btn{flex:1; justify-content:center;}

  .goal-card, .proj-card{padding:16px 16px;}
  .goal-card-head{flex-wrap:wrap;}
  .goal-head-right{width:100%; justify-content:space-between;}

  .action-row{flex-wrap:wrap;}
  .action-row .a-deadline{margin-left:25px;}

  .p-btn, .trash-btn{width:32px; height:32px;}

  .notes-modal{
    max-width:100%; width:100%; height:100vh; max-height:100vh; border-radius:0;
  }
  .modal-overlay{padding:0;}

  .home-grid{gap:18px;}
  .time-col{padding:16px;}
}

/* ---------- topbar right cluster: save indicator + settings ---------- */
.topbar-right{display:flex; align-items:center; gap:16px;}
.save-indicator{
  display:flex; align-items:center; gap:2px;
}
.save-indicator .save-pill{
  border-radius:20px; padding:3px 10px; font-size:0.75rem; font-weight:600;
  font-family:'DM Sans',sans-serif; white-space:nowrap; flex-shrink:0;
  background:#2d6a4f; color:#fff; transition:background 0.3s;
}
.save-indicator .save-pill.saving{background:var(--wait);}
.save-indicator .save-pill.error{background:var(--blocked);}
.save-indicator .save-retry{
  background:none; border:none; cursor:pointer; color:rgba(255,255,255,0.75);
  font-size:0.75rem; padding:0 0 0 4px; display:inline;
}
.settings-wrap{position:relative;}
.settings-btn{
  background:none; border:none; color:#fff; cursor:pointer;
  font-size:0.78rem; font-weight:400; opacity:0.5; transition:opacity .15s;
  font-family:'DM Sans',sans-serif; padding:0;
}
.settings-btn:hover{opacity:0.8;}
.settings-menu{
  display:none; position:absolute; right:0; top:calc(100% + 10px);
  background:#fff; border:1px solid var(--line); border-radius:10px;
  box-shadow:0 10px 30px rgba(0,0,0,0.15); min-width:240px; z-index:60;
  padding:6px; font-family:'DM Sans',sans-serif;
}
.settings-menu.open{display:block;}
.settings-section{padding:10px 12px; border-bottom:1px solid var(--line);}
.settings-section:last-child{border-bottom:none;}
.settings-label{font-size:0.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); margin-bottom:6px;}
.settings-row{display:flex; align-items:center; justify-content:space-between; font-size:0.85rem; padding:4px 0;}
.settings-status{display:flex; align-items:center; gap:6px; font-size:0.82rem; color:var(--ink);}
.settings-status .status-dot{width:7px; height:7px; border-radius:50%; background:var(--ok);}
.settings-status .status-dot.off{background:var(--muted);}
.settings-menu-item{
  display:block; width:100%; text-align:left; background:none; border:none;
  padding:8px 12px; font-size:0.85rem; color:var(--ink); cursor:pointer; border-radius:6px;
  font-family:'DM Sans',sans-serif;
}
.settings-menu-item:hover{background:var(--stone);}
.settings-menu-item.danger{color:var(--red);}
.settings-freq{
  font-size:0.82rem; border:1px solid var(--line); border-radius:6px; padding:5px 8px;
  font-family:'DM Sans',sans-serif; color:var(--ink); background:#fff;
}

/* ---------- trash icon replacing hard-delete X ---------- */
.trash-btn{
  background:none; border:none; color:var(--muted); font-size:0.95rem; cursor:pointer;
  width:28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center;
}
.trash-btn:hover{background:var(--line); color:var(--blocked);}

/* ---------- trash view ---------- */
.trash-entry{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  background:var(--paper); border:1px solid var(--line); border-radius:10px;
  padding:12px 16px; margin-bottom:8px; font-size:0.88rem;
}
.trash-entry .t-main{flex:1;}
.trash-entry .t-meta{font-size:0.74rem; color:var(--muted); margin-top:2px;}
.trash-entry .t-actions{display:flex; gap:8px;}
.trash-entry .t-actions button{
  background:none; border:1px solid var(--line); border-radius:16px; padding:5px 12px;
  font-size:0.76rem; cursor:pointer; font-family:'DM Sans',sans-serif; color:var(--ink);
}
.trash-entry .t-actions button:hover{border-color:var(--accent); color:var(--accent);}
.trash-entry .t-actions button.danger:hover{border-color:var(--blocked); color:var(--blocked);}

/* ==========================================================================
   Extensions — new functionality the mockup didn't cover. Same tokens,
   same component language, applied to things the static mockup didn't need.
   ========================================================================== */

/* login screen — full accent background, logo top-left, matches Lex Dex's login page */
.login-shell{min-height:100vh; display:flex; flex-direction:column; background:var(--accent);}
.login-header{padding:28px 32px 8px; flex-shrink:0;}
.login-header-logo{height:60px; display:block;}
@media (max-width: 700px){
  .login-header{padding:20px 20px 4px;}
  .login-header-logo{height:42px;}
}

/* app topbar logo — replaces the plain-text .brand, top-left like Lex Dex */
.app-header-logo{height:44px; display:block; flex-shrink:0;}

/* edit-project modal — per Lex Dex style compendium's "Thema bewerken" pattern */
.edit-modal{background:#fff; border-radius:12px; padding:28px; min-width:340px; max-width:90vw; width:400px;}
.edit-modal-title{font-family:'Poppins',sans-serif; font-size:1.1rem; font-weight:800; margin:0 0 20px;}
.edit-label{
  font-size:0.75rem; font-weight:700; text-transform:uppercase; letter-spacing:0.06em;
  color:var(--muted); display:block; margin-bottom:4px;
}
.edit-input{
  border:1px solid var(--line); border-radius:6px; padding:8px 10px;
  font-size:0.85rem; font-family:'DM Sans',sans-serif; width:100%;
}
.edit-input:focus{outline:none; border-color:var(--accent);}
.swatch-row{display:flex; gap:8px; flex-wrap:wrap; margin-top:4px;}
.swatch{width:20px; height:20px; border-radius:50%; border:2px solid transparent; cursor:pointer; transition:transform 0.1s; padding:0;}
.swatch.selected{border-color:var(--ink); transform:scale(1.15);}
.edit-modal-actions{display:flex; justify-content:flex-end; gap:10px; margin-top:24px;}
.btn-panel{
  background:var(--accent); color:#fff; border:none; border-radius:20px;
  padding:7px 20px; font-size:0.82rem; font-weight:700; cursor:pointer; font-family:'Poppins',sans-serif;
}
.btn-panel:hover{opacity:0.88;}

/* project card reorder arrows */
.reorder-btns{display:flex; flex-direction:column; gap:0; margin-right:2px;}
.reorder-btns.inline{flex-direction:row; gap:1px; margin-right:0;}
.reorder-btn{
  background:none; border:none; color:var(--muted); cursor:pointer; font-size:0.55rem;
  line-height:1; padding:1px 2px; border-radius:3px;
}
.reorder-btn:hover:not(:disabled){color:var(--accent); background:var(--stone);}
.reorder-btn:disabled{opacity:0.25; cursor:default;}
.login-center{flex:1; display:flex; align-items:center; justify-content:center; padding:24px;}
.login-card{
  background:var(--paper); border:none; border-radius:16px;
  box-shadow:0 20px 50px rgba(0,0,0,0.18);
  padding:40px 36px; max-width:380px; width:100%; text-align:center;
}
.login-card h1{font-size:1.3rem; margin:0 0 8px;}
.login-card p{color:var(--muted); font-size:0.88rem; margin:0 0 24px; line-height:1.5;}
#googleBtn{display:flex; justify-content:center;}
.login-error{
  margin-top:16px; color:var(--blocked); font-size:0.85rem; display:none;
}
.login-error.show{display:block;}

/* generic form modal, reuses .modal-overlay / .notes-modal-head look */
.form-modal{max-width:480px; height:auto; max-height:90vh;}
.form-modal .form-body{padding:22px 24px; overflow-y:auto;}
.form-field{margin-bottom:16px;}
.form-field:last-child{margin-bottom:0;}
.form-field label{display:block; font-size:0.78rem; font-weight:600; color:var(--muted); margin-bottom:6px;}
.form-field input[type=text],
.form-field input[type=date],
.form-field select,
.form-field textarea{
  width:100%; border:1px solid var(--line); border-radius:8px; padding:9px 12px;
  font-family:'DM Sans',sans-serif; font-size:0.9rem; color:var(--ink); background:#fff;
}
.form-field textarea{resize:vertical; min-height:70px;}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus{
  outline:none; border-color:var(--accent);
}
.form-prio-row{display:flex; gap:10px;}
.form-prio-row label{
  display:flex; align-items:center; gap:6px; font-size:0.85rem; font-weight:400; color:var(--ink);
  border:1px solid var(--line); border-radius:20px; padding:6px 12px; cursor:pointer;
}
.form-prio-row input{margin:0;}
.form-actions{display:flex; justify-content:flex-end; gap:10px; padding:14px 24px; border-top:1px solid var(--line);}
.btn-primary{
  background:var(--accent); color:#fff; border:none; border-radius:20px;
  padding:8px 20px; font-size:0.85rem; font-weight:600; cursor:pointer; font-family:'DM Sans',sans-serif;
}
.btn-primary:hover{opacity:0.9;}
.btn-primary:disabled{opacity:0.5; cursor:not-allowed;}
.btn-secondary{
  background:none; color:var(--muted); border:1px solid var(--line); border-radius:20px;
  padding:8px 20px; font-size:0.85rem; font-weight:600; cursor:pointer; font-family:'DM Sans',sans-serif;
}
.btn-secondary:hover{border-color:var(--accent); color:var(--accent);}

/* drag-and-drop for todo items between tijdvak groups */
.time-group.drag-over{background:var(--accent-tint); outline:1.5px dashed var(--accent); border-radius:8px;}
.todo-item[draggable=true]{cursor:grab;}
.todo-item.dragging{opacity:0.4;}
.doorgeschoven-flag{
  display:inline-block; width:0; height:0; border-left:5px solid transparent;
  border-right:5px solid transparent; border-bottom:7px solid var(--amber);
  margin-left:5px; vertical-align:middle;
}

/* empty states */
.empty-state{
  text-align:center; padding:60px 24px; color:var(--muted);
}
.empty-state h3{color:var(--ink); font-size:1.1rem; margin:0 0 8px;}
.empty-state p{margin:0 0 20px; font-size:0.9rem;}

/* mail-check loading indicator */
.mailcheck-banner{
  display:flex; align-items:center; gap:10px; background:var(--accent-tint);
  border:1px solid var(--accent); border-radius:10px; padding:10px 16px;
  font-size:0.85rem; margin-bottom:18px;
}
.mailcheck-spinner{
  width:14px; height:14px; border-radius:50%; border:2px solid var(--accent);
  border-top-color:transparent; animation:spin 0.7s linear infinite; flex-shrink:0;
}
@keyframes spin{to{transform:rotate(360deg);}}

.session-expired-banner{
  background:var(--blocked); color:#fff; padding:10px 16px; text-align:center; font-size:0.88rem;
}
.session-expired-banner a{color:#fff; font-weight:700;}

/* ---------- debug log panel ---------- */
#log-panel{
  display:none; position:fixed; right:16px; bottom:16px; width:420px; max-width:calc(100vw - 32px);
  height:360px; max-height:60vh; background:#1a1917; color:#e8e6e2; border-radius:10px;
  box-shadow:0 20px 50px rgba(0,0,0,0.4); z-index:200; flex-direction:column; overflow:hidden;
  font-family:'DM Sans',sans-serif;
}
#log-panel.open{display:flex;}
.log-panel-head{
  background:#000; padding:8px 12px; display:flex; align-items:center; justify-content:space-between;
  font-size:0.78rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; flex-shrink:0;
}
.log-panel-head button{
  background:none; border:none; color:#e8e6e2; cursor:pointer; font-size:0.9rem; opacity:0.7; padding:0;
}
.log-panel-head button:hover{opacity:1;}
.log-panel-filters{display:flex; gap:4px; padding:6px 8px; flex-wrap:wrap; flex-shrink:0; border-bottom:1px solid #333;}
.log-panel-filters button{
  background:#2a2826; border:1px solid #3a3836; color:#e8e6e2; border-radius:12px;
  padding:3px 10px; font-size:0.7rem; cursor:pointer; font-family:'DM Sans',sans-serif;
}
.log-panel-filters button.active{background:var(--accent); border-color:var(--accent); color:#fff;}
.log-panel-list{flex:1; overflow-y:auto; padding:6px 8px; font-family:'SF Mono',Menlo,monospace; font-size:0.72rem;}
.log-entry{padding:4px 2px; border-bottom:1px solid #2a2826; display:flex; gap:6px; align-items:baseline;}
.log-entry .log-ts{color:#7a7774; flex-shrink:0;}
.log-entry .log-cat{color:var(--accent); flex-shrink:0; font-weight:700; min-width:44px;}
.log-entry .log-text{word-break:break-word; white-space:pre-wrap;}
.log-entry.log-warn .log-text{color:var(--gold);}
.log-entry.log-error .log-text{color:#ff8a80;}
.log-panel-actions{display:flex; gap:8px; padding:6px 8px; border-top:1px solid #333; flex-shrink:0;}
.log-panel-actions button{
  background:#2a2826; border:1px solid #3a3836; color:#e8e6e2; border-radius:14px;
  padding:4px 12px; font-size:0.72rem; cursor:pointer; font-family:'DM Sans',sans-serif;
}
.log-panel-actions button:hover{border-color:var(--accent);}

@media (max-width: 700px){
  #log-panel{right:8px; left:8px; width:auto; bottom:8px;}
}