body{
  margin:0;
  font-family:system-ui;
  background:#f4f6fb;
  display:flex;
  height:100vh;
  /* 100vh op mobiel telt de ruimte achter de adresbalk/toolbar mee, waardoor
     de onderkant van de pagina wegvalt achter de browser-UI. 100dvh (dynamic
     viewport height) volgt de daadwerkelijk zichtbare hoogte; oudere browsers
     die dvh niet kennen negeren deze regel gewoon en houden de vh-waarde aan. */
  height:100dvh;
  overflow:hidden;
}

/* Landing page actief: body mag scrollen en heeft geen vaste hoogte */
body.landingMode{
  display:block;
  height:auto;
  overflow-x:hidden;
  overflow-y:auto;
}

.appShell{
  display:flex;
  width:100%;
  flex:1;
  height:100vh;
  height:100dvh;
  overflow:hidden;
}

.appShell.is-hidden{
  display:none;
}

.sidebar{
  flex:0 0 240px;
  width:240px;
  background:#1f2937;
  color:white;
  padding:30px 20px;
  box-sizing:border-box;
  overflow:auto;
  display:flex;
  flex-direction:column;
  gap:12px;
}

.sidebarBrand{
  display:flex;
  flex-direction:column;
  gap:4px;
  margin-bottom:28px;
}

.sidebarBrandTitle{
  font-size:20px;
  font-weight:800;
}

.sidebarBrandMeta{
  font-size:13px;
  color:#cbd5e1;
}

.sidebarUserCard{
  margin-top:auto;
  padding:14px;
  border-radius:14px;
  background:rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.08);
}

.sidebarModeButtons{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-bottom:20px;
}

.sidebarIdentity{
  padding-top:4px;
}

.sidebarNav{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.sidebarConfigButton{
  width:100%;
  padding:11px 14px;
  border:none;
  border-radius:12px;
  cursor:pointer;
  font-weight:800;
  color:#eef2ff;
  background:rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.08);
  text-align:left;
}

.sidebarConfigButton:hover{
  background:rgba(255,255,255,0.14);
}

.sidebarConfigButton.is-active{
  background:linear-gradient(135deg, rgba(148,235,155,0.18), rgba(126,219,137,0.12));
  border-color:rgba(148,235,155,0.32);
}

.sidebarUserName{
  font-weight:700;
  margin-bottom:4px;
}

.sidebarUserMeta{
  color:#cbd5e1;
  font-size:13px;
  line-height:1.4;
}

.sidebarLogoutButton{
  width:100%;
  margin-top:12px;
  padding:10px 14px;
  border:none;
  border-radius:10px;
  cursor:pointer;
  font-weight:700;
  color:#0f172a;
  background:linear-gradient(135deg, #94EB9B, #7EDB89);
}

.sidebarLogoutButton:hover{
  filter:brightness(0.98);
}

.sidebar h2{
  margin-bottom:30px;
}

.menuItem{
  padding:12px;
  border-radius:6px;
  cursor:pointer;
  margin-bottom:8px;
}

.menuItem:hover{
  background:#374151;
}

.menuItem.active{
  background:#4f46e5;
}

.content{
  flex:1;
  min-width:0;
  padding:32px clamp(20px, 2.6vw, 40px);
  overflow:auto;
  box-sizing:border-box;
}

.content > div{
  width:100%;
  min-width:0;
}

.searchBox{
  width:100%;
  padding:12px;
  border-radius:8px;
  border:1px solid #ddd;
  margin-bottom:10px;
}

.sectionHeader{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-bottom:8px;
  flex-wrap:wrap;
}

.sectionHeader h1{
  margin:0;
}

.syncControls{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

.syncButton{
  padding:10px 14px;
  border:none;
  border-radius:8px;
  cursor:pointer;
  background:#4f46e5;
  color:white;
  font-weight:600;
}

.syncButton:hover{
  background:#4338ca;
}

.syncButton:disabled{
  background:#9ca3af;
  cursor:not-allowed;
}

.syncStatus{
  font-size:14px;
  color:#4b5563;
}

.results{
  background:white;
  border-radius:8px;
  max-height:200px;
  overflow:auto;
  border:1px solid #eee;
}

.resultItem{
  padding:10px;
  cursor:pointer;
  border-bottom:1px solid #eee;
}

.resultItem:hover{
  background:#eef2ff;
}

.cards{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  gap:20px;
  margin-top:20px;
}

.card{
  background:white;
  padding:20px;
  border-radius:10px;
  box-shadow:0 2px 8px rgba(0,0,0,0.08);
}

.card h3{
  margin-top:0;
  border-bottom:1px solid #eee;
  padding-bottom:5px;
}

.field{
  margin-bottom:8px;
}

/* Groepeert velden binnen een .card naast elkaar i.p.v. steeds onder elkaar
   (relatie-detailweergave e.d.) — .field-elementen erbinnen verliezen hun
   eigen margin, de grid regelt de tussenruimte. */
.fieldGrid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:4px 16px;
}

.fieldGrid .field{
  margin-bottom:0;
}

.addressBlock{
  font-size:15px;
  line-height:1.6;
}

@media (max-width: 640px){
  .cards{
    grid-template-columns:1fr;
    gap:14px;
  }
  .card{
    padding:16px;
  }
  .fieldGrid{
    grid-template-columns:1fr 1fr;
  }
}

.fieldLink{
  display:block;
  text-decoration:none;
  color:inherit;
  padding:10px 12px;
  border-radius:8px;
  margin-bottom:8px;
  border:1px solid #e5e7eb;
}

.fieldLink:hover{
  background:#eef2ff;
  border-color:#c7d2fe;
}

.label{
  font-weight:600;
  font-size:13px;
  color:#666;
}

.value{
  font-size:15px;
}

/* Projecttabel */
#projectsTable {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 20px;
}

#tasksTable {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 20px;
}

#projectsTable th, #projectsTable td,
#tasksTable th, #tasksTable td {
  padding: 10px;
  border-bottom: 1px solid #eee;
  text-align: left;
}

/* Highlight voor geselecteerd project - match relaties */
#projectsTable tr.selected {
  background-color: #eef2ff; /* geselecteerd */
}

#tasksTable tr.selected {
  background-color: #eef2ff;
}

#projectsTable tr:hover,
#tasksTable tr:hover {
  background-color: #e0e7ff; /* hover */
  cursor: pointer;
}

.actions {
  margin-bottom: 20px;
}

.actions button {
  padding: 10px 15px;
  margin-right: 10px;
  border-radius:6px;
  border:none;
  cursor:pointer;
  background:#4f46e5;
  color:white;
}

.actions button:disabled {
  background:#ccc;
  cursor:not-allowed;
}

.projectLayout{
  display:grid;
  grid-template-columns:minmax(0, 2.2fr) minmax(320px, 1fr);
  gap:20px;
  align-items:start;
  width:100%;
}

.projectWorkspaceLayout{
  display:grid;
  grid-template-columns:minmax(320px, 360px) minmax(0, 1fr);
  gap:20px;
  align-items:start;
  width:100%;
}

.projectListPanel,
.projectWorkspacePanel{
  min-width:0;
}

.projectList{
  display:flex;
  flex-direction:column;
  gap:12px;
  max-height:calc(100vh - 260px);
  overflow:auto;
}

.projectListCard{
  border:1px solid #e5e7eb;
  border-radius:16px;
  background:#fff;
  padding:14px 15px;
  cursor:pointer;
  transition:transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

.projectListCard:hover{
  transform:translateY(-1px);
  border-color:#c7d2fe;
  box-shadow:0 12px 28px rgba(15,23,42,0.08);
}

.projectListCard.is-active{
  border-color:#818cf8;
  background:#eef2ff;
  box-shadow:0 0 0 3px rgba(129,140,248,0.12);
}

.projectListHeader{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
}

.projectListTitle{
  font-weight:800;
  color:#111827;
  margin:0 0 4px;
}

.projectListCustomer{
  color:#64748b;
  font-size:13px;
}

.projectWorkspaceCard{
  padding:22px;
}

.emptyWorkspaceState{
  min-height:420px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:flex-start;
}

.workspaceHeader{
  display:flex;
  justify-content:space-between;
  gap:18px;
  align-items:flex-start;
  margin-bottom:18px;
  flex-wrap:wrap;
}

.workspaceTitle{
  margin:0 0 6px;
  font-size:30px;
  line-height:1.1;
}

.workspaceSubline{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  color:#64748b;
  font-size:14px;
}

.workspaceMetrics{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(140px, 1fr));
  gap:12px;
  margin-bottom:18px;
}

.workspaceMetric{
  border:1px solid #e5e7eb;
  border-radius:16px;
  padding:14px;
  background:linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}

.workspaceMetricValue{
  font-size:24px;
  font-weight:800;
  color:#111827;
  margin:4px 0;
}

.workspaceTabs{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-bottom:18px;
}

.workspaceTab{
  border:none;
  border-radius:999px;
  background:#e5e7eb;
  color:#1f2937;
  font-weight:800;
  padding:10px 16px;
  cursor:pointer;
}

.workspaceTab.is-active{
  background:#4f46e5;
  color:#fff;
  box-shadow:0 12px 24px rgba(79,70,229,0.24);
}

.workspaceBody{
  display:flex;
  flex-direction:column;
  gap:18px;
}

.workspaceGrid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:18px;
}

.workspaceSection{
  border:1px solid #e5e7eb;
  border-radius:18px;
  background:#fff;
  padding:18px;
  box-shadow:0 8px 24px rgba(15,23,42,0.05);
}

.workspaceSectionTitle{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  margin-bottom:14px;
}

.workspaceSectionTitle h3{
  margin:0;
}

.workspaceKpiRow{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(130px, 1fr));
  gap:10px;
}

