:root {
  --zorg-primary: #13aeb5;
  --zorg-primary-dark: #078f98;
  --zorg-primary-soft: #e7f7f8;
  --zorg-navy: #101c4d;
  --zorg-text: #26345d;
  --zorg-muted: #7e8aa7;
  --zorg-bg: #f9fbfd;
  --zorg-card: #ffffff;
  --zorg-border: #e8edf5;
  --zorg-blue: #5385ff;
  --zorg-blue-soft: #eaf0ff;
  --zorg-green: #31bb7a;
  --zorg-green-soft: #e6f8ef;
  --zorg-orange: #ff9d45;
  --zorg-orange-soft: #fff1e4;
  --zorg-red: #f35c6e;
  --zorg-red-soft: #fdecee;
  --zorg-purple: #8c6bdf;
  --zorg-purple-soft: #f1ecfb;
  --zorg-radius: 16px;
  --zorg-radius-sm: 12px;
  --zorg-shadow: 0 8px 24px rgba(16, 28, 77, 0.04);
  --zorg-shadow-hover: 0 10px 28px rgba(16, 28, 77, 0.07);
  --zorg-sidebar: 248px;
  --zorg-topbar: 72px;
  --zorg-font: "Plus Jakarta Sans", Inter, system-ui, sans-serif;
  --zorg-ease: 180ms ease;
}

*,
*::before,
*::after { box-sizing: border-box; }

html, body {
  margin: 0;
  min-height: 100%;
  background: var(--zorg-bg);
  color: var(--zorg-text);
  font-family: var(--zorg-font);
  font-size: 14.5px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5 {
  color: var(--zorg-navy);
  font-weight: 650;
  letter-spacing: -0.02em;
  margin: 0;
}

a { color: var(--zorg-primary); text-decoration: none; }
a:hover { color: var(--zorg-primary-dark); }

img { max-width: 100%; }

.app-shell {
  min-height: 100vh;
  display: flex;
  background: var(--zorg-bg);
}

.sidebar {
  width: var(--zorg-sidebar);
  background: #fff;
  border-right: 1px solid var(--zorg-border);
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 22px 16px 18px;
  z-index: 40;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 8px 22px;
  color: var(--zorg-navy);
  font-weight: 700;
  font-size: 20px;
}

.brand img { width: 34px; height: 34px; border-radius: 0; object-fit: contain; }

.brand-mark {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #7ee0e4, var(--zorg-primary));
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 16px;
}

.nav-list { list-style: none; margin: 0; padding: 0; flex: 1; }
.nav-list a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  color: var(--zorg-text);
  font-weight: 540;
  position: relative;
  transition: background var(--zorg-ease), color var(--zorg-ease);
}
.nav-list a i { font-size: 16px; width: 18px; color: var(--zorg-muted); }
.nav-list a:hover { background: #f4f8fb; color: var(--zorg-navy); }
.nav-list a.active {
  background: var(--zorg-primary-soft);
  color: var(--zorg-primary-dark);
  font-weight: 620;
}
.nav-list a.active::before {
  content: "";
  position: absolute;
  left: -16px;
  top: 8px;
  bottom: 8px;
  width: 4px;
  border-radius: 4px;
  background: var(--zorg-primary);
}
.nav-list a.active i { color: var(--zorg-primary); }

.nav-badge {
  margin-left: auto;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.nav-badge.alert { background: var(--zorg-red); color: #fff; }
.nav-badge.neutral { background: #eef1f6; color: var(--zorg-muted); }

.companion-card {
  margin-top: 12px;
  background: #fff;
  border: 1px solid var(--zorg-border);
  border-radius: 16px;
  padding: 14px;
  text-align: left;
}
.companion-card img {
  width: 92px;
  height: 92px;
  object-fit: contain;
  margin: 0 auto 6px;
}
.companion-card h4 { font-size: 13px; margin-bottom: 4px; }
.companion-card p { font-size: 12px; color: var(--zorg-muted); margin: 0 0 10px; line-height: 1.4; }

.schakel-card {
  position: relative;
  background: #fff;
  border: 1px solid var(--zorg-border);
  border-radius: 16px;
  padding: 18px 16px 16px;
  overflow: hidden;
}
.schakel-accent {
  position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
}
.schakel-icon {
  width: 36px; height: 36px; border-radius: 10px;
  display: grid; place-items: center; font-size: 16px; margin-bottom: 10px;
}
.schakel-chip {
  display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .03em;
  text-transform: uppercase; color: var(--zorg-muted); margin-bottom: 6px;
}
.sidebar .schakel-card { margin-top: 12px; padding: 14px; }
.sidebar .schakel-card h4 { font-size: 13px; margin: 0 0 6px; }
.sidebar .schakel-card p { font-size: 12px; color: var(--zorg-muted); margin: 0 0 10px; line-height: 1.4; }
.schakel-drawer-mark {
  width: 36px; height: 36px; border-radius: 10px;
  display: grid; place-items: center; font-size: 16px; flex-shrink: 0;
}

.app-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.topbar {
  height: var(--zorg-topbar);
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 28px;
  background: transparent;
}

.search-wrap {
  flex: 1;
  max-width: 560px;
  margin: 0 auto;
  position: relative;
}
.search-wrap i {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--zorg-muted);
}
.search-wrap input {
  width: 100%;
  height: 42px;
  border: 1px solid var(--zorg-border);
  background: #fff;
  border-radius: 999px;
  padding: 0 16px 0 42px;
  color: var(--zorg-text);
  box-shadow: none;
}
.search-wrap input:focus {
  outline: none;
  border-color: #bfecee;
  box-shadow: 0 0 0 4px rgba(19, 174, 181, 0.12);
}

.context-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 42px;
  padding: 0 14px;
  background: #fff;
  border: 1px solid var(--zorg-border);
  border-radius: 999px;
  color: var(--zorg-navy);
  font-weight: 600;
  white-space: nowrap;
}
.context-chip i { color: var(--zorg-primary); }

.topbar-actions { display: flex; align-items: center; gap: 14px; margin-left: auto; }
.icon-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--zorg-border);
  background: #fff;
  display: grid;
  place-items: center;
  position: relative;
  color: var(--zorg-text);
}
.icon-btn .dot {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 8px;
  height: 8px;
  background: var(--zorg-red);
  border-radius: 50%;
  border: 2px solid #fff;
}

