/* Trigion CV360 – Huistijl trigion.nl: donkerblauw #012F6C, accent rood #E4002B */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700&display=swap');

:root {
  /* Trigion huisstijl (trigion.nl) */
  --trigion-navy: #012F6C;
  --trigion-navy-dark: #001d47;
  --trigion-red: #E4002B;
  --trigion-red-hover: #c40024;
  --trigion-bg: #f5f6f8;
  --trigion-surface: #ffffff;
  --trigion-primary: #012F6C;
  --trigion-primary-light: #023a7f;
  --trigion-accent: #E4002B;
  --trigion-accent-hover: #c40024;
  --trigion-blue: #012F6C;
  --trigion-border: #d1d5db;
  --trigion-text: #1a1a2e;
  --trigion-text-muted: #4b5563;
  --trigion-success: #0d9488;
  --trigion-warning: #d97706;
  --trigion-danger: #dc2626;
  --trigion-radius: 6px;
  --trigion-shadow: 0 1px 3px rgba(1, 47, 108, 0.1);
  --trigion-font: 'Open Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--trigion-font);
  font-size: 15px;
  line-height: 1.5;
  color: var(--trigion-text);
  background: var(--trigion-bg);
  min-height: 100vh;
}

.cv360-container {
  max-width: 960px;
  margin: 0 auto;
  padding: 24px 20px;
}

.cv360-card {
  background: var(--trigion-surface);
  border-radius: var(--trigion-radius);
  box-shadow: var(--trigion-shadow);
  padding: 28px 32px;
  margin-bottom: 24px;
  border: 1px solid var(--trigion-border);
}

.cv360-card h1,
.cv360-card h2 {
  margin: 0 0 8px;
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--trigion-primary);
}

.cv360-card h2 {
  font-size: 1.1rem;
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--trigion-border);
}

.cv360-label {
  display: block;
  font-weight: 500;
  color: var(--trigion-primary-light);
  margin-bottom: 4px;
  font-size: 0.9rem;
}

.cv360-input,
.cv360-textarea,
.cv360-select {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--trigion-border);
  border-radius: 8px;
  font-family: inherit;
  font-size: 15px;
  margin-bottom: 14px;
  background: var(--trigion-surface);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.cv360-candidate-page .cv360-input:focus,
.cv360-candidate-page .cv360-textarea:focus,
.cv360-candidate-page .cv360-select:focus {
  border-color: var(--trigion-navy);
  box-shadow: 0 0 0 3px rgba(1, 47, 108, 0.1);
}

.cv360-input:focus,
.cv360-textarea:focus,
.cv360-select:focus {
  outline: none;
  border-color: var(--trigion-navy);
  box-shadow: 0 0 0 2px rgba(1, 47, 108, 0.12);
}

.cv360-input[type="date"] {
  padding: 9px 12px;
  cursor: pointer;
}

.cv360-candidate-page select.cv360-input {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  padding-right: 40px;
  min-height: 48px;
  background-color: var(--trigion-surface);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%234b5563' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10l-5 5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
}
.cv360-candidate-page select.cv360-input:hover { border-color: #9ca3af; }
.cv360-candidate-page select.cv360-input:focus {
  border-color: var(--trigion-navy);
  box-shadow: 0 0 0 3px rgba(1, 47, 108, 0.1);
}

.cv360-textarea {
  min-height: 90px;
  resize: vertical;
}

.cv360-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 20px;
  font-size: 15px;
  font-weight: 500;
  border-radius: var(--trigion-radius);
  border: none;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.2s, color 0.2s;
}

.cv360-btn-primary {
  background: var(--trigion-accent);
  color: #fff !important;
}
a.cv360-btn-primary:hover {
  color: #fff !important;
}

.cv360-btn-primary:hover {
  background: var(--trigion-accent-hover);
}

.cv360-btn-secondary {
  background: var(--trigion-surface);
  color: var(--trigion-primary);
  border: 1px solid var(--trigion-border);
}

.cv360-btn-secondary:hover {
  background: var(--trigion-bg);
}
.cv360-btn-danger {
  background: transparent;
  color: var(--trigion-text-muted);
  border: 1px solid var(--trigion-border);
  font-size: 0.85rem;
}
.cv360-btn-danger:hover {
  background: #fef2f2;
  color: var(--trigion-danger);
  border-color: #fecaca;
}
.cv360-delete-link {
  background: none;
  border: none;
  padding: 0;
  font-size: 0.85rem;
  color: var(--trigion-text-muted);
  cursor: pointer;
  font-family: inherit;
  text-decoration: none;
  margin-left: 12px;
}
.cv360-delete-link:hover {
  color: var(--trigion-danger);
  text-decoration: underline;
}
.cv360-delete-link:focus-visible {
  outline: 2px solid var(--trigion-primary);
  outline-offset: 2px;
}
.cv360-btn:focus-visible,
.cv360-th-link:focus-visible {
  outline: 2px solid var(--trigion-primary);
  outline-offset: 2px;
}
.cv360-btn-danger {
  background: var(--trigion-danger);
  color: #fff;
  border: none;
}
.cv360-btn-danger:hover { background: var(--trigion-red-hover); color: #fff; }
.cv360-btn-danger:focus-visible { outline: 2px solid var(--trigion-danger); outline-offset: 2px; }
.cv360-delete-form { display: inline-block; margin-left: 0; }
.cv360-delete-form-inline .cv360-delete-link { margin-left: 16px; }
.cv360-btn-sm {
  padding: 6px 14px;
  font-size: 0.85rem;
}
.cv360-td-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cv360-td-actions .cv360-delete-form .cv360-delete-link { margin-left: 8px; }
.cv360-candidate-card-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }

