:root{
  --bg:#ffffff;
  --text:#111827;
  --muted:#6b7280;
  --border:#e5e7eb;
  --primary:#111827;
  --primaryText:#ffffff;
  --max:1800px;
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Apple Color Emoji","Segoe UI Emoji";
  background:var(--bg);
  color:var(--text);
}

a{ color:inherit; text-decoration:none; }
a:hover{ text-decoration:underline; }

.container{
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 16px;
}

.site-header{
  border-bottom:1px solid var(--border);
  background:#fff;
  position: sticky;
  top:0;
  z-index: 50;
}

.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:64px;
  gap:16px;
}

.brand{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:800;
  letter-spacing:-.02em;
}

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

.badge{
  font-size:12px;
  color:var(--muted);
  border:1px solid var(--border);
  padding:4px 8px;
  border-radius:999px;
  background:#fff;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--border);
  background:#fff;
  padding:8px 12px;
  border-radius:10px;
  cursor:pointer;
  font-weight:600;
}
.btn:hover{ background: #f3f4f6; }

.btn-primary{
  background: var(--primary);
  color: var(--primaryText);
  border-color: var(--primary);
}
.btn-primary:hover{ filter: brightness(0.95); }

.main{
  padding: 20px 0 36px 0;
}

.card{
  border:1px solid var(--border);
  background:#fff;
  border-radius:12px;
  padding:16px;
}

.muted{ color:var(--muted); }

.site-footer{
  border-top:1px solid var(--border);
  padding:18px 0;
  color:var(--muted);
  background:#fff;
}

/* Matrix */
.matrix-wrap{
  overflow:auto;
  border:1px solid var(--border);
  border-radius:12px;
}
.matrix{
  border-collapse: collapse;
  width:100%;
  min-width: 900px;
}
.matrix th, .matrix td{
  border-bottom:1px solid #f3f4f6;
  padding:10px;
  vertical-align:top;
}
.matrix thead th{
  position: sticky;
  top:0;
  background:#fff;
  z-index: 2;
  border-bottom:1px solid var(--border);
  white-space:nowrap;
}
.matrix .sticky-col{
  position: sticky;
  left:0;
  background:#fff;
  z-index: 3;
  border-right:1px solid #f3f4f6;
  min-width: 320px;
}
.matrix select{
  padding:6px 8px;
  border-radius:10px;
  border:1px solid var(--border);
  background:#fff;
}
.toolbar{
  display:flex;
  gap:12px;
  align-items:center;
  flex-wrap:wrap;
  margin: 10px 0 12px 0;
}
.toolbar input[type="text"]{
  padding:8px 10px;
  border:1px solid var(--border);
  border-radius:10px;
  min-width: 260px;
}


/* ==========================================================
   DASHBOARD
   ========================================================== */

.dash{
  max-width: 1800px;
  margin: 0 auto;
}

.dash-header{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap: 18px;
  flex-wrap:wrap;

  padding: 18px;
  border: 1px solid rgba(15,23,42,.08);
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.75));
  box-shadow: 0 16px 40px rgba(0,0,0,.06);
}

.dash-title{
  margin: 0;
  font-size: clamp(1.6rem, 2.2vw, 2.1rem);
  color: rgba(15,23,42,.94);
  font-weight: 950;
  letter-spacing: -0.02em;
}

.dash-subtitle{
  margin: 8px 0 0;
  color: rgba(15,23,42,.72);
  font-weight: 650;
  max-width: 70ch;
}

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

.dash .btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 12px 16px;
  border-radius: 14px;
  text-decoration:none;
  font-weight: 900;
  border: 1px solid transparent;
}

.dash .btn-primary{
  background: var(--app-primary);
  color: #fff;
}

.dash .btn-secondary{
  background: rgba(255,255,255,.92);
  color: rgba(15,23,42,.92);
  border-color: rgba(15,23,42,.12);
}

.dash-grid{
  margin-top: 16px;
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.dash-card{
  display:block;
  text-decoration:none;
  color: inherit;

  background: rgba(255,255,255,.95);
  border: 1px solid rgba(15,23,42,.10);
  border-radius: var(--app-radius);
  padding: 14px;
  box-shadow: 0 12px 34px rgba(0,0,0,.06);
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}

.dash-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 50px rgba(0,0,0,.10);
  border-color: rgba(15,23,42,.18);
}

.dash-card-top{
  display:flex;
  gap: 12px;
  align-items:flex-start;
}

.dash-ico{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(15,23,42,.05);
  border: 1px solid rgba(15,23,42,.08);
  font-size: 20px;
  flex: 0 0 auto;
}

.dash-meta{
  min-width: 0;
}

.dash-card-title{
  font-weight: 950;
  color: rgba(15,23,42,.94);
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
}

.dash-card-desc{
  margin-top: 6px;
  color: rgba(15,23,42,.78);
  font-weight: 650;
  line-height: 1.35;
}