.workspaceMiniMetric{
  border:1px solid #e5e7eb;
  border-radius:14px;
  padding:12px;
  background:#f8fafc;
}

.workspaceMiniMetric strong{
  display:block;
  font-size:18px;
  margin-top:6px;
}

.workspaceDataList{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.workspaceItem{
  border:1px solid #e5e7eb;
  border-radius:14px;
  padding:13px 14px;
  background:#fff;
}

.workspaceItem.is-active{
  border-color:#818cf8;
  background:#eef2ff;
  box-shadow:0 0 0 3px rgba(129,140,248,0.12);
}

.workspaceItemHeader{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:flex-start;
}

.workspaceItemTitle{
  font-weight:800;
  color:#111827;
}

.workspaceItemMeta{
  color:#64748b;
  font-size:13px;
  margin-top:6px;
}

.workspaceInlineForm{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.workspaceInlineRow{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:12px;
}

.workspaceInlineForm input,
.workspaceInlineForm select,
.workspaceInlineForm textarea{
  width:100%;
  box-sizing:border-box;
  border:1px solid #d1d5db;
  border-radius:14px;
  padding:13px 14px;
  font:inherit;
  background:#f8fafc;
}

.workspaceInlineForm input:focus,
.workspaceInlineForm select:focus,
.workspaceInlineForm textarea:focus{
  outline:none;
  border-color:#818cf8;
  box-shadow:0 0 0 4px rgba(129,140,248,0.14);
  background:#fff;
}

.workspaceActions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.workspaceActionButton{
  border:none;
  border-radius:12px;
  padding:11px 15px;
  font:inherit;
  font-weight:800;
  cursor:pointer;
}

.workspaceActionButton--primary{
  background:linear-gradient(135deg, #4f46e5, #4338ca);
  color:#fff;
}

.workspaceActionButton--secondary{
  background:linear-gradient(135deg, #e0e7ff, #c7d2fe);
  color:#312e81;
}

.workspaceActionButton--danger{
  background:linear-gradient(135deg, #fee2e2, #fecaca);
  color:#991b1b;
}

.workspaceActionButton:disabled{
  opacity:0.55;
  cursor:not-allowed;
}

.workspaceBadge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:6px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:800;
}

.projectSidebar{
  position:sticky;
  top:20px;
}

.emptyState{
  color:#6b7280;
  font-size:14px;
}

.taskLayout{
  display:grid;
  grid-template-columns:minmax(0, 2.2fr) minmax(340px, 1fr);
  gap:20px;
  align-items:start;
  width:100%;
}

.taskSidebar{
  position:sticky;
  top:20px;
}

.taskCardTitle{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:12px;
}

.taskMetaGrid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:12px;
  margin-bottom:16px;
}

.taskMetric{
  background:#f8fafc;
  border:1px solid #e5e7eb;
  border-radius:10px;
  padding:12px;
}

.taskMetric .label{
  display:block;
  margin-bottom:6px;
}

.taskMetric .value{
  font-weight:600;
}

.taskFormField{
  margin-bottom:14px;
}

.taskFormField label{
  display:block;
  margin-bottom:6px;
  font-size:13px;
  font-weight:600;
  color:#4b5563;
}

.taskInput,
.taskSelect,
.taskTextarea{
  width:100%;
  box-sizing:border-box;
  border:1px solid #d1d5db;
  border-radius:10px;
  padding:12px;
  font:inherit;
  background:#ffffff;
  color:#111827;
  transition:border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
}

.taskInput,
.taskSelect{
  min-height:46px;
}

.taskTextarea{
  min-height:110px;
  resize:vertical;
}

.taskInput:focus,
.taskSelect:focus,
.taskTextarea:focus{
  outline:none;
  border-color:#818cf8;
  box-shadow:0 0 0 4px rgba(129,140,248,0.16);
  background:#fcfcff;
}

.taskInlineActions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:18px;
}

.taskInlineActions button{
  margin-right:0;
}

.taskStatusBadge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:6px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:700;
}

.taskStatusBadge[data-status="open"]{
  background:#dbeafe;
  color:#1d4ed8;
}

.taskStatusBadge[data-status="planning"]{
  background:#e0f2fe;
  color:#0369a1;
}

.taskStatusBadge[data-status="scheduled"]{
  background:#ede9fe;
  color:#6d28d9;
}

.taskStatusBadge[data-status="in_progress"]{
  background:#fef3c7;
  color:#b45309;
}

.taskStatusBadge[data-status="waiting"]{
  background:#ede9fe;
  color:#6d28d9;
}

.taskStatusBadge[data-status="completed"]{
  background:#dcfce7;
  color:#15803d;
}

.taskStatusBadge[data-status="cancelled"]{
  background:#fee2e2;
  color:#991b1b;
}

.filters{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:12px;
}
.filters input,
.filters select{
  padding:9px 12px;
  border-radius:10px;
  border:1px solid #e2e8f0;
  background:#f8fafc;
  font-size:14px;
  color:#1e293b;
  flex:1;
  min-width:120px;
  transition:border-color 150ms;
}
.filters input:focus,
.filters select:focus{
  outline:none;
  border-color:#818cf8;
  background:#fff;
  box-shadow:0 0 0 3px rgba(129,140,248,0.12);
}

/* Taak-kaart stijlen (hergebruikt van projectListCard) */
.taskListMeta{
  display:flex;
  align-items:center;
  gap:12px;
  margin-top:8px;
  flex-wrap:wrap;
}
.taskListMetaItem{
  font-size:12px;
  color:#64748b;
  display:flex;
  align-items:center;
  gap:4px;
}

/* ── Agenda hoofd-layout ──────────────────────── */
#agenda{
  width:100%;
  min-width:0;
  box-sizing:border-box;
}
.agendaBody{
  display:grid;
  grid-template-columns:210px minmax(0,1fr);
  gap:16px;
  flex:1;
  min-height:0;
  width:100%;
  min-width:0;
  overflow:hidden;
}

/* ── Takenpaneel links ────────────────────────── */
.agendaTaskPanel{
  width:210px;
  flex-shrink:0;
  display:flex;
  flex-direction:column;
  gap:8px;
  overflow-y:auto;
  padding-bottom:8px;
}
.agendaTaskStripLabel{
  font-size:11px;
  font-weight:700;
  color:#94a3b8;
  text-transform:uppercase;
  letter-spacing:.06em;
  white-space:nowrap;
  flex-shrink:0;
  padding:4px 0 2px;
}
.agendaTaskChipList{
  display:flex;
  flex-direction:column;
  gap:8px;
  flex:1;
  min-height:0;
  overflow-y:auto;
}

/* ── Kalenderpaneel rechts ────────────────────── */
.agendaCalendarPanel{
  flex:1;
  min-width:0;
  min-height:0;
  display:flex;
  flex-direction:column;
  gap:12px;
  overflow:hidden;
}

/* ── Taak-chip met twee regels ────────────────── */
.plannerTask{
  display:flex;
  align-items:center;
  gap:10px;
  padding:7px 12px;
  border-radius:14px;
  background:#fff;
  border:1.5px solid #e0e7ff;
  cursor:grab;
  user-select:none;
  box-shadow:0 2px 6px rgba(15,23,42,0.07);
  transition:border-color 140ms,box-shadow 140ms;
  width:100%;
  box-sizing:border-box;
  min-width:0;
}
.plannerTask:hover{
  border-color:#4f46e5;
  box-shadow:0 4px 12px rgba(79,70,229,0.16);
}
.plannerTask.is-dragging{
  opacity:.45;
  cursor:grabbing;
}
.plannerTaskInfo{
  display:flex;
  flex-direction:column;
  gap:1px;
  min-width:0;
  flex:1;
}
.plannerTaskTitle{
  font-size:13px;
  font-weight:700;
  color:#1e293b;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.plannerTaskProject{
  font-size:11px;
  color:#64748b;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.plannerTaskHours{
  background:#eef2ff;
  color:#4338ca;
  border-radius:999px;
  padding:2px 8px;
  font-size:11px;
  font-weight:700;
  white-space:nowrap;
  flex-shrink:0;
}

/* ── Drag ghost preview ───────────────────────── */
.dragGhostBlock{
  position:absolute;
  left:6px;
  right:6px;
  z-index:50;
  border-radius:10px;
  background:rgba(79,70,229,0.13);
  border:2px dashed #4f46e5;
  pointer-events:none;
  box-sizing:border-box;
  padding:5px 8px;
  display:flex;
  flex-direction:column;
  gap:2px;
  overflow:hidden;
}
.dragGhostTitle{
  font-size:12px;
  font-weight:700;
  color:#3730a3;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.dragGhostTime{
  font-size:11px;
  color:#6366f1;
  font-weight:600;
}
.freeEntryGhost{
  background:rgba(16,185,129,0.13);
  border-color:#10b981;
  cursor:ns-resize;
}
.freeEntryGhost .dragGhostTitle{
  color:#065f46;
}
.freeEntryGhost .dragGhostTime{
  color:#059669;
}

/* ── Legacy (houd plannerCard intact voor andere pagina's) */
.agendaLayout{
  display:block;
  width:100%;
}

.agendaStack{
  display:flex;
  flex-direction:column;
  gap:16px;
  width:100%;
  min-width:0;
}

.employeeSelector{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:12px;
}
.agendaTaskPanel .employeeSelector{
  margin-bottom:14px;
}

.agendaUserSelect{
  appearance:none;
  -webkit-appearance:none;
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%234f46e5' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 14px center;
  border:1.5px solid #e0e7ff;
  border-radius:999px;
  padding:8px 40px 8px 18px;
  font-size:14px;
  font-weight:700;
  color:#1e1b4b;
  cursor:pointer;
  width:100%;
  box-sizing:border-box;
  transition:border-color 140ms,box-shadow 140ms;
}
.agendaUserSelect:hover{
  border-color:#4f46e5;
}
.agendaUserSelect:focus{
  outline:none;
  border-color:#4f46e5;
  box-shadow:0 0 0 3px rgba(79,70,229,0.15);
}