.cv360-header {
  text-align: center;
  margin-bottom: 28px;
}

.cv360-header h1 {
  font-size: 1.5rem;
  color: var(--trigion-primary);
  margin: 0 0 4px;
}

.cv360-header p {
  color: var(--trigion-text-muted);
  margin: 0;
  font-size: 0.95rem;
}

/* Status badges – scanbaar, contrastrijk */
.cv360-status,
.cv360-badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.cv360-badge-draft { background: #f1f5f9; color: #475569; }
.cv360-badge-submitted { background: #dbeafe; color: #1d4ed8; }
.cv360-badge-in_review { background: #fef3c7; color: #b45309; }
.cv360-badge-changes_requested { background: #fee2e2; color: #b91c1c; }
.cv360-badge-approved { background: #d1fae5; color: #047857; }
.cv360-email-status-sent { background: #d1fae5; color: #047857; }
.cv360-email-status-failed { background: #fee2e2; color: #b91c1c; }
.cv360-email-status-opened { background: #dbeafe; color: #1d4ed8; }
.cv360-email-status-clicked { background: #e0e7ff; color: #4338ca; }
.cv360-status-draft { background: #f1f5f9; color: #475569; }
.cv360-status-submitted { background: #dbeafe; color: #1d4ed8; }
.cv360-status-in_review { background: #fef3c7; color: #b45309; }
.cv360-status-changes_requested { background: #fee2e2; color: #b91c1c; }
.cv360-status-approved { background: #d1fae5; color: #047857; }

/* Grid for form rows */
.cv360-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

@media (max-width: 600px) {
  .cv360-row { grid-template-columns: 1fr; }
}

/* Admin header – donkerblauwe balk (Trigion huisstijl), witte logo + lichte tekst */
.cv360-admin-bar {
  background: var(--trigion-navy);
  color: #fff;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 56px;
  border-bottom: 1px solid var(--trigion-navy-dark);
  box-shadow: 0 1px 4px rgba(1, 47, 108, 0.2);
}

.cv360-admin-bar a {
  color: rgba(255, 255, 255, 0.9);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 500;
  padding: 8px 0;
  transition: color 0.15s;
}

.cv360-admin-bar a:hover {
  color: #fff;
}

.cv360-admin-bar .brand {
  padding: 0;
}

.cv360-admin-bar .cv360-brand-wrap {
  background: transparent;
  margin-left: 0;
}
.cv360-admin-bar .cv360-brand-wrap:hover {
  background: var(--trigion-navy-dark);
}

.cv360-nav-right {
  display: flex;
  align-items: center;
  gap: 24px;
}
.cv360-nav-user {
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.85rem;
  padding-left: 20px;
  margin-left: 4px;
  border-left: 1px solid rgba(255, 255, 255, 0.3);
}

/* Tab-navigatie voor view-wisseling */
.cv360-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--trigion-border);
  background: var(--trigion-surface);
  padding: 0 24px;
  margin-bottom: 0;
}
.cv360-tab {
  padding: 14px 20px;
  text-decoration: none;
  color: var(--trigion-text-muted);
  font-size: 0.9rem;
  font-weight: 500;
  border-bottom: 3px solid transparent;
  margin-bottom: -1px;
  transition: color 0.15s, border-color 0.15s;
}
.cv360-tab:hover {
  color: var(--trigion-navy);
}
.cv360-tab.is-active {
  color: var(--trigion-navy);
  border-bottom-color: var(--trigion-red);
}

@media (max-width: 600px) {
  .cv360-admin-bar { padding: 0 16px; }
  .cv360-nav-right { gap: 16px; }
  .cv360-nav-user { padding-left: 16px; margin-left: 0; }
}

.cv360-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.cv360-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
}

.cv360-table th,
.cv360-table td {
  padding: 12px 14px;
  text-align: left;
  vertical-align: middle;
  border-bottom: 1px solid var(--trigion-border);
}

.cv360-table th {
  font-weight: 600;
  color: var(--trigion-primary);
  background: var(--trigion-bg);
}

.cv360-table tr:hover td {
  background: #fafafa;
}

.cv360-table a {
  color: var(--trigion-red);
  text-decoration: none;
}

.cv360-table a:hover {
  color: var(--trigion-red-hover);
  text-decoration: underline;
}

.alert {
  padding: 16px 20px;
  border-radius: var(--trigion-radius);
  margin-bottom: 20px;
  border: 1px solid transparent;
  font-size: 0.95rem;
  line-height: 1.5;
}

.alert-success {
  background: #f0fdf4;
  color: #047857;
  border-color: #86efac;
  border-left: 4px solid var(--trigion-success);
}

.alert-error {
  background: #fef2f2;
  color: #b91c1c;
  border-color: #fecaca;
  border-left: 4px solid var(--trigion-danger);
}

.alert-info {
  background: #eff6ff;
  color: #1d4ed8;
  border-color: #bfdbfe;
  border-left: 4px solid var(--trigion-navy);
}

.form-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 20px;
}

/* Logo – witte variant op donkerblauwe achtergrond; gebruik trigion-logo-white.png voor scherp resultaat */
.cv360-logo-wrap {
  background: var(--trigion-navy);
  padding: 16px 24px;
  border-radius: var(--trigion-radius);
  display: inline-block;
}

.cv360-logo-wrap img {
  max-width: 220px;
  height: auto;
  display: block;
}

/* Logo op lichtblauwe/grijze achtergrond: schaduw voor betere leesbaarheid */
.cv360-logo-on-light img {
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.08)) drop-shadow(0 2px 4px rgba(1, 47, 108, 0.06));
}

.cv360-privacy-intro {
  font-size: 0.9rem;
  color: var(--trigion-text-muted);
  margin: 12px 0 0;
  padding: 10px 14px;
  background: #f0fdf4;
  border-radius: var(--trigion-radius);
  border-left: 4px solid var(--trigion-success);
}

.cv360-photo-upload { margin-bottom: 20px; }
.cv360-photo-hint { font-size: 0.85rem; color: var(--trigion-text-muted); margin: 0 0 10px; }
.cv360-photo-row { display: flex; align-items: flex-start; gap: 20px; flex-wrap: wrap; }
.cv360-photo-preview {
  width: 100px;
  height: 120px;
  border: 2px dashed var(--trigion-border);
  border-radius: var(--trigion-radius);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #f8fafc;
}
.cv360-photo-img { width: 100%; height: 100%; object-fit: cover; }
.cv360-photo-placeholder { font-size: 0.8rem; color: var(--trigion-text-muted); }
.cv360-input-file { padding: 8px 0; font-size: 0.9rem; }

/* Kandidaat-formulier – UX-optimalisatie */
/* Kandidaat-header – full-width navy bar, huisstijl */
.cv360-candidate-page { background: linear-gradient(180deg, #f8fafc 0%, var(--trigion-bg) 120px); }
.cv360-candidate-header { background: var(--trigion-navy); padding: 24px 24px; box-shadow: 0 2px 8px rgba(1, 47, 108, 0.2); }
.cv360-candidate-header-inner { max-width: 960px; margin: 0 auto; }
.cv360-candidate-header img { max-width: 200px; width: 200px; height: auto; display: block; }

.cv360-form-container { padding-top: 32px; }
.cv360-form-logo { background: var(--trigion-navy); padding: 18px 28px; border-radius: 8px; margin-bottom: 20px; display: inline-block; }
.cv360-form-logo img { max-width: 220px; height: auto; display: block; }

.cv360-intro { margin-bottom: 24px; }
.cv360-intro-enhanced {
  box-shadow: 0 2px 12px rgba(1, 47, 108, 0.08);
  border: 1px solid rgba(1, 47, 108, 0.08);
}
.cv360-intro h1 { margin: 0 0 8px; font-size: 1.5rem; color: var(--trigion-primary); font-weight: 700; }
.cv360-intro-lead { margin: 0 0 20px; font-size: 1.05rem; color: var(--trigion-text); line-height: 1.6; }
.cv360-intro-list { margin: 0; padding-left: 20px; color: var(--trigion-text-muted); font-size: 0.95rem; line-height: 1.8; }
.cv360-intro-features { display: flex; flex-direction: column; gap: 14px; margin: 0; }
.cv360-intro-feature {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; background: #f8fafc; border-radius: var(--trigion-radius);
  border: 1px solid var(--trigion-border); color: var(--trigion-text); font-size: 0.95rem;
}
.cv360-intro-feature-icon { font-size: 1.25rem; opacity: 0.9; }
.cv360-form-card { box-shadow: 0 2px 12px rgba(1, 47, 108, 0.08); border: 1px solid rgba(1, 47, 108, 0.06); }

/* Bedankt-pagina – Trigion huisstijl (navy + rood accent) */
.cv360-confirmation {
  margin-bottom: 24px;
  text-align: center;
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
  border-top: 4px solid var(--trigion-red);
}
.cv360-confirmation-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 16px;
  background: var(--trigion-red);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: 700;
}
.cv360-confirmation h1 { margin: 0 0 12px; font-size: 1.5rem; color: var(--trigion-navy); font-weight: 700; }
.cv360-confirmation-lead { margin: 0 0 16px; font-size: 1.1rem; font-weight: 600; color: var(--trigion-navy); }
.cv360-confirmation p { margin: 0 0 10px; color: var(--trigion-text); }
.cv360-confirmation-note { font-size: 0.9rem; color: var(--trigion-text-muted); margin-top: 20px !important; padding-top: 16px; border-top: 1px solid var(--trigion-border); }

/* Meldingen – link verlopen, goedgekeurd (Trigion huisstijl) */
.cv360-message-card { max-width: 560px; margin-left: auto; margin-right: auto; position: relative; padding-left: 72px; }
.cv360-message-icon {
  position: absolute;
  left: 24px;
  top: 28px;
  width: 40px;
  height: 40px;
  background: var(--trigion-navy);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  font-weight: 700;
}
.cv360-message-warning .cv360-message-icon { background: var(--trigion-warning); color: #fff; }
.cv360-message-success .cv360-message-icon { background: var(--trigion-red); color: #fff; }
.cv360-message-card h1 { margin: 0 0 12px; font-size: 1.35rem; font-weight: 700; color: var(--trigion-navy); }
.cv360-message-card p { margin: 0 0 10px; line-height: 1.6; color: var(--trigion-text); }
.cv360-message-card p:last-child { margin-bottom: 0; }
.cv360-message-warning { border-left: 4px solid var(--trigion-warning); background: #fffbeb; }
.cv360-message-success { border-left: 4px solid var(--trigion-red); background: #fef2f2; }
.cv360-message-note { font-size: 0.9rem; color: var(--trigion-text-muted); margin-top: 16px !important; }

@media (max-width: 600px) {
  .cv360-message-card { padding-left: 24px; padding-top: 24px; }
  .cv360-message-icon { position: static; margin-bottom: 16px; }
}

.cv360-progress-wrap { margin-bottom: 24px; }
.cv360-progress-sticky {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--trigion-surface);
  padding: 16px 0 20px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--trigion-border);
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.cv360-progress-bar {
  height: 6px;
  background: var(--trigion-border);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 12px;
}
.cv360-progress-fill {
  display: block;
  height: 100%;
  background: var(--trigion-red);
  border-radius: 999px;
  width: 0;
  transition: width 0.3s ease;
}
.cv360-progress-text { margin: 0 0 12px; font-size: 0.9rem; color: var(--trigion-text-muted); }
.cv360-step-dots {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 12px;
}
.cv360-step-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  font-size: 0.8rem;
  font-weight: 600;
  background: var(--trigion-border);
  color: var(--trigion-text-muted);
  transition: background 0.2s, color 0.2s;
}
.cv360-step-dot.is-active {
  background: var(--trigion-navy);
  color: #fff;
}

.cv360-step { margin-bottom: 28px; padding-bottom: 24px; border-bottom: 1px solid var(--trigion-border); }
.cv360-step:last-of-type { border-bottom: none; }
.cv360-step-title { margin: 0 0 16px; font-size: 1.1rem; display: flex; align-items: center; gap: 10px; }
.cv360-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: var(--trigion-navy);
  color: #fff;
  border-radius: 50%;
  font-size: 0.9rem;
  font-weight: 600;
}
.cv360-step-subsection { margin-bottom: 24px; }
.cv360-step-subsection:last-child { margin-bottom: 0; }
.cv360-subsection-title { margin: 0 0 12px; font-size: 1rem; font-weight: 600; color: var(--trigion-primary); }
.cv360-optional-group { background: #f1f5f9; border-radius: var(--trigion-radius); padding: 16px 18px; margin-top: 12px; border: 1px solid var(--trigion-border); }
.cv360-optional-label { font-size: 0.9rem; font-weight: 500; color: var(--trigion-text-muted); }
.cv360-period-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 14px; }
@media (max-width: 500px) { .cv360-period-row { grid-template-columns: 1fr; } }
.cv360-photo-reassurance { margin: 10px 0 0; font-size: 0.9rem; color: var(--trigion-text-muted); font-style: italic; }
.cv360-hint-inline { margin: 0 0 6px; font-size: 0.85rem; color: var(--trigion-text-muted); }
.cv360-error-inline { display: block; margin-top: 4px; font-size: 0.85rem; color: var(--trigion-danger); }
.cv360-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.cv360-optional { font-weight: 400; color: var(--trigion-text-muted); font-size: 0.85em; }
.cv360-block { margin-bottom: 16px; padding: 16px; background: #f8fafc; border-radius: var(--trigion-radius); border: 1px solid var(--trigion-border); }
.cv360-btn-add {
  background: transparent;
  color: var(--trigion-navy);
  border: 1px dashed var(--trigion-border);
  padding: 8px 16px;
  font-size: 0.9rem;
}
.cv360-btn-add:hover { border-color: var(--trigion-navy); background: rgba(1, 47, 108, 0.04); }

.cv360-consent-wrap { margin: 24px 0; padding: 16px; background: #f0f9ff; border-radius: var(--trigion-radius); border-left: 4px solid var(--trigion-navy); }
.cv360-consent-intro { margin: 0 0 12px; font-size: 0.95rem; color: var(--trigion-text); }
.cv360-consent-box { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; }
.cv360-consent-box input[type="checkbox"] { margin-top: 3px; }
.cv360-form-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--trigion-border);
}
.cv360-btn-cta { padding: 12px 24px; font-size: 1rem; font-weight: 600; min-height: 48px; }
.cv360-btn-link { background: none; border: none; color: var(--trigion-primary); text-decoration: underline; cursor: pointer; font-size: 0.95rem; padding: 0; }
.cv360-btn-link:hover { color: var(--trigion-primary-light); }
.cv360-btn-link:focus-visible { outline: 2px solid var(--trigion-primary); outline-offset: 2px; }
.cv360-actions-reassurance { margin: 0; font-size: 0.9rem; color: var(--trigion-text-muted); }

.consent-box {
  background: #f8fafc;
  border: 1px solid var(--trigion-border);
  border-radius: var(--trigion-radius);
  padding: 14px;
  margin: 16px 0;
}

.consent-box label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
}

.consent-box input[type="checkbox"] {
  margin-top: 3px;
}

.step-nav {
  display: flex;
  justify-content: space-between;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--trigion-border);
}

/* Dashboard – rechte, strakke layout */
.cv360-dashboard-header {
  margin: 28px 0 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--trigion-border);
}

.cv360-dashboard-header h1 {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--trigion-primary);
  letter-spacing: -0.01em;
}

.cv360-page-header-row {
  margin: 8px 0 16px;
}
.cv360-detail-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.cv360-back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--trigion-primary);
  text-decoration: none;
  font-weight: 500;
  font-size: 0.95rem;
}
.cv360-back-link:hover {
  color: var(--trigion-accent);
  text-decoration: underline;
}

.cv360-brand-wrap {
  display: flex;
  align-items: center;
  background: var(--trigion-navy);
  padding: 8px 14px !important;
  border-radius: 6px;
  margin-left: -4px;
}
.cv360-brand-wrap:hover { background: var(--trigion-navy-dark); }
.cv360-nav-logo {
  height: 32px;
  width: auto;
  display: block;
}

.cv360-invite-success { padding: 16px 20px; }
.cv360-invite-success-text { margin: 0 0 8px; }
.cv360-invite-link-label { margin: 8px 0 4px; font-weight: 500; }
.cv360-invite-link-wrap {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.cv360-invite-link-input {
  flex: 1;
  min-width: 200px;
  padding: 8px 10px;
  font-size: 0.9rem;
  border: 1px solid var(--trigion-border);
  border-radius: var(--trigion-radius);
}

.cv360-action-required { border-left: 4px solid var(--trigion-warning); }
.cv360-action-required-desc { margin: 0 0 12px; color: var(--trigion-text-muted); font-size: 0.9rem; }
.cv360-action-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.cv360-action-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--trigion-border);
}
.cv360-action-list li:last-child { border-bottom: none; }

/* E-mail log */
/* E-mailverkeer: verticale timeline (nieuwste bovenaan) */
.cv360-text-muted { color: var(--trigion-text-muted); font-size: 0.95rem; }
.cv360-timeline { position: relative; padding-left: 0; list-style: none; }
.cv360-timeline::before { content: ''; position: absolute; left: 11px; top: 8px; bottom: 8px; width: 2px; background: var(--trigion-border); border-radius: 1px; }
.cv360-timeline-item { position: relative; display: flex; gap: 16px; padding-bottom: 20px; }
.cv360-timeline-item:last-child { padding-bottom: 0; }
.cv360-timeline-marker { flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%; background: var(--trigion-surface); border: 2px solid var(--trigion-border); display: flex; align-items: center; justify-content: center; z-index: 1; }
.cv360-timeline-status-sent .cv360-timeline-marker { border-color: #0d9488; background: #ccfbf1; }
.cv360-timeline-status-opened .cv360-timeline-marker { border-color: #1d4ed8; background: #dbeafe; }
.cv360-timeline-status-clicked .cv360-timeline-marker { border-color: #4338ca; background: #e0e7ff; }
.cv360-timeline-status-failed .cv360-timeline-marker { border-color: var(--trigion-danger); background: #fee2e2; }
.cv360-timeline-icon { color: var(--trigion-text-muted); }
.cv360-timeline-status-sent .cv360-timeline-icon { color: #047857; }
.cv360-timeline-status-failed .cv360-timeline-icon { color: var(--trigion-danger); }
.cv360-timeline-content { flex: 1; min-width: 0; padding: 12px 14px; background: #f8fafc; border-radius: var(--trigion-radius); border: 1px solid var(--trigion-border); }
.cv360-timeline-header { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 8px; margin-bottom: 6px; }
.cv360-timeline-title { font-weight: 600; color: var(--trigion-primary); font-size: 0.95rem; }
.cv360-timeline-meta { font-size: 0.875rem; color: var(--trigion-text-muted); display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; }
.cv360-timeline-recipient { font-style: normal; }
.cv360-timeline-date::before { content: '· '; margin-right: 2px; }
.cv360-timeline-error { margin: 8px 0 0; font-size: 0.85rem; color: var(--trigion-danger); }
.cv360-email-log { display: flex; flex-direction: column; gap: 12px; }
.cv360-email-log-item { padding: 12px 16px; background: #f8fafc; border-radius: var(--trigion-radius); border: 1px solid var(--trigion-border); border-left: 4px solid var(--trigion-navy); }
.cv360-email-log-item.cv360-email-log-failed { border-left-color: var(--trigion-danger); }
.cv360-email-log-header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 4px; }
.cv360-email-log-type { font-weight: 600; color: var(--trigion-primary); }
.cv360-email-log-meta { font-size: 0.9rem; color: var(--trigion-text-muted); }
.cv360-email-log-date { margin-left: 12px; }
.cv360-email-log-error { margin: 8px 0 0; font-size: 0.85rem; color: var(--trigion-danger); }

/* KPI cards – actiegericht, met nadruk op “Actie nodig” */
.cv360-kpi-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 24px;
}
@media (max-width: 700px) {
  .cv360-kpi-row { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 400px) {
  .cv360-kpi-row { grid-template-columns: 1fr; }
}
.cv360-kpi {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  min-height: 120px;
  padding: 16px;
  background: var(--trigion-surface);
  border-radius: var(--trigion-radius);
  border: 1px solid var(--trigion-border);
  text-decoration: none;
  color: inherit;
  text-align: center;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s;
}
.cv360-kpi:hover {
  border-color: var(--trigion-navy);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(1, 47, 108, 0.1);
}
.cv360-kpi:focus { outline: none; }
.cv360-kpi:focus-visible {
  border-color: var(--trigion-navy);
  box-shadow: 0 0 0 3px rgba(1, 47, 108, 0.25);
}
.cv360-kpi-active {
  border-color: var(--trigion-navy);
  box-shadow: 0 2px 8px rgba(1, 47, 108, 0.12);
}
.cv360-kpi-active:focus-visible {
  box-shadow: 0 0 0 3px rgba(1, 47, 108, 0.25), 0 2px 8px rgba(1, 47, 108, 0.12);
}
.cv360-kpi-action_needed .cv360-kpi-value,
.cv360-kpi-action .cv360-kpi-value { color: var(--trigion-red); }
.cv360-kpi-action_needed .cv360-kpi-icon,
.cv360-kpi-action .cv360-kpi-icon { color: var(--trigion-red); opacity: 0.9; }
.cv360-kpi-draft {
  border-left: 4px solid var(--trigion-warning);
  background: linear-gradient(135deg, #fff 0%, #fffbeb 100%);
}
.cv360-kpi-draft:hover { border-color: var(--trigion-warning); }
.cv360-kpi-draft.cv360-kpi-active {
  border-color: var(--trigion-warning);
  background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
}
.cv360-kpi-draft .cv360-kpi-value { color: #b45309; }
.cv360-kpi-draft .cv360-kpi-icon { color: var(--trigion-warning); opacity: 0.9; }
.cv360-kpi-submitted {
  border-left: 4px solid var(--trigion-warning);
  background: linear-gradient(135deg, #fff 0%, #fffbeb 100%);
}
.cv360-kpi-submitted:hover { border-color: var(--trigion-warning); }
.cv360-kpi-submitted.cv360-kpi-active {
  border-color: var(--trigion-warning);
  background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
}
.cv360-kpi-submitted .cv360-kpi-value { color: #b45309; }
.cv360-kpi-submitted .cv360-kpi-icon { color: var(--trigion-warning); opacity: 0.9; }
.cv360-kpi-approved {
  border-left: 4px solid var(--trigion-success);
  background: linear-gradient(135deg, #fff 0%, #f0fdf4 100%);
}
.cv360-kpi-approved:hover { border-color: var(--trigion-success); }
.cv360-kpi-approved.cv360-kpi-active {
  border-color: var(--trigion-success);
  background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
}
.cv360-kpi-approved .cv360-kpi-value { color: var(--trigion-success); }
.cv360-kpi-approved .cv360-kpi-icon { color: var(--trigion-success); opacity: 0.9; }
.cv360-kpi-action_needed,
.cv360-kpi-action {
  border-left: 4px solid var(--trigion-red);
  background: linear-gradient(135deg, #fff 0%, #fef2f2 100%);
}
.cv360-kpi-action_needed:hover,
.cv360-kpi-action:hover { border-color: var(--trigion-red); }
.cv360-kpi-action_needed.cv360-kpi-active,
.cv360-kpi-action.cv360-kpi-active {
  border-color: var(--trigion-red);
  background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
}
.cv360-kpi-icon {
  display: block;
  margin-bottom: 8px;
  flex-shrink: 0;
}
.cv360-kpi-icon svg { display: block; margin: 0 auto; }
.cv360-kpi-value {
  display: block;
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--trigion-primary);
  line-height: 1.2;
}
.cv360-kpi-label {
  display: block;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--trigion-text);
  margin-top: 4px;
}
.cv360-kpi-hint {
  display: block;
  font-size: 0.75rem;
  color: var(--trigion-text-muted);
  margin-top: 4px;
}
/* Legacy stat classes voor backwards compat */
.cv360-stats-row { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 24px; }
.cv360-stat { flex: 1; min-width: 80px; padding: 16px; background: var(--trigion-surface); border-radius: var(--trigion-radius); border: 1px solid var(--trigion-border); text-decoration: none; color: inherit; text-align: center; }
.cv360-stat-value { display: block; font-size: 1.5rem; font-weight: 700; color: var(--trigion-primary); }
.cv360-stat-label { font-size: 0.85rem; color: var(--trigion-text-muted); }

.cv360-invite-card { margin-bottom: 24px; }
.cv360-invite-deadline { max-width: 200px; }
.cv360-field-wrap { margin-bottom: 16px; }
.cv360-field-error {
  display: block;
  margin-top: 6px;
  font-size: 0.85rem;
  color: var(--trigion-danger);
}
.cv360-field-error:empty,
.cv360-field-error[style*="display:none"] { display: none !important; }
.cv360-form-hint {
  margin-top: 6px;
  font-size: 0.85rem;
  color: var(--trigion-text-muted);
}
.cv360-input.cv360-input-error,
input.cv360-input-error {
  border-color: var(--trigion-danger);
  box-shadow: 0 0 0 1px var(--trigion-danger);
}

.cv360-table-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 16px;
}
.cv360-table-header h2 { margin: 0; border: none; padding: 0; }
.cv360-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.cv360-search-form {
  display: flex;
  gap: 0;
  align-items: stretch;
}
.cv360-search-input {
  height: 38px;
  padding: 0 14px;
  border: 1px solid var(--trigion-border);
  border-right: none;
  border-radius: 8px 0 0 8px;
  min-width: 220px;
  font-size: 0.9rem;
  font-family: inherit;
  background: var(--trigion-surface);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.cv360-search-input::placeholder { color: #9ca3af; }
.cv360-search-input:focus {
  outline: none;
  border-color: var(--trigion-navy);
  box-shadow: 0 0 0 2px rgba(1, 47, 108, 0.1);
}
.cv360-search-form .cv360-btn {
  height: 38px;
  padding: 0 16px;
  border-radius: 0 8px 8px 0;
  border: 1px solid var(--trigion-border);
  border-left: none;
  font-size: 0.9rem;
}
.cv360-filter-form {
  display: flex;
  align-items: center;
  gap: 8px;
}
.cv360-label-inline { margin: 0; font-size: 0.9rem; color: var(--trigion-text-muted); }
.cv360-select-inline {
  height: 38px;
  padding: 0 36px 0 12px;
  border: 1px solid var(--trigion-border);
  border-radius: 8px;
  font-size: 0.9rem;
  font-family: inherit;
  background: var(--trigion-surface);
  color: var(--trigion-text);
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%234b5563' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10l-5 5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.cv360-select-inline:hover { border-color: #9ca3af; }
.cv360-select-inline:focus {
  outline: none;
  border-color: var(--trigion-navy);
  box-shadow: 0 0 0 2px rgba(1, 47, 108, 0.1);
}

.cv360-th-link {
  color: inherit;
  text-decoration: none;
}
.cv360-th-link:hover { color: var(--trigion-red); }

.cv360-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.cv360-candidate-cell { display: flex; flex-direction: column; gap: 2px; }
.cv360-candidate-name { display: block; font-weight: 700; color: var(--trigion-text); }
.cv360-candidate-email { display: block; font-size: 0.85rem; color: var(--trigion-text-muted); }
.cv360-open-sinds { font-size: 0.9rem; color: var(--trigion-text-muted); }
/* Kolom Open sinds: alleen benodigde breedte */
.cv360-table td:nth-child(3),
.cv360-table th:nth-child(3) {
  width: 1%;
  white-space: nowrap;
}
.cv360-th-actions, .cv360-td-actions {
  width: 1%;
  min-width: 200px;
  white-space: nowrap;
  text-align: right;
}
.cv360-td-actions-inner {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: nowrap;
}
.cv360-td-actions-inner .cv360-btn,
.cv360-td-actions-inner .cv360-delete-link { flex-shrink: 0; }
/* Actiekolom: alleen benodigde breedte, geen grote gap na Open sinds */
.cv360-table td.cv360-td-actions {
  display: table-cell;
  width: 1%;
  text-align: right;
  white-space: nowrap;
}
.cv360-table th.cv360-th-actions {
  width: 1%;
  text-align: right;
}
.cv360-table .cv360-btn { text-decoration: none; }
.cv360-btn-icon-label { display: inline-flex; align-items: center; gap: 6px; }
.cv360-btn-icon-label .cv360-icon { flex-shrink: 0; }
.cv360-delete-trigger { margin-left: 0; }
.cv360-table tr.cv360-row-urgent td { background: #fef3c7; border-left: 3px solid var(--trigion-warning); }
.cv360-table tr.cv360-row-urgent:hover td { background: #fef9c3; }

/* Delete confirmation modal */
.cv360-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.cv360-modal[hidden] { display: none !important; }
.cv360-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  cursor: pointer;
}
.cv360-modal-dialog {
  position: relative;
  background: var(--trigion-surface);
  border-radius: var(--trigion-radius);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  padding: 24px;
  max-width: 420px;
  width: 100%;
  border: 1px solid var(--trigion-border);
}
.cv360-modal-title { margin: 0 0 12px; font-size: 1.2rem; color: var(--trigion-primary); }
.cv360-modal-desc { margin: 0 0 20px; color: var(--trigion-text); font-size: 0.95rem; line-height: 1.5; }
.cv360-modal-actions { display: flex; gap: 12px; justify-content: flex-end; flex-wrap: wrap; }

/* Export CV: waarschuwingsblok en knoppen */
.cv360-export-card .cv360-export-warning {
  background: #fffbeb;
  border: 1px solid #fcd34d;
  border-left: 4px solid var(--trigion-warning);
  border-radius: var(--trigion-radius);
  padding: 16px 20px;
  margin-top: 12px;
}
.cv360-export-warning-title { font-weight: 600; color: #92400e; margin: 0 0 10px; font-size: 0.95rem; }
.cv360-export-warning-list { margin: 0 0 12px; padding-left: 20px; color: #78350f; font-size: 0.9rem; line-height: 1.6; }
.cv360-export-warning-desc { margin: 0 0 16px; font-size: 0.9rem; color: var(--trigion-text-muted); }
.cv360-export-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.cv360-btn-export-html, .cv360-btn-export-pdf {
  display: inline-flex; align-items: center; gap: 8px; text-decoration: none; cursor: pointer; font-family: inherit;
  font-size: 0.95rem; padding: 10px 18px; border-radius: 8px; border: none; font-weight: 500;
}
.cv360-btn-export-html { background: var(--trigion-primary); color: #fff; }
.cv360-btn-export-html:hover { background: var(--trigion-primary-light); color: #fff; }
.cv360-btn-export-pdf { background: #1e293b; color: #fff; }
.cv360-btn-export-pdf:hover { background: #334155; color: #fff; }
.cv360-export-icon { flex-shrink: 0; }
.cv360-btn-export-html:focus-visible, .cv360-btn-export-pdf:focus-visible { outline: 2px solid var(--trigion-primary); outline-offset: 2px; }
.cv360-btn-export-pdf:focus-visible { outline-color: #1e293b; }

/* Empty state: wrapper voor gecentreerde, gestapelde inhoud */
.cv360-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 48px 24px;
  max-width: 420px;
  margin: 0 auto;
}
.cv360-empty-title {
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--trigion-primary);
  margin: 0 0 12px;
}
.cv360-empty-desc {
  margin: 0 0 20px;
  color: var(--trigion-text-muted);
  font-size: 0.95rem;
  line-height: 1.5;
}
.cv360-empty-state .cv360-btn { margin-top: 4px; }
/* Empty state in tabel: cel over volle breedte, inhoud gecentreerd */
.cv360-table td.cv360-empty-state-cell {
  vertical-align: middle;
  width: 100%;
  padding: 0;
  border-bottom: 1px solid var(--trigion-border);
}
.cv360-table td.cv360-empty-state-cell .cv360-empty-state {
  width: 100%;
}
/* Empty state in cardweergave (mobiel) */
.cv360-candidate-cards .cv360-empty-state.cv360-card {
  margin: 0 auto 0;
  padding: 48px 24px;
}

.cv360-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--trigion-border);
}
.cv360-page-link {
  color: var(--trigion-red);
  text-decoration: none;
  font-weight: 500;
}
.cv360-page-link:hover { text-decoration: underline; }
.cv360-page-info { font-size: 0.9rem; color: var(--trigion-text-muted); }

/* Responsive: kaartweergave op mobiel */
@media (max-width: 700px) {
  .cv360-table-wrap { overflow-x: auto; }
  .cv360-table { display: none; }
  .cv360-cards { display: block; }
  .cv360-table-header { flex-direction: column; align-items: stretch; }
  .cv360-search-form { flex-direction: column; align-items: stretch; }
  .cv360-search-input { min-width: 100%; }
}

.cv360-candidate-cards {
  display: none;
}
@media (max-width: 700px) {
  .cv360-table-wrap { overflow: visible; }
  .cv360-table { display: none; }
  .cv360-candidate-cards {
    display: block;
  }
  .cv360-candidate-card {
    padding: 16px;
    border: 1px solid var(--trigion-border);
    border-radius: var(--trigion-radius);
    margin-bottom: 12px;
    background: var(--trigion-surface);
  }
  .cv360-candidate-card-name { font-weight: 600; margin-bottom: 4px; }
  .cv360-candidate-card-email { font-size: 0.9rem; color: var(--trigion-text-muted); margin-bottom: 8px; }
  .cv360-candidate-card-meta { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; flex-wrap: wrap; gap: 8px; }
  .cv360-candidate-card a { font-weight: 500; }
}