.dash-card-foot{
  margin-top: 12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.dash-pill{
  display:inline-flex;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  background: rgba(15,23,42,.06);
  border: 1px solid rgba(15,23,42,.10);
  color: rgba(15,23,42,.82);
}

.dash-arrow{
  font-weight: 950;
  opacity: .55;
}

.dash-card.is-soon{
  opacity: .72;
  cursor: not-allowed;
}

.dash-card.is-soon:hover{
  transform: none;
  box-shadow: 0 12px 34px rgba(0,0,0,.06);
  border-color: rgba(15,23,42,.10);
}

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


/* /assets/css/terms.css */

.page{ padding: 26px 0 46px; }

.page-card{
 /* max-width: 980px;*/
  margin: 0 auto;
  padding: 22px 22px;
  background:#fff;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 16px;
  box-shadow: 0 12px 36px rgba(0,0,0,.06);
}

.page-head{ margin-bottom: 14px; }
.page-title{ margin: 0 0 6px; font-size: 24px; letter-spacing:.2px; }
.page-intro{ margin-top: 10px; line-height: 1.6; }

.toc{
  margin: 14px 0 18px;
  padding: 14px 14px;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 14px;
  background: rgba(11,15,24,.02);
}
.toc-title{ font-weight: 700; margin-bottom: 8px; }
.toc-list{ margin: 0 0 0 18px; padding: 0; }
.toc-list li{ margin: 6px 0; }
.toc a{ color: inherit; text-decoration: none; border-bottom: 1px dashed rgba(0,0,0,.25); }
.toc a:hover{ border-bottom-style: solid; }

.page-card h2{
  font-size: 18px;
  margin: 18px 0 8px;
  letter-spacing: .2px;
  scroll-margin-top: 90px;
}

.page-card p{ line-height: 1.6; margin: 0 0 10px; }
.page-card ul{ margin: 6px 0 14px 18px; padding: 0; }
.page-card li{ margin: 6px 0; line-height: 1.55; }

.muted{ color: rgba(11,15,24,.65); }
.small{ font-size: 12.5px; }

.sep{
  border:0;
  border-top:1px solid rgba(0,0,0,.08);
  margin: 18px 0 12px;
}

@media (max-width: 720px){
  .page-card{ padding: 18px 16px; border-radius: 14px; }
  .page-title{ font-size: 20px; }
}



/* =========================================================
   Systems overview (account/app)
   ========================================================= */

.app h1 {
  font-size: 1.6rem;
  font-weight: 600;
  margin-bottom: 1rem;
}

.app p {
  margin-bottom: 1.25rem;
}

/* Primary button */
.app .btn {
  display: inline-block;
  padding: 0.55rem 0.9rem;
  border-radius: 6px;
  background: #2563eb; /* blauw */
  color: #fff;
  font-weight: 500;
  font-size: 0.9rem;
  text-decoration: none;
  transition: background 0.15s ease;
}

.app .btn:hover {
  background: #1d4ed8;
}

/* Table base */
.app .table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

/* Header */
.app .table thead th {
  text-align: left;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #6b7280;
  background: #f9fafb;
  padding: 0.75rem 0.9rem;
  border-bottom: 1px solid #e5e7eb;
}

/* Rows */
.app .table tbody td {
  padding: 0.8rem 0.9rem;
  border-bottom: 1px solid #e5e7eb;
  font-size: 0.9rem;
  vertical-align: middle;
}

.app .table tbody tr:last-child td {
  border-bottom: none;
}

.app .table tbody tr:hover {
  background: #f9fafb;
}

/* Status text */
.app .table td:nth-child(3) {
  font-weight: 500;
}

/* Small buttons */
.app .btn-sm {
  display: inline-block;
  padding: 0.35rem 0.6rem;
  margin-right: 0.25rem;
  font-size: 0.75rem;
  border-radius: 5px;
  background: #e5e7eb;
  color: #111827;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: background 0.15s ease;
}

.app .btn-sm:hover {
  background: #d1d5db;
}

/* Danger button */
.app .btn-sm.danger {
  background: #fee2e2;
  color: #991b1b;
}

.app .btn-sm.danger:hover {
  background: #fecaca;
}

/* Inline form buttons alignment */
.app form[style*="inline"] {
  display: inline;
}


/* =========================================================
   Systems form (account/app)
   ========================================================= */

.app form {
  max-width: 1800px;
}

.app h1 {
  margin: 0 0 1rem;
  font-size: 1.6rem;
  font-weight: 600;
}

.app label {
  display: block;
  margin: 0.9rem 0 0.35rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: #111827;
}

.app input[type="text"],
.app input[type="email"],
.app input[type="password"],
.app input:not([type]),
.app select,
.app textarea {
  width: 100%;
  padding: 0.6rem 0.7rem;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  background: #fff;
  font-size: 0.95rem;
  outline: none;
}

.app textarea {
  resize: vertical;
  min-height: 96px;
}

.app input:focus,
.app select:focus,
.app textarea:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

.app .alert {
  border-radius: 10px;
  padding: 0.75rem 0.9rem;
  margin: 0 0 1rem;
  font-size: 0.9rem;
}

.app .alert-danger {
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #991b1b;
}

/* Checkbox line */
.app .form-check {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.75rem;
  font-weight: 500;
}

.app .form-check input[type="checkbox"] {
  width: 18px;
  height: 18px;
}

/* Buttons row */
.app .form-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 1rem;
}

/* Buttons */
.app .btn {
  display: inline-block;
  padding: 0.55rem 0.9rem;
  border-radius: 8px;
  background: #e5e7eb;
  color: #111827;
  text-decoration: none;
  border: none;
  cursor: pointer;
  font-weight: 600;
  font-size: 0.9rem;
}

.app .btn:hover {
  background: #d1d5db;
}

.app .btn.primary {
  background: #2563eb;
  color: #fff;
}

.app .btn.primary:hover {
  background: #1d4ed8;
}




/* =========================================================
   People view: access per system (polish)
   Applies to view markup: .page-header, .card, .access-toolbar, .systems-grid
   ========================================================= */

.app .page-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  margin:0 0 14px;
}

.app .page-header .muted{ color:#6b7280; }
.app .page-header .muted.small{ font-size:.85rem; }

.app .actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  justify-content:flex-end;
}

/* Card */
.app .card{
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:10px;
  padding:14px;
  box-shadow:0 1px 2px rgba(0,0,0,.04);
}

.app .card-title{
  font-weight:800;
  font-size:1rem;
  margin:0 0 10px;
}

/* Toolbar blocks */
.app .access-toolbar{
  display:flex;
  flex-direction:column;
  gap:12px;
  margin-bottom:14px;
}

.app .offboarding-bar{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  padding:12px;
  border:1px solid #e5e7eb;
  border-radius:12px;
  background:#f9fafb;
}

.app .offboarding-title{
  font-weight:800;
  margin-bottom:2px;
}

.app .offboarding-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  justify-content:flex-end;
}

/* Buttons (scoped; doesn't break other pages) */
.app .btn{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  padding:.55rem .9rem;
  border-radius:10px;
  border:1px solid #e5e7eb;
  background:#f3f4f6;
  color:#111827;
  font-weight:700;
  font-size:.9rem;
  text-decoration:none;
  cursor:pointer;
}

.app .btn:hover{ background:#e5e7eb; }

.app .btn.btn-ghost{
  background:#fff;
}

.app .btn.btn-primary{
  background:#2563eb;
  border-color:#2563eb;
  color:#fff;
}

.app .btn.btn-primary:hover{
  background:#1d4ed8;
  border-color:#1d4ed8;
}

/* Filters row */
.app .filters{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  align-items:flex-end;
  padding:12px;
  border:1px solid #e5e7eb;
  border-radius:12px;
  background:#fff;
}

.app .field-inline{
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width:220px;
}

.app .field-inline span{
  font-size:.85rem;
  font-weight:800;
  color:#111827;
}

/* Bulk actions */
.app .bulk-actions{
  padding:12px;
  border:1px solid #e5e7eb;
  border-radius:12px;
  background:#fff;
}

.app .bulk-buttons{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-bottom:6px;
}

.app .bulk-hint{
  color:#6b7280;
  font-size:.85rem;
}

/* Grid of systems */
.app .systems-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:12px;
}

@media (max-width: 900px){
  .app .systems-grid{ grid-template-columns:1fr; }
  .app .page-header{ flex-direction:column; }
  .app .actions{ justify-content:flex-start; }
}

/* Each system card */
.app .system-card{
  border:1px solid #e5e7eb;
  border-radius:12px;
  padding:12px;
  background:#fff;
}

.app .system-name{
  font-weight:900;
  margin-bottom:10px;
}

/* Fields inside system card */
.app .field{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin-bottom:10px;
}

.app .field > span{
  font-size:.85rem;
  font-weight:800;
  color:#111827;
}

.app select,
.app input[type="text"],
.app input[type="datetime-local"],
.app textarea{
  width:100%;
  padding: 0 1rem;
  border-radius:10px;
  border:1px solid #d1d5db;
  background:#fff;
  font-size:.95rem;
  outline:none;
}

.app textarea{
  resize:vertical;
  min-height:84px;
}

.app select:focus,
.app input:focus,
.app textarea:focus{
  border-color:#2563eb;
  box-shadow:0 0 0 3px rgba(37,99,235,.15);
}

.app .form-actions{
  margin-top:12px;
  display:flex;
  justify-content:flex-end;
}



/* =========================================================
   vault.css — Vault UI (works with app.css + app-shell.css)
   Scope: .vault
   ========================================================= */

.vault .vault-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  margin:0 0 14px;
}

.vault .vault-title{
  font-weight:900;
  font-size:1.1rem;
  margin:0;
}

.vault .vault-subtitle{
  margin-top:4px;
  color:#6b7280;
  font-size:.9rem;
}

.vault .vault-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  justify-content:flex-end;
}

/* Card blocks */
.vault .card{
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:14px;
  padding:14px;
  box-shadow:0 1px 2px rgba(0,0,0,.04);
}

.vault .card + .card{ margin-top:12px; }

