:root{
  --primary:#23468f;--primary-dark:#0b254d;--sidebar:#071f42;--sidebar-2:#0d2d5c;
  --bg:#f6f8fc;--card:#fff;--text:#1d2433;--muted:#667085;--soft:#f8fafc;--border:#e4e7ec;
  --danger:#d92d20;--danger-soft:#fff4f3;--success:#16803c;--success-soft:#eaf8ef;--blue-soft:#eaf2ff;--purple-soft:#f1eaff;
}
*{box-sizing:border-box}html,body{min-height:100%}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;color:var(--text);background:var(--bg)}
a{color:inherit}.auth-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:32px 18px;background:linear-gradient(135deg,#eef2ff 0%,#f8fafc 45%,#eef8ff 100%)}.auth-card{width:100%;max-width:430px;background:rgba(255,255,255,.94);border:1px solid rgba(255,255,255,.8);border-radius:24px;box-shadow:0 24px 70px rgba(31,41,55,.16);padding:34px}.brand{text-align:center;margin-bottom:26px}.brand-mark{width:70px;height:70px;border-radius:22px;background:rgba(38,67,133,.1);display:inline-flex;align-items:center;justify-content:center;color:var(--primary);font-weight:800;font-size:24px;margin-bottom:14px}.brand h1{margin:0;font-size:28px;letter-spacing:-.03em}.brand p{margin:7px 0 0;color:var(--muted);font-size:14px}.form-title{font-size:20px;font-weight:750;margin-bottom:6px}.form-subtitle{font-size:14px;color:var(--muted);line-height:1.45;margin:0 0 20px}.field{margin-bottom:14px}.field label{display:block;font-size:13px;font-weight:650;margin-bottom:7px;color:#374151}.field input{width:100%;border:1px solid var(--border);border-radius:14px;padding:13px 14px;font-size:15px;outline:none;background:#fff;transition:.15s}.field input:focus{border-color:var(--primary);box-shadow:0 0 0 4px rgba(38,67,133,.11)}.code-input{text-align:center;letter-spacing:8px;font-weight:750;font-size:24px!important}.btn{width:100%;border:0;border-radius:15px;background:var(--primary);color:#fff;font-size:15px;font-weight:750;padding:14px 16px;cursor:pointer;transition:.15s;text-decoration:none;display:inline-flex;align-items:center;justify-content:center}.btn:hover{background:var(--primary-dark);transform:translateY(-1px)}.btn-secondary{background:#eef2ff;color:var(--primary);border:1px solid rgba(38,67,133,.18)}.btn-secondary:hover{background:#e0e7ff;color:var(--primary)}.links{display:flex;flex-direction:column;gap:10px;margin-top:18px;text-align:center}.links a{color:var(--primary);font-weight:650;font-size:14px;text-decoration:none}.links a:hover{text-decoration:underline}.alert{border-radius:14px;padding:12px 14px;margin-bottom:18px;font-size:14px;line-height:1.4}.alert-danger{background:#fff1f0;color:#b42318;border:1px solid #ffd5d2}.alert-success{background:#ecfdf3;color:#027a48;border:1px solid #abefc6}

/* App shell */
.app-body{background:var(--bg)}.app-shell{min-height:100vh;display:grid;grid-template-columns:276px 1fr}.sidebar{position:sticky;top:0;height:100vh;background:linear-gradient(180deg,var(--sidebar) 0%,#061a36 100%);color:#fff;display:flex;flex-direction:column;border-right:1px solid rgba(255,255,255,.08);box-shadow:8px 0 30px rgba(15,23,42,.10)}.sidebar-brand{height:90px;display:flex;align-items:center;gap:14px;padding:0 28px;border-bottom:1px solid rgba(255,255,255,.10);text-decoration:none}.sidebar-brand-link{cursor:pointer}.sidebar-brand-link:hover{background:rgba(255,255,255,.035)}.sidebar-logo{width:38px;height:38px;border-radius:12px;background:rgba(255,255,255,.12);display:flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.18);font-weight:900;font-size:13px}.sidebar-brand strong{display:block;font-size:22px;letter-spacing:-.04em}.sidebar-brand span{display:block;margin-top:2px;color:#a9b8d0;font-size:13px}.sidebar-nav{padding:34px 16px;display:flex;flex-direction:column;gap:8px}.sidebar-link{display:flex;align-items:center;gap:13px;padding:14px 16px;border-radius:12px;color:#edf4ff;text-decoration:none;font-size:16px;font-weight:650;transition:.15s}.sidebar-link:hover{background:rgba(255,255,255,.08)}.sidebar-link.active{background:linear-gradient(90deg,#173d82 0%,#244f9b 100%);box-shadow:0 12px 28px rgba(0,0,0,.18)}.sidebar-link[aria-disabled="true"]{opacity:.70;cursor:not-allowed}.logout-link{margin-top:6px}.nav-icon{width:22px;display:inline-flex;justify-content:center;opacity:.95}.app-main{min-width:0;display:flex;flex-direction:column}.app-topbar{height:90px;background:rgba(255,255,255,.92);border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:flex-end;padding:0 42px;backdrop-filter:blur(8px)}.user-chip{display:flex;align-items:center;gap:12px}.user-chip-avatar{width:44px;height:44px;border-radius:50%;background:#f2f4f7;border:1px solid var(--border);display:flex;align-items:center;justify-content:center;color:#344054;font-weight:800}.user-chip strong{display:block;font-size:15px}.user-chip span{display:block;margin-top:3px;color:var(--muted);font-size:13px}.content{width:100%;max-width:1360px;margin:0 auto;padding:44px 56px 34px}.app-footer{margin-top:auto;padding:26px 56px 32px;color:#667085;font-size:14px;border-top:1px solid var(--border);background:rgba(255,255,255,.48)}

/* Dashboard */
.panel{background:#fff;border:1px solid var(--border);border-radius:22px;padding:28px;box-shadow:0 10px 30px rgba(31,41,55,.06)}.panel h2{margin:0 0 8px}.panel p{color:var(--muted);line-height:1.55}.meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin-top:22px}.meta div{background:#f9fafb;border:1px solid var(--border);border-radius:16px;padding:14px}.meta span{display:block;color:var(--muted);font-size:12px;margin-bottom:4px}.meta strong{font-size:15px}.module-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin-top:22px}.module-card{border:1px solid var(--border);border-radius:18px;padding:18px;background:#fff}.module-card h3{margin:0 0 8px;font-size:17px}.module-card p{margin:0;color:var(--muted);font-size:14px;line-height:1.5}

/* Users */
.page-section{max-width:1260px;margin:0 auto}.page-title-row{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;margin-bottom:28px}.page-title-row h1{margin:0 0 10px;font-size:34px;line-height:1.1;letter-spacing:-.04em;color:#182230}.page-title-row p{max-width:1040px;margin:0;color:#667085;line-height:1.65;font-size:16px}.admin-card{background:#fff;border:1px solid var(--border);border-radius:20px;box-shadow:0 18px 50px rgba(16,24,40,.07);overflow:hidden}.admin-card-header{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:28px 30px 24px}.admin-card-title{display:flex;align-items:center;gap:14px}.card-icon{width:40px;height:40px;border-radius:14px;background:#f2f4f7;display:flex;align-items:center;justify-content:center}.admin-card-title h2{margin:0;font-size:18px;letter-spacing:-.02em}.admin-card-title span{display:block;margin-top:4px;color:var(--muted);font-size:13px}.table-search{width:320px;height:46px;border:1px solid #d0d5dd;border-radius:10px;display:flex;align-items:center;gap:10px;padding:0 14px;color:#667085;background:#fff}.table-search input{border:0;outline:0;width:100%;font-size:14px;background:transparent;color:#98a2b3}.table-wrap{padding:0 30px;overflow-x:auto}.users-table{width:100%;min-width:1040px;border-collapse:separate;border-spacing:0;border:1px solid var(--border);border-radius:10px;overflow:hidden}.users-table th{height:54px;background:#fbfcfe;color:#344054;font-size:13px;font-weight:750;text-align:left;padding:0 20px;border-bottom:1px solid var(--border);white-space:nowrap}.users-table td{height:78px;padding:0 20px;border-bottom:1px solid var(--border);vertical-align:middle;background:#fff}.users-table tbody tr:last-child td{border-bottom:0}.users-table tbody tr:hover td{background:#fcfdff}.users-table tr.is-disabled td{background:#fafafa;color:#667085}.id-col{width:76px;color:#475467}.account-col{width:165px}.user-cell{display:flex;align-items:center;gap:16px;min-width:260px}.avatar{width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#eaf2ff;color:#2454b8;font-weight:800;font-size:13px;flex:0 0 auto}.avatar-admin{background:#fff3d6;color:#b16a05}.avatar-trainer{background:#fff7ed;color:#c2410c}.user-info{min-width:0}.user-name{display:flex;align-items:center;gap:8px;color:#182230;font-weight:800;line-height:1.25}.user-email{margin-top:5px;color:#667085;font-size:14px}.self-label{display:inline-flex;align-items:center;border-radius:999px;background:#eef2ff;color:#244f9b;font-size:11px;font-weight:800;padding:3px 8px}.role-badge{display:inline-flex;align-items:center;justify-content:center;border-radius:7px;padding:7px 16px;font-size:12px;font-weight:800;min-width:70px}.role-cursist{background:#eaf2ff;color:#2454b8}.role-trainer{background:#fff7ed;color:#c2410c}.role-admin{background:#f1eaff;color:#6941c6}.state-badge{display:inline-flex;align-items:center;gap:8px;border-radius:7px;padding:7px 12px;font-size:13px;font-weight:800}.state-dot{width:8px;height:8px;border-radius:50%;background:currentColor}.state-active{background:#eaf8ef;color:#16803c}.state-inactive{background:#f2f4f7;color:#667085}.date-cell{white-space:nowrap;color:#344054}.inline-action{display:flex;align-items:center;gap:8px;margin:0}.role-select{height:40px;min-width:98px;border:1px solid #d0d5dd;border-radius:8px;background:#fff;color:#182230;font-size:14px;padding:0 11px;outline:none}.role-select:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(35,70,143,.10)}.icon-save{height:40px;border:1px solid var(--primary);background:var(--primary);color:#fff;border-radius:8px;padding:0 13px;font-size:13px;font-weight:800;cursor:pointer;white-space:nowrap;transition:.15s}.icon-save:hover{background:#173d82}.account-button{height:40px;border-radius:8px;padding:0 14px;font-size:13px;font-weight:800;cursor:pointer;white-space:nowrap;transition:.15s;background:#fff}.account-button.danger{border:1px solid #f97066;color:#d92d20}.account-button.danger:hover{background:#fff4f3}.account-button.success{border:1px solid #75e0a7;color:#16803c}.account-button.success:hover{background:#eaf8ef}.account-button:disabled,.icon-save:disabled,.role-select:disabled{opacity:.48;cursor:not-allowed}.empty-state{padding:38px!important;text-align:center;color:var(--muted)}.table-footer{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:24px 30px 30px;color:#667085;font-size:14px}.table-footer-muted{color:#98a2b3}

@media(max-width:980px){.app-shell{grid-template-columns:1fr}.sidebar{position:relative;height:auto}.sidebar-brand{height:76px}.sidebar-nav{padding:14px 16px;flex-direction:row;overflow-x:auto}.sidebar-link{white-space:nowrap}.app-topbar{height:72px;padding:0 22px}.content{padding:28px 18px}.app-footer{padding:22px}.admin-card-header{align-items:flex-start;flex-direction:column}.table-search{width:100%}}
@media(max-width:520px){.auth-card{padding:26px 20px;border-radius:20px}.brand h1{font-size:25px}.page-title-row h1{font-size:28px}.admin-card-header,.table-wrap,.table-footer{padding-left:18px;padding-right:18px}.table-footer{align-items:flex-start;flex-direction:column}.inline-action{flex-direction:column;align-items:stretch}.role-select,.icon-save,.account-button{width:100%}}

/* v12: werkende gebruikersfilter */
.table-search{
    position:relative;
    z-index:5;
    cursor:text;
    pointer-events:auto;
}
.table-search input{
    pointer-events:auto;
    cursor:text;
    color:#182230;
}
.table-search input::placeholder{color:#98a2b3}
.users-table tr[hidden], .no-results-row[hidden]{display:none!important}

/* v16: instellingen en factuurgegevens */
.user-chip{text-decoration:none;border-radius:999px;padding:6px 10px;transition:.15s}
.user-chip:hover{background:#f8fafc}
.settings-grid{display:grid;grid-template-columns:320px minmax(0,1fr);gap:22px;align-items:start}
.profile-card,.settings-card{background:#fff;border:1px solid var(--border);border-radius:20px;box-shadow:0 18px 50px rgba(16,24,40,.07)}
.profile-card{padding:28px;text-align:center;position:sticky;top:112px}
.profile-avatar-large{width:76px;height:76px;border-radius:24px;background:#eaf2ff;color:#2454b8;display:flex;align-items:center;justify-content:center;margin:0 auto 16px;font-weight:900;font-size:22px;border:1px solid #d8e6ff}
.profile-card h2{margin:0 0 6px;font-size:22px;letter-spacing:-.03em}.profile-card p{margin:0 0 14px;color:var(--muted);font-size:14px;word-break:break-word}
.profile-readonly-list{margin-top:24px;border-top:1px solid var(--border);padding-top:18px;text-align:left;display:grid;gap:12px}.profile-readonly-list div{background:#f9fafb;border:1px solid var(--border);border-radius:14px;padding:12px}.profile-readonly-list span{display:block;color:var(--muted);font-size:12px;margin-bottom:4px}.profile-readonly-list strong{font-size:14px;color:#182230;word-break:break-word}
.settings-card{padding:0;overflow:hidden}.settings-card-header{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;padding:28px 30px;border-bottom:1px solid var(--border);background:#fbfcfe}.settings-card-header h2{margin:0 0 5px;font-size:20px;letter-spacing:-.02em}.settings-card-header p{margin:0;color:var(--muted);line-height:1.5;font-size:14px}.primary-action{height:42px;border:0;border-radius:10px;background:var(--primary);color:#fff;font-weight:800;padding:0 16px;cursor:pointer;white-space:nowrap}.primary-action:hover{background:var(--primary-dark)}
.form-section-title{margin:28px 30px 14px;color:#182230;font-weight:850;font-size:14px;letter-spacing:.01em}.form-grid{display:grid;gap:16px;padding:0 30px}.two-columns{grid-template-columns:repeat(2,minmax(0,1fr))}.address-grid{grid-template-columns:1.2fr .45fr .65fr .9fr .9fr}.street-field{grid-column:auto}.number-field{grid-column:auto}.form-field{display:flex;flex-direction:column;gap:7px}.form-field span{font-size:13px;font-weight:750;color:#344054}.form-field input,.form-field select{height:44px;border:1px solid #d0d5dd;border-radius:10px;background:#fff;color:#182230;font-size:14px;padding:0 12px;outline:none}.form-field input:focus,.form-field select:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(35,70,143,.10)}.form-actions-bottom{display:flex;justify-content:flex-end;padding:30px;margin-top:4px;border-top:1px solid var(--border)}
@media(max-width:980px){.settings-grid{grid-template-columns:1fr}.profile-card{position:static}.settings-card-header{flex-direction:column}.two-columns,.address-grid{grid-template-columns:1fr}.form-grid,.form-section-title,.settings-card-header,.form-actions-bottom{padding-left:20px;padding-right:20px;margin-left:0;margin-right:0}}

/* v21: responsive hardening voor instellingen, tabellen en app-shell */
html, body { max-width: 100%; overflow-x: hidden; }
img, svg { max-width: 100%; }
.content, .page-section, .settings-grid, .settings-card, .profile-card, .admin-card { min-width: 0; }
.form-grid, .form-field, .settings-card-header, .page-title-row { min-width: 0; }
.form-field input, .form-field select, .field input, .table-search input { width: 100%; min-width: 0; }

/* Ruimere desktop/laptop: voorkom dat de 5-koloms adresregel uit het scherm loopt */
@media (max-width: 1280px) {
  .content { padding-left: 32px; padding-right: 32px; }
  .settings-grid { grid-template-columns: 280px minmax(0, 1fr); }
  .address-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .street-field { grid-column: span 2; }
}

/* Tablet: sidebar bovenaan, formulieren in 1 kolom, geen horizontale overflow */
@media (max-width: 980px) {
  .app-shell { display: block; }
  .sidebar { position: relative; height: auto; width: 100%; box-shadow: none; }
  .sidebar-brand { height: 72px; padding: 0 18px; }
  .sidebar-brand strong { font-size: 18px; }
  .sidebar-nav { padding: 12px; flex-direction: row; gap: 8px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .sidebar-link { flex: 0 0 auto; padding: 11px 13px; font-size: 14px; }
  .app-topbar { height: 68px; padding: 0 16px; }
  .user-chip { max-width: 100%; min-width: 0; }
  .user-chip > div:last-child { min-width: 0; }
  .user-chip strong, .user-chip span { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .content { padding: 24px 16px 28px; max-width: 100%; }
  .page-title-row { display: block; margin-bottom: 18px; }
  .page-title-row h1 { font-size: 28px; }
  .page-title-row p { font-size: 14px; line-height: 1.5; }
  .settings-grid { grid-template-columns: 1fr; gap: 16px; }
  .profile-card { position: static; padding: 22px; }
  .settings-card-header { flex-direction: column; padding: 22px; }
  .settings-card-header .primary-action { width: 100%; }
  .form-section-title { margin: 24px 22px 12px; }
  .form-grid { padding: 0 22px; }
  .two-columns, .address-grid { grid-template-columns: 1fr; }
  .street-field { grid-column: auto; }
  .form-actions-bottom { padding: 22px; }
  .form-actions-bottom .primary-action { width: 100%; }
  .admin-card-header { padding: 22px; }
  .table-wrap { padding: 0 16px; overflow-x: auto; }
  .users-table { min-width: 900px; }
}

/* Mobiel: alles stapelt netjes, knoppen volledige breedte */
@media (max-width: 640px) {
  .auth-wrap { padding: 20px 14px; }
  .auth-card { padding: 24px 18px; }
  .app-topbar { justify-content: flex-start; }
  .user-chip-avatar { width: 38px; height: 38px; }
  .content { padding: 20px 12px 24px; }
  .page-title-row h1 { font-size: 26px; }
  .panel, .profile-card, .settings-card, .admin-card { border-radius: 16px; }
  .settings-card-header { padding: 18px; }
  .form-section-title { margin: 22px 18px 10px; }
  .form-grid { padding: 0 18px; gap: 13px; }
  .form-field input, .form-field select { height: 46px; font-size: 16px; }
  .form-actions-bottom { padding: 18px; }
  .profile-readonly-list { gap: 10px; }
  .table-footer { padding: 18px; }
  .app-footer { padding: 18px 12px; }
}

/* Zeer smal: behoud leesbaarheid en voorkom afsnijden */
@media (max-width: 420px) {
  .sidebar-nav { gap: 6px; }
  .sidebar-link { padding: 10px 11px; }
  .nav-icon { width: 18px; }
  .user-chip strong, .user-chip span { max-width: 170px; }
  .settings-card-header h2 { font-size: 18px; }
  .profile-avatar-large { width: 64px; height: 64px; border-radius: 20px; }
}

/* v25: echte responsive beheer-tabellen zonder horizontale pagina-scroll */
.users-page .admin-card,
.trainings-page .admin-card { width: 100%; max-width: 100%; overflow: hidden; }
.users-page .table-wrap,
.trainings-page .table-wrap { width: 100%; max-width: 100%; overflow-x: hidden; padding: 0; }
.users-page .users-table,
.trainings-page .users-table { width: 100%; min-width: 0; table-layout: fixed; border-left: 0; border-right: 0; border-radius: 0; }
.users-page .users-table th,
.users-page .users-table td,
.trainings-page .users-table th,
.trainings-page .users-table td { padding-left: 14px; padding-right: 14px; }
.users-page .id-col,
.trainings-page .id-col { width: 54px; }
.users-page .users-table th:nth-child(2),
.users-page .users-table td:nth-child(2) { width: 28%; }
.users-page .users-table th:nth-child(3),
.users-page .users-table td:nth-child(3) { width: 10%; }
.users-page .users-table th:nth-child(4),
.users-page .users-table td:nth-child(4) { width: 12%; }
.users-page .users-table th:nth-child(5),
.users-page .users-table td:nth-child(5) { width: 15%; }
.users-page .users-table th:nth-child(6),
.users-page .users-table td:nth-child(6) { width: 20%; }
.users-page .account-col { width: 15%; }
.users-page .user-cell,
.trainings-page .user-cell { min-width: 0; }
.users-page .user-name,
.users-page .user-email,
.trainings-page .user-name,
.trainings-page .user-email { overflow-wrap: anywhere; }
.users-page .inline-action,
.trainings-page .inline-action { min-width: 0; flex-wrap: wrap; }
.users-page .role-select,
.trainings-page .role-select { min-width: 0; flex: 1 1 92px; max-width: 140px; }
.users-page .icon-save,
.users-page .account-button,
.trainings-page .icon-save,
.trainings-page .account-button { flex: 0 0 auto; padding-left: 11px; padding-right: 11px; }
.users-page .date-cell,
.trainings-page .date-cell { white-space: normal; overflow-wrap: anywhere; }

/* iets eerder naar cards, zodat er nooit horizontale scroll nodig is */
@media (max-width: 1180px) {
  .users-page .table-wrap,
  .trainings-page .table-wrap { padding: 0 18px 18px; overflow: visible; }
  .users-page .users-table,
  .users-page .users-table thead,
  .users-page .users-table tbody,
  .users-page .users-table tr,
  .users-page .users-table th,
  .users-page .users-table td,
  .trainings-page .users-table,
  .trainings-page .users-table thead,
  .trainings-page .users-table tbody,
  .trainings-page .users-table tr,
  .trainings-page .users-table th,
  .trainings-page .users-table td { display: block; width: 100%; }
  .users-page .users-table,
  .trainings-page .users-table { border: 0; background: transparent; }
  .users-page .users-table thead,
  .trainings-page .users-table thead { display: none; }
  .users-page .users-table tbody,
  .trainings-page .users-table tbody { display: grid; gap: 14px; }
  .users-page .users-table tr,
  .trainings-page .users-table tr { border: 1px solid var(--border); border-radius: 16px; background: #fff; overflow: hidden; box-shadow: 0 10px 28px rgba(16,24,40,.05); }
  .users-page .users-table td,
  .trainings-page .users-table td { min-height: 0; height: auto; padding: 14px 16px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; gap: 18px; background: #fff; }
  .users-page .users-table td:last-child,
  .trainings-page .users-table td:last-child { border-bottom: 0; }
  .users-page .users-table td::before,
  .trainings-page .users-table td::before { content: attr(data-label); flex: 0 0 132px; color: #667085; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .02em; }
  .users-page .users-table td[data-label="Naam"],
  .trainings-page .users-table td[data-label="Training"] { align-items: flex-start; }
  .users-page .users-table td[data-label="Naam"]::before,
  .trainings-page .users-table td[data-label="Training"]::before { padding-top: 12px; }
  .users-page .id-col,
  .trainings-page .id-col { display: none !important; }
  .users-page .inline-action,
  .trainings-page .inline-action { width: 100%; justify-content: flex-end; }
  .users-page .role-select,
  .trainings-page .role-select { flex: 0 1 150px; max-width: 180px; }
  .users-page .account-button,
  .trainings-page .account-button { max-width: 180px; }
  .users-page .empty-state,
  .trainings-page .empty-state { display: block; }
  .users-page .empty-state::before,
  .trainings-page .empty-state::before { content: none; }
}

@media (max-width: 640px) {
  .users-page .admin-card-header,
  .trainings-page .admin-card-header { padding: 18px; }
  .users-page .admin-card-title,
  .trainings-page .admin-card-title { align-items: flex-start; }
  .users-page .table-wrap,
  .trainings-page .table-wrap { padding: 0 12px 14px; }
  .users-page .users-table tbody,
  .trainings-page .users-table tbody { gap: 12px; }
  .users-page .users-table td,
  .trainings-page .users-table td { display: block; padding: 13px 14px; }
  .users-page .users-table td::before,
  .trainings-page .users-table td::before { display: block; margin-bottom: 8px; }
  .users-page .user-cell,
  .trainings-page .user-cell { align-items: flex-start; gap: 12px; }
  .users-page .avatar,
  .trainings-page .avatar { width: 42px; height: 42px; }
  .users-page .inline-action,
  .trainings-page .inline-action { display: grid; grid-template-columns: 1fr; gap: 10px; }
  .users-page .role-select,
  .users-page .icon-save,
  .users-page .account-button,
  .trainings-page .role-select,
  .trainings-page .icon-save,
  .trainings-page .account-button,
  .trainings-page .compact-input { width: 100%; max-width: none; }
  .users-page .table-footer,
  .trainings-page .table-footer { padding: 16px 18px 20px; }
}

/* v27: trainingen popup + consistente responsive UI */
body.modal-open { overflow: hidden; }
.card-header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  min-width: 0;
  flex: 1 1 auto;
}
.card-header-actions .table-search {
  flex: 1 1 320px;
  max-width: 420px;
}
.add-training-button {
  height: 46px;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.trainings-page .training-row-form {
  display: grid;
  grid-template-columns: minmax(150px, 1.4fr) minmax(120px, .9fr) minmax(110px, .8fr) auto;
  gap: 8px;
  align-items: center;
  width: 100%;
}
.trainings-page .compact-input {
  height: 40px;
  min-width: 0;
  border: 1px solid #d0d5dd;
  border-radius: 8px;
  background: #fff;
  color: #182230;
  font-size: 14px;
  padding: 0 11px;
  outline: none;
}
.trainings-page .compact-input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(35,70,143,.10);
}
.location-webinar { background: #eaf2ff; color: #2454b8; }
.location-onsite { background: #fff7ed; color: #c2410c; }
.location-rosmalen { background: #eaf8ef; color: #16803c; }
.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(16, 24, 40, .48);
  backdrop-filter: blur(4px);
}
.modal-backdrop[hidden] { display: none; }
.modal-panel {
  width: min(560px, 100%);
  max-height: calc(100vh - 48px);
  overflow: auto;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 22px;
  box-shadow: 0 30px 80px rgba(16,24,40,.24);
}
.modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 26px 28px 20px;
  border-bottom: 1px solid var(--border);
}
.modal-header h2 {
  margin: 0 0 6px;
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: -.03em;
  color: #182230;
}
.modal-header p {
  margin: 0;
  color: #667085;
  line-height: 1.5;
  font-size: 14px;
}
.modal-close {
  width: 38px;
  height: 38px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #fff;
  color: #344054;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}
.modal-close:hover { background: #f9fafb; }
.modal-form {
  display: grid;
  gap: 16px;
  padding: 24px 28px 28px;
}
.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 4px;
}
.secondary-action {
  height: 44px;
  border: 1px solid #d0d5dd;
  background: #fff;
  color: #344054;
  border-radius: 10px;
  padding: 0 16px;
  font-weight: 800;
  cursor: pointer;
}
.secondary-action:hover { background: #f9fafb; }
.trainings-page .users-table th:nth-child(2),
.trainings-page .users-table td:nth-child(2) { width: 22%; }
.trainings-page .users-table th:nth-child(3),
.trainings-page .users-table td:nth-child(3) { width: 11%; }
.trainings-page .users-table th:nth-child(4),
.trainings-page .users-table td:nth-child(4) { width: 10%; }
.trainings-page .users-table th:nth-child(5),
.trainings-page .users-table td:nth-child(5) { width: 13%; }
.trainings-page .users-table th:nth-child(6),
.trainings-page .users-table td:nth-child(6) { width: 32%; }
.trainings-page .account-col { width: 12%; }

@media (max-width: 1180px) {
  .card-header-actions {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
  }
  .card-header-actions .table-search,
  .card-header-actions .primary-action {
    width: 100%;
    max-width: none;
  }
  .trainings-page .training-row-form {
    grid-template-columns: 1fr 1fr;
  }
  .trainings-page .training-row-form .compact-input,
  .trainings-page .training-row-form .icon-save {
    grid-column: 1 / -1;
  }
  .trainings-page .training-row-form .role-select {
    max-width: none;
    width: 100%;
  }
}

@media (max-width: 640px) {
  .modal-backdrop { align-items: flex-end; padding: 12px; }
  .modal-panel { width: 100%; max-height: calc(100vh - 24px); border-radius: 18px; }
  .modal-header { padding: 20px 18px 16px; }
  .modal-header h2 { font-size: 20px; }
  .modal-form { padding: 18px; }
  .modal-actions { display: grid; grid-template-columns: 1fr; }
  .modal-actions .primary-action,
  .modal-actions .secondary-action { width: 100%; }
  .trainings-page .training-row-form { grid-template-columns: 1fr; }
  .add-training-button { height: 48px; }
}

/* v28: trainingen rij-acties binnen de tabel houden */
.trainings-page .trainings-table {
  table-layout: fixed;
}
.trainings-page .trainings-table th,
.trainings-page .trainings-table td {
  min-width: 0;
}
.trainings-page .trainings-table th:nth-child(2),
.trainings-page .trainings-table td:nth-child(2) { width: 26%; }
.trainings-page .trainings-table th:nth-child(3),
.trainings-page .trainings-table td:nth-child(3) { width: 12%; }
.trainings-page .trainings-table th:nth-child(4),
.trainings-page .trainings-table td:nth-child(4) { width: 12%; }
.trainings-page .trainings-table th:nth-child(5),
.trainings-page .trainings-table td:nth-child(5) { width: 14%; }
.trainings-page .trainings-table th:nth-child(6),
.trainings-page .trainings-table td:nth-child(6) { width: 34%; }
.trainings-page .training-actions-col {
  min-width: 0;
  overflow: visible;
}
.trainings-page .training-row-form {
  display: grid;
  grid-template-columns: minmax(120px, 1.2fr) minmax(98px, .82fr) minmax(98px, .82fr) auto;
  gap: 8px;
  align-items: center;
  width: 100%;
  min-width: 0;
  max-width: 100%;
}
.trainings-page .training-row-form > * {
  min-width: 0;
}
.trainings-page .training-name-input {
  width: 100%;
  max-width: 100%;
}
.trainings-page .training-row-form .role-select {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}
.trainings-page .training-row-form .icon-save {
  flex: 0 0 auto;
  justify-self: end;
  max-width: 110px;
}
.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;
}
@media (max-width: 1320px) {
  .trainings-page .trainings-table th:nth-child(2),
  .trainings-page .trainings-table td:nth-child(2) { width: 24%; }
  .trainings-page .trainings-table th:nth-child(5),
  .trainings-page .trainings-table td:nth-child(5) { width: 13%; }
  .trainings-page .trainings-table th:nth-child(6),
  .trainings-page .trainings-table td:nth-child(6) { width: 37%; }
  .trainings-page .training-row-form {
    grid-template-columns: 1fr 1fr;
  }
  .trainings-page .training-row-form .training-name-input,
  .trainings-page .training-row-form .icon-save {
    grid-column: 1 / -1;
  }
  .trainings-page .training-row-form .icon-save {
    width: 100%;
    max-width: none;
    justify-self: stretch;
  }
}
@media (max-width: 1180px) {
  .trainings-page .training-actions-col { width: 100% !important; }
  .trainings-page .training-row-form {
    width: 100%;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  .trainings-page .training-row-form .training-name-input,
  .trainings-page .training-row-form .icon-save {
    grid-column: 1 / -1;
  }
}
@media (max-width: 640px) {
  .trainings-page .training-row-form {
    grid-template-columns: 1fr;
  }
  .trainings-page .training-row-form .training-name-input,
  .trainings-page .training-row-form .icon-save {
    grid-column: auto;
  }
}

/* v29: trainingen beheren via instellingenmodal - geen volle inline formulieren in tabelrij */
.trainings-page .trainings-table-clean {
  table-layout: fixed;
  width: 100%;
  min-width: 0;
}
.trainings-page .trainings-table-clean th,
.trainings-page .trainings-table-clean td {
  min-width: 0;
  overflow: hidden;
}
.trainings-page .trainings-table-clean th:nth-child(1),
.trainings-page .trainings-table-clean td:nth-child(1) { width: 6%; }
.trainings-page .trainings-table-clean th:nth-child(2),
.trainings-page .trainings-table-clean td:nth-child(2) { width: 34%; }
.trainings-page .trainings-table-clean th:nth-child(3),
.trainings-page .trainings-table-clean td:nth-child(3) { width: 15%; }
.trainings-page .trainings-table-clean th:nth-child(4),
.trainings-page .trainings-table-clean td:nth-child(4) { width: 14%; }
.trainings-page .trainings-table-clean th:nth-child(5),
.trainings-page .trainings-table-clean td:nth-child(5) { width: 18%; }
.trainings-page .trainings-table-clean th:nth-child(6),
.trainings-page .trainings-table-clean td:nth-child(6) { width: 13%; }
.trainings-page .training-actions-col {
  text-align: right;
}
.settings-action {
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid #d0d5dd;
  background: #fff;
  color: #182230;
  border-radius: 10px;
  padding: 0 14px;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
  max-width: 100%;
  transition: .15s ease;
}
.settings-action:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: #f8fbff;
}
.settings-action:focus-visible {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(35,70,143,.12);
}
.trainings-page .user-name,
.trainings-page .user-email,
.trainings-page .date-cell {
  overflow: hidden;
  text-overflow: ellipsis;
}
.trainings-page .date-cell {
  white-space: normal;
  line-height: 1.35;
}
.trainings-page .role-badge,
.trainings-page .state-badge {
  max-width: 100%;
}

@media(max-width:980px){
  .trainings-page .trainings-table-clean th:nth-child(1),
  .trainings-page .trainings-table-clean td:nth-child(1),
  .trainings-page .trainings-table-clean th:nth-child(5),
  .trainings-page .trainings-table-clean td:nth-child(5) { display: none; }
  .trainings-page .trainings-table-clean th:nth-child(2),
  .trainings-page .trainings-table-clean td:nth-child(2) { width: 40%; }
  .trainings-page .trainings-table-clean th:nth-child(3),
  .trainings-page .trainings-table-clean td:nth-child(3) { width: 20%; }
  .trainings-page .trainings-table-clean th:nth-child(4),
  .trainings-page .trainings-table-clean td:nth-child(4) { width: 20%; }
  .trainings-page .trainings-table-clean th:nth-child(6),
  .trainings-page .trainings-table-clean td:nth-child(6) { width: 20%; }
}

@media(max-width:760px){
  .trainings-page .trainings-table-clean,
  .trainings-page .trainings-table-clean thead,
  .trainings-page .trainings-table-clean tbody,
  .trainings-page .trainings-table-clean tr,
  .trainings-page .trainings-table-clean th,
  .trainings-page .trainings-table-clean td { display: block; width: 100% !important; }
  .trainings-page .trainings-table-clean thead { display: none; }
  .trainings-page .trainings-table-clean tbody { display: grid; gap: 12px; }
  .trainings-page .trainings-table-clean tr { border: 1px solid var(--border); border-radius: 16px; overflow: hidden; box-shadow: 0 10px 28px rgba(16,24,40,.05); background: #fff; }
  .trainings-page .trainings-table-clean td { height: auto; min-height: 0; padding: 14px 16px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; gap: 16px; text-align: left; }
  .trainings-page .trainings-table-clean td:last-child { border-bottom: 0; }
  .trainings-page .trainings-table-clean td::before { content: attr(data-label); flex: 0 0 110px; color: #667085; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .02em; }
  .trainings-page .trainings-table-clean .id-col { display: none !important; }
  .trainings-page .training-actions-col { text-align: left; }
  .settings-action { width: auto; min-width: 160px; }
}

@media(max-width:520px){
  .trainings-page .trainings-table-clean td { display: block; }
  .trainings-page .trainings-table-clean td::before { display: block; margin-bottom: 8px; }
  .settings-action { width: 100%; }
}

/* v30: trainingen zonder aangemaakt-kolom + planningpagina */
.trainings-page .trainings-table-clean th:nth-child(1),
.trainings-page .trainings-table-clean td:nth-child(1) { width: 6%; }
.trainings-page .trainings-table-clean th:nth-child(2),
.trainings-page .trainings-table-clean td:nth-child(2) { width: 39%; }
.trainings-page .trainings-table-clean th:nth-child(3),
.trainings-page .trainings-table-clean td:nth-child(3) { width: 17%; }
.trainings-page .trainings-table-clean th:nth-child(4),
.trainings-page .trainings-table-clean td:nth-child(4) { width: 16%; }
.trainings-page .trainings-table-clean th:nth-child(5),
.trainings-page .trainings-table-clean td:nth-child(5) { width: 22%; }
.row-action-group {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.row-action-group .settings-action {
  text-decoration: none;
}
.planning-action {
  border-color: rgba(35,70,143,.24);
  color: var(--primary);
  background: #f8fbff;
}
.planning-action:hover {
  background: #eef4ff;
}
.page-back-action {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.planning-grid {
  display: grid;
  grid-template-columns: minmax(320px, .9fr) minmax(420px, 1.1fr);
  gap: 22px;
  align-items: start;
}
.planning-card {
  overflow: hidden;
}
.compact-card-header {
  padding: 26px 28px 20px;
}
.planning-controls {
  padding: 0 28px 20px;
}
.planning-select-field {
  margin: 0;
}
.planning-select-field select,
.planning-create-form select,
.planning-create-form input {
  width: 100%;
}
.calendar-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 18px 28px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: #f9fafb;
}
.calendar-toolbar strong {
  font-size: 18px;
  color: #182230;
}
.calendar-nav {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #d0d5dd;
  border-radius: 12px;
  background: #fff;
  color: #182230;
  text-decoration: none;
  font-size: 28px;
  font-weight: 800;
}
.calendar-nav:hover {
  border-color: var(--primary);
  color: var(--primary);
}
.month-calendar {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
  padding: 24px 28px 18px;
}
.calendar-weekday {
  color: #667085;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  text-align: center;
}
.calendar-day {
  aspect-ratio: 1 / 1;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  border: 1px solid #e4e7ec;
  color: #344054;
}
.calendar-day span { line-height: 1; }
.calendar-day-empty {
  background: transparent;
  border-color: transparent;
}
.calendar-day.no-training {
  background: #f2f4f7;
}
.calendar-day.has-training,
.calendar-day.has-webinar {
  background: #dbeafe;
  border-color: #bfdbfe;
  color: #1d4ed8;
}

.calendar-day.has-onsite {
  background: #f97316;
  border-color: #f97316;
  color: #ffffff;
  box-shadow: 0 10px 22px rgba(249, 115, 22, 0.18);
}

.calendar-day.has-rosmalen {
  background: #1f3f8b;
  border-color: #1f3f8b;
  color: #ffffff;
  box-shadow: 0 10px 22px rgba(31, 63, 139, 0.20);
}

.calendar-day.has-multiple-locations {
  color: #ffffff;
  box-shadow: 0 10px 22px rgba(31, 41, 55, 0.14);
}
.calendar-day.has-multiple-locations span {
  text-shadow: 0 1px 3px rgba(16, 24, 40, 0.55);
}
.calendar-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  padding: 0 28px 26px;
  color: #667085;
  font-size: 14px;
}
.calendar-legend span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
}
.legend-green { background: #12b76a; }
.legend-webinar { background: #dbeafe; border: 1px solid #bfdbfe; }
.legend-orange { background: #f97316; }
.legend-blue { background: #1f3f8b; }
.legend-grey { background: #98a2b3; }
.legend-split {
  background: linear-gradient(135deg, #dbeafe 0%, #dbeafe 49%, #ffffff 50%, #f97316 51%, #f97316 100%);
  border: 1px solid #d0d5dd;
}
.planning-create-form {
  padding: 0 28px 24px;
  display: grid;
  grid-template-columns: minmax(130px, 1fr) minmax(105px, .75fr) minmax(180px, 1.2fr) auto;
  gap: 12px;
  align-items: end;
}
.planning-create-form .form-field {
  margin: 0;
}
.planning-create-form .primary-action {
  height: 48px;
  white-space: nowrap;
}
.planning-table-wrap {
  border-top: 1px solid var(--border);
}
.planning-table {
  table-layout: fixed;
}
.planning-table th:nth-child(1),
.planning-table td:nth-child(1) { width: 26%; }
.planning-table th:nth-child(2),
.planning-table td:nth-child(2) { width: 18%; }
.planning-table th:nth-child(3),
.planning-table td:nth-child(3) { width: 56%; }
.trainer-cell {
  display: grid;
  gap: 4px;
  min-width: 0;
}
.trainer-cell strong,
.trainer-cell span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.trainer-cell span {
  color: #667085;
  font-size: 14px;
}
.standalone-empty {
  margin: 0 28px 24px;
}

@media(max-width:1280px){
  .planning-grid {
    grid-template-columns: 1fr;
  }
  .planning-create-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .planning-create-form .primary-action {
    grid-column: 1 / -1;
    width: 100%;
  }
}
@media(max-width:980px){
  .trainings-page .trainings-table-clean th:nth-child(1),
  .trainings-page .trainings-table-clean td:nth-child(1) { display: none; }
  .trainings-page .trainings-table-clean th:nth-child(2),
  .trainings-page .trainings-table-clean td:nth-child(2) { width: 38%; }
  .trainings-page .trainings-table-clean th:nth-child(3),
  .trainings-page .trainings-table-clean td:nth-child(3) { width: 20%; }
  .trainings-page .trainings-table-clean th:nth-child(4),
  .trainings-page .trainings-table-clean td:nth-child(4) { width: 18%; }
  .trainings-page .trainings-table-clean th:nth-child(5),
  .trainings-page .trainings-table-clean td:nth-child(5) { width: 24%; }
}
@media(max-width:760px){
  .row-action-group { justify-content: flex-start; }
  .row-action-group .settings-action { min-width: 0; width: 100%; }
  .page-title-row { gap: 14px; }
  .page-back-action { width: 100%; }
  .compact-card-header,
  .planning-controls,
  .calendar-toolbar,
  .month-calendar,
  .calendar-legend,
  .planning-create-form { padding-left: 18px; padding-right: 18px; }
  .month-calendar { gap: 6px; }
  .calendar-day { border-radius: 10px; font-size: 13px; }
  .planning-create-form { grid-template-columns: 1fr; }
  .planning-table,
  .planning-table thead,
  .planning-table tbody,
  .planning-table tr,
  .planning-table th,
  .planning-table td { display: block; width: 100% !important; }
  .planning-table thead { display: none; }
  .planning-table tbody { display: grid; gap: 12px; padding: 12px; }
  .planning-table tr { border: 1px solid var(--border); border-radius: 16px; background: #fff; overflow: hidden; }
  .planning-table td { height: auto; min-height: 0; padding: 14px 16px; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; gap: 16px; }
  .planning-table td:last-child { border-bottom: 0; }
  .planning-table td::before { content: attr(data-label); flex: 0 0 88px; color: #667085; font-size: 12px; font-weight: 900; text-transform: uppercase; }
}
@media(max-width:520px){
  .month-calendar { gap: 4px; }
  .calendar-day { border-radius: 8px; font-size: 12px; }
  .calendar-toolbar strong { font-size: 15px; }
}
@media(max-width:980px) and (min-width:761px){
  .trainings-page .trainings-table-clean th:nth-child(5),
  .trainings-page .trainings-table-clean td:nth-child(5) { display: table-cell; }
}

/* v31: planningpagina vriendelijker en stabiel responsive
   Kalender links compact (1/4), trainingsmomenten rechts ruim (3/4). */
.planning-page {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}
.planning-page .admin-card,
.planning-page .table-wrap {
  max-width: 100%;
  overflow: hidden;
}
.planning-grid {
  grid-template-columns: minmax(260px, 1fr) minmax(0, 3fr);
  gap: 24px;
  width: 100%;
  max-width: 100%;
}
.calendar-card {
  min-width: 0;
}
.sessions-card {
  min-width: 0;
}
.calendar-card .compact-card-header,
.calendar-card .planning-controls,
.calendar-card .calendar-toolbar,
.calendar-card .month-calendar,
.calendar-card .calendar-legend {
  padding-left: 20px;
  padding-right: 20px;
}
.calendar-card .admin-card-title h2,
.sessions-card .admin-card-title h2 {
  line-height: 1.1;
}
.calendar-card .card-icon,
.sessions-card .card-icon {
  flex: 0 0 auto;
}
.month-calendar {
  gap: 6px;
}
.calendar-day {
  border-radius: 10px;
  font-size: 13px;
}
.sessions-card .compact-card-header {
  padding-bottom: 10px;
}
.planning-create-form {
  margin: 0 28px 24px;
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: #f9fafb;
  display: grid;
  grid-template-columns: minmax(150px, .9fr) minmax(130px, .7fr) minmax(220px, 1.4fr) auto;
  gap: 14px;
  align-items: end;
  max-width: calc(100% - 56px);
  overflow: hidden;
}
.planning-create-form .form-field span {
  font-size: 13px;
  color: #344054;
  font-weight: 850;
}
.planning-create-form input,
.planning-create-form select {
  min-width: 0;
  height: 46px;
  font-size: 15px;
}
.planning-create-form .primary-action {
  min-width: 150px;
  max-width: 210px;
  height: 46px;
  padding-left: 16px;
  padding-right: 16px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.planning-table-wrap {
  overflow-x: hidden;
}
.planning-table {
  width: 100%;
  min-width: 0;
  table-layout: fixed;
}
.planning-table th,
.planning-table td {
  min-width: 0;
  overflow: hidden;
}
.planning-table th:nth-child(1),
.planning-table td:nth-child(1) { width: 24%; }
.planning-table th:nth-child(2),
.planning-table td:nth-child(2) { width: 16%; }
.planning-table th:nth-child(3),
.planning-table td:nth-child(3) { width: 60%; }

@media(max-width:1320px){
  .planning-grid {
    grid-template-columns: minmax(250px, .9fr) minmax(0, 2.1fr);
  }
  .planning-create-form {
    grid-template-columns: minmax(140px, .9fr) minmax(120px, .7fr) minmax(200px, 1.2fr);
  }
  .planning-create-form .primary-action {
    grid-column: 1 / -1;
    width: 100%;
    max-width: none;
  }
}

@media(max-width:1100px){
  .planning-grid {
    grid-template-columns: 1fr;
  }
  .calendar-card .compact-card-header,
  .calendar-card .planning-controls,
  .calendar-card .calendar-toolbar,
  .calendar-card .month-calendar,
  .calendar-card .calendar-legend {
    padding-left: 24px;
    padding-right: 24px;
  }
  .month-calendar {
    gap: 8px;
  }
  .calendar-day {
    border-radius: 14px;
    font-size: 14px;
  }
}

@media(max-width:820px){
  .planning-create-form {
    grid-template-columns: 1fr;
    margin-left: 18px;
    margin-right: 18px;
    max-width: calc(100% - 36px);
    padding: 18px;
  }
  .planning-create-form .primary-action {
    width: 100%;
  }
}

@media(max-width:760px){
  .planning-grid {
    gap: 16px;
  }
  .planning-page .admin-card {
    border-radius: 20px;
  }
  .calendar-card .compact-card-header,
  .calendar-card .planning-controls,
  .calendar-card .calendar-toolbar,
  .calendar-card .month-calendar,
  .calendar-card .calendar-legend,
  .sessions-card .compact-card-header {
    padding-left: 16px;
    padding-right: 16px;
  }
  .sessions-card .compact-card-header {
    padding-bottom: 12px;
  }
  .planning-create-form {
    margin: 0 16px 18px;
    max-width: calc(100% - 32px);
  }
  .planning-table-wrap {
    border-top: 1px solid var(--border);
  }
}

@media(max-width:520px){
  .calendar-card .admin-card-title,
  .sessions-card .admin-card-title {
    gap: 12px;
  }
  .calendar-card .card-icon,
  .sessions-card .card-icon {
    width: 48px;
    height: 48px;
    font-size: 20px;
  }
  .month-calendar {
    gap: 4px;
  }
  .calendar-day {
    border-radius: 8px;
    font-size: 12px;
  }
}


/* v32: planning in hoofdmenu + sidebar altijd tot onderkant zichtbaar */
.app-shell {
  background: linear-gradient(90deg, var(--sidebar) 0 276px, transparent 276px);
}
.sidebar {
  align-self: stretch;
  min-height: 100vh;
}
.app-main {
  background: var(--bg);
}
@media (max-width: 980px) {
  .app-shell {
    background: var(--bg);
  }
  .sidebar {
    min-height: 0;
  }
}

/* v33: trainingsmomenten — datum NL, locatie/training zichtbaar, acties via modals */
.planning-moments-table {
  table-layout: fixed;
}
.planning-moments-table th,
.planning-moments-table td {
  vertical-align: middle;
}
.planning-moments-table th:nth-child(1),
.planning-moments-table td:nth-child(1) { width: 12%; }
.planning-moments-table th:nth-child(2),
.planning-moments-table td:nth-child(2) { width: 9%; }
.planning-moments-table th:nth-child(3),
.planning-moments-table td:nth-child(3) { width: 23%; }
.planning-moments-table th:nth-child(4),
.planning-moments-table td:nth-child(4) { width: 14%; }
.planning-moments-table th:nth-child(5),
.planning-moments-table td:nth-child(5) { width: 27%; }
.planning-moments-table th:nth-child(6),
.planning-moments-table td:nth-child(6) { width: 15%; }
.moment-row-actions {
  justify-content: flex-end;
  flex-wrap: nowrap;
  gap: 8px;
}
.moment-row-actions .settings-action,
.moment-row-actions .danger-icon-action {
  min-width: 0;
  height: 40px;
  padding: 0 12px;
  white-space: nowrap;
}
.danger-icon-action,
.danger-action {
  border: 1px solid #f04438;
  background: #fff;
  color: #d92d20;
  border-radius: 10px;
  font-weight: 850;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.danger-icon-action:hover,
.danger-action:hover {
  background: #fff1f0;
}
.danger-action {
  height: 44px;
  padding: 0 18px;
  background: #d92d20;
  color: #fff;
  border-color: #d92d20;
}
.danger-action:hover {
  background: #b42318;
}
.delete-confirm-box {
  display: grid;
  gap: 6px;
  padding: 16px;
  border: 1px solid #fecdca;
  border-radius: 14px;
  background: #fff6f5;
  color: #344054;
}
.delete-confirm-box strong {
  color: #182230;
}
.delete-confirm-box span {
  color: #667085;
}
.modal-panel-danger .modal-header h2 {
  color: #b42318;
}

@media(max-width:1400px){
  .planning-moments-table th:nth-child(5),
  .planning-moments-table td:nth-child(5) { width: 24%; }
  .planning-moments-table th:nth-child(6),
  .planning-moments-table td:nth-child(6) { width: 18%; }
  .moment-row-actions .settings-action span:last-child,
  .moment-row-actions .danger-icon-action span:last-child { display: none; }
  .moment-row-actions .settings-action,
  .moment-row-actions .danger-icon-action { width: 42px; padding: 0; }
}

@media(max-width:980px){
  .planning-moments-table,
  .planning-moments-table thead,
  .planning-moments-table tbody,
  .planning-moments-table tr,
  .planning-moments-table th,
  .planning-moments-table td { display: block; width: 100% !important; }
  .planning-moments-table thead { display: none; }
  .planning-moments-table tbody { display: grid; gap: 12px; padding: 12px; }
  .planning-moments-table tr { border: 1px solid var(--border); border-radius: 16px; background: #fff; overflow: hidden; }
  .planning-moments-table td { height: auto; min-height: 0; padding: 14px 16px; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; gap: 16px; white-space: normal; }
  .planning-moments-table td:last-child { border-bottom: 0; }
  .planning-moments-table td::before { content: attr(data-label); flex: 0 0 88px; color: #667085; font-size: 12px; font-weight: 900; text-transform: uppercase; }
  .moment-row-actions { justify-content: flex-end; }
  .moment-row-actions .settings-action span:last-child,
  .moment-row-actions .danger-icon-action span:last-child { display: inline; }
  .moment-row-actions .settings-action,
  .moment-row-actions .danger-icon-action { width: auto; padding: 0 12px; }
}

@media(max-width:520px){
  .planning-moments-table td { align-items: flex-start; flex-direction: column; gap: 8px; }
  .planning-moments-table td::before { flex: 0 0 auto; }
  .moment-row-actions { width: 100%; justify-content: stretch; }
  .moment-row-actions .settings-action,
  .moment-row-actions .danger-icon-action { flex: 1; }
}

/* v36: planningkalender afgeleid van dezelfde trainingsmomenten + icon-only acties */
.moment-row-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  width: 100%;
}
.moment-row-actions .icon-only-action,
.moment-row-actions .danger-icon-action.icon-only-action {
  width: 44px;
  min-width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 14px;
  font-size: 18px;
  line-height: 1;
}
.moment-row-actions .icon-only-action span:not([aria-hidden="true"]),
.moment-row-actions .danger-icon-action span:not([aria-hidden="true"]) {
  display: none !important;
}
.moment-actions-col {
  text-align: right;
}
@media (max-width: 980px) {
  .moment-row-actions {
    width: auto;
    justify-content: flex-start;
  }
}

/* v38: planning kan alle trainingen tonen en blijft responsive met extra training-keuze */
.planning-create-form {
  grid-template-columns: minmax(180px, 1.25fr) minmax(145px, .85fr) minmax(120px, .75fr) minmax(220px, 1.35fr) auto;
}
.planning-create-form .primary-action {
  white-space: nowrap;
}
.planning-select-field select option[disabled] {
  color: #98a2b3;
}
@media (max-width: 1320px) {
  .planning-create-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .planning-create-form .primary-action {
    width: 100%;
  }
}
@media (max-width: 720px) {
  .planning-create-form {
    grid-template-columns: 1fr;
  }
}

/* v40: planningfilters links + planning toevoegen via modal */
.planning-controls {
  display: grid;
  gap: 16px;
}
.planning-card-action-row {
  display: flex;
  justify-content: flex-end;
  margin: 0 0 18px;
}
.planning-card-action-row .primary-action {
  min-width: 190px;
}
.planning-modal-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.planning-modal-form .modal-actions {
  grid-column: 1 / -1;
}
@media (max-width: 760px) {
  .planning-card-action-row {
    justify-content: stretch;
  }
  .planning-card-action-row .primary-action {
    width: 100%;
  }
  .planning-modal-form {
    grid-template-columns: 1fr;
  }
}

/* v44: trainingenpagina - ID kolom weg en actieknoppen icon-only */
.trainings-page .trainings-table-clean {
  table-layout: fixed;
  width: 100%;
}
.trainings-page .trainings-table-clean th:nth-child(1),
.trainings-page .trainings-table-clean td:nth-child(1) { width: 46%; }
.trainings-page .trainings-table-clean th:nth-child(2),
.trainings-page .trainings-table-clean td:nth-child(2) { width: 18%; }
.trainings-page .trainings-table-clean th:nth-child(3),
.trainings-page .trainings-table-clean td:nth-child(3) { width: 18%; }
.trainings-page .trainings-table-clean th:nth-child(4),
.trainings-page .trainings-table-clean td:nth-child(4) { width: 18%; }
.trainings-page .row-action-group {
  justify-content: flex-end;
  flex-wrap: nowrap;
}
.trainings-page .row-action-group .settings-action {
  width: 44px;
  min-width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 14px;
  font-size: 18px;
  gap: 0;
}
.trainings-page .row-action-group .settings-action span[aria-hidden="true"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

@media(max-width:980px){
  .trainings-page .trainings-table-clean th:nth-child(1),
  .trainings-page .trainings-table-clean td:nth-child(1) { width: 44%; }
  .trainings-page .trainings-table-clean th:nth-child(2),
  .trainings-page .trainings-table-clean td:nth-child(2),
  .trainings-page .trainings-table-clean th:nth-child(3),
  .trainings-page .trainings-table-clean td:nth-child(3),
  .trainings-page .trainings-table-clean th:nth-child(4),
  .trainings-page .trainings-table-clean td:nth-child(4) { width: auto; }
}

@media(max-width:760px){
  .trainings-page .row-action-group { justify-content: flex-start; }
  .trainings-page .row-action-group .settings-action { width: 44px; min-width: 44px; }
}

/* v48: planning UI cleanup + datumfilter */
.sessions-card {
  overflow: hidden;
}
.planning-moments-header {
  align-items: center;
  border-bottom: 1px solid var(--border);
  padding-bottom: 24px !important;
}
.planning-add-button {
  min-width: 210px;
  height: 48px;
  border-radius: 12px;
}
.planning-date-filter {
  padding: 22px 30px;
  border-bottom: 1px solid var(--border);
  background: #fbfcfe;
  display: grid;
  gap: 16px;
}
.date-filter-quick-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.filter-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 38px;
  padding: 0 14px;
  border: 1px solid #d0d5dd;
  border-radius: 999px;
  background: #fff;
  color: #344054;
  font-size: 13px;
  font-weight: 850;
  text-decoration: none;
  white-space: nowrap;
}
.filter-chip:hover {
  border-color: #9aa8c0;
  background: #f8fafc;
}
.filter-chip.is-active {
  background: #eaf2ff;
  color: #2454b8;
  border-color: #bcd3ff;
}
.date-filter-fields {
  display: grid;
  grid-template-columns: minmax(150px, .9fr) minmax(150px, 1fr) minmax(150px, 1fr) auto;
  gap: 12px;
  align-items: end;
}
.compact-field span {
  font-size: 12px;
  font-weight: 850;
  color: #344054;
}
.compact-field input,
.compact-field select {
  height: 42px;
  font-size: 14px;
  border-radius: 10px;
}
.date-filter-fields .secondary-action {
  height: 42px;
  padding: 0 16px;
  white-space: nowrap;
}
.sessions-card .planning-table-wrap {
  padding: 0;
  overflow: hidden;
  border-top: 0;
}
.sessions-card .planning-moments-table {
  border-left: 0;
  border-right: 0;
  border-bottom: 0;
  border-radius: 0;
}
.sessions-card .planning-moments-table th:first-child,
.sessions-card .planning-moments-table td:first-child {
  padding-left: 30px;
}
.sessions-card .planning-moments-table th:last-child,
.sessions-card .planning-moments-table td:last-child {
  padding-right: 30px;
}
.month-calendar a.calendar-day {
  text-decoration: none;
}
.month-calendar a.calendar-day:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 16px rgba(16,24,40,.10);
}
@media (max-width: 1180px) {
  .planning-moments-header {
    align-items: flex-start;
    flex-direction: column;
  }
  .planning-add-button {
    width: 100%;
  }
  .date-filter-fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .date-filter-fields .secondary-action {
    width: 100%;
  }
}
@media (max-width: 760px) {
  .planning-date-filter {
    padding: 18px 16px;
  }
  .date-filter-fields {
    grid-template-columns: 1fr;
  }
  .sessions-card .planning-moments-table th:first-child,
  .sessions-card .planning-moments-table td:first-child,
  .sessions-card .planning-moments-table th:last-child,
  .sessions-card .planning-moments-table td:last-child {
    padding-left: 16px;
    padding-right: 16px;
  }
  .sessions-card .planning-moments-table tbody {
    padding: 14px;
  }
}

/* v50: compacte datumrange-picker in één dropdown */
.date-filter-range-fields {
  grid-template-columns: minmax(160px, .7fr) minmax(260px, 1.3fr) auto;
  align-items: end;
}
.date-range-dropdown-field {
  position: relative;
  min-width: 0;
}
.date-range-trigger {
  width: 100%;
  height: 46px;
  border: 1px solid var(--border);
  background: #fff;
  color: #182230;
  border-radius: 14px;
  padding: 0 14px;
  font-size: 15px;
  font-weight: 750;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
}
.date-range-trigger:hover,
.date-range-trigger:focus {
  border-color: #98a2b3;
  box-shadow: 0 0 0 4px rgba(30, 64, 175, .08);
  outline: none;
}
.date-range-popover {
  position: absolute;
  z-index: 40;
  top: calc(100% + 10px);
  left: 0;
  width: min(360px, calc(100vw - 48px));
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: 0 24px 60px rgba(16, 24, 40, .16);
  padding: 16px;
}
.date-range-popover-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 4px;
}
.date-range-popover-header strong {
  font-size: 16px;
  color: #182230;
}
.small-close {
  width: 32px;
  height: 32px;
  font-size: 20px;
}
.date-range-help {
  margin: 0 0 12px;
  color: #667085;
  font-size: 13px;
  line-height: 1.35;
}
.date-range-calendar {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
}
.date-range-weekday {
  text-align: center;
  color: #667085;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  padding: 4px 0;
}
.date-range-day {
  height: 38px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: #f8fafc;
  color: #344054;
  font-weight: 850;
  cursor: pointer;
}
.date-range-day:not(.is-empty):hover {
  border-color: #2f4f9c;
  background: #eef4ff;
}
.date-range-day.is-empty {
  border-color: transparent;
  background: transparent;
  cursor: default;
}
.date-range-day.is-in-range {
  background: #dbeafe;
  border-color: #bfdbfe;
  color: #1e3a8a;
}
.date-range-day.is-start,
.date-range-day.is-end {
  background: #2f4f9c;
  border-color: #2f4f9c;
  color: #fff;
}
.date-range-selected {
  margin-top: 12px;
  color: #475467;
  font-size: 13px;
  font-weight: 750;
}
.date-range-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 14px;
}
.date-range-actions .secondary-action,
.date-range-actions .primary-action {
  min-height: 40px;
  padding: 0 14px;
}
@media (max-width: 980px) {
  .date-filter-range-fields {
    grid-template-columns: 1fr;
  }
  .date-range-popover {
    position: fixed;
    left: 16px;
    right: 16px;
    top: 96px;
    width: auto;
    max-height: calc(100vh - 128px);
    overflow: auto;
  }
  .date-filter-submit {
    width: 100%;
  }
}

/* v51: fix datumrange dropdown clipping op planningpagina */
.planning-page .admin-card,
.planning-page .planning-card,
.planning-page .sessions-card {
  overflow: visible;
}

.sessions-card {
  position: relative;
  z-index: 2;
}

.planning-date-filter {
  position: relative;
  z-index: 30;
}

.planning-table-wrap {
  position: relative;
  z-index: 1;
}

.date-range-dropdown-field {
  position: relative;
  z-index: 50;
}

.date-range-popover {
  z-index: 9999;
  max-height: min(520px, calc(100vh - 180px));
  overflow: auto;
}

/* Zorg dat de dropdown niet buiten rechts valt bij smallere desktopbreedtes */
@media (min-width: 981px) {
  .date-range-dropdown-field .date-range-popover {
    left: 0;
    right: auto;
  }
  .date-filter-range-fields {
    grid-template-columns: minmax(150px, 260px) minmax(280px, 1fr) auto;
  }
}

@media (max-width: 980px) {
  .planning-page .admin-card,
  .planning-page .planning-card,
  .planning-page .sessions-card {
    overflow: hidden;
  }
  .date-range-popover {
    position: fixed;
    left: 18px;
    right: 18px;
    top: 92px;
    width: auto;
    max-height: calc(100vh - 124px);
    overflow: auto;
    z-index: 10000;
  }
}

/* v52: datumfilter zonder losse filter-dropdown */
.date-filter-range-fields {
  grid-template-columns: minmax(280px, 1fr) auto;
  align-items: end;
}
.date-mode-field {
  display: none !important;
}
.date-mode-icon-group {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 10px 0 14px;
}
.date-mode-icon {
  height: 40px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: #f8fafc;
  color: #344054;
  font-size: 18px;
  font-weight: 950;
  cursor: pointer;
  transition: .15s ease;
}
.date-mode-icon:hover {
  border-color: #2f4f9c;
  background: #eef4ff;
}
.date-mode-icon.is-active {
  background: #2f4f9c;
  border-color: #2f4f9c;
  color: #fff;
}
.date-range-popover-header {
  margin-bottom: 8px;
}
@media (min-width: 981px) {
  .date-filter-range-fields {
    grid-template-columns: minmax(320px, 1fr) auto;
  }
}
@media (max-width: 980px) {
  .date-filter-range-fields {
    grid-template-columns: 1fr;
  }
}

/* v55: compactere datumfilter-popup + vriendelijkere datumweergave trainingsmomenten */
.date-range-popover {
  width: min(270px, calc(100vw - 32px));
  border-radius: 14px;
  padding: 11px;
  box-shadow: 0 18px 44px rgba(16, 24, 40, .14);
}
.date-range-popover-header {
  margin-bottom: 6px;
}
.date-range-popover-header strong {
  font-size: 14px;
}
.date-mode-icon-group {
  gap: 6px;
  margin: 7px 0 10px;
}
.date-mode-icon {
  height: 31px;
  border-radius: 10px;
  font-size: 15px;
}
.date-range-calendar {
  gap: 4px;
}
.date-range-weekday {
  font-size: 10px;
  padding: 2px 0;
}
.date-range-day {
  height: 29px;
  border-radius: 9px;
  font-size: 12px;
}
.date-range-selected {
  margin-top: 8px;
  font-size: 11px;
}
.date-range-actions {
  gap: 7px;
  margin-top: 9px;
}
.date-range-actions .secondary-action,
.date-range-actions .primary-action {
  min-height: 32px;
  padding: 0 10px;
  font-size: 12px;
  border-radius: 10px;
}
.small-close {
  width: 28px;
  height: 28px;
  font-size: 17px;
  border-radius: 10px;
}
.planning-date-cell {
  min-width: 96px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.15;
  white-space: normal;
}
.planning-date-cell strong {
  color: #182230;
  font-size: 12.5px;
  font-weight: 650;
  line-height: 1.15;
  white-space: nowrap;
}
.planning-date-cell span {
  color: #667085;
  font-size: 12px;
  font-weight: 650;
  line-height: 1.15;
}
.planning-moments-table td[data-label="Datum"] {
  width: 112px;
  min-width: 112px;
  white-space: normal;
}
@media (max-width: 980px) {
  .date-range-popover {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    width: min(270px, calc(100vw - 24px));
    max-height: calc(100vh - 108px);
  }
}


/* v57: balans in trainingsmomententabel - kleinere datum, training en trainer */
.planning-date-cell {
  min-width: 88px;
  gap: 1px;
}
.planning-date-cell strong {
  font-size: 12px;
  font-weight: 650;
  line-height: 1.12;
}
.planning-date-cell span {
  display: block;
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: #667085;
}
.planning-moments-table td[data-label="Datum"] {
  width: 104px;
  min-width: 104px;
}
.moment-training-name {
  display: block;
  font-size: 15px;
  font-weight: 750;
  line-height: 1.22;
  letter-spacing: -0.02em;
  color: #182230;
}
.trainer-cell strong {
  display: block;
  font-size: 15px;
  font-weight: 750;
  line-height: 1.22;
  letter-spacing: -0.02em;
  color: #182230;
  max-width: 210px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.trainer-cell span {
  display: block;
  margin-top: 3px;
  font-size: 12.5px;
  line-height: 1.25;
  color: #667085;
  max-width: 210px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.planning-moments-table td[data-label="Tijd"] {
  font-size: 15px;
}
@media (max-width: 1100px) {
  .moment-training-name,
  .trainer-cell strong { font-size: 14px; }
  .trainer-cell span { font-size: 12px; }
}

.muted-value { color: #64748b; font-size: 0.9rem; white-space: nowrap; }

/* Participants step 2 */
.participants-count-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 28px;
  padding: 0 8px;
  border-radius: 999px;
  background: #eef2ff;
  color: #1e3a8a;
  font-size: 12px;
  font-weight: 700;
}
.participants-icon-action { text-decoration: none; }
.participants-add-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: end;
  margin: 0 0 18px;
}
.muted-text { color: #6b7280; font-size: 12px; }
.participants-table form { margin: 0; }
@media (max-width: 760px) {
  .participants-add-form { grid-template-columns: 1fr; }
}

/* v64 - deelnemers capaciteit */
.participants-capacity-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 0 0 16px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: #f8fafc;
}
.participants-capacity-card span {
  display: block;
  color: #667085;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .02em;
  margin-bottom: 3px;
}
.participants-capacity-card strong {
  color: #101828;
  font-size: 18px;
  line-height: 1.1;
}
.participants-capacity-card em {
  color: #b42318;
  font-style: normal;
  font-size: 13px;
  font-weight: 700;
}
.participants-count-badge.participants-count-full {
  background: #fee4e2;
  color: #b42318;
}
@media (max-width: 720px) {
  .participants-capacity-card {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* v65 - klikbare deelnemerscounter en deelnemerspagina */
.participants-count-link {
  text-decoration: none;
  transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease;
}
.participants-count-link:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(30, 58, 138, .14);
  background: #e0e7ff;
}
.participants-table td[data-label="Bedrijf"] {
  color: #344054;
  font-size: 13px;
  font-weight: 600;
}


/* Deelnemers UX */
.participants-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 22px;
}

.participants-panel {
    border: 1px solid #e5e7eb;
    border-radius: 18px;
    background: #fff;
    overflow: hidden;
}

.participants-panel-header {
    padding: 18px 20px;
    border-bottom: 1px solid #e5e7eb;
}

.participants-panel-header h3 {
    margin: 0;
    font-size: 18px;
    color: #111827;
}

.participants-panel-header p {
    margin: 4px 0 0;
    color: #667085;
    font-size: 14px;
}

.participants-search {
    padding: 16px 20px 0;
}

.participants-search input {
    width: 100%;
    min-height: 48px;
    border: 1px solid #d0d5dd;
    border-radius: 14px;
    padding: 0 16px;
    font-size: 15px;
    background: #fff;
}

.participants-capacity-card {
    border-radius: 18px;
    margin: 18px 0;
}

.participants-capacity-card.capacity-ok {
    border-color: #bbf7d0;
    background: #f0fdf4;
}

.participants-capacity-card.capacity-warning {
    border-color: #fed7aa;
    background: #fff7ed;
}

.participants-capacity-card.capacity-full {
    border-color: #fecaca;
    background: #fef2f2;
}

.icon-action {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    border: 1px solid #d0d5dd;
    background: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-weight: 800;
    text-decoration: none;
    line-height: 1;
}

.icon-action.primary {
    color: #1d4ed8;
    border-color: #bfdbfe;
    background: #eff6ff;
}

.icon-action.danger {
    color: #dc2626;
    border-color: #fecaca;
    background: #fff;
}

.icon-action:disabled {
    opacity: .45;
    cursor: not-allowed;
}

.empty-state {
    color: #667085;
    text-align: center;
    padding: 26px !important;
}

@media (max-width: 900px) {
    .participants-card .compact-card-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
    }

    .participants-table thead {
        display: none;
    }

    .participants-table,
    .participants-table tbody,
    .participants-table tr,
    .participants-table td {
        display: block;
        width: 100%;
    }

    .participants-table tr {
        border-bottom: 1px solid #e5e7eb;
        padding: 14px 16px;
    }

    .participants-table td {
        padding: 6px 0 !important;
    }

    .participants-table td[data-label]::before {
        content: attr(data-label);
        display: block;
        color: #667085;
        font-size: 12px;
        font-weight: 700;
        text-transform: uppercase;
        margin-bottom: 3px;
    }

    .participants-table .moment-actions-col {
        text-align: left;
        padding-top: 12px !important;
    }
}


/* Participant page — product UI upgrade */
.participant-admin-page {
    width: 100%;
}

.participant-shell {
    display: grid;
    gap: 22px;
}

.participant-hero-card,
.participant-panel,
.participant-stat-card {
    background: #ffffff;
    border: 1px solid #e3e8ef;
    border-radius: 24px;
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.04);
}

.participant-hero-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 28px 32px;
}

.participant-hero-left {
    display: flex;
    align-items: center;
    gap: 18px;
    min-width: 0;
}

.participant-hero-icon {
    width: 56px;
    height: 56px;
    border-radius: 18px;
    display: grid;
    place-items: center;
    background: #f1f5f9;
    flex: 0 0 auto;
}

.participant-hero-card h2 {
    margin: 0;
    font-size: 26px;
    line-height: 1.15;
    color: #111827;
}

.participant-hero-card p {
    margin: 6px 0 0;
    color: #667085;
    font-size: 16px;
}

.participant-back-link {
    white-space: nowrap;
}

.participant-stats-grid {
    display: grid;
    grid-template-columns: 1.2fr .8fr .8fr;
    gap: 18px;
}

.participant-stat-card {
    padding: 20px 22px;
}

.participant-stat-card span {
    display: block;
    color: #667085;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-size: 12px;
    font-weight: 800;
}

.participant-stat-card strong {
    display: block;
    margin-top: 6px;
    font-size: 28px;
    line-height: 1;
    color: #111827;
}

.participant-stat-card small {
    display: block;
    margin-top: 8px;
    color: #667085;
    font-size: 13px;
}

.participant-stat-card.available {
    border-color: #bbf7d0;
    background: #f0fdf4;
}

.participant-stat-card.warning {
    border-color: #fed7aa;
    background: #fff7ed;
}

.participant-stat-card.full {
    border-color: #fecaca;
    background: #fef2f2;
}

.participant-capacity-bar {
    height: 8px;
    border-radius: 999px;
    background: rgba(15, 23, 42, .08);
    overflow: hidden;
    margin-top: 16px;
}

.participant-capacity-bar i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: #2f4f9f;
}

.participant-stat-card.available .participant-capacity-bar i {
    background: #16a34a;
}

.participant-stat-card.warning .participant-capacity-bar i {
    background: #f59e0b;
}

.participant-stat-card.full .participant-capacity-bar i {
    background: #dc2626;
}

.participant-content-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(360px, .9fr);
    gap: 22px;
    align-items: start;
}

.participant-panel {
    overflow: hidden;
}

.participant-panel-header {
    padding: 22px 24px;
    border-bottom: 1px solid #e3e8ef;
}

.participant-panel-header h3 {
    margin: 0;
    color: #111827;
    font-size: 20px;
    line-height: 1.2;
}

.participant-panel-header p {
    margin: 6px 0 0;
    color: #667085;
    font-size: 14px;
}

.participant-list,
.participant-add-list {
    display: grid;
    gap: 0;
}

.participant-row-card {
    display: grid;
    grid-template-columns: 52px minmax(180px, 1.4fr) minmax(140px, .8fr) minmax(90px, .45fr) 52px;
    gap: 16px;
    align-items: center;
    padding: 18px 24px;
    border-bottom: 1px solid #e3e8ef;
}

.participant-row-card:last-child {
    border-bottom: 0;
}

.participant-avatar {
    width: 48px;
    height: 48px;
    border-radius: 18px;
    display: grid;
    place-items: center;
    background: #eaf1ff;
    color: #2450a7;
    font-weight: 800;
    font-size: 14px;
}

.participant-avatar.small {
    width: 42px;
    height: 42px;
    border-radius: 15px;
    font-size: 13px;
}

.participant-main,
.participant-add-info {
    min-width: 0;
}

.participant-main strong,
.participant-add-info strong {
    display: block;
    color: #111827;
    font-size: 15px;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.participant-main span,
.participant-add-info span,
.participant-add-info small {
    display: block;
    color: #667085;
    font-size: 13px;
    line-height: 1.35;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.participant-meta label {
    display: block;
    font-size: 11px;
    color: #98a2b3;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: 4px;
}

.participant-meta span:not(.role-badge) {
    display: block;
    color: #344054;
    font-size: 14px;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.participant-icon-button {
    width: 46px;
    height: 46px;
    border-radius: 16px;
    border: 1px solid #d0d5dd;
    background: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-weight: 900;
    line-height: 1;
    text-decoration: none;
}

.participant-icon-button.primary {
    background: #eff6ff;
    border-color: #bfdbfe;
    color: #1d4ed8;
    font-size: 22px;
}

.participant-icon-button.danger {
    border-color: #fecaca;
    color: #dc2626;
}

.participant-icon-button:disabled {
    opacity: .45;
    cursor: not-allowed;
}

.participant-search-box {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 18px;
    padding: 0 14px;
    min-height: 50px;
    border: 1px solid #d0d5dd;
    border-radius: 16px;
    background: #fff;
}

.participant-search-box span {
    color: #667085;
    font-weight: 800;
}

.participant-search-box input {
    border: 0;
    outline: 0;
    flex: 1;
    min-width: 0;
    font-size: 15px;
    background: transparent;
}

.participant-add-card {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) 46px;
    gap: 12px;
    align-items: center;
    padding: 14px 18px;
    border-top: 1px solid #e3e8ef;
}

.participant-warning {
    margin: 0 18px 18px;
    padding: 14px 16px;
    border-radius: 16px;
    border: 1px solid #fed7aa;
    background: #fff7ed;
    color: #9a3412;
    font-size: 14px;
    font-weight: 700;
}

.participant-empty {
    display: grid;
    gap: 4px;
    padding: 36px 24px;
    text-align: center;
    color: #667085;
}

.participant-empty strong {
    color: #111827;
    font-size: 16px;
}

.participant-empty span {
    font-size: 14px;
}

.participant-empty.compact {
    padding: 26px 18px;
}

@media (max-width: 1180px) {
    .participant-content-grid {
        grid-template-columns: 1fr;
    }

    .participant-stats-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .participant-hero-card {
        flex-direction: column;
        align-items: flex-start;
        padding: 22px;
    }

    .participant-row-card {
        grid-template-columns: 48px minmax(0, 1fr) 46px;
        grid-template-areas:
            "avatar main action"
            "avatar company action"
            "avatar role action";
        gap: 8px 12px;
        padding: 16px 18px;
    }

    .participant-row-card .participant-avatar {
        grid-area: avatar;
    }

    .participant-row-card .participant-main {
        grid-area: main;
    }

    .participant-row-card .participant-meta {
        grid-area: company;
    }

    .participant-row-card .participant-role {
        grid-area: role;
    }

    .participant-row-card form {
        grid-area: action;
    }

    .participant-meta label {
        display: none;
    }
}


/* v74 deelnemers cleanup */
.participant-stats-grid {
    grid-template-columns: minmax(280px, 520px);
}

.participant-back-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0 20px;
    border-radius: 16px;
    border: 1px solid #d0d5dd;
    background: #ffffff;
    color: #1f2937;
    font-weight: 800;
    font-size: 15px;
    text-decoration: none;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    transition: background .15s ease, border-color .15s ease, transform .15s ease;
}

.participant-back-button:hover {
    background: #f8fafc;
    border-color: #98a2b3;
    transform: translateY(-1px);
}

@media (max-width: 760px) {
    .participant-stats-grid {
        grid-template-columns: 1fr;
    }

    .participant-back-button {
        width: 100%;
    }
}


/* v79 gebruiker aanmaken */
.users-toolbar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    flex-wrap: wrap;
}

.create-user-button {
    min-height: 46px;
    white-space: nowrap;
}

.modal-backdrop[hidden] {
    display: none !important;
}

.modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(15, 23, 42, 0.42);
    display: grid;
    place-items: center;
    padding: 24px;
}

.modal-card {
    width: min(560px, 100%);
    background: #ffffff;
    border-radius: 24px;
    border: 1px solid #e3e8ef;
    box-shadow: 0 24px 80px rgba(15, 23, 42, 0.22);
    overflow: hidden;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    padding: 24px 26px;
    border-bottom: 1px solid #e3e8ef;
}

.modal-header h3 {
    margin: 0;
    font-size: 22px;
    color: #111827;
}

.modal-header p {
    margin: 6px 0 0;
    color: #667085;
    font-size: 14px;
}

.modal-close {
    width: 42px;
    height: 42px;
    border: 1px solid #d0d5dd;
    border-radius: 14px;
    background: #fff;
    cursor: pointer;
    font-size: 24px;
    line-height: 1;
}

.modal-form {
    padding: 24px 26px 26px;
}

.form-grid.two {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 22px;
}

@media (max-width: 760px) {
    .users-toolbar {
        width: 100%;
        justify-content: stretch;
    }

    .users-toolbar .table-search,
    .users-toolbar .create-user-button {
        width: 100%;
    }

    .form-grid.two {
        grid-template-columns: 1fr;
    }

    .modal-actions {
        flex-direction: column-reverse;
    }

    .modal-actions .primary-action,
    .modal-actions .secondary-action {
        width: 100%;
    }
}


/* v84 readonly username field */
input[readonly] {
    background: #f8fafc;
    color: #475467;
    cursor: not-allowed;
}


/* Discount module */
.discount-form-grid {
    display: grid;
    gap: 20px;
}

.form-panel {
    border: 1px solid #e3e8ef;
    border-radius: 20px;
    padding: 22px;
    background: #fff;
}

.form-panel h3 {
    margin: 0 0 18px;
    font-size: 18px;
    color: #111827;
}

.code-input-row {
    display: flex;
    gap: 10px;
}

.code-input-row input {
    flex: 1;
    min-width: 0;
}

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

.usage-card {
    margin-top: 22px;
}

.icon-action {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    border: 1px solid #d0d5dd;
    background: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    text-decoration: none;
}

.icon-action.primary {
    background: #eff6ff;
    border-color: #bfdbfe;
}

.icon-action.danger {
    border-color: #fecaca;
    color: #dc2626;
}

@media (max-width: 760px) {
    .code-input-row,
    .form-actions {
        flex-direction: column;
    }

    .code-input-row .secondary-action,
    .form-actions .primary-action,
    .form-actions .secondary-action {
        width: 100%;
    }
}


/* Discount UI v4 */
.discount-stats-grid,
.discount-summary-strip {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin: 20px 0;
}

.discount-stat-card,
.discount-summary-strip > div {
    border: 1px solid #e3e8ef;
    border-radius: 20px;
    background: #ffffff;
    padding: 18px 20px;
}

.discount-stat-card span,
.discount-summary-strip span {
    display: block;
    color: #667085;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-size: 12px;
    font-weight: 800;
}

.discount-stat-card strong,
.discount-summary-strip strong {
    display: block;
    margin-top: 6px;
    font-size: 24px;
    line-height: 1;
    color: #111827;
}

.discount-form-grid {
    grid-template-columns: 1fr;
}

.discount-form .form-panel {
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.035);
}

.discount-form .form-field small {
    display: block;
    margin-top: 7px;
    color: #667085;
    font-size: 12px;
    line-height: 1.35;
}

.discount-form .form-panel h3 {
    padding-bottom: 10px;
    border-bottom: 1px solid #eef2f7;
}

.discount-page .card-header-actions {
    align-items: center;
}

.discount-page .primary-action,
.discount-form-page .primary-action,
.discount-form-page .secondary-action {
    white-space: nowrap;
}

@media (max-width: 900px) {
    .discount-stats-grid,
    .discount-summary-strip {
        grid-template-columns: 1fr;
    }

    .discount-page .card-header-actions {
        width: 100%;
    }

    .discount-page .card-header-actions .table-search,
    .discount-page .card-header-actions .primary-action {
        width: 100%;
    }
}


/* Discount v5 defaults/user select */
.discount-user-select-field {
    gap: 10px;
}

.discount-user-select-field input[type="search"] {
    margin-bottom: 10px;
}

.discount-user-select-field select {
    min-height: 48px;
}


/* Discount v6 combined user dropdown */
.discount-user-select-field select {
    width: 100%;
    margin-top: 8px;
    border-radius: 12px;
    border: 1px solid #d0d5dd;
    padding: 6px;
    background: #fff;
}

.discount-user-select-field input[type="text"] {
    width: 100%;
}


/* Discount v7 detail UI polish */
.discount-form-page .admin-card-header {
    align-items: center;
}

.discount-detail-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.discount-summary-strip {
    margin: 0 0 22px;
}

.discount-summary-strip > div {
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}

.discount-summary-strip strong {
    font-size: 22px;
}

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

.discount-form .form-panel {
    padding: 24px;
    border-radius: 22px;
}

.discount-form .form-panel h3 {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    font-size: 17px;
}

.discount-form .form-grid.two {
    gap: 16px;
}

.discount-form .form-field {
    gap: 7px;
}

.discount-form input,
.discount-form select {
    min-height: 46px;
}

.discount-form input:disabled {
    background: #f8fafc;
    color: #667085;
}

.code-input-row {
    align-items: stretch;
}

.code-input-row .secondary-action {
    min-height: 46px;
}

.discount-user-select-field select {
    max-height: 210px;
}

.discount-form-page .form-actions {
    position: sticky;
    bottom: 0;
    z-index: 10;
    margin: 22px -24px -24px;
    padding: 18px 24px;
    background: rgba(255, 255, 255, .92);
    backdrop-filter: blur(10px);
    border-top: 1px solid #e3e8ef;
    border-radius: 0 0 22px 22px;
}

.usage-card {
    border-radius: 24px;
}

@media (min-width: 1180px) {
    .discount-form-grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    .discount-form-grid .form-panel:nth-child(1),
    .discount-form-grid .form-panel:nth-child(4) {
        grid-column: span 1;
    }
}

@media (max-width: 760px) {
    .discount-detail-actions {
        width: 100%;
        justify-content: stretch;
    }

    .discount-detail-actions .secondary-action,
    .discount-detail-actions .state-badge {
        width: 100%;
        justify-content: center;
    }

    .discount-form-page .form-actions {
        position: static;
        margin: 22px 0 0;
        padding: 0;
        background: transparent;
        border-top: 0;
    }
}


/* Discount v8 user autocomplete */
.discount-user-autocomplete-field {
    position: relative;
}

.autocomplete-user {
    position: relative;
}

.autocomplete-input-wrap {
    display: flex;
    align-items: center;
    position: relative;
}

.autocomplete-input-wrap input {
    width: 100%;
    padding-right: 44px;
}

.autocomplete-clear {
    position: absolute;
    right: 8px;
    width: 34px;
    height: 34px;
    border: 1px solid #d0d5dd;
    border-radius: 12px;
    background: #fff;
    color: #667085;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}

.autocomplete-dropdown {
    position: absolute;
    left: 0;
    right: 0;
    z-index: 40;
    margin-top: 8px;
    max-height: 280px;
    overflow: auto;
    border: 1px solid #d0d5dd;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 20px 60px rgba(15, 23, 42, 0.14);
    padding: 8px;
}

.autocomplete-option {
    width: 100%;
    border: 0;
    background: transparent;
    text-align: left;
    border-radius: 14px;
    padding: 12px 14px;
    cursor: pointer;
    display: block;
}

.autocomplete-option:hover,
.autocomplete-option.is-active {
    background: #f1f5ff;
}

.autocomplete-option strong {
    display: block;
    color: #111827;
    font-size: 14px;
    line-height: 1.25;
}

.autocomplete-option span {
    display: block;
    margin-top: 3px;
    color: #667085;
    font-size: 12px;
    line-height: 1.25;
}

.autocomplete-option.is-default {
    border-bottom: 1px solid #eef2f7;
    margin-bottom: 6px;
    padding-bottom: 14px;
}

@media (max-width: 760px) {
    .autocomplete-dropdown {
        max-height: 240px;
    }
}


/* Discount v9 autocomplete fix */
.discount-user-autocomplete-field,
.autocomplete-user,
.form-panel {
    overflow: visible;
}

.autocomplete-dropdown[hidden] {
    display: none !important;
}

.autocomplete-dropdown {
    display: block;
}


/* Discount v10 secondary button polish */
.discount-form-page .secondary-action,
.discount-page .secondary-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 0 18px;
    border-radius: 14px;
    border: 1px solid #d0d5dd;
    background: #ffffff;
    color: #344054;
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
    text-decoration: none !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    transition: background .15s ease, border-color .15s ease, color .15s ease, transform .15s ease;
}

.discount-form-page .secondary-action:hover,
.discount-page .secondary-action:hover {
    background: #f8fafc;
    border-color: #98a2b3;
    color: #1f2937;
    transform: translateY(-1px);
}

.discount-detail-actions .secondary-action {
    min-width: 180px;
}

.discount-form-page .form-actions .secondary-action {
    min-width: 140px;
}

.discount-form-page .form-actions .primary-action {
    min-height: 52px;
    border-radius: 16px;
}

.discount-form-page .code-input-row .secondary-action {
    min-width: 110px;
    font-size: 14px;
}

@media (max-width: 760px) {
    .discount-detail-actions .secondary-action,
    .discount-form-page .form-actions .secondary-action,
    .discount-form-page .form-actions .primary-action {
        width: 100%;
    }
}


/* Fix primary button underline */
.primary-action,
.primary-action * {
    text-decoration: none !important;
}

.primary-action:hover,
.primary-action:focus {
    text-decoration: none !important;
}

.primary-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    letter-spacing: 0.01em;
}


/* Discount v12 stats alignment */
.discount-page .discount-stats-grid {
    padding: 0 32px;
    box-sizing: border-box;
    margin: 20px 0 28px;
}

.discount-page .discount-stat-card {
    min-width: 0;
}

.discount-page .table-wrap {
    margin-left: 32px;
    margin-right: 32px;
    width: auto;
}

@media (max-width: 900px) {
    .discount-page .discount-stats-grid {
        padding: 0 20px;
    }

    .discount-page .table-wrap {
        margin-left: 20px;
        margin-right: 20px;
    }
}

@media (max-width: 640px) {
    .discount-page .discount-stats-grid {
        padding: 0 16px;
    }

    .discount-page .table-wrap {
        margin-left: 16px;
        margin-right: 16px;
    }
}


/* Users table ID column final cleanup */
.users-page .id-col {
    display: none !important;
}


/* Users table width optimization after removing ID column */
.users-page .users-table {
    table-layout: fixed;
    width: 100%;
}

.users-page .users-table th:nth-child(1),
.users-page .users-table td:nth-child(1) {
    width: 38%;
}

.users-page .users-table th:nth-child(2),
.users-page .users-table td:nth-child(2) {
    width: 10%;
}

.users-page .users-table th:nth-child(3),
.users-page .users-table td:nth-child(3) {
    width: 12%;
}

.users-page .users-table th:nth-child(4),
.users-page .users-table td:nth-child(4) {
    width: 14%;
}

.users-page .users-table th:nth-child(5),
.users-page .users-table td:nth-child(5) {
    width: 15%;
}

.users-page .users-table th:nth-child(6),
.users-page .users-table td:nth-child(6) {
    width: 11%;
}

.users-page .user-cell {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    align-items: center;
    gap: 18px;
}

.users-page .user-info {
    min-width: 0;
}

.users-page .user-name,
.users-page .user-email {
    overflow-wrap: anywhere;
    word-break: normal;
}

.users-page .role-action {
    display: grid;
    grid-template-columns: minmax(110px, 1fr);
    gap: 10px;
    align-items: start;
}

.users-page .role-action .role-select,
.users-page .role-action .icon-save {
    width: 100%;
}

.users-page .account-action {
    justify-content: flex-start;
}

.users-page .date-cell {
    white-space: normal;
    line-height: 1.25;
}

@media (max-width: 1200px) {
    .users-page .users-table th:nth-child(1),
    .users-page .users-table td:nth-child(1) {
        width: 34%;
    }

    .users-page .users-table th:nth-child(4),
    .users-page .users-table td:nth-child(4) {
        width: 16%;
    }

    .users-page .users-table th:nth-child(5),
    .users-page .users-table td:nth-child(5) {
        width: 18%;
    }
}

@media (max-width: 900px) {
    .users-page .users-table {
        table-layout: auto;
    }

    .users-page .users-table th,
    .users-page .users-table td {
        width: auto !important;
    }
}


/* v18 sales role */
.role-sales {
    background: #eef2ff;
    color: #3730a3;
}

.avatar-sales {
    background: #eef2ff;
    color: #3730a3;
}


/* v19 user settings modal */
.users-page .settings-col {
    width: 96px;
    text-align: center;
}

.users-page .user-settings-button {
    width: 46px;
    height: 46px;
    margin: 0 auto;
}

.users-page .user-settings-button:disabled {
    opacity: .45;
    cursor: not-allowed;
}

.user-settings-modal .form-field input:disabled {
    background: #f8fafc;
    color: #667085;
}

@media (min-width: 901px) {
    .users-page .users-table th:nth-child(5),
    .users-page .users-table td:nth-child(5) {
        width: 9%;
        text-align: center;
    }
}


/* v20 invite user modal + discount follow-up */
.create-user-modal {
    max-width: 720px;
}

.create-user-modal .modal-header {
    padding: 28px 32px;
}

.create-user-modal .modal-header h3 {
    font-size: 26px;
}

.create-user-modal .modal-header p {
    max-width: 620px;
    font-size: 15px;
    line-height: 1.45;
}

.invite-user-form {
    padding: 26px 32px 30px;
}

.invite-user-note {
    display: grid;
    gap: 4px;
    padding: 16px 18px;
    border: 1px solid #dbeafe;
    border-radius: 18px;
    background: #eff6ff;
    color: #1e3a8a;
    margin-bottom: 22px;
}

.invite-user-note strong {
    font-size: 15px;
}

.invite-user-note span {
    color: #475569;
    font-size: 14px;
}

.invite-followup-option {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    margin-top: 22px;
    padding: 16px 18px;
    border: 1px solid #e3e8ef;
    border-radius: 18px;
    background: #f8fafc;
    cursor: pointer;
}

.invite-followup-option input {
    width: 20px;
    height: 20px;
    margin-top: 2px;
    accent-color: #2f4f9f;
}

.invite-followup-option span {
    display: grid;
    gap: 3px;
}

.invite-followup-option strong {
    color: #111827;
    font-size: 15px;
}

.invite-followup-option small {
    color: #667085;
    font-size: 13px;
    line-height: 1.35;
}

.create-user-modal .modal-actions {
    margin-top: 26px;
}

.create-user-modal .primary-action,
.create-user-modal .secondary-action {
    min-height: 50px;
    border-radius: 16px;
    text-decoration: none !important;
}

@media (max-width: 760px) {
    .create-user-modal .modal-header,
    .invite-user-form {
        padding-left: 22px;
        padding-right: 22px;
    }

    .invite-followup-option {
        align-items: flex-start;
    }
}


/* v22 discount description alignment */
.discount-form .form-field-full,
.discount-form .discount-description-field {
    display: grid;
    width: 100%;
}

.discount-form .form-panel > .form-field-full,
.discount-form .form-panel > .discount-description-field {
    margin-top: 16px;
}

.discount-form .discount-description-field span {
    margin-left: 0;
}


/* v23 personalisation field alignment */
.discount-user-autocomplete-field {
    grid-column: span 2;
    max-width: 100%;
}

.discount-user-autocomplete-field .autocomplete-input-wrap {
    width: 100%;
}

.discount-form .form-grid.two {
    align-items: start;
}

.discount-form .form-field {
    width: 100%;
}

.discount-form .discount-user-autocomplete-field input {
    width: 100%;
}

/* ensure same width as other fields */
.discount-form .discount-user-autocomplete-field {
    margin-bottom: 12px;
}



/* v26 discount table ui */
.discount-table td, .discount-table th{
    vertical-align: middle;
}

.discount-code-main{
    font-size:14px;
    font-weight:600;
    letter-spacing:0.04em;
}

.discount-code-meta{
    font-size:12px;
    color:#667085;
    margin-top:4px;
}

.discount-table{
    width:100%;
}

.discount-table td:nth-child(1){width:28%;}
.discount-table td:nth-child(2){width:14%;}
.discount-table td:nth-child(3){width:16%;}
.discount-table td:nth-child(4){width:10%;}
.discount-table td:nth-child(5){width:12%;}
.discount-table td:nth-child(6){width:20%;}

@media (max-width:900px){
    .discount-table thead{
        display:none;
    }
    .discount-table tr{
        display:block;
        margin-bottom:12px;
        border:1px solid #e5e7eb;
        border-radius:12px;
        padding:12px;
    }
    .discount-table td{
        display:flex;
        justify-content:space-between;
        padding:6px 0;
        width:100%!important;
    }
}


/* v27 discount table polish */
.discount-code-main {
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .06em;
    color: #111827;
}

.discount-code-description {
    margin-top: 3px;
    color: #667085;
    font-size: 12px;
    line-height: 1.3;
}

.discount-code-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 7px;
}

.discount-personal-badge {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 0 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
}

.discount-personal-badge.is-personal {
    background: #fff7ed;
    color: #c2410c;
}

.discount-personal-badge.is-general {
    background: #eef2ff;
    color: #3730a3;
}

.discount-email-line {
    color: #667085;
    font-size: 12px;
    overflow-wrap: anywhere;
}

.discount-value-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 0 12px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 800;
    line-height: 1;
}

.discount-value-badge.is-percentage {
    background: #ecfdf3;
    color: #15803d;
}

.discount-value-badge.is-fixed {
    background: #eff6ff;
    color: #1d4ed8;
}

.discount-type-label {
    display: block;
    margin-top: 5px;
    color: #98a2b3;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.discount-date {
    font-size: 14px;
    font-weight: 700;
    color: #344054;
}

.discount-page .users-table tbody tr {
    transition: background .15s ease, transform .15s ease;
}

.discount-page .users-table tbody tr:hover {
    background: #f8fafc;
}

@media (max-width: 900px) {
    .discount-code-meta {
        justify-content: flex-end;
        text-align: right;
    }

    .discount-type-label {
        text-align: right;
    }
}


/* v31 user settings complete */
.modal-backdrop[hidden] {
    display: none !important;
}

.modal-backdrop.is-open {
    display: flex !important;
}

.users-page .settings-actions {
    display: inline-flex;
    gap: 8px;
    align-items: center;
    justify-content: center;
}

.users-page .user-rights-button,
.users-page .user-profile-button {
    width: 44px;
    height: 44px;
}

.user-profile-modal {
    max-width: 820px;
}

.user-profile-modal .modal-form {
    max-height: 70vh;
    overflow: auto;
}

.user-profile-modal .form-field small {
    display: block;
    margin-top: 6px;
    color: #667085;
    font-size: 12px;
}

.user-profile-modal input:disabled,
.user-rights-modal input:disabled {
    background: #f8fafc;
    color: #667085;
}

@media (max-width: 760px) {
    .users-page .settings-actions {
        justify-content: flex-start;
    }

    .user-profile-modal .modal-form {
        max-height: none;
    }
}


/* v32 profile popup fix */
.modal-backdrop[hidden] {
    display: none !important;
}

.modal-backdrop.is-open {
    display: flex !important;
}

.user-profile-modal {
    max-width: 820px;
}

.user-profile-modal .modal-form {
    max-height: 70vh;
    overflow: auto;
}


/* v33 users phone column */
.users-page .phone-cell {
    color: #344054;
    font-size: 14px;
    white-space: nowrap;
}

.users-page .phone-cell .muted-text {
    color: #98a2b3;
    font-size: 13px;
}

@media (min-width: 901px) {
    .users-page .users-table th:nth-child(1),
    .users-page .users-table td:nth-child(1) {
        width: 30%;
    }

    .users-page .users-table th:nth-child(2),
    .users-page .users-table td:nth-child(2) {
        width: 13%;
    }

    .users-page .users-table th:nth-child(3),
    .users-page .users-table td:nth-child(3) {
        width: 9%;
    }

    .users-page .users-table th:nth-child(4),
    .users-page .users-table td:nth-child(4) {
        width: 11%;
    }

    .users-page .users-table th:nth-child(5),
    .users-page .users-table td:nth-child(5) {
        width: 14%;
    }

    .users-page .users-table th:nth-child(6),
    .users-page .users-table td:nth-child(6) {
        width: 11%;
    }

    .users-page .users-table th:nth-child(7),
    .users-page .users-table td:nth-child(7) {
        width: 12%;
    }
}

@media (max-width: 900px) {
    .users-page .phone-cell {
        white-space: normal;
    }
}


/* v34 responsive improvements */

/* Tablet */
@media (max-width: 1024px) {
    .page-container {
        padding: 16px;
    }

    .users-page .users-table th,
    .users-page .users-table td {
        font-size: 13px;
        padding: 10px 8px;
    }

    .users-page .settings-actions {
        gap: 6px;
    }

    .icon-action {
        width: 38px;
        height: 38px;
    }
}

/* Mobile */
@media (max-width: 768px) {

    .users-page .users-table {
        display: block;
    }

    .users-page .users-table thead {
        display: none;
    }

    .users-page .users-table tbody {
        display: block;
    }

    .users-page .users-table tr {
        display: block;
        background: #fff;
        border: 1px solid #e4e7ec;
        border-radius: 10px;
        padding: 12px;
        margin-bottom: 12px;
    }

    .users-page .users-table td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        border: none;
        padding: 6px 0;
        font-size: 14px;
    }

    .users-page .users-table td::before {
        content: attr(data-label);
        font-weight: 600;
        color: #667085;
        margin-right: 10px;
    }

    .users-page .settings-actions {
        justify-content: flex-end;
    }

    .user-profile-modal {
        width: 95%;
        max-width: none;
    }

    .modal-card {
        width: 95%;
        border-radius: 12px;
    }

    .modal-form {
        max-height: 80vh;
        overflow-y: auto;
    }

    .form-grid.two {
        grid-template-columns: 1fr;
    }

    .primary-action,
    .secondary-action {
        width: 100%;
    }
}

/* Small mobile */
@media (max-width: 480px) {

    .users-page .users-table td {
        font-size: 13px;
    }

    .icon-action {
        width: 34px;
        height: 34px;
    }

    .modal-card {
        padding: 12px;
    }
}


/* v35 iPad table fix */

/* RESET mobile table behavior for tablets */
@media (min-width: 769px) and (max-width: 1100px) {

    .users-page .users-table {
        display: table !important;
        width: 100%;
        table-layout: fixed;
    }

    .users-page .users-table thead {
        display: table-header-group !important;
    }

    .users-page .users-table tbody {
        display: table-row-group !important;
    }

    .users-page .users-table tr {
        display: table-row !important;
    }

    .users-page .users-table td,
    .users-page .users-table th {
        display: table-cell !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 13px;
        padding: 10px;
    }

    /* FIX kolombreedtes */
    .users-page .users-table th:nth-child(1),
    .users-page .users-table td:nth-child(1) {
        width: 28%;
    }

    .users-page .users-table th:nth-child(2),
    .users-page .users-table td:nth-child(2) {
        width: 14%;
    }

    .users-page .users-table th:nth-child(3),
    .users-page .users-table td:nth-child(3) {
        width: 10%;
    }

    .users-page .users-table th:nth-child(4),
    .users-page .users-table td:nth-child(4) {
        width: 12%;
    }

    .users-page .users-table th:nth-child(5),
    .users-page .users-table td:nth-child(5) {
        width: 14%;
    }

    .users-page .users-table th:nth-child(6),
    .users-page .users-table td:nth-child(6) {
        width: 10%;
    }

    .users-page .users-table th:nth-child(7),
    .users-page .users-table td:nth-child(7) {
        width: 12%;
    }

    /* horizontale scroll */
    .users-page .table-wrapper {
        overflow-x: auto;
    }
}

/* voorkom verticale tekst */
.users-page .users-table th,
.users-page .users-table td {
    word-break: normal !important;
    writing-mode: horizontal-tb !important;
}


/* v36 iPad users table: scalable scroll layout */
@media (min-width: 769px) and (max-width: 1180px) {

    .users-page .table-wrap {
        overflow-x: auto !important;
        overflow-y: visible;
        -webkit-overflow-scrolling: touch;
    }

    .users-page .users-table {
        display: table !important;
        table-layout: fixed !important;
        width: 1180px !important;
        min-width: 1180px !important;
        max-width: none !important;
    }

    .users-page .users-table thead {
        display: table-header-group !important;
    }

    .users-page .users-table tbody {
        display: table-row-group !important;
    }

    .users-page .users-table tr {
        display: table-row !important;
        padding: 0 !important;
        margin: 0 !important;
        border-radius: 0 !important;
    }

    .users-page .users-table th,
    .users-page .users-table td {
        display: table-cell !important;
        padding: 14px 16px !important;
        vertical-align: middle !important;
        white-space: normal !important;
        word-break: normal !important;
        overflow-wrap: normal !important;
        writing-mode: horizontal-tb !important;
        font-size: 14px !important;
    }

    .users-page .users-table td::before {
        content: none !important;
    }

    .users-page .users-table th:nth-child(1),
    .users-page .users-table td:nth-child(1) {
        width: 300px !important;
    }

    .users-page .users-table th:nth-child(2),
    .users-page .users-table td:nth-child(2) {
        width: 150px !important;
    }

    .users-page .users-table th:nth-child(3),
    .users-page .users-table td:nth-child(3) {
        width: 120px !important;
    }

    .users-page .users-table th:nth-child(4),
    .users-page .users-table td:nth-child(4) {
        width: 130px !important;
    }

    .users-page .users-table th:nth-child(5),
    .users-page .users-table td:nth-child(5) {
        width: 160px !important;
    }

    .users-page .users-table th:nth-child(6),
    .users-page .users-table td:nth-child(6) {
        width: 130px !important;
        text-align: center;
    }

    .users-page .users-table th:nth-child(7),
    .users-page .users-table td:nth-child(7) {
        width: 190px !important;
    }

    .users-page .user-cell {
        display: grid !important;
        grid-template-columns: 52px minmax(0, 1fr) !important;
        gap: 14px !important;
        align-items: center !important;
    }

    .users-page .user-info {
        min-width: 0 !important;
    }

    .users-page .user-name,
    .users-page .user-email {
        white-space: normal !important;
        overflow-wrap: anywhere !important;
        line-height: 1.25 !important;
    }

    .users-page .phone-cell {
        white-space: nowrap !important;
    }

    .users-page .settings-actions {
        display: inline-flex !important;
        justify-content: center !important;
        gap: 8px !important;
        flex-wrap: nowrap !important;
    }

    .users-page .account-button {
        white-space: nowrap !important;
    }
}

/* iPhone only: card layout remains */
@media (max-width: 768px) {
    .users-page .users-table {
        width: 100% !important;
        min-width: 0 !important;
    }
}


/* v37 trainingen iPad layout fix */
@media (min-width: 769px) and (max-width: 1180px) {

    .trainings-page .training-card-header,
    .trainings-page .admin-card-header {
        display: grid !important;
        grid-template-columns: minmax(260px, 1fr) minmax(360px, 520px) !important;
        align-items: center !important;
        gap: 20px !important;
    }

    .trainings-page .card-header-actions {
        display: grid !important;
        grid-template-columns: minmax(220px, 1fr) auto !important;
        gap: 12px !important;
        align-items: center !important;
        width: 100% !important;
    }

    .trainings-page .table-search {
        height: 48px !important;
        min-height: 48px !important;
        max-height: 48px !important;
        padding: 0 14px !important;
        display: flex !important;
        align-items: center !important;
    }

    .trainings-page .table-search input {
        height: 46px !important;
        min-height: 46px !important;
        line-height: 46px !important;
        padding: 0 8px !important;
        font-size: 14px !important;
    }

    .trainings-page .add-training-button {
        min-height: 48px !important;
        height: 48px !important;
        padding: 0 18px !important;
        white-space: nowrap !important;
        font-size: 14px !important;
    }

    .trainings-page .table-wrap {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    .trainings-page .trainings-table {
        display: table !important;
        table-layout: fixed !important;
        width: 900px !important;
        min-width: 900px !important;
        max-width: none !important;
    }

    .trainings-page .trainings-table thead {
        display: table-header-group !important;
    }

    .trainings-page .trainings-table tbody {
        display: table-row-group !important;
    }

    .trainings-page .trainings-table tr {
        display: table-row !important;
        padding: 0 !important;
        margin: 0 !important;
        border-radius: 0 !important;
    }

    .trainings-page .trainings-table th,
    .trainings-page .trainings-table td {
        display: table-cell !important;
        padding: 14px 16px !important;
        vertical-align: middle !important;
        white-space: normal !important;
        word-break: normal !important;
        overflow-wrap: normal !important;
        writing-mode: horizontal-tb !important;
        font-size: 14px !important;
    }

    .trainings-page .trainings-table td::before {
        content: none !important;
    }

    .trainings-page .trainings-table th:nth-child(1),
    .trainings-page .trainings-table td:nth-child(1) {
        width: 310px !important;
    }

    .trainings-page .trainings-table th:nth-child(2),
    .trainings-page .trainings-table td:nth-child(2) {
        width: 150px !important;
    }

    .trainings-page .trainings-table th:nth-child(3),
    .trainings-page .trainings-table td:nth-child(3) {
        width: 140px !important;
    }

    .trainings-page .trainings-table th:nth-child(4),
    .trainings-page .trainings-table td:nth-child(4) {
        width: 130px !important;
    }

    .trainings-page .trainings-table th:nth-child(5),
    .trainings-page .trainings-table td:nth-child(5) {
        width: 170px !important;
        text-align: center;
    }

    .trainings-page .row-action-group {
        display: inline-flex !important;
        gap: 8px !important;
        justify-content: center !important;
        flex-wrap: nowrap !important;
    }

    .trainings-page .user-cell {
        display: grid !important;
        grid-template-columns: 52px minmax(0, 1fr) !important;
        gap: 14px !important;
        align-items: center !important;
    }

    .trainings-page .user-name {
        white-space: normal !important;
        overflow-wrap: anywhere !important;
        line-height: 1.25 !important;
    }
}

@media (max-width: 768px) {
    .trainings-page .training-card-header,
    .trainings-page .admin-card-header,
    .trainings-page .card-header-actions {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }

    .trainings-page .table-search {
        min-height: 46px !important;
        height: 46px !important;
    }

    .trainings-page .table-search input {
        height: 44px !important;
        line-height: 44px !important;
    }
}


/* v38 kortingscodes iPad layout fix */
@media (min-width: 769px) and (max-width: 1180px) {

    .discount-page .admin-card-header {
        display: grid !important;
        grid-template-columns: minmax(260px, 1fr) minmax(390px, 560px) !important;
        align-items: center !important;
        gap: 20px !important;
    }

    .discount-page .card-header-actions {
        display: grid !important;
        grid-template-columns: minmax(220px, 1fr) auto !important;
        gap: 12px !important;
        align-items: center !important;
        width: 100% !important;
    }

    .discount-page .table-search {
        height: 48px !important;
        min-height: 48px !important;
        max-height: 48px !important;
        padding: 0 14px !important;
        display: flex !important;
        align-items: center !important;
    }

    .discount-page .table-search input {
        height: 46px !important;
        min-height: 46px !important;
        line-height: 46px !important;
        padding: 0 8px !important;
        font-size: 14px !important;
    }

    .discount-page .primary-action {
        min-height: 48px !important;
        height: 48px !important;
        padding: 0 18px !important;
        white-space: nowrap !important;
        font-size: 14px !important;
    }

    .discount-page .discount-stats-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 14px !important;
        padding: 0 32px !important;
    }

    .discount-page .table-wrap {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        margin-left: 32px !important;
        margin-right: 32px !important;
        width: auto !important;
    }

    .discount-page .users-table {
        display: table !important;
        table-layout: fixed !important;
        width: 1040px !important;
        min-width: 1040px !important;
        max-width: none !important;
    }

    .discount-page .users-table thead {
        display: table-header-group !important;
    }

    .discount-page .users-table tbody {
        display: table-row-group !important;
    }

    .discount-page .users-table tr {
        display: table-row !important;
        padding: 0 !important;
        margin: 0 !important;
        border-radius: 0 !important;
    }

    .discount-page .users-table th,
    .discount-page .users-table td {
        display: table-cell !important;
        padding: 14px 16px !important;
        vertical-align: middle !important;
        white-space: normal !important;
        word-break: normal !important;
        overflow-wrap: normal !important;
        writing-mode: horizontal-tb !important;
        font-size: 14px !important;
    }

    .discount-page .users-table td::before {
        content: none !important;
    }

    .discount-page .users-table th:nth-child(1),
    .discount-page .users-table td:nth-child(1) {
        width: 260px !important;
    }

    .discount-page .users-table th:nth-child(2),
    .discount-page .users-table td:nth-child(2) {
        width: 140px !important;
    }

    .discount-page .users-table th:nth-child(3),
    .discount-page .users-table td:nth-child(3) {
        width: 150px !important;
    }

    .discount-page .users-table th:nth-child(4),
    .discount-page .users-table td:nth-child(4) {
        width: 110px !important;
    }

    .discount-page .users-table th:nth-child(5),
    .discount-page .users-table td:nth-child(5) {
        width: 140px !important;
    }

    .discount-page .users-table th:nth-child(6),
    .discount-page .users-table td:nth-child(6) {
        width: 240px !important;
        text-align: center;
    }

    .discount-page .account-col,
    .discount-page .inline-action,
    .discount-page .account-action {
        display: inline-flex !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 10px !important;
        flex-wrap: nowrap !important;
    }

    .discount-page .discount-code-main,
    .discount-page .discount-email-line,
    .discount-page .discount-code-description {
        white-space: normal !important;
        overflow-wrap: anywhere !important;
        line-height: 1.25 !important;
    }
}

@media (max-width: 768px) {
    .discount-page .admin-card-header,
    .discount-page .card-header-actions {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }

    .discount-page .table-search {
        min-height: 46px !important;
        height: 46px !important;
    }

    .discount-page .table-search input {
        height: 44px !important;
        line-height: 44px !important;
    }

    .discount-page .discount-stats-grid {
        grid-template-columns: 1fr !important;
        padding: 0 16px !important;
    }
}


/* v39 collapsible sidebar */
.sidebar-toggle {
    width: 44px;
    height: 44px;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 14px;
    background: rgba(255,255,255,.10);
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    margin: 6px 0 18px;
    font-size: 20px;
    transition: background .15s ease, transform .15s ease;
}

.sidebar-toggle:hover {
    background: rgba(255,255,255,.18);
    transform: translateY(-1px);
}

.app-shell {
    transition: grid-template-columns .18s ease;
}

.sidebar {
    transition: width .18s ease, padding .18s ease;
}

.sidebar-link,
.sidebar-brand-link {
    transition: padding .18s ease, gap .18s ease;
}

.sidebar-link .nav-icon {
    flex: 0 0 28px;
    text-align: center;
}

/* Desktop compact mode */
body.sidebar-collapsed .app-shell {
    grid-template-columns: 92px minmax(0, 1fr);
}

body.sidebar-collapsed .sidebar {
    width: 92px;
    padding-left: 16px;
    padding-right: 16px;
}

body.sidebar-collapsed .sidebar-brand-link {
    justify-content: center;
}

body.sidebar-collapsed .sidebar-brand-link > div:not(.sidebar-logo) {
    display: none;
}

body.sidebar-collapsed .sidebar-logo {
    margin: 0;
}

body.sidebar-collapsed .sidebar-toggle {
    margin-left: auto;
    margin-right: auto;
}

body.sidebar-collapsed .sidebar-link {
    justify-content: center;
    padding-left: 0;
    padding-right: 0;
    gap: 0;
    font-size: 0;
}

body.sidebar-collapsed .sidebar-link .nav-icon {
    font-size: 20px;
    margin: 0;
}

/* iPad / smaller screens: collapsed is especially useful */
@media (max-width: 1180px) {
    .sidebar-toggle {
        display: inline-flex;
    }

    body.sidebar-collapsed .app-shell {
        grid-template-columns: 76px minmax(0, 1fr);
    }

    body.sidebar-collapsed .sidebar {
        width: 76px;
        padding-left: 10px;
        padding-right: 10px;
    }

    body.sidebar-collapsed .sidebar-link .nav-icon {
        font-size: 20px;
    }

    body.sidebar-collapsed .content,
    body.sidebar-collapsed .app-topbar,
    body.sidebar-collapsed .app-footer {
        max-width: 100%;
    }
}

/* iPhone: keep a slim icon rail when collapsed */
@media (max-width: 768px) {
    body.sidebar-collapsed .app-shell {
        grid-template-columns: 64px minmax(0, 1fr);
    }

    body.sidebar-collapsed .sidebar {
        width: 64px;
        padding-left: 8px;
        padding-right: 8px;
    }

    body.sidebar-collapsed .sidebar-toggle {
        width: 40px;
        height: 40px;
        border-radius: 12px;
    }

    body.sidebar-collapsed .sidebar-link {
        min-height: 44px;
        border-radius: 14px;
    }

    body.sidebar-collapsed .sidebar-link .nav-icon {
        font-size: 19px;
    }
}


/* v40 training prices */
.trainings-page .price-action {
    font-weight: 900;
}

.training-price-panel {
    width: min(1180px, calc(100vw - 36px));
    max-width: 1180px;
}

.price-history h3,
.price-create-form h3 {
    margin: 0 0 14px;
    font-size: 17px;
    color: #111827;
}

.price-history {
    padding: 0 0 20px;
}

.price-empty {
    border: 1px solid #e3e8ef;
    border-radius: 16px;
    background: #f8fafc;
    padding: 18px;
}

.price-list {
    display: grid;
    gap: 12px;
}

.price-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: end;
    border: 1px solid #e3e8ef;
    border-radius: 18px;
    padding: 14px;
    background: #fff;
}

.price-row-form {
    display: grid;
    grid-template-columns: 190px 130px 140px 140px minmax(160px, 1fr) auto;
    gap: 10px;
    align-items: end;
}

.price-row-form .form-field.compact span {
    font-size: 12px;
}

.price-row-form .form-field.compact input,
.price-row-form .form-field.compact select {
    min-height: 42px;
}

.price-save-action,
.price-delete-action {
    min-height: 42px;
    padding: 0 14px;
    border-radius: 12px;
    white-space: nowrap;
}

.price-delete-action.danger {
    border-color: #fecaca;
    color: #b91c1c;
    background: #fff5f5;
}

.price-create-form {
    border-top: 1px solid #e3e8ef;
    padding-top: 20px;
}

.price-create-grid {
    display: grid;
    grid-template-columns: 1.2fr .8fr .8fr .8fr;
    gap: 14px;
}

.price-management-note {
    margin-top: 14px;
    padding: 12px 14px;
    border-radius: 14px;
    background: #f8fafc;
    color: #475467;
    font-size: 13px;
}

@media (min-width: 769px) and (max-width: 1180px) {
    .trainings-page .trainings-table {
        width: 980px !important;
        min-width: 980px !important;
    }

    .trainings-page .trainings-table th:nth-child(5),
    .trainings-page .trainings-table td:nth-child(5) {
        width: 230px !important;
    }

    .trainings-page .row-action-group {
        gap: 8px !important;
    }

    .training-price-panel {
        width: min(1060px, calc(100vw - 28px));
    }

    .price-row-form {
        grid-template-columns: 1fr 120px 130px 130px;
    }

    .price-note-field {
        grid-column: span 3;
    }

    .price-create-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 768px) {
    .training-price-panel {
        width: calc(100vw - 24px);
    }

    .price-row {
        grid-template-columns: 1fr;
    }

    .price-row-form,
    .price-create-grid {
        grid-template-columns: 1fr;
    }

    .price-delete-form,
    .price-delete-action,
    .price-save-action {
        width: 100%;
    }
}


/* v44 training live column UI fix */
.trainings-page .publish-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 38px;
    min-width: 76px;
    padding: 0 13px;
    border: 0;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    white-space: nowrap;
}

.trainings-page .publish-toggle.is-live {
    background: #eaf7ee;
    color: #2f7d44;
}

.trainings-page .publish-toggle.is-offline {
    background: #f2f4f7;
    color: #667085;
}

.trainings-page .publish-toggle .state-dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: currentColor;
}

/* desktop table after Live column */
@media (min-width: 1181px) {
    .trainings-page .trainings-table {
        table-layout: fixed;
        width: 100%;
    }

    .trainings-page .trainings-table th:nth-child(1),
    .trainings-page .trainings-table td:nth-child(1) {
        width: 30%;
    }

    .trainings-page .trainings-table th:nth-child(2),
    .trainings-page .trainings-table td:nth-child(2) {
        width: 14%;
    }

    .trainings-page .trainings-table th:nth-child(3),
    .trainings-page .trainings-table td:nth-child(3) {
        width: 14%;
    }

    .trainings-page .trainings-table th:nth-child(4),
    .trainings-page .trainings-table td:nth-child(4) {
        width: 13%;
    }

    .trainings-page .trainings-table th:nth-child(5),
    .trainings-page .trainings-table td:nth-child(5) {
        width: 11%;
        text-align: center;
    }

    .trainings-page .trainings-table th:nth-child(6),
    .trainings-page .trainings-table td:nth-child(6) {
        width: 18%;
        text-align: right;
    }

    .trainings-page .row-action-group {
        display: inline-flex;
        justify-content: flex-end;
        gap: 8px;
        flex-wrap: nowrap;
    }
}

/* iPad table after Live column */
@media (min-width: 769px) and (max-width: 1180px) {
    .trainings-page .trainings-table {
        width: 1080px !important;
        min-width: 1080px !important;
    }

    .trainings-page .trainings-table th:nth-child(1),
    .trainings-page .trainings-table td:nth-child(1) {
        width: 300px !important;
    }

    .trainings-page .trainings-table th:nth-child(2),
    .trainings-page .trainings-table td:nth-child(2) {
        width: 135px !important;
    }

    .trainings-page .trainings-table th:nth-child(3),
    .trainings-page .trainings-table td:nth-child(3) {
        width: 135px !important;
    }

    .trainings-page .trainings-table th:nth-child(4),
    .trainings-page .trainings-table td:nth-child(4) {
        width: 130px !important;
    }

    .trainings-page .trainings-table th:nth-child(5),
    .trainings-page .trainings-table td:nth-child(5) {
        width: 115px !important;
        text-align: center !important;
    }

    .trainings-page .trainings-table th:nth-child(6),
    .trainings-page .trainings-table td:nth-child(6) {
        width: 265px !important;
        text-align: right !important;
    }

    .trainings-page .row-action-group {
        display: inline-flex !important;
        justify-content: flex-end !important;
        gap: 8px !important;
        flex-wrap: nowrap !important;
        min-width: 170px;
    }
}

/* prevent old v37 width from clipping after adding column */
.trainings-page .training-actions-col {
    min-width: 170px;
}

.trainings-page .training-actions-col .settings-action {
    flex: 0 0 auto;
}


/* v46 training published moved to settings modal */
@media (min-width: 1181px) {
    .trainings-page .trainings-table th:nth-child(1),
    .trainings-page .trainings-table td:nth-child(1) {
        width: 32% !important;
    }

    .trainings-page .trainings-table th:nth-child(2),
    .trainings-page .trainings-table td:nth-child(2) {
        width: 15% !important;
    }

    .trainings-page .trainings-table th:nth-child(3),
    .trainings-page .trainings-table td:nth-child(3) {
        width: 16% !important;
    }

    .trainings-page .trainings-table th:nth-child(4),
    .trainings-page .trainings-table td:nth-child(4) {
        width: 15% !important;
    }

    .trainings-page .trainings-table th:nth-child(5),
    .trainings-page .trainings-table td:nth-child(5) {
        width: 22% !important;
        text-align: right !important;
    }
}

@media (min-width: 769px) and (max-width: 1180px) {
    .trainings-page .trainings-table {
        width: 980px !important;
        min-width: 980px !important;
    }

    .trainings-page .trainings-table th:nth-child(1),
    .trainings-page .trainings-table td:nth-child(1) {
        width: 310px !important;
    }

    .trainings-page .trainings-table th:nth-child(2),
    .trainings-page .trainings-table td:nth-child(2) {
        width: 150px !important;
    }

    .trainings-page .trainings-table th:nth-child(3),
    .trainings-page .trainings-table td:nth-child(3) {
        width: 150px !important;
    }

    .trainings-page .trainings-table th:nth-child(4),
    .trainings-page .trainings-table td:nth-child(4) {
        width: 140px !important;
    }

    .trainings-page .trainings-table th:nth-child(5),
    .trainings-page .trainings-table td:nth-child(5) {
        width: 230px !important;
        text-align: right !important;
    }
}


/* v47 published visible in training table */
@media (min-width: 1181px) {
    .trainings-page .trainings-table th:nth-child(1),
    .trainings-page .trainings-table td:nth-child(1) { width: 30% !important; }

    .trainings-page .trainings-table th:nth-child(2),
    .trainings-page .trainings-table td:nth-child(2) { width: 14% !important; }

    .trainings-page .trainings-table th:nth-child(3),
    .trainings-page .trainings-table td:nth-child(3) { width: 14% !important; }

    .trainings-page .trainings-table th:nth-child(4),
    .trainings-page .trainings-table td:nth-child(4) { width: 13% !important; }

    .trainings-page .trainings-table th:nth-child(5),
    .trainings-page .trainings-table td:nth-child(5) { width: 11% !important; text-align: center !important; }

    .trainings-page .trainings-table th:nth-child(6),
    .trainings-page .trainings-table td:nth-child(6) { width: 18% !important; text-align: right !important; }
}

@media (min-width: 769px) and (max-width: 1180px) {
    .trainings-page .trainings-table {
        width: 1080px !important;
        min-width: 1080px !important;
    }

    .trainings-page .trainings-table th:nth-child(1),
    .trainings-page .trainings-table td:nth-child(1) { width: 300px !important; }

    .trainings-page .trainings-table th:nth-child(2),
    .trainings-page .trainings-table td:nth-child(2) { width: 135px !important; }

    .trainings-page .trainings-table th:nth-child(3),
    .trainings-page .trainings-table td:nth-child(3) { width: 135px !important; }

    .trainings-page .trainings-table th:nth-child(4),
    .trainings-page .trainings-table td:nth-child(4) { width: 130px !important; }

    .trainings-page .trainings-table th:nth-child(5),
    .trainings-page .trainings-table td:nth-child(5) { width: 120px !important; text-align: center !important; }

    .trainings-page .trainings-table th:nth-child(6),
    .trainings-page .trainings-table td:nth-child(6) { width: 260px !important; text-align: right !important; }
}


/* v49 planning moment settings */
.planning-moments-table th:nth-child(7),
.planning-moments-table td:nth-child(7) {
    text-align: center;
}

@media (min-width: 769px) and (max-width: 1180px) {
    .planning-moments-table {
        width: 1180px !important;
        min-width: 1180px !important;
    }

    .planning-moments-table th:nth-child(7),
    .planning-moments-table td:nth-child(7) {
        width: 130px !important;
        text-align: center !important;
    }

    .planning-moments-table th:nth-child(8),
    .planning-moments-table td:nth-child(8) {
        width: 180px !important;
    }
}

@media (max-width: 768px) {
    .planning-moments-table td[data-label="Gepubliceerd"] {
        justify-content: space-between;
    }
}

.modal-form .form-field small {
    display: block;
    margin-top: 6px;
    color: #667085;
    font-size: 12px;
}


/* v52 planning published production */
.planning-moments-table .published-col {
    text-align: center;
    white-space: nowrap;
}

.planning-moments-table .moment-actions-col {
    min-width: 170px;
}

.planning-moments-table .moment-row-actions {
    display: inline-flex;
    gap: 8px;
    flex-wrap: nowrap;
    justify-content: flex-end;
}

@media (min-width: 1181px) {
    .planning-moments-table {
        table-layout: fixed;
        width: 100%;
    }

    .planning-moments-table th:nth-child(1),
    .planning-moments-table td:nth-child(1) { width: 13%; }

    .planning-moments-table th:nth-child(2),
    .planning-moments-table td:nth-child(2) { width: 8%; }

    .planning-moments-table th:nth-child(3),
    .planning-moments-table td:nth-child(3) { width: 18%; }

    .planning-moments-table th:nth-child(4),
    .planning-moments-table td:nth-child(4) { width: 12%; }

    .planning-moments-table th:nth-child(5),
    .planning-moments-table td:nth-child(5) { width: 18%; }

    .planning-moments-table th:nth-child(6),
    .planning-moments-table td:nth-child(6) { width: 11%; }

    .planning-moments-table th:nth-child(7),
    .planning-moments-table td:nth-child(7) { width: 10%; text-align: center; }

    .planning-moments-table th:nth-child(8),
    .planning-moments-table td:nth-child(8) { width: 10%; text-align: right; }
}

@media (min-width: 769px) and (max-width: 1180px) {
    .planning-table-wrap {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    .planning-moments-table {
        width: 1320px !important;
        min-width: 1320px !important;
        table-layout: fixed !important;
    }

    .planning-moments-table th:nth-child(7),
    .planning-moments-table td:nth-child(7) {
        width: 140px !important;
        text-align: center !important;
    }

    .planning-moments-table th:nth-child(8),
    .planning-moments-table td:nth-child(8) {
        width: 190px !important;
        text-align: right !important;
    }
}

@media (max-width: 768px) {
    .planning-moments-table td.published-col {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
}

.modal-form .form-field small {
    display: block;
    margin-top: 6px;
    color: #667085;
    font-size: 12px;
}


/* v53 planning: no separate actions column */
.planning-moments-table .published-actions-cell {
    text-align: right;
}

.planning-moments-table .published-actions-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    width: 100%;
}

.planning-moments-table .moment-row-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
}

@media (min-width: 1181px) {
    .planning-moments-table {
        table-layout: fixed;
        width: 100%;
    }

    .planning-moments-table th:nth-child(1),
    .planning-moments-table td:nth-child(1) { width: 13%; }

    .planning-moments-table th:nth-child(2),
    .planning-moments-table td:nth-child(2) { width: 8%; }

    .planning-moments-table th:nth-child(3),
    .planning-moments-table td:nth-child(3) { width: 19%; }

    .planning-moments-table th:nth-child(4),
    .planning-moments-table td:nth-child(4) { width: 12%; }

    .planning-moments-table th:nth-child(5),
    .planning-moments-table td:nth-child(5) { width: 19%; }

    .planning-moments-table th:nth-child(6),
    .planning-moments-table td:nth-child(6) { width: 11%; }

    .planning-moments-table th:nth-child(7),
    .planning-moments-table td:nth-child(7) { width: 18%; text-align: right; }
}

@media (min-width: 769px) and (max-width: 1180px) {
    .planning-table-wrap {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    .planning-moments-table {
        width: 1220px !important;
        min-width: 1220px !important;
        table-layout: fixed !important;
    }

    .planning-moments-table th:nth-child(7),
    .planning-moments-table td:nth-child(7) {
        width: 260px !important;
        text-align: right !important;
    }
}

@media (max-width: 768px) {
    .planning-moments-table td.published-actions-cell {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 12px;
    }

    .planning-moments-table .published-actions-wrap {
        width: auto;
        justify-content: flex-end;
    }
}


/* v54 planning settings icon in published column */
.planning-moments-table .published-actions-wrap {
    display: inline-flex !important;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    width: 100%;
}

.planning-moments-table .published-actions-cell .settings-action {
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
}

@media (min-width: 1181px) {
    .planning-moments-table th:nth-child(7),
    .planning-moments-table td:nth-child(7) {
        width: 18% !important;
        text-align: right !important;
    }
}

@media (min-width: 769px) and (max-width: 1180px) {
    .planning-moments-table th:nth-child(7),
    .planning-moments-table td:nth-child(7) {
        width: 260px !important;
        text-align: right !important;
    }
}

@media (max-width: 768px) {
    .planning-moments-table td.published-actions-cell {
        display: flex !important;
        justify-content: space-between;
        align-items: center;
    }
}


/* v55 planning settings icon visible */
.planning-moments-table .published-actions-wrap {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 10px !important;
    width: 100% !important;
}

.planning-moments-table .moment-settings-inline {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 42px !important;
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.planning-moments-table .published-actions-cell {
    text-align: right !important;
    min-width: 150px !important;
}

@media (min-width: 769px) and (max-width: 1180px) {
    .planning-moments-table th:nth-child(7),
    .planning-moments-table td:nth-child(7) {
        width: 260px !important;
    }
}


/* v56 final planning settings gear */
.planning-moments-table .published-actions-cell {
    text-align: right !important;
    min-width: 170px !important;
}

.planning-moments-table .published-actions-wrap {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 10px !important;
    width: 100% !important;
}

.planning-moments-table .moment-settings-inline {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    flex: 0 0 42px !important;
    opacity: 1 !important;
    visibility: visible !important;
}

@media (min-width: 1181px) {
    .planning-moments-table th:nth-child(7),
    .planning-moments-table td:nth-child(7) {
        width: 20% !important;
        text-align: right !important;
    }
}

@media (min-width: 769px) and (max-width: 1180px) {
    .planning-moments-table {
        width: 1240px !important;
        min-width: 1240px !important;
    }

    .planning-moments-table th:nth-child(7),
    .planning-moments-table td:nth-child(7) {
        width: 280px !important;
        text-align: right !important;
    }
}

@media (max-width: 768px) {
    .planning-moments-table td.published-actions-cell {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
    }
}


/* v57 planning settings column */
.planning-moments-table .published-col {
    text-align: center !important;
    white-space: nowrap;
}

.planning-moments-table .moment-settings-col {
    text-align: right !important;
    white-space: nowrap;
    min-width: 86px;
}

.planning-moments-table .moment-settings-inline {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    opacity: 1 !important;
    visibility: visible !important;
}

@media (min-width: 1181px) {
    .planning-moments-table {
        table-layout: fixed;
        width: 100%;
    }

    .planning-moments-table th:nth-child(1),
    .planning-moments-table td:nth-child(1) { width: 12%; }

    .planning-moments-table th:nth-child(2),
    .planning-moments-table td:nth-child(2) { width: 7%; }

    .planning-moments-table th:nth-child(3),
    .planning-moments-table td:nth-child(3) { width: 18%; }

    .planning-moments-table th:nth-child(4),
    .planning-moments-table td:nth-child(4) { width: 12%; }

    .planning-moments-table th:nth-child(5),
    .planning-moments-table td:nth-child(5) { width: 18%; }

    .planning-moments-table th:nth-child(6),
    .planning-moments-table td:nth-child(6) { width: 11%; }

    .planning-moments-table th:nth-child(7),
    .planning-moments-table td:nth-child(7) { width: 12%; text-align: center !important; }

    .planning-moments-table th:nth-child(8),
    .planning-moments-table td:nth-child(8) { width: 10%; text-align: right !important; }
}

@media (min-width: 769px) and (max-width: 1180px) {
    .planning-table-wrap {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    .planning-moments-table {
        width: 1320px !important;
        min-width: 1320px !important;
        table-layout: fixed !important;
    }

    .planning-moments-table th:nth-child(7),
    .planning-moments-table td:nth-child(7) {
        width: 150px !important;
        text-align: center !important;
    }

    .planning-moments-table th:nth-child(8),
    .planning-moments-table td:nth-child(8) {
        width: 140px !important;
        text-align: right !important;
    }
}

@media (max-width: 768px) {
    .planning-moments-table td.moment-settings-col {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
    }
}


/* v58 planning settings button fix */
.planning-moments-table .moment-settings-col {
    text-align: center !important;
}

.planning-moments-table .moment-settings-inline {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    border-radius: 14px !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.planning-moments-table .moment-settings-col .state-badge {
    display: none !important;
}


/* v60 planning publish/settings correct */
.planning-moments-table .published-col {
    text-align: center !important;
    white-space: nowrap;
}

.planning-moments-table .moment-settings-col {
    text-align: center !important;
    white-space: nowrap;
}

.planning-moments-table .moment-settings-inline {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    border-radius: 14px !important;
    opacity: 1 !important;
    visibility: visible !important;
    font-size: 18px !important;
}

.planning-moments-table .moment-settings-col .state-badge {
    display: none !important;
}

@media (min-width: 1181px) {
    .planning-moments-table {
        table-layout: fixed;
        width: 100%;
    }

    .planning-moments-table th:nth-child(7),
    .planning-moments-table td:nth-child(7) {
        width: 12% !important;
        text-align: center !important;
    }

    .planning-moments-table th:nth-child(8),
    .planning-moments-table td:nth-child(8) {
        width: 10% !important;
        text-align: center !important;
    }
}

@media (min-width: 769px) and (max-width: 1180px) {
    .planning-table-wrap {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    .planning-moments-table {
        width: 1320px !important;
        min-width: 1320px !important;
        table-layout: fixed !important;
    }

    .planning-moments-table th:nth-child(7),
    .planning-moments-table td:nth-child(7) {
        width: 150px !important;
        text-align: center !important;
    }

    .planning-moments-table th:nth-child(8),
    .planning-moments-table td:nth-child(8) {
        width: 150px !important;
        text-align: center !important;
    }
}


/* v61 planning published text fix */
.planning-moments-table .published-col {
    text-align: center !important;
    white-space: nowrap;
}

.planning-moments-table .published-col .state-badge {
    min-width: 132px;
    justify-content: center;
}

.planning-moments-table .moment-settings-col {
    text-align: center !important;
    white-space: nowrap;
}

.planning-moments-table .moment-settings-inline {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    opacity: 1 !important;
    visibility: visible !important;
}

@media (min-width: 1181px) {
    .planning-moments-table th:nth-child(7),
    .planning-moments-table td:nth-child(7) {
        width: 15% !important;
        text-align: center !important;
    }

    .planning-moments-table th:nth-child(8),
    .planning-moments-table td:nth-child(8) {
        width: 9% !important;
        text-align: center !important;
    }
}

@media (min-width: 769px) and (max-width: 1180px) {
    .planning-moments-table {
        width: 1380px !important;
        min-width: 1380px !important;
    }

    .planning-moments-table th:nth-child(7),
    .planning-moments-table td:nth-child(7) {
        width: 190px !important;
        text-align: center !important;
    }

    .planning-moments-table th:nth-child(8),
    .planning-moments-table td:nth-child(8) {
        width: 120px !important;
        text-align: center !important;
    }
}


/* v62 planning columns clean */
.planning-moments-table .published-col {
    text-align: center !important;
    white-space: nowrap !important;
}

.planning-moments-table .published-col .state-badge {
    min-width: 150px !important;
    justify-content: center !important;
}

.planning-moments-table .moment-settings-col {
    text-align: center !important;
    white-space: nowrap !important;
}

.planning-moments-table .moment-settings-col .state-badge {
    display: none !important;
}

.planning-moments-table .moment-settings-inline {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    border-radius: 14px !important;
    opacity: 1 !important;
    visibility: visible !important;
    font-size: 18px !important;
}

@media (min-width: 1181px) {
    .planning-moments-table {
        table-layout: fixed !important;
        width: 100% !important;
    }

    .planning-moments-table th:nth-child(1),
    .planning-moments-table td:nth-child(1) { width: 12% !important; }

    .planning-moments-table th:nth-child(2),
    .planning-moments-table td:nth-child(2) { width: 7% !important; }

    .planning-moments-table th:nth-child(3),
    .planning-moments-table td:nth-child(3) { width: 17% !important; }

    .planning-moments-table th:nth-child(4),
    .planning-moments-table td:nth-child(4) { width: 11% !important; }

    .planning-moments-table th:nth-child(5),
    .planning-moments-table td:nth-child(5) { width: 17% !important; }

    .planning-moments-table th:nth-child(6),
    .planning-moments-table td:nth-child(6) { width: 10% !important; }

    .planning-moments-table th:nth-child(7),
    .planning-moments-table td:nth-child(7) { width: 17% !important; text-align: center !important; }

    .planning-moments-table th:nth-child(8),
    .planning-moments-table td:nth-child(8) { width: 9% !important; text-align: center !important; }
}

@media (min-width: 769px) and (max-width: 1180px) {
    .planning-table-wrap {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    .planning-moments-table {
        width: 1420px !important;
        min-width: 1420px !important;
        table-layout: fixed !important;
    }

    .planning-moments-table th:nth-child(7),
    .planning-moments-table td:nth-child(7) {
        width: 220px !important;
        text-align: center !important;
    }

    .planning-moments-table th:nth-child(8),
    .planning-moments-table td:nth-child(8) {
        width: 120px !important;
        text-align: center !important;
    }
}


/* v63 planning responsive UI polish only */
.planning-table-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
}

.planning-moments-table {
    table-layout: fixed !important;
    width: 100%;
}

.planning-moments-table th,
.planning-moments-table td {
    vertical-align: middle !important;
}

.planning-moments-table .trainer-cell,
.planning-moments-table .moment-training-name {
    min-width: 0 !important;
}

.planning-moments-table .trainer-cell strong,
.planning-moments-table .trainer-cell span,
.planning-moments-table .moment-training-name {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
}

.planning-moments-table .trainer-cell strong,
.planning-moments-table .trainer-cell span {
    white-space: nowrap;
}

.planning-moments-table .published-col .state-badge {
    max-width: 100%;
    min-width: 0 !important;
    padding-left: 12px;
    padding-right: 12px;
    white-space: nowrap;
}

.planning-moments-table .moment-settings-inline {
    margin: 0 auto;
}

/* Large desktop */
@media (min-width: 1400px) {
    .planning-moments-table th:nth-child(1),
    .planning-moments-table td:nth-child(1) { width: 12% !important; }

    .planning-moments-table th:nth-child(2),
    .planning-moments-table td:nth-child(2) { width: 7% !important; }

    .planning-moments-table th:nth-child(3),
    .planning-moments-table td:nth-child(3) { width: 19% !important; }

    .planning-moments-table th:nth-child(4),
    .planning-moments-table td:nth-child(4) { width: 11% !important; }

    .planning-moments-table th:nth-child(5),
    .planning-moments-table td:nth-child(5) { width: 18% !important; }

    .planning-moments-table th:nth-child(6),
    .planning-moments-table td:nth-child(6) { width: 10% !important; }

    .planning-moments-table th:nth-child(7),
    .planning-moments-table td:nth-child(7) { width: 15% !important; }

    .planning-moments-table th:nth-child(8),
    .planning-moments-table td:nth-child(8) { width: 8% !important; }
}

/* Normal desktop / collapsed sidebar */
@media (min-width: 1181px) and (max-width: 1399px) {
    .planning-moments-table {
        min-width: 1180px !important;
        width: 1180px !important;
    }

    .planning-moments-table th:nth-child(1),
    .planning-moments-table td:nth-child(1) { width: 130px !important; }

    .planning-moments-table th:nth-child(2),
    .planning-moments-table td:nth-child(2) { width: 80px !important; }

    .planning-moments-table th:nth-child(3),
    .planning-moments-table td:nth-child(3) { width: 210px !important; }

    .planning-moments-table th:nth-child(4),
    .planning-moments-table td:nth-child(4) { width: 130px !important; }

    .planning-moments-table th:nth-child(5),
    .planning-moments-table td:nth-child(5) { width: 190px !important; }

    .planning-moments-table th:nth-child(6),
    .planning-moments-table td:nth-child(6) { width: 120px !important; }

    .planning-moments-table th:nth-child(7),
    .planning-moments-table td:nth-child(7) { width: 220px !important; }

    .planning-moments-table th:nth-child(8),
    .planning-moments-table td:nth-child(8) { width: 100px !important; }
}

/* iPad */
@media (min-width: 769px) and (max-width: 1180px) {
    .planning-moments-table {
        min-width: 1260px !important;
        width: 1260px !important;
    }

    .planning-moments-table th,
    .planning-moments-table td {
        padding-left: 14px !important;
        padding-right: 14px !important;
    }

    .planning-moments-table th:nth-child(1),
    .planning-moments-table td:nth-child(1) { width: 130px !important; }

    .planning-moments-table th:nth-child(2),
    .planning-moments-table td:nth-child(2) { width: 80px !important; }

    .planning-moments-table th:nth-child(3),
    .planning-moments-table td:nth-child(3) { width: 220px !important; }

    .planning-moments-table th:nth-child(4),
    .planning-moments-table td:nth-child(4) { width: 140px !important; }

    .planning-moments-table th:nth-child(5),
    .planning-moments-table td:nth-child(5) { width: 210px !important; }

    .planning-moments-table th:nth-child(6),
    .planning-moments-table td:nth-child(6) { width: 120px !important; }

    .planning-moments-table th:nth-child(7),
    .planning-moments-table td:nth-child(7) { width: 250px !important; }

    .planning-moments-table th:nth-child(8),
    .planning-moments-table td:nth-child(8) { width: 110px !important; }
}

/* iPhone */
@media (max-width: 768px) {
    .planning-moments-table {
        width: 100% !important;
        min-width: 0 !important;
    }

    .planning-moments-table .published-col .state-badge {
        white-space: normal;
        text-align: center;
    }

    .planning-moments-table .moment-settings-col {
        justify-content: space-between !important;
    }
}