.user-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  background: transparent;
  border: 0;
  text-align: left;
  color: inherit;
}
.user-chip strong { display: block; font-size: 13.5px; color: var(--zorg-navy); }
.user-chip span { display: block; font-size: 12px; color: var(--zorg-muted); }

.page {
  padding: 8px 28px 32px;
}

.page-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 18px; }
.page-kicker { font-size: 13px; color: var(--zorg-muted); margin-bottom: 4px; }
.page-title { font-size: 30px; line-height: 1.15; }
.page-sub { color: var(--zorg-muted); margin-top: 4px; }

.btn, .btn-zorg {
  border-radius: 12px;
  font-weight: 600;
  padding: 8px 14px;
  border: 1px solid transparent;
  transition: all var(--zorg-ease);
  font-size: 13.5px;
}
.btn-zorg-primary, .btn-primary {
  background: var(--zorg-primary);
  border-color: var(--zorg-primary);
  color: #fff;
}
.btn-zorg-primary:hover, .btn-primary:hover { background: var(--zorg-primary-dark); border-color: var(--zorg-primary-dark); color: #fff; }
.btn-zorg-ghost, .btn-outline-secondary {
  background: #fff;
  border-color: var(--zorg-border);
  color: var(--zorg-text);
}
.btn-zorg-ghost:hover { background: #f6f8fc; color: var(--zorg-navy); }

.card, .zorg-card {
  background: var(--zorg-card);
  border: 1px solid var(--zorg-border);
  border-radius: var(--zorg-radius);
  box-shadow: var(--zorg-shadow);
}
.zorg-card { padding: 18px 18px 16px; }
.zorg-card:hover { box-shadow: var(--zorg-shadow-hover); }
.card-title, .zorg-card-title {
  font-size: 15px;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.avatar, .avatar-sm, .avatar-lg {
  border-radius: 50%;
  object-fit: cover;
  background: #dbe7ef;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--zorg-navy);
  font-weight: 700;
  overflow: hidden;
  flex-shrink: 0;
}
.avatar { width: 36px; height: 36px; font-size: 12px; }
.avatar-sm { width: 28px; height: 28px; font-size: 11px; }
.avatar-lg { width: 72px; height: 72px; font-size: 22px; }
.avatar-xl { width: 88px; height: 88px; font-size: 26px; border-radius: 50%; }

.priority-high, .priority-medium, .priority-low,
.status-concept, .status-review, .status-final, .status-shared,
.status-sent, .status-read, .status-open, .status-done,
.badge-ai, .badge-new {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 650;
  line-height: 1.4;
}
.priority-high { background: var(--zorg-red-soft); color: #d64557; }
.priority-medium { background: var(--zorg-orange-soft); color: #e07a20; }
.priority-low { background: #e7f7f4; color: #1aa38c; }
.status-concept { background: var(--zorg-blue-soft); color: var(--zorg-blue); }
.status-review { background: var(--zorg-orange-soft); color: #e07a20; }
.status-final, .status-done, .status-sent, .status-shared { background: var(--zorg-green-soft); color: #1e9a62; }
.status-read { background: #eef1f6; color: var(--zorg-muted); }
.status-open { background: var(--zorg-blue-soft); color: var(--zorg-blue); }
.badge-ai { background: #eaf3ff; color: #3d78e8; }
.badge-new { background: var(--zorg-blue-soft); color: var(--zorg-blue); }

.kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 16px; }
.kpi-card { padding: 16px 18px; }
.kpi-card .kpi-icon {
  width: 36px; height: 36px; border-radius: 12px;
  display: grid; place-items: center; margin-bottom: 10px; font-size: 16px;
}
.kpi-card h3 { font-size: 13px; font-weight: 600; color: var(--zorg-muted); margin-bottom: 4px; }
.kpi-card .kpi-value { font-size: 22px; color: var(--zorg-navy); font-weight: 700; }
.kpi-card .kpi-meta { font-size: 12.5px; margin-top: 4px; }
.kpi-meta.up { color: var(--zorg-green); }
.kpi-meta.down, .kpi-meta.alert { color: var(--zorg-red); }
.kpi-bar { height: 4px; border-radius: 4px; margin-top: 12px; background: #f0f3f8; overflow: hidden; }
.kpi-bar span { display: block; height: 100%; border-radius: 4px; }

.filter-bar {
  display: flex; gap: 10px; flex-wrap: wrap; align-items: center;
  background: #fff; border: 1px solid var(--zorg-border); border-radius: 14px;
  padding: 10px 12px; margin-bottom: 16px;
}
.filter-bar .form-select, .filter-bar .form-control {
  border-radius: 10px; border-color: var(--zorg-border); min-width: 160px; font-size: 13.5px;
}

.soft-progress { height: 8px; background: #eef2f7; border-radius: 99px; overflow: hidden; }
.soft-progress > div { height: 100%; border-radius: 99px; background: var(--zorg-primary); }

.toast-container { z-index: 1080; }
.toast { border: 1px solid var(--zorg-border); border-radius: 14px; box-shadow: var(--zorg-shadow-hover); }
.toast-header { border-bottom: 0; background: transparent; }

.drawer {
  position: fixed; top: 0; right: 0; width: 420px; max-width: 100%;
  height: 100vh; background: #fff; z-index: 1050;
  box-shadow: -12px 0 40px rgba(16,28,77,.08);
  transform: translateX(100%);
  transition: transform 220ms ease;
  display: flex; flex-direction: column;
}
.drawer.open { transform: translateX(0); }
.drawer-backdrop {
  position: fixed; inset: 0; background: rgba(16,28,77,.18); z-index: 1040;
  opacity: 0; pointer-events: none; transition: opacity 220ms ease;
}
.drawer-backdrop.open { opacity: 1; pointer-events: auto; }

.modal-content { border: 0; border-radius: 18px; box-shadow: var(--zorg-shadow-hover); }
.modal-header, .modal-footer { border-color: var(--zorg-border); }
.form-control, .form-select {
  border-color: var(--zorg-border); border-radius: 12px; color: var(--zorg-text);
}
.form-control:focus, .form-select:focus {
  border-color: #bfecee; box-shadow: 0 0 0 4px rgba(19,174,181,.12);
}

.dropdown-menu { border: 1px solid var(--zorg-border); border-radius: 14px; box-shadow: var(--zorg-shadow-hover); padding: 8px; }
.dropdown-item { border-radius: 8px; font-size: 13.5px; }

.ai-box {
  background: var(--zorg-purple-soft);
  border-radius: 14px;
  padding: 14px;
}
.ai-box.teal { background: #eefaf8; }

.table-like { display: flex; flex-direction: column; gap: 8px; }
.row-card {
  background: #fff; border: 1px solid var(--zorg-border); border-radius: 14px;
  padding: 12px 14px; display: grid; align-items: center; gap: 12px;
  transition: box-shadow var(--zorg-ease), border-color var(--zorg-ease);
  cursor: pointer;
}
.row-card:hover { border-color: #d5e3ee; box-shadow: var(--zorg-shadow); }
.row-card.selected { border-color: var(--zorg-primary); box-shadow: 0 0 0 3px rgba(19,174,181,.12); }

.link-more { font-size: 13px; font-weight: 600; color: var(--zorg-muted); }
.link-more:hover { color: var(--zorg-primary); }

.skeleton { background: linear-gradient(90deg,#eef2f7,#f7f9fc,#eef2f7); background-size: 200% 100%; animation: shimmer 1.2s infinite; border-radius: 8px; }
@keyframes shimmer { to { background-position: -200% 0; } }

.login-shell {
  min-height: 100vh; display: grid; place-items: center;
  background: radial-gradient(circle at 20% 20%, #e7f7f8, var(--zorg-bg) 45%);
}
.login-card { width: 420px; max-width: calc(100% - 32px); padding: 32px; }
.login-card h1 { font-size: 26px; margin-bottom: 6px; }

.offcanvas-sidebar { width: var(--zorg-sidebar); }