.vault .card-title{
  font-weight:900;
  margin:0 0 10px;
}

/* Filters bar */
.vault .filters{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  align-items:flex-end;
  padding:12px;
  border:1px solid #e5e7eb;
  border-radius:12px;
  background:#fff;
}

.vault .field-inline{
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width:220px;
}

.vault .field-inline span{
  font-size:.85rem;
  font-weight:800;
  color:#111827;
}

.vault input[type="text"],
.vault input[type="search"],
.vault input[type="url"],
.vault input[type="password"],
.vault input[type="date"],
.vault input[type="datetime-local"],
.vault select,
.vault textarea{
  width:100%;
  padding:.6rem .7rem;
  border-radius:10px;
  border:1px solid #d1d5db;
  background:#fff;
  font-size:.95rem;
  outline:none;
}

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

.vault input:focus,
.vault select:focus,
.vault textarea:focus{
  border-color:#2563eb;
  box-shadow:0 0 0 3px rgba(37,99,235,.15);
}

/* Table */
.vault .table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:14px;
  overflow:hidden;
}

.vault .table th{
  text-align:left;
  font-size:.75rem;
  text-transform:uppercase;
  letter-spacing:.04em;
  color:#6b7280;
  background:#f9fafb;
  padding:.75rem .9rem;
  border-bottom:1px solid #e5e7eb;
  white-space:nowrap;
}

.vault .table td{
  padding:.8rem .9rem;
  border-bottom:1px solid #e5e7eb;
  font-size:.92rem;
  vertical-align:top;
}

.vault .table tr:last-child td{ border-bottom:none; }

.vault .table td.actions{
  text-align:right;
  white-space:nowrap;
}

.vault .muted{
  color:#6b7280;
}
.vault .small{ font-size:.85rem; }

/* Tags */
.vault .tags{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}
.vault .tag{
  display:inline-flex;
  align-items:center;
  padding:.25rem .55rem;
  border-radius:999px;
  border:1px solid #e5e7eb;
  background:#f3f4f6;
  font-size:.78rem;
  font-weight:700;
  color:#111827;
}

/* Favorite badge */
.vault .fav{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-weight:800;
}
.vault .fav-dot{
  width:8px;
  height:8px;
  border-radius:999px;
  background:#f59e0b;
}

/* Show page key/value */
.vault .kv{
  display:grid;
  grid-template-columns:180px 1fr;
  gap:10px 14px;
  padding:12px;
  border:1px solid #e5e7eb;
  border-radius:12px;
  background:#fff;
}

@media (max-width: 800px){
  .vault .kv{ grid-template-columns:1fr; }
}

.vault .kv .k{
  color:#6b7280;
  font-weight:800;
  font-size:.85rem;
}
.vault .kv .v{
  font-weight:700;
  color:#111827;
  overflow-wrap:anywhere;
}

/* Buttons (scoped; does not break other pages) */
.vault .btn{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  padding:.55rem .9rem;
  border-radius:10px;
  border:1px solid #e5e7eb;
  background:#f3f4f6;
  color:#111827;
  font-weight:800;
  font-size:.9rem;
  text-decoration:none;
  cursor:pointer;
}

.vault .btn:hover{ background:#e5e7eb; }

.vault .btn.btn-ghost{
  background:#fff;
}

.vault .btn.btn-primary{
  background:#2563eb;
  border-color:#2563eb;
  color:#fff;
}
.vault .btn.btn-primary:hover{
  background:#1d4ed8;
  border-color:#1d4ed8;
}

.vault .btn.btn-danger{
  background:#fef2f2;
  border-color:#fecaca;
  color:#991b1b;
}
.vault .btn.btn-danger:hover{
  background:#fee2e2;
}

/* Button row */
.vault .form-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  justify-content:flex-end;
  margin-top:12px;
}

/* Alerts */
.vault .alert{
  padding:10px 12px;
  border-radius:12px;
  border:1px solid #e5e7eb;
  background:#f9fafb;
  margin:10px 0;
}
.vault .alert-danger{
  background:#fef2f2;
  border-color:#fecaca;
  color:#991b1b;
}

/* Utility: wrap links nicely */
.vault a{
  text-decoration:none;
}
.vault a:hover{
  text-decoration:underline;
}

/* Responsive table: allow horizontal scroll on small screens */
@media (max-width: 900px){
  .vault .table-wrap{
    overflow:auto;
    -webkit-overflow-scrolling:touch;
    border-radius:14px;
  }
  .vault .table{ min-width: 820px; }
}





:root{
  --bg:#f6f8fb;
  --card:#fff;
  --text:#0f172a;
  --muted:#64748b;
  --border:#e5e7eb;
  --primary:#1f6feb;
  --primary-dark:#174ea6;
  --success:#16a34a;
}

.pricing{
  max-width: 1200px;
  margin: 0 auto;
  padding: 56px 20px;
}

.pricing-hero{
  text-align:center;
  margin-bottom: 44px;
}

.pricing-hero h1{
  font-size: 40px;
  line-height: 1.1;
  margin: 0 0 12px 0;
}

.pricing-hero .subtitle{
  margin: 0 auto;
  max-width: 820px;
  color: var(--muted);
  font-size: 18px;
}

.pricing-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  align-items: stretch;
}

.plan{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 26px;
  display:flex;
  flex-direction:column;
  position:relative;
}

.plan.featured{
  border: 2px solid var(--primary);
  box-shadow: 0 12px 30px rgba(31,111,235,.14);
  transform: translateY(-2px);
}

.badge{
  position:absolute;
  top:-12px;
  right:18px;
  background: var(--primary);
  color:#fff;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .2px;
}

.plan h2{
  font-size: 22px;
  margin: 0 0 6px 0;
}

.plan-subtitle{
  margin: 0 0 18px 0;
  color: var(--muted);
}

.price{
  display:flex;
  align-items: baseline;
  gap: 10px;
  margin: 6px 0 0 0;
}

.price .amount{
  font-size: 40px;
  font-weight: 800;
}

.price .period{
  color: var(--muted);
}

.limit{
  margin: 8px 0 18px 0;
  color: var(--muted);
}

.features{
  list-style:none;
  padding:0;
  margin: 0 0 20px 0;
}

.features li{
  position:relative;
  padding-left: 26px;
  margin-bottom: 10px;
}

.features li::before{
  content:"✔";
  position:absolute;
  left:0;
  top:0;
  color: var(--success);
  font-weight: 800;
}

.cta{
  margin-top:auto;
  padding-top: 6px;
}

.btn{
  display:block;
  text-align:center;
  padding: 12px 14px;
  border-radius: 10px;
  text-decoration:none;
  font-weight: 700;
  background: var(--primary);
  color: #fff;
  border: 1px solid var(--primary);
  transition: background .15s ease, border-color .15s ease, transform .05s ease;
}

.btn:hover{
  background: var(--primary-dark);
  border-color: var(--primary-dark);
}

.btn:active{
  transform: translateY(1px);
}

.btn.secondary{
  background:#fff;
  color: var(--primary);
}

.btn.secondary:hover{
  background: var(--primary);
  color:#fff;
}

.micro{
  margin: 10px 0 0 0;
  font-size: 13px;
  color: var(--muted);
  text-align:center;
}

.extras{
  margin-top: 18px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 24px;
}

.extras h3{
  margin: 0 0 14px 0;
  font-size: 18px;
}

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

.extra{
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px;
}

.extra-price{
  margin-top: 6px;
  font-weight: 700;
}