.employeeChip{
  border:none;
  border-radius:999px;
  padding:12px 18px;
  background:#e5e7eb;
  color:#111827;
  font-weight:700;
  cursor:pointer;
}

.employeeChip.is-active{
  background:#4f46e5;
  color:white;
  box-shadow:0 10px 24px rgba(79,70,229,0.24);
}

.agendaToolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
}

.agendaViewControls{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

.calendarNav{
  display:flex;
  align-items:center;
  gap:8px;
  justify-content:center;
}

.calendarNav button,
.viewToggle button,
.plannerCard button{
  border:none;
  border-radius:10px;
  padding:10px 14px;
  cursor:pointer;
  background:#e0e7ff;
  color:#312e81;
  font-weight:700;
}

.calendarNav button:hover,
.viewToggle button:hover,
.plannerCard button:hover{
  background:#c7d2fe;
}

.viewToggle{
  display:flex;
  gap:8px;
}

.viewToggle button.is-active{
  background:#4f46e5;
  color:white;
}

.calendarLabel{
  font-size:18px;
  font-weight:700;
  color:#111827;
  min-width:220px;
  text-align:center;
}

.calendarMonth{
  display:grid;
  grid-template-columns:repeat(7, minmax(0, 1fr));
  gap:10px;
}

.calendarWeekday,
.calendarCell{
  background:white;
  border:1px solid #e5e7eb;
  border-radius:16px;
}

.calendarWeekday{
  padding:12px 14px;
  font-weight:700;
  color:#4b5563;
  text-align:center;
}

.calendarCell{
  min-height:150px;
  padding:12px;
  box-shadow:0 6px 18px rgba(15,23,42,0.05);
  display:flex;
  flex-direction:column;
  gap:10px;
}

.calendarCell.is-other-month{
  opacity:0.45;
}

.calendarCell.is-today{
  border-color:#818cf8;
  box-shadow:0 0 0 3px rgba(129,140,248,0.14);
}

.calendarCell.is-selected{
  background:#eef2ff;
}

.calendarCellHeader{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}

.calendarCellDay{
  font-weight:800;
  color:#111827;
}

.calendarCellDropHint{
  font-size:12px;
  color:#6b7280;
}

.calendarEvents{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.calendarEventPill{
  border-radius:12px;
  padding:10px 12px;
  font-size:13px;
  cursor:pointer;
  border:1px solid transparent;
  display:flex;
  flex-direction:column;
  gap:4px;
  min-width:0;
}

.calendarEventPill--internal{
  background:#dbeafe;
  color:#1d4ed8;
}

.calendarEventPill--external{
  background:#dcfce7;
  color:#166534;
}

#agendaMonthView{
  flex:1;
  min-height:0;
  width:100%;
  box-sizing:border-box;
  overflow-y:auto;
}
#agendaWeekView{
  flex:1;
  min-height:0;
  width:100%;
  box-sizing:border-box;
  background:white;
  border:1px solid #e5e7eb;
  border-radius:18px;
  padding:16px;
  box-shadow:0 8px 24px rgba(15,23,42,0.06);
  overflow-x:auto;
  overflow-y:auto;
}
#agendaDayView{
  flex:1;
  min-height:0;
  width:100%;
  box-sizing:border-box;
  background:white;
  border:1px solid #e5e7eb;
  border-radius:18px;
  padding:18px;
  box-shadow:0 8px 24px rgba(15,23,42,0.06);
  overflow-y:auto;
}

.weekGrid{
  display:grid;
  grid-template-columns:repeat(6, 1fr);
  gap:8px;
  min-width:0;
}

.weekDayColumn{
  display:flex;
  flex-direction:column;
  min-width:0;
  background:#f8fafc;
  border:1px solid #e5e7eb;
  border-radius:18px;
  padding:12px;
  box-shadow:0 10px 22px rgba(15,23,42,0.05);
}

.weekDayHeader{
  height:58px;
  margin-bottom:12px;
  border:1px solid #e5e7eb;
  border-radius:14px;
  background:white;
  color:#111827;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 14px;
  font:inherit;
  cursor:pointer;
}

.weekDayHeader.is-today{
  border-color:#818cf8;
  box-shadow:0 0 0 3px rgba(129,140,248,0.14);
}

.weekDayHeader.is-selected{
  background:#eef2ff;
}

.weekDayName{
  font-weight:700;
  text-transform:capitalize;
}

.weekDayDate{
  font-weight:800;
}

.weekDayBody{
  position:relative;
  background:white;
  background:
    repeating-linear-gradient(
      to bottom,
      transparent 0,
      transparent 63px,
      #e5e7eb 63px,
      #e5e7eb 64px
    );
  border-radius:14px;
  border:1px solid #e5e7eb;
  overflow:hidden;
}

.weekHourRow{
  height:64px;
  box-sizing:border-box;
}

.weekEventLayer{
  position:absolute;
  inset:0;
}

.weekDayHourMarkers{
  position:absolute;
  inset:0;
  pointer-events:none;
}

.weekDayHourText{
  position:absolute;
  left:10px;
  transform:translateY(-50%);
  font-size:11px;
  color:#94a3b8;
  font-weight:700;
}

.dayGrid{
  display:grid;
  grid-template-columns:92px minmax(0, 1fr);
  gap:12px;
  width:100%;
}

.dayHours{
  display:flex;
  flex-direction:column;
}

.dayHourLabel{
  height:64px;
  font-size:13px;
  color:#6b7280;
}

.dayColumns{
  position:relative;
  background:
    repeating-linear-gradient(
      to bottom,
      transparent 0,
      transparent 63px,
      #e5e7eb 63px,
      #e5e7eb 64px
    );
  border-radius:14px;
}

.dayHourRow{
  height:64px;
  box-sizing:border-box;
}

.dayEventLayer{
  position:absolute;
  inset:0;
}

.dayEventBlock{
  position:absolute;
  left:8px;
  right:8px;
  z-index:2;
  box-sizing:border-box;
  border-radius:14px;
  padding:4px 7px;
  border:1px solid transparent;
  overflow:hidden;
  cursor:grab;
  box-shadow:0 10px 24px rgba(15,23,42,0.12);
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  gap:1px;
}

.dayEventBlock .agendaItemTitle{
  flex:1 1 auto;
}

.dayEventBlock .agendaItemTime{
  margin-top:auto;
}

.dayEventBlock--internal{
  background:#dbeafe;
  color:#1d4ed8;
}

.dayEventBlock--external{
  background:#dcfce7;
  color:#166534;
}

.plannerCard{
  background:white;
  border:1px solid #e5e7eb;
  border-radius:16px;
  padding:18px;
  box-shadow:0 8px 24px rgba(15,23,42,0.06);
}

.plannerTaskList{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
  gap:10px;
}

.plannerTask{
  border:1px solid #dbe4ff;
  background:#f8faff;
  border-radius:12px;
  padding:12px;
  cursor:grab;
}

