/* Site-specific styles — overrides theme.css */

:root{
  --primary:#5b6abf;
  --primary-dark:#444fa0;
  --accent:#e8913a;
  --bg:#eef1f4;
  --card-bg:#ffffff;
  --text:#22303c;
  --muted:#68788a;
  --border:#d9dfe5;
  --success:#4caf7d;
  --warning:#f2b134;
  --danger:#e0553d;
}

/* ---------- overrides ---------- */
.nav-item:hover{ color:var(--primary-dark); background:#eef0fb; }
.nav-item.active{ color:var(--primary-dark); background:#eef0fb; }
.user-chip form{ margin:0; }

main{ max-width:1200px; margin:0 auto; padding:20px 24px 80px; }

.btn-danger{ color:var(--danger); }
.btn-danger:hover{ border-color:var(--danger); }

.flash-success{ background:#eafaf1; color:#1e7d4f; border-left:3px solid var(--success); }
.flash-error{ background:#fdeceb; color:#b23a2a; border-left:3px solid var(--danger); }
.flash-info{ background:#eef0fb; color:var(--primary-dark); border-left:3px solid var(--primary); }

/* ---------- forms ---------- */
input[type="text"], input[type="email"], input[type="number"], input[type="date"], input[type="time"],
textarea, select{
  width:100%; padding:9px 12px; border:1px solid var(--border); border-radius:6px;
  font-family:inherit; font-size:14px; background:#fff; color:var(--text);
}
input:focus, textarea:focus, select:focus{ outline:none; border-color:var(--primary); box-shadow:0 0 0 3px rgba(91,106,191,.12); }
label{ display:block; font-size:12px; font-weight:700; color:var(--muted); margin-bottom:6px; }

/* ---------- cards ---------- */
.card{ background:var(--card-bg); border:1px solid var(--border); border-radius:8px; padding:20px 24px; margin-bottom:16px; }
.card h2{ font-size:16px; margin:0 0 12px; color:var(--primary-dark); }

/* ---------- empty state ---------- */
.empty-state{ text-align:center; padding:60px 20px; color:var(--muted); }
.empty-state h2{ font-size:18px; margin-bottom:8px; color:var(--text); }

/* ---------- list grid ---------- */
.list-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:12px; margin-bottom:20px; }
.list-card{ text-decoration:none; color:inherit; transition:box-shadow .2s; }
.list-card:hover{ box-shadow:0 2px 8px rgba(0,0,0,.08); }
.list-card h2{ margin-bottom:4px; }
.new-list-form{ display:flex; gap:8px; margin-top:12px; }
.new-list-form input{ flex:1; }

/* ---------- todo items ---------- */
.todo-item{
  display:flex; align-items:center; gap:8px; padding:6px 8px;
  background:var(--card-bg); border:1px solid var(--border); border-radius:6px;
  margin-bottom:4px; transition:box-shadow .15s, opacity .15s;
}
.todo-item:hover{ box-shadow:0 1px 4px rgba(0,0,0,.06); }
.todo-item.dragging{ opacity:.4; }
.todo-item.done .todo-title{ text-decoration:line-through; color:var(--muted); }
.drag-handle{ cursor:grab; color:var(--muted); font-size:14px; user-select:none; line-height:1; }
.drag-handle:active{ cursor:grabbing; }
.todo-check{ width:16px; height:16px; cursor:pointer; flex-shrink:0; accent-color:var(--primary); }
.todo-title{
  flex:1; outline:none; font-size:14px; line-height:1.5; min-height:1.4em;
  border-bottom:1px solid transparent; transition:border-color .15s;
}
.todo-title:focus{ border-bottom-color:var(--primary); }
.todo-title:empty::before{ content:'Typ hier...'; color:var(--muted); pointer-events:none; }

/* ---------- secondary nav ---------- */
.nav-secondary{
  display:flex; gap:4px; padding:4px 28px; background:var(--card-bg);
  border-bottom:1px solid var(--border);
}
.subnav-item{
  font-size:12px; font-weight:600; text-decoration:none; color:var(--muted);
  padding:5px 10px; border-radius:5px;
}
.subnav-item:hover{ color:var(--primary-dark); background:#eef0fb; }
.subnav-item.active{ color:var(--primary-dark); background:#eef0fb; }

/* ---------- todo actions column ---------- */
.todo-actions{ display:flex; align-items:center; gap:2px; flex-shrink:0; }
.todo-notes-btn{
  background:none; border:none; font-size:15px; cursor:pointer; padding:2px 4px;
  color:var(--border); transition:color .15s, transform .1s; line-height:1; opacity:.4;
}
.todo-notes-btn:hover{ color:var(--muted); opacity:.8; }
.todo-notes-btn.has-notes{ color:var(--primary); opacity:1; filter:none; }
.todo-notes-btn.has-notes:hover{ color:var(--primary-dark); transform:scale(1.15); }
.todo-delete{
  background:none; border:none; color:var(--muted); font-size:18px; cursor:pointer;
  padding:0 4px; line-height:1; opacity:0; transition:opacity .15s;
}
.todo-item:hover .todo-delete{ opacity:1; }
.todo-delete:hover{ color:var(--danger); }

/* ---------- notes panel (draggable) ---------- */
.notes-panel{
  position:fixed; width:320px; max-width:calc(100vw - 48px);
  background:var(--card-bg); border:1px solid var(--border);
  border-radius:8px; box-shadow:0 4px 20px rgba(0,0,0,.12); z-index:30; overflow:hidden;
}
.notes-panel-header{
  display:flex; justify-content:space-between; align-items:center;
  padding:8px 14px; border-bottom:1px solid var(--border); cursor:grab; user-select:none;
}
.notes-panel-header:active{ cursor:grabbing; }
.notes-panel-title{ font-size:13px; font-weight:600; color:var(--primary-dark); }
.notes-panel-close{ background:none; border:none; font-size:20px; cursor:pointer; color:var(--muted); padding:0 4px; line-height:1; }
.notes-panel-close:hover{ color:var(--danger); }
.notes-textarea{
  width:100%; min-height:120px; padding:12px 14px; border:none; resize:both; overflow:auto;
  font-family:inherit; font-size:13px; outline:none; background:transparent; color:var(--text);
}

/* ---------- todo layout with sidebar ---------- */
.todo-layout{ display:flex; gap:20px; }
.todo-sidebar{
  width:180px; flex-shrink:0; background:var(--card-bg); border:1px solid var(--border);
  border-radius:8px; padding:12px 0; align-self:flex-start; position:sticky; top:100px;
}
.sidebar-heading{ font-size:11px; font-weight:700; text-transform:uppercase; color:var(--muted); padding:0 14px 8px; letter-spacing:.03em; }
.sidebar-item{
  display:flex; justify-content:space-between; align-items:center;
  padding:6px 14px; font-size:13px; text-decoration:none; color:var(--text); transition:background .1s;
}
.sidebar-item:hover{ background:#f0f2f8; }
.sidebar-item.active{ background:#eef0fb; color:var(--primary-dark); font-weight:600; }
.sidebar-count{ font-size:11px; color:var(--muted); font-weight:400; }
.sidebar-new{ padding:8px 10px 0; }
.sidebar-new-input{
  width:100%; padding:5px 8px; font-size:12px; border:1px dashed var(--border);
  border-radius:4px; background:transparent; color:var(--text);
}
.sidebar-new-input:focus{ border-style:solid; border-color:var(--primary); }
.todo-main{ flex:1; min-width:0; }

.new-item-row{ display:flex; gap:8px; }
.new-item-row input{ flex:1; }

/* ---------- notities ---------- */
.note-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:14px;
}
.note-card{
  position:relative; display:flex; flex-direction:column; gap:10px;
  background:var(--card-bg); border:1px solid var(--border); border-radius:8px;
  padding:14px 14px 12px; text-decoration:none; color:var(--text);
  transition:border-color .1s, box-shadow .1s; min-height:96px;
}
.note-card:hover{ border-color:var(--primary); box-shadow:0 2px 8px rgba(0,0,0,.06); }
.note-card-preview{
  font-size:13px; line-height:1.45; white-space:pre-wrap; overflow:hidden;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
}
.note-card-tags{ display:flex; flex-wrap:wrap; gap:6px; }
.note-card-meta{ font-size:11px; color:var(--muted); margin-top:auto; }
.note-card-actions{ position:absolute; top:8px; right:10px; display:flex; gap:4px; opacity:0; transition:opacity .1s; }
.note-card:hover .note-card-actions{ opacity:1; }
.note-card-action{
  background:var(--card-bg); border:1px solid var(--border); border-radius:4px;
  width:24px; height:24px; display:flex; align-items:center; justify-content:center;
  font-size:13px; color:var(--muted); cursor:pointer; text-decoration:none; padding:0;
}
.note-card-action:hover{ color:var(--primary); border-color:var(--primary); }
.note-card-action-danger:hover{ color:var(--danger); border-color:var(--danger); }

.note-badge{
  display:inline-block; font-size:11px; padding:2px 8px; border-radius:10px; line-height:1.5;
  white-space:nowrap; max-width:100%; overflow:hidden; text-overflow:ellipsis;
}
.note-badge-todo{ background:#eef0fb; color:var(--primary-dark); }
.note-badge-person{ background:#eaf6ee; color:#2f7d4f; }

/* editor */
.note-tags-bar{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin-bottom:10px; }
.note-tag{
  display:inline-flex; align-items:center; gap:4px; font-size:12px;
  background:#eaf6ee; color:#2f7d4f; padding:3px 6px 3px 10px; border-radius:12px;
}
.note-tag-remove{
  background:none; border:none; color:inherit; cursor:pointer; font-size:14px;
  line-height:1; padding:0 2px; text-decoration:none;
}
.note-tag-remove:hover{ color:var(--danger); }
.note-tag-add{
  background:none; border:1px dashed var(--border); color:var(--muted); cursor:pointer;
  font-size:12px; padding:3px 10px; border-radius:12px;
}
.note-tag-add:hover{ border-color:var(--primary); color:var(--primary); }
.note-body-textarea{
  width:100%; min-height:340px; padding:14px 16px; border:1px solid var(--border);
  border-radius:8px; font-family:inherit; font-size:14px; line-height:1.6; resize:vertical;
  outline:none; background:var(--card-bg); color:var(--text);
}
.note-body-textarea:focus{ border-color:var(--primary); }
.note-save-status{ font-size:12px; color:var(--muted); }

/* autocomplete */
.note-ac-input{
  padding:6px 12px; border:1px solid var(--border); border-radius:6px; font-size:13px;
  background:var(--card-bg); color:var(--text); outline:none;
}
.note-ac-input:focus{ border-color:var(--primary); }
.note-ac-results{
  position:absolute; z-index:50; margin-top:2px; min-width:200px; max-height:260px; overflow-y:auto;
  background:var(--card-bg); border:1px solid var(--border); border-radius:6px;
  box-shadow:0 4px 14px rgba(0,0,0,.1);
}
.note-ac-item{ padding:7px 12px; font-size:13px; cursor:pointer; }
.note-ac-item:hover{ background:#eef0fb; color:var(--primary-dark); }
.note-filter-active{
  display:inline-flex; align-items:center; gap:8px; font-size:13px; padding:6px 12px;
  background:#eef0fb; color:var(--primary-dark); border-radius:6px;
}

/* notitie datum/tijd */
.note-datetime-bar{ display:flex; flex-wrap:wrap; gap:16px; margin-bottom:12px; }
.note-dt-field{ display:flex; flex-direction:column; gap:3px; font-size:12px; color:var(--muted); }
.note-dt-field input{
  padding:6px 10px; border:1px solid var(--border); border-radius:6px; font-size:13px;
  font-family:inherit; background:var(--card-bg); color:var(--text); outline:none;
}
.note-dt-field input:focus{ border-color:var(--primary); }
.note-dt-field input:disabled{ opacity:.5; }
.note-card-noted{ font-size:12px; color:var(--primary-dark); font-weight:600; margin-bottom:2px; }

/* personen-tags in het todo-notitiepaneel */
.notes-panel-tags{ display:none; flex-wrap:wrap; gap:5px; padding:8px 12px 0; }
.notes-panel-tags .note-tag{ font-size:11px; padding:2px 5px 2px 8px; }

/* gekoppelde personen als chips in de to-do-regel */
.todo-people{ display:inline-flex; flex-wrap:wrap; gap:4px; align-items:center; margin-left:6px; }
.todo-person{
  display:inline-flex; align-items:center; gap:3px; font-size:11px; line-height:1.4;
  background:#eaf6ee; color:#2f7d4f; padding:1px 4px 1px 7px; border-radius:10px; white-space:nowrap;
}
.todo-person-remove{
  background:none; border:none; color:inherit; cursor:pointer; font-size:12px; line-height:1;
  padding:0 1px; opacity:.6;
}
.todo-person-remove:hover{ opacity:1; color:var(--danger); }
.note-ac-item.active{ background:#eef0fb; color:var(--primary-dark); }

/* mention-chip ingebed in de to-do-titel */
.todo-title .mention{
  display:inline-block; font-size:12px; line-height:1.4; background:#eaf6ee; color:#2f7d4f;
  padding:0 7px; border-radius:10px; margin:0 1px; white-space:nowrap; cursor:default;
  user-select:none; vertical-align:baseline;
}
.todo-item.done .todo-title .mention{ opacity:.6; }

/* ---------- weekplanner (Covey) ---------- */
.week-nav{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:18px;
  padding-bottom:12px; border-bottom:1px solid var(--border);
}
.week-nav-title{ display:flex; flex-direction:column; line-height:1.3; }
.week-nav-title strong{ font-size:15px; }
.week-nav-period{ font-size:12px; color:var(--muted); }

.wp-mission{
  background:var(--card-bg); border:1px solid var(--border); border-radius:8px;
  padding:10px 14px; margin-bottom:18px;
}
.wp-mission summary{
  cursor:pointer; font-size:12px; font-weight:700; text-transform:uppercase;
  letter-spacing:.03em; color:var(--muted); user-select:none;
}
.wp-mission textarea{ margin-top:10px; }

.wp-section{ margin-bottom:24px; }
.wp-section-title{
  font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.03em;
  color:var(--muted); margin:0 0 10px;
}
.wp-textarea{
  width:100%; padding:8px 11px; border:1px solid var(--border); border-radius:6px;
  font-family:inherit; font-size:13px; line-height:1.5; resize:vertical;
  background:var(--card-bg); color:var(--text); outline:none;
}
.wp-textarea:focus{ border-color:var(--primary); }

.wp-saw-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:12px; }
.wp-saw-field{ display:flex; flex-direction:column; gap:4px; font-size:12px; color:var(--muted); }

.wp-empty{
  background:var(--card-bg); border:1px dashed var(--border); border-radius:8px;
  padding:16px; font-size:13px; color:var(--muted); margin-bottom:12px;
}
.wp-empty p{ margin:0; }

.wp-roles{ display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:14px; align-items:start; }
.wp-role-card{
  background:var(--card-bg); border:1px solid var(--border); border-radius:8px; padding:12px 14px;
}
.wp-role-new{ border-style:dashed; display:flex; align-items:center; }
.wp-role-new-input{
  width:100%; border:none; background:transparent; color:var(--text);
  font-size:13px; font-family:inherit; outline:none; padding:4px 0;
}
.wp-role-header{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:8px; }
.wp-role-name{ font-size:14px; font-weight:600; color:var(--primary-dark); outline:none; flex:1; }
.wp-role-archive{
  background:none; border:none; color:var(--muted); cursor:pointer; font-size:15px;
  line-height:1; padding:0 2px; opacity:0; transition:opacity .1s;
}
.wp-role-card:hover .wp-role-archive{ opacity:1; }
.wp-role-archive:hover{ color:var(--danger); }

.wp-goals{ display:flex; flex-direction:column; gap:8px; }
.wp-goal-main{ display:flex; align-items:flex-start; gap:7px; }
.wp-goal-title{ flex:1; font-size:13px; line-height:1.45; outline:none; min-width:0; }
.wp-goal.done .wp-goal-title{ text-decoration:line-through; color:var(--muted); }
.wp-goal-check{ margin-top:3px; flex-shrink:0; }
.wp-goal-actions{ display:flex; gap:2px; opacity:0; transition:opacity .1s; flex-shrink:0; }
.wp-goal:hover .wp-goal-actions{ opacity:1; }
.wp-goal-actions button{
  background:none; border:none; cursor:pointer; color:var(--muted);
  font-size:13px; line-height:1; padding:1px 3px;
}
.wp-goal-actions button:hover{ color:var(--primary); }
.wp-goal-delete:hover{ color:var(--danger) !important; }

.wp-goal-todos{ padding-left:22px; display:flex; flex-direction:column; gap:2px; margin-top:3px; }
.wp-goal-progress{ font-size:11px; color:var(--primary-dark); font-weight:600; }
.wp-goal-todo{ display:flex; align-items:center; gap:4px; font-size:12px; color:var(--muted); }
.wp-goal-todo.done .wp-goal-todo-title{ text-decoration:line-through; opacity:.7; }
.wp-goal-todo-title{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.wp-goal-todo-remove{
  background:none; border:none; color:var(--muted); cursor:pointer; font-size:12px;
  line-height:1; padding:0 2px; opacity:0;
}
.wp-goal-todo:hover .wp-goal-todo-remove{ opacity:1; }
.wp-goal-todo-remove:hover{ color:var(--danger); }
.wp-todo-search{
  width:100%; margin-top:4px; padding:4px 8px; font-size:12px; font-family:inherit;
  border:1px solid var(--primary); border-radius:4px; background:var(--card-bg);
  color:var(--text); outline:none;
}
.wp-goal-new{
  width:100%; margin-top:10px; padding:5px 8px; font-size:12px; font-family:inherit;
  border:1px dashed var(--border); border-radius:4px; background:transparent;
  color:var(--text); outline:none;
}
.wp-goal-new:focus{ border-style:solid; border-color:var(--primary); }
.wp-goal-title .mention{
  display:inline-block; font-size:12px; line-height:1.4; background:#eaf6ee; color:#2f7d4f;
  padding:0 7px; border-radius:10px; margin:0 1px; white-space:nowrap; cursor:default; user-select:none;
}
.note-badge-goal{ background:#fdf0e3; color:#a8621b; }

/* ---------- tags ---------- */
.note-tag-label{ background:#eef0fb; color:var(--primary-dark); }
.note-badge-tag{ background:#eef0fb; color:var(--primary-dark); }

/* aanmaakregel in de autocomplete: visueel gescheiden, nooit voorgeselecteerd */
.note-ac-item{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.note-ac-hint{ font-size:11px; color:var(--muted); flex-shrink:0; }
.note-ac-item.active .note-ac-hint{ color:var(--primary-dark); }
.note-ac-create{
  border-top:1px solid var(--border); color:var(--muted); font-style:italic;
}
.note-ac-create.active{ background:#eaf6ee; color:#2f7d4f; font-style:normal; }

/* tagbeheer */
.tag-table{ background:var(--card-bg); border:1px solid var(--border); border-radius:8px; overflow:hidden; }
.tag-row{
  display:flex; align-items:center; gap:10px; padding:9px 14px;
  border-bottom:1px solid var(--border); font-size:13px;
}
.tag-row:last-child{ border-bottom:none; }
.tag-name{ flex:1; outline:none; font-weight:500; }
.tag-name:focus{ color:var(--primary-dark); }
.tag-usage{
  font-size:11px; color:var(--muted); text-decoration:none; min-width:42px; text-align:right;
}
.tag-usage:hover{ color:var(--primary); text-decoration:underline; }
.tag-merge{
  font-size:12px; font-family:inherit; padding:3px 6px; border:1px solid var(--border);
  border-radius:4px; background:var(--card-bg); color:var(--muted); max-width:170px;
}
.tag-delete{
  background:none; border:none; color:var(--muted); cursor:pointer; font-size:15px;
  line-height:1; padding:0 4px;
}
.tag-delete:hover{ color:var(--danger); }

/* archief */
.subnav-count{
  display:inline-block; margin-left:4px; font-size:11px; padding:0 5px;
  border-radius:8px; background:var(--border); color:var(--muted);
}
.subnav-item.active .subnav-count{ background:var(--primary); color:#fff; }
.note-archived-banner{
  background:#fdf0e3; color:#a8621b; border-radius:6px; padding:8px 12px;
  font-size:12px; margin-bottom:12px;
}
.note-archived-hint{
  background:var(--card-bg); border:1px solid var(--border); border-radius:6px;
  padding:8px 12px; font-size:12px; color:var(--muted); margin-bottom:12px;
}

/* sorteerbare tabelkoppen */
.sort-header{
  display:block; padding:10px 14px; text-decoration:none; color:inherit; white-space:nowrap;
}
.sort-header:hover{ color:var(--primary); }
.sort-header.active{ color:var(--primary-dark); }

/* ---------- dispatch ---------- */
.dispatch-form{
  background:var(--card-bg); border:1px solid var(--border); border-radius:8px;
  padding:16px; display:flex; flex-direction:column; gap:14px; max-width:760px;
}
.dispatch-field{ display:flex; flex-direction:column; gap:4px; font-size:12px; color:var(--muted); }
.dispatch-field select, .dispatch-field textarea, .dispatch-field input{
  padding:7px 10px; border:1px solid var(--border); border-radius:6px; font-size:13px;
  font-family:inherit; background:var(--card-bg); color:var(--text); outline:none; width:100%;
}
.dispatch-field textarea{ resize:vertical; line-height:1.5; }
.dispatch-field select:focus, .dispatch-field textarea:focus, .dispatch-field input:focus{ border-color:var(--primary); }
.dispatch-field small{ font-size:11px; color:var(--muted); }
.dispatch-row{ display:flex; gap:14px; flex-wrap:wrap; }
.dispatch-row .dispatch-field{ flex:1; min-width:220px; }

.dispatch-row-link{
  display:flex; align-items:center; gap:12px; padding:9px 14px; font-size:13px;
  border-bottom:1px solid var(--border); text-decoration:none; color:var(--text);
}
.dispatch-row-link:last-child{ border-bottom:none; }
.dispatch-row-link:hover{ background:#f7f8fa; }
.dispatch-prompt{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dispatch-meta{ font-size:11px; color:var(--muted); white-space:nowrap; }

.dispatch-status{
  display:inline-block; font-size:11px; padding:2px 8px; border-radius:10px;
  text-transform:uppercase; letter-spacing:.02em; white-space:nowrap; flex-shrink:0;
}
.dispatch-status-created, .dispatch-status-scheduled{ background:#eef0fb; color:var(--primary-dark); }
.dispatch-status-queued{ background:#fdf0e3; color:#a8621b; }
.dispatch-status-running, .dispatch-status-output{ background:#e3f0fd; color:#1b6aa8; }
.dispatch-status-succeeded{ background:#eaf6ee; color:#2f7d4f; }
.dispatch-status-failed, .dispatch-status-timeout{ background:#fdeaea; color:#a83232; }
.dispatch-status-cancelled{ background:var(--border); color:var(--muted); }

.dispatch-pre{
  background:var(--card-bg); border:1px solid var(--border); border-radius:6px;
  padding:12px 14px; font-size:12px; line-height:1.5; white-space:pre-wrap;
  word-break:break-word; margin:0; overflow-x:auto;
}
.dispatch-output{ max-height:460px; overflow-y:auto; }