.extra-desc{
  margin: 8px 0 0 0;
  color: var(--muted);
  font-size: 14px;
}

.pricing-footer{
  text-align:center;
  margin-top: 26px;
}

.pricing-footer .muted{
  color: var(--muted);
  margin-top: 6px;
}

/* Responsive */
@media (max-width: 980px){
  .pricing-grid{ grid-template-columns: 1fr; }
  .plan.featured{ transform:none; }
  .extras-grid{ grid-template-columns: 1fr; }
  .pricing-hero h1{ font-size: 34px; }
}

/* assets/css/vault.css */

/* Page wrapper (werkt netjes binnen jouw app-shell) */
.vault-page {}

/* Header */
.vault-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  margin-bottom:18px;
}
.vault-head-text{ min-width:0; }
.vault-head-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
}

/* Filters block */
.vault-filters{
  margin: 8px 0 18px 0;
  padding: 14px;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 16px;
  background: rgba(255,255,255,.75);
}
.vault-filters-row{
  display:flex;
  align-items:flex-end;
  gap:12px;
  flex-wrap:wrap;
}
.vault-filters-row .field{
  flex: 1;
  min-width: 280px;
}
.vault-filters-actions{
  display:flex;
  gap:10px;
}

/* Checkbox label (favorites) */
.chk{
  display:inline-flex;
  gap:10px;
  align-items:center;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(0,0,0,.08);
  background:#fff;
  user-select:none;
}
.chk input{ transform: translateY(1px); }

/* Cards grid */
.vault-list{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 6px;
}

@media (max-width: 1100px){
  .vault-list{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px){
  .vault-list{ grid-template-columns: 1fr; }
}

/* ---- CARD (belangrijk: forceer block + eigen look) ---- */
a.vault-card,
.vault-card{
  display:block;              /* <— dit maakt “platte tekst” weer echt een card */
  padding:14px;
  border-radius:16px;
  border:1px solid rgba(0,0,0,.08);
  background:#fff;
  text-decoration:none !important;
  color:inherit !important;
  box-shadow: 0 10px 30px rgba(0,0,0,.04);
  transition: transform .06s ease, box-shadow .18s ease, border-color .18s ease;
}

a.vault-card:hover,
.vault-card:hover{
  transform: translateY(-1px);
  border-color: rgba(0,0,0,.12);
  box-shadow: 0 14px 40px rgba(0,0,0,.08);
}

/* Card layout */
.vault-card-top{ display:flex; flex-direction:column; gap:6px; min-width:0; }
.vault-card-title{
  display:flex;
  align-items:center;
  gap:8px;
  font-weight:800;
  letter-spacing:.1px;
  min-width:0;
}
.vault-card-title-text{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  min-width:0;
}
.vault-card-meta{
  font-size:13px;
  color: rgba(11,15,24,.70);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.vault-card-bottom{
  margin-top:10px;
  padding-top:10px;
  border-top:1px solid rgba(0,0,0,.06);
}
.vault-card-url{
  font-size:12px;
  color: rgba(11,15,24,.60);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  min-width:0;
}

/* Favorite badge */
.badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:24px;
  height:24px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.10);
  background: rgba(255, 166, 0, .12);
  color: rgba(120, 74, 0, .95);
  font-size: 13px;
  line-height: 1;
}

/* Empty state */
.empty{
  grid-column: 1 / -1;
  padding: 18px;
  border-radius: 16px;
  border: 1px dashed rgba(0,0,0,.18);
  background: rgba(255,255,255,.75);
}
.empty-title{ font-weight:800; margin-bottom:6px; }
.empty-sub{ color: rgba(11,15,24,.65); font-size:14px; }
.empty-actions{ margin-top:12px; display:flex; gap:10px; flex-wrap:wrap; }

/* Fallback muted (voor als app.css dit niet heeft) */
.muted{ color: rgba(11,15,24,.60); }



/* ==========================================
   13) public/assets/css/vault.css  (NEW)
   ========================================== */

.vault-page { max-width: 1100px; margin: 0 auto; padding: 18px; }

.vault-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.vault-title { margin: 0; font-size: 22px; line-height: 1.2; }
.vault-sub { margin: 6px 0 0 0; opacity: .75; }

.vault-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

.vault-filters { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 12px 0 18px; }
.vault-filters .input { min-width: 280px; }

.vault-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 980px) { .vault-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .vault-list { grid-template-columns: 1fr; } }