.agendaQuickPlan{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.plannerTaskTitle{
  font-weight:700;
  color:#111827;
  margin-bottom:6px;
}

.plannerTaskMeta{
  font-size:13px;
  color:#4b5563;
}

.plannerForm{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.plannerForm input,
.plannerForm select,
.plannerForm textarea{
  width:100%;
  box-sizing:border-box;
  border:1px solid #d1d5db;
  border-radius:14px;
  padding:13px 14px;
  font:inherit;
  background:#f8fafc;
  color:#111827;
  transition:border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease, transform 160ms ease;
}

.plannerForm .nativeField{
  display:none;
}

.plannerField{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.plannerFieldLabel{
  font-size:13px;
  font-weight:700;
  color:#475569;
}
.agendaDurationReadonly{
  padding:10px 14px;
  background:#f8fafc;
  border:1.5px solid #e2e8f0;
  border-radius:10px;
  font-size:14px;
  color:#334155;
  font-weight:600;
}

.modernControl{
  position:relative;
}

.modernButton,
.modernTextInput{
  width:100%;
  min-height:52px;
  border:1px solid #d1d5db;
  border-radius:14px;
  background:#f8fafc;
  color:#111827;
  padding:13px 46px 13px 14px;
  font:inherit;
  text-align:left;
  box-sizing:border-box;
  transition:border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
}

.modernButton{
  cursor:pointer;
}

.modernButton:hover,
.modernTextInput:hover{
  background:#ffffff;
}

.modernButton:focus,
.modernTextInput:focus{
  outline:none;
  border-color:#818cf8;
  box-shadow:0 0 0 4px rgba(129,140,248,0.14);
  background:#ffffff;
}

.modernControlIcon{
  position:absolute;
  right:14px;
  top:50%;
  transform:translateY(-50%);
  width:22px;
  height:22px;
  border-radius:8px;
  background:#e0e7ff;
  color:#312e81;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:12px;
  font-weight:800;
  pointer-events:none;
}

.modernControlTrigger{
  position:absolute;
  right:10px;
  top:50%;
  transform:translateY(-50%);
  width:30px;
  height:30px;
  border:none;
  border-radius:10px;
  background:transparent;
  padding:0;
  cursor:pointer;
  z-index:2;
}

.modernControlTrigger:hover + .modernControlIcon,
.modernControlTrigger:focus + .modernControlIcon{
  background:#c7d2fe;
}

.modernPopover{
  position:absolute;
  top:calc(100% + 10px);
  left:0;
  right:0;
  z-index:12;
  background:white;
  border:1px solid #e5e7eb;
  border-radius:16px;
  box-shadow:0 22px 40px rgba(15,23,42,0.14);
  padding:12px;
  display:none;
}

.modernPopover.is-open{
  display:block;
}

.taskPickerSearch{
  width:100%;
  border:1px solid #d1d5db;
  border-radius:12px;
  padding:10px 12px;
  font:inherit;
  box-sizing:border-box;
  margin-bottom:10px;
  background:#f8fafc;
}

.taskPickerSearch:focus{
  outline:none;
  border-color:#818cf8;
  box-shadow:0 0 0 4px rgba(129,140,248,0.14);
  background:#ffffff;
}

.taskPickerList,
.timePickerList{
  display:flex;
  flex-direction:column;
  gap:8px;
  max-height:240px;
  overflow:auto;
}

.relationPickerRow{
  display:flex;
  align-items:stretch;
  gap:10px;
}

.relationPickerRow .modernControl{
  flex:1;
}

.relationAddButton{
  flex:0 0 48px;
  width:48px;
  border:none;
  border-radius:14px;
  background:linear-gradient(135deg, #4f46e5, #6366f1);
  color:white;
  font-size:26px;
  font-weight:700;
  cursor:pointer;
  box-shadow:0 10px 24px rgba(79,70,229,0.2);
  transition:transform 160ms ease, box-shadow 160ms ease, filter 160ms ease;
}

.relationAddButton:hover{
  transform:translateY(-1px);
  box-shadow:0 14px 28px rgba(79,70,229,0.24);
  filter:brightness(1.02);
}

.localRelationModal{
  width:min(720px, calc(100vw - 32px));
}

.localRelationGrid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:14px;
}

.addressSuggestionList{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-top:10px;
}

.addressSuggestionButton{
  width:100%;
  border:1px solid #dbe3f1;
  background:#ffffff;
  border-radius:14px;
  padding:12px 14px;
  text-align:left;
  cursor:pointer;
  transition:border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}

.addressSuggestionButton:hover{
  border-color:#818cf8;
  box-shadow:0 10px 22px rgba(15,23,42,0.08);
  transform:translateY(-1px);
}

.addressSuggestionTitle{
  font-weight:700;
  color:#111827;
  margin-bottom:4px;
}

.addressSuggestionMeta{
  color:#64748b;
  font-size:13px;
}

@media (max-width: 720px){
  .localRelationGrid{
    grid-template-columns:1fr;
  }
}

.taskPickerOption,
.timePickerOption{
  border:none;
  border-radius:12px;
  background:#f8fafc;
  text-align:left;
  padding:12px 13px;
  cursor:pointer;
  font:inherit;
  color:#111827;
}

.taskPickerOption:hover,
.timePickerOption:hover,
.taskPickerOption.is-active,
.timePickerOption.is-active{
  background:#eef2ff;
}

.taskPickerOptionTitle{
  font-weight:700;
  margin-bottom:4px;
}

.taskPickerOptionMeta{
  font-size:12px;
  color:#64748b;
}

.datePickerHeader{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
}

.datePickerNav{
  border:none;
  width:36px;
  height:36px;
  border-radius:10px;
  background:#eef2ff;
  color:#312e81;
  cursor:pointer;
  font-weight:800;
}

.datePickerLabel{
  font-weight:800;
  color:#0f172a;
}

.datePickerWeekdays,
.datePickerGrid{
  display:grid;
  grid-template-columns:repeat(7, minmax(0, 1fr));
  gap:6px;
}

.datePickerWeekdays{
  margin-bottom:8px;
  font-size:12px;
  color:#64748b;
  font-weight:700;
  text-align:center;
}

.datePickerDay{
  border:none;
  border-radius:12px;
  min-height:40px;
  background:#f8fafc;
  cursor:pointer;
  font:inherit;
  color:#111827;
  font-weight:700;
}

.datePickerDay:hover{
  background:#eef2ff;
}

.datePickerDay.is-other-month{
  opacity:0.42;
}

.datePickerDay.is-selected{
  background:#4f46e5;
  color:white;
}

.datePickerDay.is-today{
  box-shadow:0 0 0 2px rgba(79,70,229,0.2) inset;
}

.plannerRow{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:12px;
}

.plannerForm input:focus,
.plannerForm select:focus,
.plannerForm textarea:focus{
  outline:none;
  border-color:#818cf8;
  box-shadow:0 0 0 4px rgba(129,140,248,0.14);
  background:#ffffff;
}

.plannerForm input[type="date"],
.plannerForm input[type="time"]{
  min-height:50px;
  appearance:none;
  -webkit-appearance:none;
}

.plannerForm input[type="date"]::-webkit-calendar-picker-indicator,
.plannerForm input[type="time"]::-webkit-calendar-picker-indicator{
  cursor:pointer;
  border-radius:8px;
  padding:4px;
  background:#e0e7ff;
}

.plannerActions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.plannerPrimaryButton,
.plannerSecondaryButton,
.plannerSuccessButton,
.danger{
  border:none;
  border-radius:12px;
  padding:12px 16px;
  cursor:pointer;
  font-weight:800;
  line-height:1;
  font:inherit;
  transition:transform 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
}

.plannerPrimaryButton:hover,
.plannerSecondaryButton:hover,
.plannerSuccessButton:hover,
.danger:hover{
  transform:translateY(-1px);
}

.plannerPrimaryButton{
  background:linear-gradient(135deg, #4f46e5, #4338ca);
  color:white;
  box-shadow:0 12px 24px rgba(79,70,229,0.24);
}

.plannerPrimaryButton:hover{
  background:linear-gradient(135deg, #4338ca, #3730a3);
}

.plannerSecondaryButton{
  background:linear-gradient(135deg, #e0e7ff, #c7d2fe);
  color:#312e81;
  box-shadow:0 12px 24px rgba(99,102,241,0.14);
}

.plannerSecondaryButton:hover{
  background:linear-gradient(135deg, #c7d2fe, #a5b4fc);
}

.plannerSuccessButton{
  background:linear-gradient(135deg, #bbf7d0, #86efac);
  color:#166534;
  box-shadow:0 12px 24px rgba(34,197,94,0.14);
}

.plannerSuccessButton:hover{
  background:linear-gradient(135deg, #86efac, #4ade80);
}

.danger{
  background:linear-gradient(135deg, #fee2e2, #fecaca);
  color:#991b1b;
  box-shadow:0 12px 24px rgba(248,113,113,0.16);
}

.danger:hover{
  background:linear-gradient(135deg, #fecaca, #fca5a5);
}

.subtleText{
  color:#6b7280;
  font-size:14px;
}

.dayEventList{
  margin-top:18px;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.dayEventListItem{
  border:1px solid #e5e7eb;
  border-radius:12px;
  padding:12px 14px;
  background:#fff;
}

.agendaItemTitle{
  display:block;
  font-weight:800;
  font-size:13px;
  min-width:0;
  overflow:hidden;
  line-height:1.05;
  white-space:normal;
  word-break:break-word;
}

.agendaItemTime{
  display:block;
  font-size:11px;
  font-weight:700;
  opacity:0.88;
  line-height:1.05;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.agendaHoverTooltip{
  position:fixed;
  z-index:3000;
  max-width:280px;
  padding:10px 12px;
  border-radius:12px;
  background:rgba(15,23,42,0.94);
  color:white;
  font-size:13px;
  line-height:1.35;
  box-shadow:0 18px 40px rgba(15,23,42,0.26);
  opacity:0;
  transform:translateY(4px);
  transition:opacity 160ms ease, transform 160ms ease;
  pointer-events:none;
}

.agendaHoverTooltip.is-visible{
  opacity:1;
  transform:translateY(0);
}

.deleteButton{
  padding:10px 14px;
  border:none;
  border-radius:8px;
  cursor:pointer;
  background:#fee2e2;
  color:#991b1b;
  font-weight:600;
}

.deleteButton:hover{
  background:#fecaca;
}

.agendaModalOverlay{
  position:fixed;
  inset:0;
  background:rgba(15,23,42,0.24);
  backdrop-filter:blur(6px);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:2000;
  padding:24px;
}

.agendaModalOverlay.is-visible{
  display:flex;
}

.agendaModal{
  width:min(640px, 100%);
  max-height:90vh;
  background:white;
  border:1px solid #e5e7eb;
  border-radius:22px;
  box-shadow:0 30px 60px rgba(15,23,42,0.22);
  overflow-y:auto;
}

.agendaModalHeader{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:20px 22px 12px;
}

.agendaModalBody{
  padding:0 22px 22px;
}

.agendaModalClose{
  border:none;
  border-radius:10px;
  width:40px;
  height:40px;
  cursor:pointer;
  background:#eef2ff;
  color:#312e81;
  font-size:20px;
  font-weight:700;
}

.agendaModalClose:hover{
  background:#c7d2fe;
}

/* ═══════════════════════════════════════════════
   LANDING PAGE
═══════════════════════════════════════════════ */
.landingPage{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  background:#fff;
  font-family:system-ui;
}
.landingPage.is-hidden{ display:none; }

/* Nav */
.landingNav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:16px 48px;
  position:sticky;
  top:0;
  background:rgba(255,255,255,0.95);
  backdrop-filter:blur(10px);
  border-bottom:1px solid #f1f5f9;
  z-index:100;
}
.landingLogo{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:800;
  font-size:20px;
  color:#1e1b4b;
  text-decoration:none;
  cursor:pointer;
}
.landingLogoMark{
  width:34px;
  height:34px;
  background:linear-gradient(135deg,#4f46e5,#7c3aed);
  border-radius:9px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-size:17px;
  font-weight:900;
  flex-shrink:0;
}
.landingNavRight{
  display:flex;
  align-items:center;
  gap:10px;
}
.landingNavLinks{
  display:flex;
  align-items:center;
  gap:32px;
}
.landingNavLinks a{
  color:#475569;
  font-size:14px;
  font-weight:600;
  text-decoration:none;
  transition:color 150ms;
}
.landingNavLinks a:hover{ color:#4f46e5; }

html{ scroll-behavior:smooth; }

/* Buttons */
.lBtnOutline{
  display:inline-block;
  padding:9px 22px;
  border:1.5px solid #e2e8f0;
  border-radius:10px;
  background:#fff;
  color:#374151;
  font-weight:600;
  font-size:14px;
  text-decoration:none;
  cursor:pointer;
  transition:border-color 150ms,color 150ms;
}
.lBtnOutline:hover{ border-color:#4f46e5; color:#4f46e5; }
.lBtnPrimary{
  display:inline-block;
  padding:10px 22px;
  border:none;
  border-radius:10px;
  background:linear-gradient(135deg,#4f46e5,#4338ca);
  color:#fff;
  font-weight:700;
  font-size:14px;
  text-decoration:none;
  cursor:pointer;
  box-shadow:0 4px 14px rgba(79,70,229,0.28);
  transition:filter 150ms,transform 150ms;
}
.lBtnPrimary:hover{ filter:brightness(1.06); transform:translateY(-1px); }
.lBtnLg{ padding:14px 30px; font-size:16px; border-radius:14px; }
.lBtnGhost{
  padding:14px 20px;
  border:none;
  background:none;
  color:#64748b;
  font-weight:600;
  font-size:15px;
  cursor:pointer;
  text-decoration:underline;
  text-underline-offset:3px;
}
.lBtnGhost:hover{ color:#1e293b; }

/* Hero — vult altijd de volledige viewport-hoogte na de navbar */
.landingHero{
  display:flex;
  align-items:center;
  gap:56px;
  padding:48px 48px;
  width:100%;
  box-sizing:border-box;
  min-height:calc(100vh - 66px);
  flex:1;
}
.landingHeroInner{
  display:flex;
  align-items:center;
  gap:56px;
  max-width:1200px;
  margin:0 auto;
  width:100%;
}
.landingHeroContent{ flex:0 0 500px; max-width:500px; }
.landingHeroBadge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 14px;
  border-radius:999px;
  background:#eef2ff;
  color:#4338ca;
  font-size:13px;
  font-weight:600;
  margin-bottom:24px;
  border:1px solid #c7d2fe;
}
.landingHeroTitle{
  margin:0 0 20px;
  font-size:50px;
  font-weight:900;
  line-height:1.06;
  color:#0f172a;
  letter-spacing:-1.5px;
}
.landingHeroTitle em{ font-style:normal; color:#4f46e5; }
.landingHeroSub{
  margin:0 0 36px;
  color:#475569;
  font-size:17px;
  line-height:1.65;
}
.landingHeroCta{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.landingHeroVisual{ flex:1; min-width:0; }

/* Dashboard mockup */
.landingMockup{
  background:#1e1b4b;
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 40px 90px rgba(15,23,42,0.35),0 0 0 1px rgba(255,255,255,0.07);
  transform:perspective(1000px) rotateY(-4deg) rotateX(2deg);
}
.mockupBar{
  display:flex;
  align-items:center;
  gap:6px;
  padding:12px 16px;
  background:rgba(255,255,255,0.04);
  border-bottom:1px solid rgba(255,255,255,0.06);
}
.mockupDot{ width:10px; height:10px; border-radius:50%; }
.mockupContent{ display:flex; height:290px; }
.mockupSidebar{
  width:130px;
  padding:14px 10px;
  background:rgba(255,255,255,0.03);
  border-right:1px solid rgba(255,255,255,0.05);
  display:flex;
  flex-direction:column;
  gap:3px;
}
.mockupBrand{
  font-size:11px;
  font-weight:800;
  color:rgba(255,255,255,0.9);
  padding:0 10px 12px;
  border-bottom:1px solid rgba(255,255,255,0.07);
  margin-bottom:8px;
}
.mockupNavItem{
  padding:8px 10px;
  border-radius:8px;
  color:rgba(255,255,255,0.45);
  font-size:12px;
  font-weight:500;
}
.mockupNavItem.active{
  background:rgba(79,70,229,0.5);
  color:#fff;
}
.mockupMain{ flex:1; padding:16px; display:flex; flex-direction:column; gap:10px; overflow:hidden; }
.mockupTopRow{ display:flex; gap:8px; }
.mockupStat{
  flex:1;
  padding:12px 14px;
  background:rgba(255,255,255,0.06);
  border-radius:10px;
  border:1px solid rgba(255,255,255,0.07);
}
.mockupStatLabel{ font-size:10px; color:rgba(255,255,255,0.45); margin-bottom:4px; }
.mockupStatValue{ font-size:18px; font-weight:800; color:#fff; }
.mockupStatSmall{ font-size:12px; color:rgba(99,255,180,0.9); }
.mockupTable{
  flex:1;
  background:rgba(255,255,255,0.04);
  border-radius:10px;
  border:1px solid rgba(255,255,255,0.06);
  overflow:hidden;
}
.mockupThead{
  padding:8px 12px;
  background:rgba(255,255,255,0.04);
  display:flex;
  gap:20px;
  border-bottom:1px solid rgba(255,255,255,0.06);
}
.mockupTh{ font-size:10px; color:rgba(255,255,255,0.35); font-weight:600; flex:1; }
.mockupRow{
  padding:9px 12px;
  display:flex;
  gap:20px;
  border-bottom:1px solid rgba(255,255,255,0.04);
  align-items:center;
}
.mockupCell{ font-size:11px; color:rgba(255,255,255,0.65); flex:1; }
.mockupBadge{
  display:inline-block;
  padding:2px 8px;
  border-radius:999px;
  font-size:10px;
  font-weight:600;
}
.mockupBadge.open{ background:rgba(79,70,229,0.3); color:#a5b4fc; }
.mockupBadge.done{ background:rgba(16,185,129,0.25); color:#6ee7b7; }

/* Features */
.landingFeatures{ padding:80px 48px; background:#f8fafc; }
.landingFeaturesInner{ max-width:1200px; margin:0 auto; }
.landingFeaturesTitle{
  text-align:center;
  font-size:36px;
  font-weight:800;
  color:#0f172a;
  margin:0 0 12px;
  letter-spacing:-0.5px;
}
.landingFeaturesSub{
  text-align:center;
  color:#64748b;
  font-size:17px;
  margin:0 0 52px;
}
.landingFeatureGrid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:22px;
}
.landingFeatureCard{
  background:#fff;
  border-radius:20px;
  padding:28px;
  border:1px solid #e2e8f0;
  transition:transform 200ms,box-shadow 200ms,border-color 200ms;
}
.landingFeatureCard:hover{
  transform:translateY(-4px);
  box-shadow:0 16px 40px rgba(0,0,0,0.08);
  border-color:#c7d2fe;
}
.featureIconWrap{
  width:52px;
  height:52px;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:24px;
  margin-bottom:18px;
}
.landingFeatureCard h3{
  margin:0 0 10px;
  font-size:17px;
  font-weight:700;
  color:#1e293b;
}
.landingFeatureCard p{ margin:0; color:#64748b; font-size:14px; line-height:1.65; }

.landingFeatures, .landingAbout, .landingContact{ scroll-margin-top:80px; }

/* Over ons */
.landingAbout{ padding:80px 48px; background:#fff; }
.landingAboutInner{ max-width:1100px; margin:0 auto; }
.landingAboutIntro{ max-width:640px; margin:0 auto 52px; text-align:center; }
.landingAboutIntro h2{
  font-size:36px;
  font-weight:800;
  color:#0f172a;
  margin:0 0 16px;
  letter-spacing:-0.5px;
}
.landingAboutIntro p{ margin:0; color:#64748b; font-size:17px; line-height:1.65; }
.landingAboutGrid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:32px;
}
.landingAboutCard{ text-align:center; padding:0 12px; }
.landingAboutCard .featureIconWrap{ margin:0 auto 18px; }
.landingAboutCard h3{
  margin:0 0 10px;
  font-size:17px;
  font-weight:700;
  color:#1e293b;
}
.landingAboutCard p{ margin:0; color:#64748b; font-size:14px; line-height:1.65; }

/* Contact */
.landingContact{ padding:80px 48px; background:#f8fafc; }
.landingContactInner{ max-width:560px; margin:0 auto; text-align:center; }
.landingContactInner h2{
  font-size:36px;
  font-weight:800;
  color:#0f172a;
  margin:0 0 16px;
  letter-spacing:-0.5px;
}
.landingContactInner > p{ margin:0 0 40px; color:#64748b; font-size:17px; line-height:1.65; }
.landingContactForm{ text-align:left; }
.authField textarea{
  width:100%;
  box-sizing:border-box;
  padding:14px 16px;
  border-radius:14px;
  border:1px solid #dbe4f0;
  background:#fff;
  font-size:15px;
  color:#0f172a;
  font-family:inherit;
  resize:vertical;
  min-height:120px;
  transition:border-color 160ms ease, box-shadow 160ms ease;
}
.authField textarea:focus{
  outline:none;
  border-color:#818cf8;
  box-shadow:0 0 0 4px rgba(129,140,248,0.18);
}

/* CTA */
.landingCtaSection{
  padding:80px 48px;
  text-align:center;
  background:linear-gradient(135deg,#1e1b4b 0%,#312e81 60%,#3730a3 100%);
  color:#fff;
}
.landingCtaSection h2{
  margin:0 0 16px;
  font-size:38px;
  font-weight:800;
  letter-spacing:-0.5px;
}
.landingCtaSection p{
  margin:0 0 36px;
  color:rgba(255,255,255,0.72);
  font-size:17px;
}
.lBtnGreen{
  display:inline-block;
  padding:16px 38px;
  border:none;
  border-radius:14px;
  background:linear-gradient(135deg,#10b981,#059669);
  color:#fff;
  font-weight:800;
  font-size:17px;
  text-decoration:none;
  cursor:pointer;
  box-shadow:0 8px 28px rgba(16,185,129,0.45);
  transition:filter 150ms,transform 150ms;
}
.lBtnGreen:hover{ filter:brightness(1.08); transform:translateY(-2px); }

/* Footer */
.landingFooter{
  padding:22px 48px;
  background:#f8fafc;
  border-top:1px solid #e2e8f0;
  text-align:center;
  color:#94a3b8;
  font-size:13px;
}

/* Modal overlay */
.modalOverlay{
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  z-index:6000;
  padding:24px;
}
.modalOverlay.is-visible{ display:flex; }
.modalBackdrop{
  position:absolute;
  inset:0;
  background:rgba(15,23,42,0.55);
  backdrop-filter:blur(5px);
}
.modalCard{
  position:relative;
  width:min(480px,100%);
  background:rgba(255,255,255,0.97);
  border:1px solid rgba(255,255,255,0.8);
  border-radius:26px;
  box-shadow:0 32px 80px rgba(15,23,42,0.24);
  backdrop-filter:blur(14px);
  padding:32px;
  max-height:92vh;
  overflow-y:auto;
}
.modalCloseBtn{
  position:absolute;
  top:16px;
  right:16px;
  width:32px;
  height:32px;
  border:none;
  background:#f1f5f9;
  border-radius:50%;
  cursor:pointer;
  font-size:20px;
  color:#64748b;
  display:flex;
  align-items:center;
  justify-content:center;
  line-height:1;
  transition:background 150ms;
  padding:0;
}
.modalCloseBtn:hover{ background:#e2e8f0; color:#1e293b; }

/* Lege staat voor ontbrekende integratie */
.noIntegrationState{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:56px 32px;
  border-radius:20px;
  background:#f8fafc;
  border:2px dashed #e2e8f0;
  margin:24px 0;
  color:#475569;
}
.noIntegrationState .noIntegrationIcon{
  font-size:40px;
  margin-bottom:16px;
  opacity:0.7;
}
.noIntegrationState h3{
  margin:0 0 10px;
  font-size:18px;
  font-weight:700;
  color:#1e293b;
}
.noIntegrationState p{
  margin:0;
  font-size:14px;
  line-height:1.65;
  max-width:380px;
}
.noIntegrationState strong{ color:#4f46e5; }

/* Responsive */
@media(max-width:900px){
  .landingHero{ padding:32px 24px; min-height:auto; }
  .landingHeroInner{ flex-direction:column; gap:36px; }
  .landingHeroContent{ flex:none; max-width:100%; }
  .landingHeroVisual{ width:100%; }
  .landingMockup{ transform:none; }
  .landingNav{ padding:14px 24px; }
  .landingNavLinks{ display:none; }
  .landingFeatures{ padding:56px 24px; }
  .landingAbout{ padding:56px 24px; }
  .landingContact{ padding:56px 24px; }
  .landingCtaSection{ padding:56px 24px; }
  .landingHeroTitle{ font-size:38px; }
}
@media(max-width:520px){
  .landingNav{ padding:12px 16px; gap:8px; }
  .landingLogoText{ display:none; }
  .landingNavRight{ gap:8px; }
  .landingNavRight .lBtnOutline,
  .landingNavRight .lBtnPrimary{ padding:8px 12px; font-size:13px; white-space:nowrap; }
  .landingHeroTitle{ font-size:32px; }
  .landingHeroCta{ flex-direction:column; align-items:stretch; }
}

.authCard{
  width:min(460px, 100%);
  background:rgba(255,255,255,0.92);
  border:1px solid rgba(255,255,255,0.74);
  border-radius:26px;
  box-shadow:0 30px 70px rgba(15,23,42,0.18);
  backdrop-filter:blur(12px);
  padding:28px;
}

.authEyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border-radius:999px;
  background:#eef2ff;
  color:#312e81;
  font-size:13px;
  font-weight:700;
  margin-bottom:18px;
}

.authTitle{
  margin:0 0 10px;
  font-size:32px;
  line-height:1.05;
  color:#0f172a;
}

.authSubtitle{
  margin:0 0 24px;
  color:#475569;
  font-size:15px;
  line-height:1.55;
}

.authField{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-bottom:16px;
}

.authField label{
  font-size:13px;
  font-weight:700;
  color:#334155;
}

.authField input{
  width:100%;
  box-sizing:border-box;
  padding:14px 16px;
  border-radius:14px;
  border:1px solid #dbe4f0;
  background:#fff;
  font-size:15px;
  color:#0f172a;
  transition:border-color 160ms ease, box-shadow 160ms ease;
}

.authField input:focus{
  outline:none;
  border-color:#818cf8;
  box-shadow:0 0 0 4px rgba(129,140,248,0.18);
}

.authSubmit{
  width:100%;
  border:none;
  border-radius:14px;
  padding:14px 18px;
  background:linear-gradient(135deg, #4f46e5, #4338ca);
  color:#fff;
  font-weight:800;
  font-size:15px;
  cursor:pointer;
  box-shadow:0 16px 36px rgba(79,70,229,0.2);
}

.authSubmit:hover{
  filter:brightness(1.02);
}

.authSubmit:disabled{
  cursor:not-allowed;
  opacity:0.7;
}

.authStatus{
  min-height:20px;
  margin-top:14px;
  color:#475569;
  font-size:14px;
}

.authStatus.is-error{
  color:#b91c1c;
}

.authHint{
  margin-top:16px;
  padding:14px 16px;
  border-radius:16px;
  background:#f8fafc;
  border:1px solid #e2e8f0;
  color:#475569;
  font-size:13px;
  line-height:1.5;
}

.tenantWorkspaceGrid{
  display:grid;
  grid-template-columns:minmax(320px, 380px) minmax(0, 1fr);
  gap:20px;
  align-items:start;
}

.tenantInfoCard{
  display:flex;
  flex-direction:column;
  gap:16px;
}

.tenantAdminLayout{
  display:grid;
  grid-template-columns:minmax(300px, 360px) minmax(0, 1fr);
  gap:20px;
  align-items:start;
}

.tenantSectionCard{
  display:flex;
  flex-direction:column;
  gap:16px;
}

.tenantMetricRow{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:12px;
}

.tenantMetric{
  padding:14px;
  border-radius:14px;
  background:#f8fafc;
  border:1px solid #e2e8f0;
}

.tenantMetricLabel{
  font-size:12px;
  font-weight:700;
  color:#64748b;
  text-transform:uppercase;
  letter-spacing:0.04em;
}

.tenantMetricValue{
  margin-top:6px;
  font-size:20px;
  font-weight:800;
  color:#0f172a;
  line-height:1.15;
  word-break:break-word;
}

.tenantFieldGrid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:14px;
}

.tenantFieldGrid .plannerField:last-child:nth-child(odd){
  grid-column:1 / -1;
}

.tenantUserList{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.tenantUserItem{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:14px 16px;
  border-radius:16px;
  background:#f8fafc;
  border:1px solid #e2e8f0;
}

.tenantUserMeta{
  min-width:0;
}

.tenantUserMeta strong{
  display:block;
  margin-bottom:4px;
  color:#0f172a;
}

.tenantUserSubtle{
  font-size:13px;
  color:#64748b;
  line-height:1.4;
}

.tenantRoleSelect{
  min-width:180px;
}

.tenantProfileActions{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
}
.tenantModalOverlay{
  position:fixed;
  inset:0;
  background:rgba(15,23,42,0.24);
  backdrop-filter:blur(6px);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:2000;
  padding:24px;
}
.tenantModalOverlay.is-visible{
  display:flex;
}
.tenantModal{
  width:min(460px,100%);
  max-height:90vh;
  background:white;
  border:1px solid #e5e7eb;
  border-radius:22px;
  box-shadow:0 30px 60px rgba(15,23,42,0.22);
  overflow-y:auto;
}
.tenantModalHeader{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:20px 22px 12px;
}
.tenantModalHeader h3{
  margin:0;
  font-size:17px;
  font-weight:800;
  color:#1e1b4b;
}
.tenantModalClose{
  border:none;
  border-radius:10px;
  width:36px;
  height:36px;
  cursor:pointer;
  background:#eef2ff;
  color:#312e81;
  font-size:18px;
  font-weight:700;
  display:flex;
  align-items:center;
  justify-content:center;
}
.tenantModalClose:hover{
  background:#c7d2fe;
}
.tenantModalBody{
  padding:0 22px 22px;
  display:flex;
  flex-direction:column;
  gap:14px;
}
.tenantModalField{
  display:flex;
  flex-direction:column;
  gap:4px;
}
.tenantModalField label{
  font-size:12px;
  font-weight:600;
  color:#64748b;
  text-transform:uppercase;
  letter-spacing:0.5px;
}
.tenantModalField input{
  padding:10px 14px;
  border:1.5px solid #e0e7ff;
  border-radius:10px;
  font-size:14px;
  color:#1e1b4b;
  outline:none;
  transition:border-color 140ms;
}
.tenantModalField input:focus{
  border-color:#6366f1;
}
.tenantModalWarning{
  background:#fef3c7;
  border:1px solid #f59e0b;
  border-radius:12px;
  padding:14px 16px;
  font-size:13px;
  color:#92400e;
  line-height:1.5;
}
.tenantModalWarning strong{
  display:block;
  margin-bottom:4px;
  color:#78350f;
}
.tenantModalActions{
  display:flex;
  gap:10px;
  justify-content:flex-end;
  padding-top:4px;
}
.tenantModalCancel{
  padding:9px 20px;
  border:1.5px solid #e0e7ff;
  border-radius:10px;
  background:white;
  color:#4338ca;
  font-size:14px;
  font-weight:600;
  cursor:pointer;
  transition:background 140ms;
}
.tenantModalCancel:hover{
  background:#eef2ff;
}
.tenantModalSave{
  padding:9px 20px;
  border:none;
  border-radius:10px;
  background:#4f46e5;
  color:white;
  font-size:14px;
  font-weight:600;
  cursor:pointer;
  transition:background 140ms;
}
.tenantModalSave:hover{
  background:#4338ca;
}
.tenantModalSave:disabled{
  opacity:0.5;
  cursor:not-allowed;
}
.tenantModalError{
  color:#dc2626;
  font-size:13px;
  font-weight:600;
  min-height:18px;
}
.tenantUserActions{
  display:flex;
  flex-direction:column;
  gap:10px;
  align-items:flex-end;
}

.tenantMiniButton{
  padding:10px 12px;
  border:none;
  border-radius:10px;
  cursor:pointer;
  font-weight:700;
  color:#312e81;
  background:#eef2ff;
}

.tenantMiniButton:hover{
  background:#dbeafe;
}

.tenantFormCard{
  margin-bottom:18px;
}

.tenantPermissionsGrid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:14px;
}

.tenantPermissionCard{
  padding:16px;
  border-radius:16px;
  border:1px solid #e2e8f0;
  background:#f8fafc;
}

.tenantPermissionList{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:12px;
}

.tenantCheckboxRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  font-size:14px;
  color:#334155;
}

.tenantIntegrationList{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
  gap:14px;
}

.tenantIntegrationCard{
  padding:18px;
  border-radius:18px;
  background:#fff;
  border:1px solid #e2e8f0;
  box-shadow:0 10px 26px rgba(15,23,42,0.05);
}

.tenantIntegrationCard h3{
  margin:0 0 10px;
}

.tenantOverviewStack{
  display:flex;
  flex-direction:column;
  gap:14px;
}

.tenantSummaryCard{
  padding:18px;
  border-radius:18px;
  background:linear-gradient(145deg, #ffffff, #f8fbff);
  border:1px solid #dbe3f1;
  box-shadow:0 16px 30px rgba(15,23,42,0.05);
}

.tenantSummaryTitle{
  margin:0 0 10px;
  font-size:18px;
  font-weight:800;
  color:#0f172a;
}

.tenantActionRow{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.tenantOrgLayout{
  display:flex;
  flex-direction:column;
  gap:20px;
}

.tenantOrgStatusBar{
  background:linear-gradient(145deg, #ffffff, #f8fbff);
  border:1px solid #dbe3f1;
  border-radius:18px;
  padding:18px 24px;
  box-shadow:0 4px 12px rgba(15,23,42,0.04);
}

.tenantOrgStatusBar .tenantMetricRow{
  grid-template-columns:repeat(3, minmax(0, 1fr));
}

.tenantOrgGrid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:20px;
  align-items:start;
}

.tenantOrgCard{
  display:flex;
  flex-direction:column;
  gap:0;
}

.tenantOrgCardTitle{
  margin:0 0 18px;
  font-size:17px;
  font-weight:800;
  color:#0f172a;
  padding-bottom:12px;
  border-bottom:2px solid #e5eaf3;
}

.tenantOrgFieldGroup{
  margin-bottom:14px;
}

.tenantOrgLabel{
  display:block;
  font-size:12px;
  font-weight:700;
  color:#64748b;
  text-transform:uppercase;
  letter-spacing:0.5px;
  margin-bottom:5px;
}

.tenantOrgInput{
  width:100%;
  padding:10px 14px;
  border:1px solid #d1d5db;
  border-radius:10px;
  font-size:14px;
  color:#1e293b;
  background:#fff;
  transition:border-color 0.15s, box-shadow 0.15s;
  box-sizing:border-box;
}

.tenantOrgInput:focus{
  outline:none;
  border-color:#3b82f6;
  box-shadow:0 0 0 3px rgba(59,130,246,0.12);
}

.tenantOrgTextarea{
  resize:vertical;
  min-height:70px;
  font-family:inherit;
}

.tenantOrgFieldRow{
  display:flex;
  gap:12px;
  margin-bottom:14px;
}

.tenantOrgFieldRow .tenantOrgFieldGroup{
  margin-bottom:0;
}

.tenantOrgActions{
  display:flex;
  align-items:center;
  gap:16px;
  padding-top:4px;
}

.tenantOrgSaveStatus{
  font-size:13px;
  color:#16a34a;
  font-weight:600;
}

@media (max-width: 900px){
  .tenantOrgGrid{
    grid-template-columns:minmax(0, 1fr);
  }
  .tenantOrgStatusBar .tenantMetricRow{
    grid-template-columns:minmax(0, 1fr);
  }
}

/* ── Documentsjabloon-editor (Opmaak) ── */

/* Zelfde lettertypes als het pdfkit-sjabloon (public/fonts/<key>/), zodat de
   lettertype-keuze in de editor er al hetzelfde uitziet als in de PDF. */
@font-face{ font-family:"Inter"; src:url("/fonts/inter/Regular.ttf") format("truetype"); font-weight:400; }
@font-face{ font-family:"Inter"; src:url("/fonts/inter/Bold.ttf") format("truetype"); font-weight:700; }
@font-face{ font-family:"Roboto"; src:url("/fonts/roboto/Regular.ttf") format("truetype"); font-weight:400; }
@font-face{ font-family:"Roboto"; src:url("/fonts/roboto/Bold.ttf") format("truetype"); font-weight:700; }
@font-face{ font-family:"Open Sans"; src:url("/fonts/open-sans/Regular.ttf") format("truetype"); font-weight:400; }
@font-face{ font-family:"Open Sans"; src:url("/fonts/open-sans/Bold.ttf") format("truetype"); font-weight:700; }
@font-face{ font-family:"Lora"; src:url("/fonts/lora/Regular.ttf") format("truetype"); font-weight:400; }
@font-face{ font-family:"Lora"; src:url("/fonts/lora/Bold.ttf") format("truetype"); font-weight:700; }
@font-face{ font-family:"Merriweather"; src:url("/fonts/merriweather/Regular.ttf") format("truetype"); font-weight:400; }
@font-face{ font-family:"Merriweather"; src:url("/fonts/merriweather/Bold.ttf") format("truetype"); font-weight:700; }
@font-face{ font-family:"Poppins"; src:url("/fonts/poppins/Regular.ttf") format("truetype"); font-weight:400; }
@font-face{ font-family:"Poppins"; src:url("/fonts/poppins/Bold.ttf") format("truetype"); font-weight:700; }

.templateEditorLayout{
  display:grid;
  grid-template-columns:minmax(300px, 380px) minmax(0, 1fr);
  gap:20px;
  align-items:start;
}

.templateEditorForm{
  display:flex;
  flex-direction:column;
  gap:20px;
}

.templateLogoPreview{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:90px;
  border:1.5px dashed #d1d5db;
  border-radius:12px;
  padding:12px;
  margin-bottom:14px;
  background:#f8fafc;
}

.templateLogoPreview img{
  max-width:100%;
  max-height:80px;
  object-fit:contain;
}

.templateColorRow{
  display:flex;
  gap:10px;
  align-items:center;
}

.templateColorRow input[type="color"]{
  width:48px;
  height:38px;
  padding:2px;
  border:1px solid #d1d5db;
  border-radius:8px;
  background:#fff;
  cursor:pointer;
}

.templateColorRow .tenantOrgInput{
  max-width:120px;
  text-transform:uppercase;
}

.templateLayoutOptions{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.templateLayoutOption{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border:1px solid #e5e7eb;
  border-radius:10px;
  cursor:pointer;
  font-size:14px;
  color:#1e293b;
  transition:border-color 0.15s, background 0.15s;
}

.templateLayoutOption:has(input:checked){
  border-color:#4f46e5;
  background:#eef2ff;
}

.templatePreviewPanel{
  display:flex;
  flex-direction:column;
  min-height:600px;
}

.templatePreviewHeader{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:14px;
  flex-wrap:wrap;
  gap:10px;
}

.templatePreviewToggle{
  display:flex;
  gap:6px;
}

.templatePreviewFrame{
  flex:1;
  min-height:560px;
  width:100%;
  border:1px solid #e5e7eb;
  border-radius:12px;
  background:#f8fafc;
}

.templatePreviewMobile{
  display:none;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:32px 20px;
  flex:1;
  background:#f8fafc;
  border:1px solid #e5e7eb;
  border-radius:12px;
}

@media (max-width: 1024px){
  .templateEditorLayout{
    grid-template-columns:minmax(0, 1fr);
  }
  .templatePreviewFrame{
    min-height:420px;
  }
}

@media (max-width: 768px){
  .templatePreviewFrame{
    display:none;
  }
  .templatePreviewMobile{
    display:flex;
    min-height:200px;
  }
}

.tenantUserGrid{
  display:grid;
  grid-template-columns:minmax(320px, 360px) minmax(0, 1fr);
  gap:20px;
  align-items:start;
}

.tenantInfoGrid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:14px;
}

.tenantInfoField{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.tenantInfoField label{
  font-size:13px;
  font-weight:700;
  color:#475569;
}

.tenantInfoField input{
  width:100%;
  box-sizing:border-box;
  border:1px solid #d1d5db;
  border-radius:14px;
  padding:12px 13px;
  font:inherit;
  background:#f8fafc;
  color:#111827;
}

.tenantInfoField input:disabled{
  background:#f1f5f9;
  color:#64748b;
  border-color:#e2e8f0;
}

.tenantRolesHeader{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
}

.tenantRoleCount{
  font-size:12px;
  font-weight:800;
  color:#4f46e5;
  background:#eef2ff;
  border-radius:999px;
  padding:6px 10px;
}

.platformWorkspaceGrid{
  display:grid;
  grid-template-columns:minmax(280px, 360px) minmax(0, 1fr);
  gap:20px;
  align-items:start;
}

.platformAdminLayout{
  display:grid;
  grid-template-columns:minmax(300px, 360px) minmax(0, 1fr);
  gap:20px;
  align-items:start;
}

.platformMetricsGrid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:14px;
}

.platformMetricCard{
  background:linear-gradient(145deg, #ffffff, #f8fafc);
  border:1px solid #e2e8f0;
  border-radius:18px;
  padding:18px;
  box-shadow:0 10px 28px rgba(15,23,42,0.05);
}

.platformMetricLabel{
  font-size:13px;
  font-weight:700;
  color:#64748b;
  margin-bottom:8px;
}

.platformMetricValue{
  font-size:28px;
  font-weight:800;
  color:#0f172a;
}

.platformTenantGrid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(320px, 1fr));
  gap:18px;
}

.platformTenantCard{
  border:1px solid #dbe3f1;
  border-radius:20px;
  padding:18px;
  background:linear-gradient(145deg, #ffffff, #f8fbff);
  box-shadow:0 16px 34px rgba(15,23,42,0.06);
  display:flex;
  flex-direction:column;
  gap:16px;
}

.platformTenantHeader{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
}

.platformTenantTitle{
  margin:0;
  font-size:20px;
  font-weight:800;
  color:#0f172a;
}

.platformTenantMeta{
  margin-top:6px;
  color:#64748b;
  font-size:13px;
}

.platformPill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  border-radius:999px;
  padding:8px 12px;
  font-size:12px;
  font-weight:800;
  white-space:nowrap;
}

.platformPill.is-active{
  background:rgba(148,235,155,0.24);
  color:#166534;
}

.platformPill.is-inactive{
  background:#e5e7eb;
  color:#475569;
}

.platformSection{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.platformSectionTitle{
  font-size:13px;
  font-weight:800;
  color:#475569;
  text-transform:uppercase;
  letter-spacing:0.04em;
}

.platformUserList{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.platformUserItem{
  border:1px solid #e5e7eb;
  border-radius:14px;
  padding:12px 13px;
  background:#ffffff;
}

.platformUserTitle{
  font-weight:700;
  color:#111827;
  margin-bottom:4px;
}

.platformUserMeta{
  color:#64748b;
  font-size:13px;
  line-height:1.45;
}

.platformTagList{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.platformTag{
  display:inline-flex;
  align-items:center;
  border-radius:999px;
  padding:7px 10px;
  background:#eef2ff;
  color:#312e81;
  font-size:12px;
  font-weight:700;
}

.platformRoleBlock{
  border:1px solid #e5e7eb;
  border-radius:14px;
  padding:12px 13px;
  background:#ffffff;
}

.platformRoleTitle{
  font-weight:800;
  color:#111827;
  margin-bottom:8px;
}

.platformListCard{
  display:flex;
  flex-direction:column;
  gap:14px;
}

.platformSearchInput{
  width:100%;
  box-sizing:border-box;
  border:1px solid #d1d5db;
  border-radius:14px;
  padding:13px 14px;
  font:inherit;
  background:#f8fafc;
}

.platformSearchInput:focus{
  outline:none;
  border-color:#818cf8;
  box-shadow:0 0 0 4px rgba(129,140,248,0.14);
  background:#ffffff;
}

.platformList{
  display:flex;
  flex-direction:column;
  gap:12px;
  max-height:calc(100vh - 280px);
  overflow:auto;
}

.platformListItem{
  border:1px solid #e2e8f0;
  border-radius:16px;
  padding:14px;
  background:#ffffff;
  cursor:pointer;
  transition:border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.platformListItem:hover{
  border-color:#c7d2fe;
  box-shadow:0 12px 24px rgba(15,23,42,0.06);
  transform:translateY(-1px);
}

.platformListItem.is-active{
  border-color:#818cf8;
  background:#eef2ff;
  box-shadow:0 0 0 3px rgba(129,140,248,0.12);
}

.platformListTitle{
  font-weight:800;
  color:#111827;
  margin-bottom:5px;
}

.platformListMeta{
  color:#64748b;
  font-size:13px;
  line-height:1.45;
}

.platformDetailCard{
  display:flex;
  flex-direction:column;
  gap:18px;
}

.platformDetailHeader{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
}

.platformDetailActions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.platformDetailGrid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:14px;
}

.platformDetailField{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.platformDetailField label{
  font-size:13px;
  font-weight:700;
  color:#475569;
}

.platformDetailField input,
.platformDetailField select{
  width:100%;
  box-sizing:border-box;
  border:1px solid #d1d5db;
  border-radius:14px;
  padding:12px 13px;
  font:inherit;
  background:#f8fafc;
  color:#111827;
}

.platformDetailField input:disabled,
.platformDetailField select:disabled{
  background:#f1f5f9;
  color:#64748b;
  border-color:#e2e8f0;
}

.platformCheckboxField{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:14px;
  color:#334155;
}

.platformPermissionMatrix{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:12px;
}

.platformEmptyState{
  color:#64748b;
  font-size:14px;
  padding:18px;
  border:1px dashed #cbd5e1;
  border-radius:16px;
  background:#f8fafc;
}

.statusPill{
  display:inline-flex;
  align-items:center;
  padding:6px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:800;
}

.statusPill.is-ok{
  background:#dcfce7;
  color:#166534;
}

.statusPill.is-muted{
  background:#e2e8f0;
  color:#475569;
}

@media (max-width: 1180px){
  .projectWorkspaceLayout,
  .projectLayout,
  .taskLayout,
  .tenantWorkspaceGrid,
  .tenantAdminLayout,
  .tenantUserGrid,
  .platformWorkspaceGrid,
  .platformAdminLayout{
    grid-template-columns:minmax(0, 1fr);
  }

  .projectList{
    max-height:none;
  }

  .projectSidebar,
  .taskSidebar{
    position:static;
  }

  .workspaceGrid{
    grid-template-columns:minmax(0, 1fr);
  }
}

@media (max-width: 820px){
  .platformDetailGrid{
    grid-template-columns:1fr;
  }
}

.mobileTopBar{ display:none; }
.sidebarBackdrop{ display:none; }

@media (max-width: 860px){
  body{
    flex-direction:column;
    height:100vh;
    height:100dvh;
    overflow:hidden;
  }

  /* Op mobiel staat .mobileTopBar als sibling ernaast (zie hieronder) — beiden
     zijn nu kolomkinderen van body. .appShell moet daarom meedelen in de
     resterende hoogte (flex:1 + min-height:0) i.p.v. zelf nogmaals de volle
     100vh op te eisen, anders overlapt de inhoud met de topbar en ontstaat
     onnodig scrollen/afknippen — precies op mobiel het meest zichtbaar. */
  .appShell{
    flex-direction:column;
    flex:1;
    width:100%;
    height:auto;
    min-height:0;
  }

  .mobileTopBar{
    display:flex;
    align-items:center;
    gap:14px;
    padding:14px 16px;
    background:#1f2937;
    color:#fff;
    flex:0 0 auto;
  }

  .mobileSidebarToggle{
    background:none;
    border:none;
    color:#fff;
    font-size:22px;
    line-height:1;
    cursor:pointer;
    padding:4px 8px;
  }

  .mobileTopBarBrand{
    font-weight:800;
    font-size:16px;
  }

  .sidebar{
    position:fixed;
    top:0;
    bottom:0;
    left:0;
    width:240px;
    z-index:500;
    transform:translateX(-100%);
    transition:transform 220ms ease;
  }

  .sidebar.is-open{
    transform:translateX(0);
  }

  .sidebarBackdrop.is-open{
    display:block;
    position:fixed;
    inset:0;
    background:rgba(15,23,42,0.5);
    z-index:400;
  }

  .content{
    padding:20px 16px 28px;
  }

  .workspaceGrid,
  .taskMetaGrid,
  .tenantInfoGrid{
    grid-template-columns:minmax(0, 1fr);
  }

  /* ── Agenda-module: taken boven, kalender eronder, dagen scrollen
     horizontaal met leesbare minimumbreedte i.p.v. samendrukken ── */
  .agendaBody{
    display:flex;
    flex-direction:column;
    gap:12px;
    overflow:visible;
  }

  .agendaTaskPanel{
    width:100%;
    flex-shrink:1;
    max-height:220px;
  }

  .agendaCalendarPanel{
    overflow:visible;
  }

  .agendaToolbar{
    gap:10px;
  }

  .agendaViewControls{
    width:100%;
  }

  .calendarNav{
    width:100%;
    justify-content:space-between;
  }

  .calendarLabel{
    min-width:0;
    flex:1;
    font-size:15px;
  }

  .viewToggle{
    width:100%;
  }

  .calendarNav button,
  .viewToggle button{
    padding:8px 10px;
    font-size:13px;
  }

  #agendaMonthView,
  #agendaWeekView,
  #agendaDayView{
    padding:10px;
    border-radius:14px;
  }

  .weekGrid{
    grid-template-columns:none;
    grid-auto-flow:column;
    grid-auto-columns:minmax(220px, 1fr);
  }

  .calendarMonth{
    grid-template-columns:none;
    grid-auto-flow:column;
    grid-auto-columns:minmax(130px, 1fr);
    overflow-x:auto;
  }

  .dayGrid{
    grid-template-columns:52px minmax(0, 1fr);
    gap:8px;
  }

  .dayHourLabel{
    font-size:11px;
  }
}