.vault-card { display: block; border: 1px solid rgba(0,0,0,.08); border-radius: 12px; padding: 14px; text-decoration: none; color: inherit; background: #fff; }
.vault-card:hover { border-color: rgba(0,0,0,.18); box-shadow: 0 6px 18px rgba(0,0,0,.06); }
.vault-card-title { font-weight: 650; }
.vault-card-meta { opacity: .75; font-size: 13px; margin-top: 6px; }
.vault-card-url { opacity: .75; font-size: 13px; margin-top: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.badge { display: inline-block; margin-right: 6px; }

.vault-form { border: 1px solid rgba(0,0,0,.08); border-radius: 12px; padding: 14px; background: #fff; }
.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 12px; }
@media (max-width: 780px) { .grid { grid-template-columns: 1fr; } }

.field { display: flex; flex-direction: column; gap: 6px; }
.field span { font-size: 13px; opacity: .75; }
.field-inline { flex-direction: row; align-items: center; gap: 10px; }
.input, .select, .textarea { width: 100%; padding: 10px 12px; border-radius: 10px; border: 1px solid rgba(0,0,0,.12); background: #fff; }
.textarea { resize: vertical; }

.form-actions { display: flex; gap: 8px; align-items: center; margin-top: 10px; }
.hint { margin-top: 10px; font-size: 13px; opacity: .75; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 9px 12px; border-radius: 10px; border: 1px solid rgba(0,0,0,.12); background: #fff; cursor: pointer; text-decoration: none; color: inherit; }
.btn:hover { border-color: rgba(0,0,0,.22); }
.btn-primary { background: #111; color: #fff; border-color: #111; }
.btn-ghost { background: transparent; }
.btn-danger { background: #b00020; color: #fff; border-color: #b00020; }
.btn-small { padding: 6px 10px; border-radius: 9px; font-size: 13px; }

.chk { display: inline-flex; align-items: center; gap: 8px; }

.vault-detail { border: 1px solid rgba(0,0,0,.08); border-radius: 12px; padding: 14px; background: #fff; }
.vault-detail .row { display: grid; grid-template-columns: 160px 1fr; gap: 12px; padding: 10px 0; border-bottom: 1px solid rgba(0,0,0,.06); }
.vault-detail .row:last-child { border-bottom: 0; }
.vault-detail .label { opacity: .75; font-size: 13px; }
.vault-detail .value { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

.secret { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; letter-spacing: .5px; }
.secret-muted { opacity: .6; white-space: pre-wrap; }

.notes { white-space: pre-wrap; }

.danger-zone { margin-top: 14px; }

.vault-share { display: grid; grid-template-columns: 420px 1fr; gap: 14px; }
@media (max-width: 980px) { .vault-share { grid-template-columns: 1fr; } }

.share-form { border: 1px solid rgba(0,0,0,.08); border-radius: 12px; padding: 14px; background: #fff; display: grid; gap: 10px; }
.shares { border: 1px solid rgba(0,0,0,.08); border-radius: 12px; padding: 14px; background: #fff; }

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

.table { display: grid; gap: 8px; }
.tr { display: grid; grid-template-columns: 1fr 120px 160px 120px; gap: 10px; align-items: center; padding: 10px; border: 1px solid rgba(0,0,0,.06); border-radius: 10px; }
.th { background: rgba(0,0,0,.03); font-weight: 650; }
.pill { display: inline-block; padding: 4px 8px; border-radius: 999px; background: rgba(0,0,0,.06); font-size: 12px; }

.empty { border: 1px dashed rgba(0,0,0,.18); border-radius: 12px; padding: 18px; background: #fff; }
.empty-title { font-weight: 650; }
.empty-sub { margin-top: 6px; opacity: .75; }
/* assets/css/vault.css */

.vault-page { }

.vault-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  margin-bottom:16px;
}
.vault-head-text{ min-width:0; }
.vault-head-actions{ display:flex; gap:10px; flex-wrap:wrap; }

/* Filters */
.vault-filters{
  margin: 8px 0 18px 0;
  padding: 14px;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 16px;
  background: rgba(255,255,255,.75);
}
.vault-filters-row{
  display:flex;
  align-items:flex-end;
  gap:12px;
  flex-wrap:wrap;
}
.vault-filters-actions{
  display:flex;
  gap:10px;
}

/* Cards grid */
.vault-list{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

@media (max-width: 1100px){
  .vault-list{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px){
  .vault-list{ grid-template-columns: 1fr; }
}

/* Card */
.vault-card{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:14px;
  border-radius:16px;
  border:1px solid rgba(0,0,0,.08);
  background:#fff;
  text-decoration:none;
  color:inherit;
  box-shadow: 0 10px 30px rgba(0,0,0,.04);
  transition: transform .06s ease, box-shadow .18s ease, border-color .18s ease;
}
.vault-card:hover{
  transform: translateY(-1px);
  border-color: rgba(0,0,0,.12);
  box-shadow: 0 14px 40px rgba(0,0,0,.08);
}

.vault-card-top{ display:flex; flex-direction:column; gap:6px; min-width:0; }
.vault-card-title{
  display:flex;
  align-items:center;
  gap:8px;
  font-weight:800;
  letter-spacing:.1px;
  min-width:0;
}
.vault-card-title-text{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  min-width:0;
}
.vault-card-meta{
  font-size:13px;
  color: rgba(11,15,24,.70);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.vault-card-bottom{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  margin-top:auto;
}
.vault-card-url{
  font-size:12px;
  color: rgba(11,15,24,.60);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  min-width:0;
}

.badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:24px;
  height:24px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.10);
  background: rgba(255, 166, 0, .12);
  color: rgba(120, 74, 0, .95);
  font-size: 13px;
  line-height: 1;
}

/* Empty state */
.empty{
  grid-column: 1 / -1;
  padding: 18px;
  border-radius: 16px;
  border: 1px dashed rgba(0,0,0,.18);
  background: rgba(255,255,255,.75);
}
.empty-title{ font-weight:800; margin-bottom:6px; }
.empty-sub{ color: rgba(11,15,24,.65); font-size:14px; }
.empty-actions{ margin-top:12px; display:flex; gap:10px; flex-wrap:wrap; }

/* Subtle utilities in case missing */
.muted{ color: rgba(11,15,24,.60); }
/* ===============================
   Vault detail
================================ */

.vault-detail {
  max-width: 820px;
}

/* Header */
.vault-detail .page-title {
  display: flex;
  align-items: center;
  gap: 10px;
}

.vault-icon {
  color: #2563eb;
  font-size: 1.2em;
}

.page-subtitle {
  color: #6b7280;
  margin-top: 4px;
}

/* Actions */
.page-actions {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}

/* Fields */
.vault-fields {
  margin-top: 32px;
  display: grid;
  gap: 20px;
}

.vault-field {
  display: grid;
  grid-template-columns: 140px 1fr auto;
  align-items: center;
  gap: 12px;
}

.vault-label {
  font-size: 0.85rem;
  color: #6b7280;
}

.vault-value {
  font-weight: 500;
}

/* Password dots */
.vault-password {
  letter-spacing: 2px;
}

/* Buttons */
.btn {
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 0.9rem;
  cursor: pointer;
}

.btn-light {
  background: #f8fafc;
  border: 1px solid #e5e7eb;
}

.btn-primary {
  background: #2563eb;
  color: #fff;
  border: none;
}

.btn-danger {
  background: #fee2e2;
  color: #991b1b;
  border: 1px solid #fecaca;
}

/* Divider */
.vault-divider {
  height: 1px;
  background: #e5e7eb;
  margin: 24px 0;
}
/* =========================================================
   Vault show page (detail)
   ========================================================= */

.vault-page .vault-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  margin:0 0 12px;
}

.vault-page .vault-title{
  margin:0;
  font-weight:900;
  font-size:1.2rem;
}

.vault-page .vault-sub{
  margin:.35rem 0 0;
  color:#6b7280;
  font-size:.92rem;
}

.vault-page .vault-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  justify-content:flex-end;
}

.vault-page .vault-detail{
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:14px;
  padding:12px;
  box-shadow:0 1px 2px rgba(0,0,0,.04);
}

.vault-page .row{
  display:grid;
  grid-template-columns:180px 1fr;
  gap:12px 16px;
  padding:10px 6px;
  border-bottom:1px solid #eef2f7;
}

.vault-page .row:last-child{
  border-bottom:none;
}

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

.vault-page .label{
  color:#6b7280;
  font-weight:900;
  font-size:.85rem;
  text-transform:uppercase;
  letter-spacing:.03em;
}

.vault-page .value{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px;
  font-weight:700;
  color:#111827;
  overflow-wrap:anywhere;
}

.vault-page .value a{
  color:#2563eb;
  text-decoration:none;
}
.vault-page .value a:hover{ text-decoration:underline; }

/* Notes box */
.vault-page .notes{
  width:100%;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid #e5e7eb;
  background:#f9fafb;
  color:#111827;
  font-weight:600;
  white-space:pre-wrap;
}

/* Secret styling */
.vault-page .secret{
  display:inline-flex;
  align-items:center;
  padding:.35rem .6rem;
  border-radius:999px;
  border:1px dashed #d1d5db;
  background:#fff;
  font-weight:900;
  letter-spacing:.08em;
}

.vault-page .secret-muted{
  color:#6b7280;
}

/* Small buttons */
.vault-page .btn.btn-small{
  padding:.4rem .65rem;
  font-size:.82rem;
  border-radius:10px;
}

/* Danger zone */
.vault-page .danger-zone{
  margin-top:12px;
  padding-top:12px;
  border-top:1px solid #e5e7eb;
  display:flex;
  justify-content:flex-end;
}
/* =========================================================
   Vault Share
   ========================================================= */

.vault-share{
  display:grid;
  grid-template-columns: 360px 1fr;
  gap:14px;
  align-items:start;
}

@media (max-width: 920px){
  .vault-share{ grid-template-columns: 1fr; }
}

.vault-share .share-form{
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:14px;
  padding:12px;
  box-shadow:0 1px 2px rgba(0,0,0,.04);
}

.vault-share .field{
  display:block;
  margin:0 0 10px;
}

.vault-share .field > span{
  display:block;
  font-weight:900;
  font-size:.85rem;
  color:#6b7280;
  text-transform:uppercase;
  letter-spacing:.03em;
  margin:0 0 6px;
}

.vault-share .select{
  width:100%;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid #e5e7eb;
  background:#fff;
  font-weight:700;
}

.vault-share .shares{
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:14px;
  padding:12px;
  box-shadow:0 1px 2px rgba(0,0,0,.04);
}

.vault-share .h3{
  margin:0 0 10px;
  font-size:1rem;
  font-weight:900;
}

.vault-share .table{
  width:100%;
}

.vault-share .tr{
  display:grid;
  grid-template-columns: 1.6fr .7fr 1fr auto;
  gap:10px;
  padding:10px 6px;
  border-top:1px solid #eef2f7;
  align-items:center;
}

.vault-share .tr.th{
  border-top:none;
  padding-top:6px;
  padding-bottom:6px;
  font-weight:900;
  color:#6b7280;
  text-transform:uppercase;
  letter-spacing:.03em;
  font-size:.78rem;
}

@media (max-width: 820px){
  .vault-share .tr{
    grid-template-columns: 1fr;
    align-items:start;
  }
}

.vault-share .pill{
  display:inline-flex;
  align-items:center;
  padding:.25rem .55rem;
  border-radius:999px;
  border:1px solid #e5e7eb;
  background:#f9fafb;
  font-weight:900;
  font-size:.82rem;
}

.vault-share .empty{
  padding:14px 10px;
  border:1px dashed #d1d5db;
  border-radius:12px;
  background:#fafafa;
}

.vault-share .empty-title{
  font-weight:900;
  margin:0 0 4px;
}

.vault-share .empty-sub{
  color:#6b7280;
  font-weight:600;
}





/* ==========================================
   Alerts / Flash messages
   ========================================== */

.alert {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(0,0,0,.03);
  color: rgba(17,24,39,1);
  margin: 0 0 12px 0;
}

.alert .alert-title {
  font-weight: 700;
  margin: 0 0 2px 0;
  line-height: 1.2;
}

.alert .alert-body {
  line-height: 1.35;
}

.alert .alert-icon {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  margin-top: 2px;
  opacity: .85;
}

/* Variants */
.alert-success {
  border-color: rgba(22,163,74,.25);
  background: rgba(22,163,74,.08);
  color: rgba(20,83,45,1);
}

.alert-danger {
  border-color: rgba(185,28,28,.25);
  background: rgba(185,28,28,.08);
  color: rgba(127,29,29,1);
}

.alert-info {
  border-color: rgba(37,99,235,.25);
  background: rgba(37,99,235,.08);
  color: rgba(30,64,175,1);
}

.alert-warn {
  border-color: rgba(217,119,6,.25);
  background: rgba(217,119,6,.10);
  color: rgba(124,45,18,1);
}



/* ==========================================
   Platform tenants
   ========================================== */

.panel {  margin: 0 auto;  }
.panel-head { display:flex; justify-content:space-between; gap:16px; align-items:flex-start; margin-bottom:14px; }
.panel-head.row { align-items:center; }
.actions { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }

.filters { display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.filters input, .filters select { padding:10px 12px; border:1px solid rgba(0,0,0,.12); border-radius:10px; background:#fff; }

.table-wrap { overflow:auto; border:1px solid rgba(0,0,0,.08); border-radius:14px; }
.table { width:100%; border-collapse:collapse; min-width:920px; }
.table th, .table td { padding:12px 12px; border-bottom:1px solid rgba(0,0,0,.06); text-align:left; }
.table th { font-weight:600; font-size:13px; color:rgba(0,0,0,.65); background:rgba(0,0,0,.02); }
.muted { color: rgba(0,0,0,.55); font-size: 13px; }

.badge { display:inline-flex; padding:4px 10px; border-radius:999px; border:1px solid rgba(0,0,0,.12); font-size:12px; }
.badge.subtle { background: rgba(0,0,0,.03); }

.grid { display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap:12px; margin-top:14px; }
@media (max-width: 900px){ .grid { grid-template-columns: 1fr; } }

.card { border:1px solid rgba(0,0,0,.08); border-radius:16px; padding:14px; background:#fff; }
.card-title { font-weight:700; margin-bottom:10px; }
.kv .k { display:inline-block; width:120px; color:rgba(0,0,0,.55); }
.kv .v { font-weight:600; }

.form { max-width: 1800px; }
.form-grid { display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap:12px; }
@media (max-width: 900px){ .form-grid { grid-template-columns: 1fr; } }

.field label { display:block; font-size:13px; color:rgba(0,0,0,.65); margin:0 0 6px; }
.field input, .field select { width:100%; padding:10px 12px; border:1px solid rgba(0,0,0,.12); border-radius:12px; }
.field.checkbox label { display:flex; gap:10px; align-items:center; }

.sep { grid-column: 1 / -1; border:0; border-top:1px solid rgba(0,0,0,.08); margin: 6px 0; }

.flash { padding:10px 12px; border-radius:12px; border:1px solid rgba(0,0,0,.12); margin: 10px 0 14px; }
.flash.success { background: rgba(0,0,0,.03); }
.flash.error { background: rgba(0,0,0,.05); }

.btn { display:inline-flex; align-items:center; justify-content:center; padding:10px 12px; border-radius:12px; border:1px solid rgba(0,0,0,.12); background:#fff; cursor:pointer; text-decoration:none; color:inherit; font-weight:600; }
.btn.subtle { background: rgba(0,0,0,.03); }
.btn.danger { border-color: rgba(200,0,0,.25); }
.inline { display:inline; }




/* Filters */
.ticket-filters .filters-row{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
}

.ticket-filters .input{
  min-width:260px;
  flex:1 1 260px;
}

.ticket-filters .select{
  min-width:170px;
}

/* Table wrapper */
.table-wrap{
  width:100%;
  overflow:auto;
}

/* Table */
.tickets-table{
  width:100%;
  min-width: 980px;
  border-collapse:separate;
  border-spacing:0;
  table-layout:fixed; /* header/rows always align */
}

.tickets-table thead th{
  text-align:left;
  font-weight:600;
  font-size:13px;
  padding:12px 14px;
  border-bottom:1px solid #e9e9e9;
  background:#f6f7f8;
  white-space:nowrap;
}

.tickets-table tbody td{
  padding:14px;
  border-bottom:1px solid #efefef;
  vertical-align:middle;
  font-size:14px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* Columns */
.tickets-table .col-created  { width: 170px; }
.tickets-table .col-ticket   { width: 170px; }
.tickets-table .col-status   { width: 120px; }
.tickets-table .col-type     { width: 140px; }
.tickets-table .col-priority { width: 120px; }
.tickets-table .col-subject  { width: auto; }
.tickets-table .col-email    { width: 220px; }
.tickets-table .col-actions  { width: 120px; }

.tickets-table th.col-actions,
.tickets-table td.col-actions{
  text-align:right;
  white-space:nowrap;
}

/* Status pill */
.status-pill{
  display:inline-flex;
  align-items:center;
  padding:4px 10px;
  border-radius:999px;
  font-size:12px;
  border:1px solid #ddd;
  background:#fff;
}

/* Common statuses */
.status-new{ border-color:#cfd6ff; background:#eef1ff; }
.status-open{ border-color:#cfe9d6; background:#eefaf2; }
.status-pending{ border-color:#ffe7b8; background:#fff7e6; }
.status-closed{ border-color:#e6e6e6; background:#f6f6f6; color:#666; }

/* Unread badge */
.badge{
  display:inline-block;
  padding:.15rem .5rem;
  border-radius:999px;
  font-size:.75rem;
  margin-left:.5rem;
}
.badge-new{ background:#111; color:#fff; }

.tickets-table td.col-subject{
  white-space:normal;
  line-height:1.3;
}


/* ===== Ticket filters: 1 regel ===== */

.ticket-filters .filters-row{
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;            /* wrap alleen als scherm te smal is */
}

/* Zoekveld iets breder */
.ticket-filters .filters-row input[type="search"],
.ticket-filters .filters-row .input{
  flex: 1 1 260px;             /* groeit, maar niet te groot */
  min-width: 220px;
}

/* Selects vaste nette breedte */
.ticket-filters .filters-row select,
.ticket-filters .filters-row .select{
  flex: 0 0 180px;
  min-width: 160px;
}

/* Knoppen niet uitrekken */
.ticket-filters .filters-row .btn{
  flex: 0 0 auto;
  white-space: nowrap;
}

.upload-box{
  border:1px dashed #cfd3d8;
  border-radius:14px;
  padding:14px;
  background:#fafafa;
  cursor:pointer;
}
.upload-box.is-drag{
  background:#f2f6ff;
  border-color:#8aa7ff;
}
.upload-title{ font-weight:600; margin-bottom:4px; }
.upload-hint{ font-size:13px; }

.upload-input{
  display:none; /* we open via click on box */
}

.upload-list{
  margin-top:10px;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.upload-item{
  display:flex;
  justify-content:space-between;
  gap:10px;
  padding:10px 12px;
  border:1px solid #eee;
  border-radius:12px;
  background:#fff;
}
.upload-name{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  max-width:70%;
}
/* ===== Ticket detail layout ===== */
.ticket-grid{
  display:grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap:14px;
  padding:16px;
}

.ticket-cell{
  padding:10px 10px;
  border:1px solid #efefef;
  border-radius:14px;
  background:#fff;
}

.ticket-cell .label{
  font-size:13px;
  margin-bottom:6px;
}

.ticket-cell .value{
  font-size:15px;
  font-weight:600;
}

.ticket-cell-wide{
  grid-column: 1 / -1; /* full width */
}

/* ===== Attachments pills ===== */
.attachments{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:8px;
}

.attachment-pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 14px;
  border:1px solid #e9e9e9;
  border-radius:12px;
  background:#fff;
  text-decoration:none;
}

.attachment-pill:hover{
  border-color:#cfd6ff;
  background:#f7f8ff;
}

/* ===== Replies ===== */
.reply{
  border:1px solid #efefef;
  border-radius:14px;
  padding:12px 14px;
  background:#fff;
  margin-bottom:10px;
}

.reply-meta{
  margin-bottom:8px;
}

.reply-body{
  line-height:1.5;
}

/* Responsive */
@media (max-width: 980px){
  .ticket-grid{ grid-template-columns: 1fr; }
}

/* ===== Ticket detail layout ===== */
.ticket-grid{
  display:grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap:14px;
  padding:16px;
}
.ticket-cell{
  padding:10px 10px;
  border:1px solid #efefef;
  border-radius:14px;
  background:#fff;
}
.ticket-cell .label{
  font-size:13px;
  margin-bottom:6px;
}
.ticket-cell .value{
  font-size:15px;
  font-weight:600;
}
.ticket-cell-wide{
  grid-column: 1 / -1;
}

/* ===== Attachments pills ===== */
.attachments{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:8px;
}
.attachment-pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 14px;
  border:1px solid #e9e9e9;
  border-radius:12px;
  background:#fff;
  text-decoration:none;
}
.attachment-pill:hover{
  border-color:#cfd6ff;
  background:#f7f8ff;
}

/* ===== Replies ===== */
.reply{
  border:1px solid #efefef;
  border-radius:14px;
  padding:12px 14px;
  background:#fff;
  margin-bottom:10px;
}
.reply-meta{ margin-bottom:8px; }
.reply-body{ line-height:1.5; }

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


.plat-wrap{
  max-width:1800px;      /* was 1200 */
  margin:0 auto;
  padding:20px 24px;    /* iets meer ademruimte */
}

.plat-header{
  display:flex; align-items:flex-start; justify-content:space-between; gap:14px;
  margin-bottom:14px;
}

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

.plat-btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:10px 12px; border-radius:12px;
  border:1px solid #e9e9e9; background:#fff; text-decoration:none;
  font-weight:600;
}
.plat-btn:hover{ border-color:#cfd6ff; background:#f7f8ff; }
.plat-btn.sm{ padding:8px 10px; border-radius:12px; font-size:13px; }
.plat-btn.danger{ border-color:#ffd6d6; background:#fff6f6; }
.plat-btn.danger:hover{ border-color:#ffb3b3; background:#ffecec; }

.plat-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:20px;             /* meer ruimte tussen blokken */
}

.plat-card{
  border:1px solid #eaeaea;
  border-radius:18px;
  background:#fff;
  overflow:hidden;
  box-shadow: 0 6px 18px rgba(0,0,0,0.04);
}

.plat-card-head{
  display:flex; align-items:flex-start; justify-content:space-between; gap:12px;
  padding:14px 14px 0;
}

.plat-card-title{ font-weight:800; font-size:16px; }
.plat-card-body{ padding:14px; }
.plat-card-foot{ padding:0 14px 14px; }

.plat-kpi{
  min-width:56px; height:44px;
  display:flex; align-items:center; justify-content:center;
  border-radius:14px;
  background:#f6f7f8;
  font-weight:800;
  font-size:20px;
}
.plat-kpi.small{ font-size:16px; height:40px; }

.plat-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.plat-row-main{ min-width:0; }

.plat-strong{ font-weight:800; }
.plat-pill{
  display:inline-flex; align-items:center;
  margin-left:8px;
  padding:4px 10px;
  border-radius:999px;
  border:1px solid #e9e9e9;
  background:#fff;
  font-size:12px;
}

.plat-list{ display:flex; flex-direction:column; gap:10px; }
.plat-list-item{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.plat-list-main{ min-width:0; }

.plat-stats{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap:10px;
}
.plat-stat{
  display:block;
  text-decoration:none;
  border:1px solid #efefef;
  border-radius:14px;
  padding:10px 12px;
  background:#fff;
}
.plat-stat:hover{ border-color:#cfd6ff; background:#f7f8ff; }
.plat-stat-label{ font-size:12px; color:#666; }
.plat-stat-value{ font-size:18px; font-weight:800; margin-top:4px; }

.plat-quick{ display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap:10px; }
.plat-quick-item{
  display:block;
  border:1px solid #efefef;
  border-radius:14px;
  padding:10px 12px;
  text-decoration:none;
  font-weight:700;
  background:#fff;
}
.plat-quick-item:hover{ border-color:#cfd6ff; background:#f7f8ff; }

.plat-divider{ height:1px; background:#efefef; margin:14px 0; }

.plat-link{ text-decoration:none; font-weight:700; }
.plat-link:hover{ text-decoration:underline; }

.plat-mono{ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }

.ellipsis{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

@media (max-width: 980px){
  .plat-grid{ grid-template-columns: 1fr; }
  .plat-stats{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1800px){
  .plat-grid{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.filters-row{
  display:flex;
  gap:12px;
  align-items:flex-end;
  flex-wrap:wrap;
}

.filters-row .field{ display:flex; flex-direction:column; gap:6px; min-width:160px; }
.filters-row .field.grow{ flex:1; min-width:260px; }

.input{
  padding:10px 12px;
  border-radius:12px;
  border:1px solid #e9e9e9;
  background:#fff;
}


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

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

.rc-pill{
  display:inline-flex;
  padding:4px 10px;
  border-radius:999px;
  border:1px solid #e9e9e9;
  background:#fff;
  font-size:12px;
  font-weight:700;
}

.rc-stats{ display:flex; gap:10px; flex-wrap:wrap; margin-top:10px; }
.rc-stat{
  display:inline-flex;
  gap:6px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid #efefef;
  background:#fafafa;
  font-size:12px;
}

.rc-form{ padding:14px; }
.rc-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:14px;
}
.rc-form-actions{
  display:flex;
  justify-content:flex-end;
  padding:14px;
  border-top:1px solid #efefef;
}

.filters-row{
  display:flex;
  gap:12px;
  align-items:flex-end;
  flex-wrap:wrap;
  padding:14px;
}
.filters-row .field{ display:flex; flex-direction:column; gap:6px; min-width:160px; }
.filters-row .field.grow{ flex:1; min-width:260px; }

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



/* =========================
   Review cycle filters (show)
   ========================= */

.review-cycle .rc-stats{
  display:grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap:12px;
}
.review-cycle .rc-stat{
  background:#fff;
  border:1px solid rgba(0,0,0,.06);
  border-radius:14px;
  padding:14px;
}
.review-cycle .rc-stat-value{
  font-size:22px;
  font-weight:800;
  margin-top:6px;
}

.review-cycle .rc-filtersbar{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
  padding:14px;
  border-bottom:1px solid rgba(0,0,0,.06);
  background:#fbfbfc;
}

.review-cycle .rc-filtersbar-title{
  display:flex;
  align-items:baseline;
  gap:10px;
  margin-bottom:10px;
}

.review-cycle .rc-filters{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}

.review-cycle .rc-filter-q{
  min-width:320px;
  flex: 1 1 320px;
}

.review-cycle .rc-filter{
  min-width:220px;
}

.review-cycle .rc-filter-reset{
  white-space:nowrap;
}

.review-cycle .rc-table-wrap{
  overflow:auto;
}

@media (max-width: 1100px){
  .review-cycle .rc-stats{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* =========================
   Review cycle filters – desktop first
   ========================= */

.review-cycle .rc-filtersbar{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:16px;
  padding:14px;
  border-bottom:1px solid rgba(0,0,0,.06);
  background:#fbfbfc;
}

/* Linkerzijde: titel + filters */
.review-cycle .rc-filtersbar-left{
  display:flex;
  flex-direction:column;
  gap:10px;
  flex:1 1 auto;
}

/* Filters ALTIJD op één regel op desktop */
.review-cycle .rc-filters{
  display:grid;
  grid-template-columns:
    minmax(260px, 1.6fr)   /* zoek */
    minmax(200px, 1fr)    /* persoon */
    minmax(200px, 1fr)    /* systeem */
    minmax(200px, 1fr)    /* toegang */
    minmax(160px, .8fr)   /* status */
    auto;                 /* reset */
  gap:10px;
  align-items:center;
}

/* Inputs mogen niet uitrekken */
.review-cycle .rc-filters .input,
.review-cycle .rc-filters select{
  width:100%;
}

/* Rechterkant (Opslaan knop) */
.review-cycle .rc-filtersbar-right{
  flex:0 0 auto;
  display:flex;
  align-items:flex-end;
}

@media (max-width: 1100px){
  .review-cycle .rc-filters{
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 700px){
  .review-cycle .rc-filters{
    grid-template-columns: 1fr;
  }
}

/* =========================
   Review cycle – filters
   ========================= */

.review-cycle .rc-filtersbar{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:24px;                 /* MEER ruimte tussen links/rechts */
  padding:16px 18px;
  border-bottom:1px solid rgba(0,0,0,.06);
  background:#fbfbfc;
}

/* Linkerzijde */
.review-cycle .rc-filtersbar-left{
  display:flex;
  flex-direction:column;
  gap:14px;                 /* meer lucht tussen titel en filters */
  flex:1 1 auto;
}

/* Filters: altijd 1 rij op desktop */
.review-cycle .rc-filters{
  display:grid;
  grid-template-columns:
    minmax(280px, 1.6fr)   /* zoek */
    minmax(220px, 1fr)     /* persoon */
    minmax(220px, 1fr)     /* systeem */
    minmax(220px, 1fr)     /* toegang */
    minmax(160px, .8fr)    /* status */
    auto;                  /* reset */
  gap:16px;                /* 🔥 DIT is de extra ruimte */
  align-items:end;
}

/* Inputs consistent */
.review-cycle .rc-filters .input,
.review-cycle .rc-filters select{
  width:100%;
}

/* Rechterkant (Opslaan) */
.review-cycle .rc-filtersbar-right{
  flex:0 0 auto;
  display:flex;
  align-items:flex-end;
}



/* Learn / Uitleg pages */
.learn-wrap{
 
  margin: 0 auto;
}

.learn-hero{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  padding: 18px 18px;
}

.learn-hero h1{ margin:0; }
.learn-hero .muted{ margin-top:6px; }

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

.learn-grid{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap:12px;
  margin-top: 12px;
}

.learn-card{
  grid-column: span 6;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 16px;
  padding: 14px 14px;
  background: #fff;
  text-decoration:none;
  color: inherit;
  display:block;
}

.learn-card:hover{
  border-color: rgba(0,0,0,.16);
}

.learn-card h3{
  margin: 0 0 6px 0;
  font-size: 16px;
}

.learn-card p{
  margin: 0;
  color: rgba(0,0,0,.65);
  line-height:1.45;
}

.learn-card .learn-meta{
  margin-top: 10px;
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

.learn-pill{
  display:inline-flex;
  align-items:center;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.12);
  font-size: 12px;
  color: rgba(0,0,0,.7);
  background: rgba(0,0,0,.02);
}

.learn-page{
  margin-top: 12px;
}

.learn-breadcrumb{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
  margin-bottom: 10px;
}

.learn-breadcrumb a{ text-decoration:none; }

.learn-section{
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 16px;
  padding: 14px 14px;
  background: #fff;
  margin-bottom: 12px;
}

.learn-section h2{
  margin:0 0 8px 0;
  font-size: 16px;
}

.learn-section p{
  margin: 0 0 10px 0;
  color: rgba(0,0,0,.75);
  line-height:1.55;
}

.learn-section ul{
  margin: 0;
  padding-left: 18px;
  color: rgba(0,0,0,.75);
  line-height:1.55;
}

.learn-quote{
  border-left: 4px solid rgba(0,0,0,.12);
  padding: 10px 12px;
  margin-top: 10px;
  color: rgba(0,0,0,.75);
  background: rgba(0,0,0,.02);
  border-radius: 12px;
}

.learn-two{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px;
}

@media (max-width: 900px){
  .learn-card{ grid-column: span 12; }
  .learn-two{ grid-template-columns: 1fr; }
}

.notice{
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
}
.notice a{ font-weight: 700; }
.notice-info{ }


.onboarding-banner{
  border:1px solid rgba(0,0,0,.08);
  background:#fff7e6;
  border-radius:10px;
  padding:12px 14px;
  margin: 10px 28px;
}
.onboarding-banner__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.onboarding-banner__text span{
  display:block;
  opacity:.8;
  margin-top:2px;
  font-size:14px;
}



.flash{
  margin: 12px 16px;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 14px;
}
.flash-success{
  background:#ecfdf5;
  color:#065f46;
  border:1px solid #a7f3d0;
}
.flash-error{
  background:#fef2f2;
  color:#7f1d1d;
  border:1px solid #fecaca;
}
.flash-info{
  background:#eff6ff;
  color:#1e40af;
  border:1px solid #bfdbfe;
}