:root {
    --dark: #2b3625;
    --dark-alt: #232323;
    --cream: #EEF3E6;
    --lime: #A5C520;
    --green: #7A9C58;
    --blue: #1C7EAC;
    --mid: #5A5A5A;
    --light-bg: #F5F7F2;
    --white: #FFFFFF;
    --border: #D9E4D0;
    --sidebar-w: 232px;
    --radius: 12px;
    --shadow: 0 2px 8px rgba(44,56,38,0.06), 0 8px 24px rgba(44,56,38,0.08);
    --shadow-sm: 0 1px 3px rgba(44,56,38,0.04), 0 4px 12px rgba(44,56,38,0.06);
    --shadow-lg: 0 4px 12px rgba(44,56,38,0.06), 0 16px 48px rgba(44,56,38,0.12);
    --red: #DC3545;
    --transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-medium: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  }
  * { margin: 0; padding: 0; box-sizing: border-box; }

  /* ── Page transitions ─────────────────────────────────────────────────── */
  body { animation: pageIn 80ms ease-out; }
  body.page-out { animation: pageOut 60ms ease-in forwards; }
  @keyframes pageIn { from { opacity: 0; } to { opacity: 1; } }
  @keyframes pageOut { from { opacity: 1; } to { opacity: 0; } }
  @keyframes viewIn { from { opacity: 0; } to { opacity: 1; } }

  /* ── Smooth scrolling & selection ─────────────────────────────────────── */
  html { scroll-behavior: smooth; }
  ::selection { background: rgba(165,197,32,0.25); color: var(--dark); }
  ::-moz-selection { background: rgba(165,197,32,0.25); color: var(--dark); }

  /* ── Global scrollbar styling ────────────────────────────────────────── */
  ::-webkit-scrollbar { width: 7px; height: 7px; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
  ::-webkit-scrollbar-thumb:hover { background: var(--mid); }

  /* Custom-select dropdown: zie shared.css */

  body { font-family: 'proxima-nova', sans-serif; background: var(--light-bg); color: var(--dark-alt); min-height: 100vh; display: flex; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
  .sidebar { width: var(--sidebar-w); min-height: 100vh; background: linear-gradient(180deg, #2f3b28 0%, var(--dark) 35%, #1e2819 100%); display: flex; flex-direction: column; position: fixed; top: 0; left: 0; z-index: 100; box-shadow: 3px 0 24px rgba(0,0,0,0.18); }
  .sidebar::after { content: ''; position: absolute; top: 0; right: 0; width: 1px; height: 100%; background: linear-gradient(180deg, rgba(165,197,32,0.1) 0%, transparent 30%, transparent 70%, rgba(165,197,32,0.06) 100%); pointer-events: none; }
  .sidebar-logo { padding: 22px 18px 20px; border-bottom: 1px solid rgba(255,255,255,0.06); text-align: center; background: rgba(0,0,0,0.1); position: relative; }
  .sidebar-logo::after { content: ''; position: absolute; bottom: -1px; left: 20px; right: 20px; height: 1px; background: linear-gradient(90deg, transparent, rgba(165,197,32,0.15), transparent); }
  .sidebar-logo img { max-width: 200px; height: auto; }
  nav { flex: 1; padding: 12px 0; overflow-y: auto; }
  .nav-label { font-size: 9.5px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(165,197,32,0.3); padding: 20px 20px 8px; }
  .nav-item { display: flex; align-items: center; gap: 11px; padding: 11px 20px; font-size: 13.5px; font-weight: 500; color: rgba(255,255,255,0.5); cursor: pointer; border-left: 3px solid transparent; text-decoration: none; transition: color var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast); margin: 1px 8px 1px 0; border-radius: 0 8px 8px 0; }
  .nav-item:hover { color: rgba(255,255,255,0.9); background: rgba(255,255,255,0.06); }
  .nav-item.active { color: #fff; border-left-color: var(--lime); background: linear-gradient(90deg, rgba(165,197,32,0.16) 0%, rgba(165,197,32,0.04) 100%); font-weight: 600; }
  .nav-icon { width: 17px; height: 17px; flex-shrink: 0; opacity: 0.7; transition: opacity var(--transition-fast); }
  .nav-item:hover .nav-icon { opacity: 0.9; }
  .nav-item.active .nav-icon { opacity: 1; }
  
  /* Collapsible menu */
  .nav-group { }
  .nav-group-header { display: flex; align-items: center; justify-content: space-between; padding: 11px 20px; font-size: 13.5px; font-weight: 500; color: rgba(255,255,255,0.5); cursor: pointer; border-left: 3px solid transparent; transition: color var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast); margin: 1px 8px 1px 0; border-radius: 0 8px 8px 0; }
  .nav-group-header:hover { color: rgba(255,255,255,0.9); background: rgba(255,255,255,0.06); }
  .nav-group-header.active { color: #fff; border-left-color: var(--lime); background: linear-gradient(90deg, rgba(165,197,32,0.16) 0%, rgba(165,197,32,0.04) 100%); }
  .nav-group-header .nav-title { display: flex; align-items: center; gap: 11px; }
  .nav-group-header .nav-arrow { width: 16px; height: 16px; transition: transform 0.2s; }
  .nav-group-header.open .nav-arrow { transform: rotate(90deg); }
  .nav-group-items { display: none; padding-left: 28px; }
  .nav-group-items.open { display: block; }
  .nav-group-items .nav-item { padding: 8px 20px; font-size: 13px; }
  
  .sidebar-footer { padding: 16px 16px; border-top: 1px solid rgba(255,255,255,0.06); background: rgba(0,0,0,0.08); position: relative; }
  .sidebar-footer::before { content: ''; position: absolute; top: -1px; left: 20px; right: 20px; height: 1px; background: linear-gradient(90deg, transparent, rgba(165,197,32,0.1), transparent); }
  .user-pill { display: flex; align-items: center; gap: 10px; background: rgba(255,255,255,0.06); border-radius: 10px; padding: 10px 13px; border: 1px solid rgba(255,255,255,0.04); transition: background var(--transition-fast); }
  .user-pill:hover { background: rgba(255,255,255,0.08); }
  .user-av { width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg, var(--lime) 0%, #8aad18 100%); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 12px; color: var(--dark); flex-shrink: 0; box-shadow: 0 2px 8px rgba(165,197,32,0.25); }
  .user-av.large { width: 64px; height: 64px; font-size: 20px; box-shadow: 0 4px 16px rgba(165,197,32,0.25); }
  .user-name { font-size: 13px; font-weight: 600; color: #fff; }
  .user-role { font-size: 11px; color: rgba(255,255,255,0.32); }
  .logout-btn { width: 100%; margin-top: 12px; padding: 10px 14px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.10); background: transparent; color: rgba(255,255,255,0.5); font-family: 'proxima-nova', sans-serif; font-size: 13px; font-weight: 500; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; transition: all var(--transition-fast); }
  .logout-btn:hover { background: rgba(255,255,255,0.08); color: #fff; border-color: rgba(255,255,255,0.2); }
  .logout-btn:active { transform: scale(0.98); }
  .main { margin-left: var(--sidebar-w); flex: 1; display: flex; flex-direction: column; min-height: 100vh; }
  @media (max-width: 768px) {
    :root { --sidebar-w: 0px; }
    .sidebar { display: none; }
    .main { margin-left: 0; padding-bottom: 64px; }
    .mobile-nav { display: flex !important; }
  }
  .mobile-nav { display: none; position: fixed; bottom: 0; left: 0; right: 0; height: 60px; background: var(--dark); z-index: 100; border-top: 1px solid rgba(255,255,255,0.08); }
  .mobile-nav a { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: rgba(255,255,255,0.4); text-decoration: none; font-size: 10px; font-weight: 600; }
  .mobile-nav a.active { color: #fff; }
  .mobile-nav svg { width: 20px; height: 20px; }
  .topbar { border-bottom: 1px solid var(--border); padding: 0 32px; height: 62px; display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 50; box-shadow: 0 1px 4px rgba(44,56,38,0.05); backdrop-filter: blur(12px); background: rgba(255,255,255,0.92); }
  .topbar h1 { font-family: 'proxima-nova', sans-serif; font-weight: 700; font-size: 21px; color: var(--dark); }
  .topbar span { font-size: 12px; color: var(--mid); display: block; margin-top: -2px; }
  .content { padding: 26px 32px; flex: 1; }
  .greeting { background: linear-gradient(135deg, #323e2b 0%, var(--dark) 40%, #1a2315 100%); border-radius: var(--radius); padding: 26px 30px; display: flex; align-items: center; justify-content: space-between; box-shadow: 0 4px 20px rgba(43,54,37,0.18), inset 0 1px 0 rgba(255,255,255,0.04); position: relative; overflow: hidden; }
  .greeting::before { content: ''; position: absolute; top: -40px; left: -20px; width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(circle, rgba(165,197,32,0.1) 0%, transparent 65%); pointer-events: none; }
  .greeting::after { content: ''; position: absolute; right: -40px; bottom: -50px; width: 260px; height: 260px; border-radius: 50%; background: radial-gradient(circle, rgba(165,197,32,0.15) 0%, transparent 60%); pointer-events: none; }
  .greeting-text h2 { font-family: 'proxima-nova', sans-serif; font-size: 27px; font-weight: 800; color: #fff; }
  .greeting-text p { font-size: 13px; color: rgba(238,243,230,0.52); margin-top: 5px; max-width: 370px; line-height: 1.5; }
  .panel { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); overflow: hidden; margin-top: 20px; transition: box-shadow var(--transition-medium); }
  .panel:first-child { margin-top: 0; }
  .panel:hover { box-shadow: var(--shadow); }
  .panel-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--border); background: linear-gradient(180deg, var(--white) 0%, rgba(245,247,242,0.5) 100%); }
  .panel-head h2 { font-family: 'proxima-nova', sans-serif; font-size: 16px; font-weight: 700; color: var(--dark); }
  .btn { padding: 9px 18px; border-radius: 8px; font-family: 'proxima-nova', sans-serif; font-size: 13px; font-weight: 600; cursor: pointer; border: none; transition: all var(--transition-fast); position: relative; }
  .btn:active { transform: scale(0.97); }
  .btn-primary { background: linear-gradient(135deg, var(--lime) 0%, #96b41a 100%); color: var(--dark); box-shadow: 0 2px 6px rgba(165,197,32,0.25); }
  .btn-primary:hover { background: linear-gradient(135deg, #b0d024 0%, #8aad18 100%); box-shadow: 0 4px 12px rgba(165,197,32,0.35); transform: translateY(-1px); }
  .btn-primary:active { transform: translateY(0) scale(0.97); }
  .btn-danger { background: linear-gradient(135deg, var(--red) 0%, #c62232 100%); color: #fff; box-shadow: 0 2px 6px rgba(220,53,69,0.25); }
  .btn-danger:hover { box-shadow: 0 4px 12px rgba(220,53,69,0.35); transform: translateY(-1px); }
  .btn-danger:active { transform: translateY(0) scale(0.97); }
  .btn-secondary { background: var(--white); color: var(--dark); border: 1px solid var(--border); }
  .btn-secondary:hover { background: var(--light-bg); border-color: #c8d4be; }
  .btn-sm { padding: 6px 12px; font-size: 12px; }
  /* Login page (standalone login.html) */
  .login-body { display: flex; min-height: 100vh; background-color: var(--light-bg); background-image: radial-gradient(ellipse at 15% 85%, rgba(165,197,32,0.1) 0%, transparent 45%), radial-gradient(ellipse at 85% 15%, rgba(43,54,37,0.06) 0%, transparent 45%), linear-gradient(145deg, #f0f3ec 0%, var(--light-bg) 40%, #e8ede2 100%); }
  .login-screen { display: flex; align-items: center; justify-content: center; flex: 1; min-height: 100vh; }

  /* Legacy login overlay (index.html fallback) */
  #login-screen { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; background-color: var(--light-bg); background-image: radial-gradient(ellipse at 15% 85%, rgba(165,197,32,0.1) 0%, transparent 45%), radial-gradient(ellipse at 85% 15%, rgba(43,54,37,0.06) 0%, transparent 45%), linear-gradient(145deg, #f0f3ec 0%, var(--light-bg) 40%, #e8ede2 100%); }
  .login-card { background: var(--white); border: 1px solid rgba(217,228,208,0.8); border-radius: 18px; box-shadow: 0 4px 16px rgba(44,56,38,0.05), 0 20px 60px rgba(44,56,38,0.1); padding: 44px 48px; width: 400px; max-width: calc(100vw - 32px); animation: loginFadeIn 0.5s cubic-bezier(0.2, 0, 0.2, 1); }
  @keyframes loginFadeIn { from { opacity: 0; transform: translateY(16px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
  .login-logo-wrap { display: flex; justify-content: center; margin-bottom: 32px; text-align: center; }
  .login-logo-img { max-width: 280px; height: auto; display: block; margin: 0 auto; }
  .login-title { font-size: 18px; font-weight: 700; color: var(--dark); text-align: center; margin-bottom: 6px; }
  .login-sub { font-size: 13px; color: var(--mid); text-align: center; margin-bottom: 30px; }
  .login-fields { display: grid; gap: 14px; margin-bottom: 20px; }
  .login-field { display: flex; flex-direction: column; gap: 6px; }
  .login-lbl { font-size: 12px; font-weight: 600; color: var(--mid); }
  .login-input { padding: 10px 13px; border: 1px solid var(--border); border-radius: 9px; font-size: 14px; font-family: 'proxima-nova', sans-serif; color: var(--dark); background: var(--light-bg); outline: none; transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast); }
  .login-input:focus { border-color: var(--lime); box-shadow: 0 0 0 3px rgba(165,197,32,0.12); background: var(--white); }
  .login-btn { width: 100%; padding: 11px; border-radius: 9px; border: none; background: linear-gradient(135deg, #323e2b 0%, var(--dark) 100%); color: var(--white); font-family: 'proxima-nova', sans-serif; font-size: 14px; font-weight: 700; cursor: pointer; transition: all var(--transition-fast); box-shadow: 0 2px 8px rgba(43,54,37,0.2), 0 6px 20px rgba(43,54,37,0.1); }
  .login-btn:hover { box-shadow: 0 4px 12px rgba(43,54,37,0.25), 0 10px 28px rgba(43,54,37,0.15); transform: translateY(-1px); }
  .login-btn:active { transform: translateY(0) scale(0.98); box-shadow: 0 2px 8px rgba(43,54,37,0.2); }
  .login-btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none; box-shadow: none; }
  .login-error { display: none; margin-top: 12px; padding: 10px 14px; background: rgba(220,53,69,0.08); border: 1px solid rgba(220,53,69,0.25); border-radius: 8px; font-size: 13px; color: var(--red); text-align: center; }
  
  /* Table/List styles */
  .user-list { padding: 0; }
  .user-row { display: flex; align-items: center; padding: 14px 20px; border-bottom: 1px solid var(--border); cursor: pointer; transition: background var(--transition-fast); }
  .user-row:hover { background: rgba(165,197,32,0.06); }
  .user-row:active { background: rgba(165,197,32,0.1); }
  .user-row:last-child { border-bottom: none; }
  .user-row-avatar { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, var(--lime) 0%, #8aad18 100%); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; color: var(--dark); margin-right: 14px; flex-shrink: 0; box-shadow: 0 2px 6px rgba(165,197,32,0.2); }
  .user-row-info { flex: 1; }
  .user-row-name { font-size: 14px; font-weight: 600; color: var(--dark); }
  .user-row-email { font-size: 12px; color: var(--mid); margin-top: 2px; }
  .user-row-role { font-size: 11px; font-weight: 600; padding: 4px 10px; border-radius: 20px; background: var(--cream); color: var(--green); }
  .user-row-arrow { color: var(--border); margin-left: 10px; }
  
  /* Role list */
  .role-row { display: flex; align-items: center; padding: 14px 20px; border-bottom: 1px solid var(--border); cursor: pointer; transition: background var(--transition-fast); }
  .role-row:hover { background: rgba(165,197,32,0.06); }
  .role-row:active { background: rgba(165,197,32,0.1); }
  .role-row:last-child { border-bottom: none; }
  .role-row-info { flex: 1; }
  .role-row-name { font-size: 14px; font-weight: 600; color: var(--dark); display: flex; align-items: center; gap: 8px; }
  .role-row-name .system-badge { font-size: 10px; font-weight: 600; padding: 2px 6px; border-radius: 4px; background: var(--blue); color: #fff; }
  .role-row-desc { font-size: 12px; color: var(--mid); margin-top: 2px; }
  .role-row-count { font-size: 12px; color: var(--mid); margin-right: 10px; }
  .role-row-arrow { color: var(--border); }
  
  /* Drawer styles */
  .drawer-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0); z-index: 200; transition: background var(--transition-medium); }
  .drawer-overlay.active { display: block; background: rgba(0,0,0,0.4); }
  .drawer { position: fixed; top: 0; right: -480px; width: 480px; max-width: 100vw; height: 100vh; background: var(--white); box-shadow: -4px 0 32px rgba(0,0,0,0.12), -1px 0 0 rgba(0,0,0,0.05); z-index: 201; transition: right var(--transition-slow); overflow-y: auto; }
  .drawer.active { right: 0; }
  .drawer-header { padding: 20px 24px; border-bottom: none; display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; background: linear-gradient(135deg, var(--dark) 0%, #1e2a18 100%); z-index: 10; }
  .drawer-header h3 { font-size: 18px; font-weight: 700; color: #fff; }
  .drawer-close { background: none; border: none; cursor: pointer; padding: 8px; margin: -8px; color: rgba(255,255,255,0.5); transition: color var(--transition-fast); }
  .drawer-close:hover { color: #fff; }
  .drawer-profile { display: flex; flex-direction: column; align-items: center; padding: 24px; text-align: center; background: linear-gradient(180deg, rgba(43,54,37,0.03) 0%, transparent 100%); }
  .drawer-name { font-size: 20px; font-weight: 700; color: var(--dark); margin-top: 16px; }
  .drawer-email { font-size: 13px; color: var(--mid); margin-top: 4px; }
  .drawer-role-badge { margin-top: 12px; font-size: 12px; font-weight: 600; padding: 6px 14px; border-radius: 20px; background: var(--cream); color: var(--green); }
  .drawer-section { padding: 20px 24px; border-top: 1px solid var(--border); }
  .drawer-section h4 { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--mid); margin-bottom: 16px; }
  .drawer-field { margin-bottom: 14px; }
  .drawer-field label { display: block; font-size: 12px; font-weight: 600; color: var(--mid); margin-bottom: 6px; }
  .drawer-field input, .drawer-field select { width: 100%; padding: 10px 13px; border: 1px solid var(--border); border-radius: 9px; font-size: 14px; font-family: 'proxima-nova', sans-serif; color: var(--dark); outline: none; background: var(--white); transition: border-color var(--transition-fast), box-shadow var(--transition-fast); }
  .drawer-field input:focus, .drawer-field select:focus { border-color: var(--lime); box-shadow: 0 0 0 3px rgba(165,197,32,0.1); }
  .drawer-actions { padding: 20px 24px; border-top: 1px solid var(--border); display: flex; gap: 12px; }
  .drawer-actions .btn { flex: 1; }
  .drawer-danger { padding: 20px 24px; border-top: 1px solid var(--border); }
  .drawer-danger-btn { width: 100%; padding: 10px; border-radius: 8px; border: 1px solid rgba(220,53,69,0.3); background: transparent; color: var(--red); font-family: 'proxima-nova', sans-serif; font-size: 13px; font-weight: 500; cursor: pointer; transition: all var(--transition-fast); }
  .drawer-danger-btn:hover { background: rgba(220,53,69,0.08); border-color: rgba(220,53,69,0.5); }
  .drawer-danger-btn:active { transform: scale(0.98); }
  .drawer-error { margin: 0 24px 16px; padding: 10px 14px; background: rgba(220,53,69,0.08); border: 1px solid rgba(220,53,69,0.25); border-radius: 8px; font-size: 13px; color: var(--red); display: none; }
  
  /* Checkboxes for rights */
  .rights-category { margin-bottom: 20px; }
  .rights-category:last-child { margin-bottom: 0; }
  .rights-category-title { font-size: 12px; font-weight: 700; color: var(--dark); margin-bottom: 10px; padding-bottom: 6px; border-bottom: 1px solid var(--border); }
  .right-item { display: flex; align-items: flex-start; gap: 10px; padding: 8px 0; }
  .right-item input[type="checkbox"] { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--lime); cursor: pointer; transition: transform var(--transition-fast); }
  .right-item input[type="checkbox"]:hover { transform: scale(1.1); }
  .right-item-info { flex: 1; }
  .right-item-name { font-size: 14px; font-weight: 500; color: var(--dark); }
  .right-item-desc { font-size: 12px; color: var(--mid); margin-top: 2px; }
  
  /* Modal styles */
  .modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 300; align-items: center; justify-content: center; backdrop-filter: blur(2px); }
  .modal-overlay.active { display: flex; }
  .modal { background: var(--white); border-radius: var(--radius); padding: 28px; width: 440px; max-width: calc(100vw - 32px); box-shadow: var(--shadow-lg); animation: modalIn var(--transition-medium); }
  @keyframes modalIn { from { opacity: 0; transform: scale(0.96) translateY(8px); } to { opacity: 1; transform: scale(1) translateY(0); } }
  .modal h3 { font-size: 18px; font-weight: 700; color: var(--dark); margin-bottom: 20px; }
  .modal-fields { display: grid; gap: 14px; margin-bottom: 24px; }
  .modal-field { display: flex; flex-direction: column; gap: 6px; }
  .modal-field label { font-size: 12px; font-weight: 600; color: var(--mid); }
  .modal-field input, .modal-field select, .modal-field textarea { padding: 10px 13px; border: 1px solid var(--border); border-radius: 9px; font-size: 14px; font-family: 'proxima-nova', sans-serif; color: var(--dark); outline: none; transition: border-color var(--transition-fast), box-shadow var(--transition-fast); }
  .modal-field input:focus, .modal-field select:focus, .modal-field textarea:focus { border-color: var(--lime); box-shadow: 0 0 0 3px rgba(165,197,32,0.1); }
  .modal-btns { display: flex; gap: 12px; justify-content: flex-end; }
  .modal-error { margin-bottom: 16px; padding: 10px 14px; background: rgba(220,53,69,0.08); border: 1px solid rgba(220,53,69,0.25); border-radius: 8px; font-size: 13px; color: var(--red); display: none; }
  
  /* No access message */
  .no-access { text-align: center; padding: 60px 20px; color: var(--mid); }
  .no-access svg { width: 48px; height: 48px; margin-bottom: 16px; opacity: 0.3; }
  .no-access h3 { font-size: 16px; font-weight: 600; color: var(--dark); margin-bottom: 8px; }

  /* ── Afspraken pagina — hero + agenda layout ───────────────────────────── */

  .afsp-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 28px;
    align-items: start;
    max-width: 1280px;
  }
  .afsp-hero { min-width: 0; }

  /* Vandaag-panel (rechts) */
  .vandaag-panel {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 20px 18px 16px;
    position: sticky;
    top: 20px;
    max-height: calc(100vh - 120px);
    display: flex;
    flex-direction: column;
    min-width: 0;
  }
  .vandaag-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding-bottom: 14px;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--border);
  }
  .vandaag-kicker {
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--dark);
  }
  .vandaag-datum {
    font-size: 11px;
    font-weight: 600;
    color: var(--mid);
    text-transform: capitalize;
  }
  .vandaag-lijst {
    flex: 1;
    overflow-y: auto;
    margin-right: -10px;
    padding-right: 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .vandaag-leeg {
    padding: 28px 8px;
    text-align: center;
    color: var(--mid);
    font-size: 12px;
    font-style: italic;
  }
  .vandaag-kaart {
    display: grid;
    grid-template-columns: 58px 1fr;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--white);
    cursor: pointer;
    transition: all var(--transition-fast);
    position: relative;
  }
  .vandaag-kaart::before {
    content: '';
    position: absolute;
    left: 0;
    top: 12px;
    bottom: 12px;
    width: 3px;
    border-radius: 0 2px 2px 0;
  }
  .vandaag-kaart.opname::before { background: #1C7EAC; }
  .vandaag-kaart.reservering::before { background: var(--lime); }
  .vandaag-kaart:hover {
    border-color: var(--lime);
    box-shadow: 0 4px 14px rgba(44,56,38,0.06);
    transform: translateY(-1px);
  }
  .vandaag-tijd {
    font-size: 17px;
    font-weight: 900;
    color: var(--dark);
    letter-spacing: -0.02em;
    font-feature-settings: "tnum";
    line-height: 1;
    padding-top: 2px;
  }
  .vandaag-tijd-duur {
    display: block;
    font-size: 9.5px;
    font-weight: 700;
    color: var(--mid);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-top: 4px;
  }
  .vandaag-body { min-width: 0; }
  .vandaag-adres {
    font-size: 13px;
    font-weight: 800;
    color: var(--dark);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-bottom: 3px;
  }
  .vandaag-medewerker {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11.5px;
    color: var(--mid);
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .vandaag-medewerker svg { width: 11px; height: 11px; flex-shrink: 0; }
  .vandaag-type {
    display: inline-block;
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 2px 7px;
    border-radius: 3px;
    margin-top: 5px;
  }
  .vandaag-type.opname { background: #1C7EAC; color: #fff; }
  .vandaag-type.reservering { background: var(--lime); color: var(--dark); }

  /* Hero header — dominerend cijfer */
  .afsp-hero-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    padding: 6px 2px 22px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 20px;
  }
  .afsp-hero-count {
    display: flex;
    align-items: center;
    gap: 18px;
    line-height: 0.82;
  }
  .afsp-hero-cijfer {
    font-size: 104px;
    font-weight: 900;
    color: var(--dark);
    letter-spacing: -0.055em;
    font-feature-settings: "tnum";
    position: relative;
    display: inline-block;
    z-index: 1;
  }
  .afsp-hero-cijfer::after {
    content: '';
    position: absolute;
    left: -4px;
    right: -4px;
    bottom: 10px;
    height: 18px;
    background: var(--lime);
    z-index: -1;
    opacity: 0.55;
    transform: skewX(-8deg);
  }
  .afsp-hero-label {
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--dark);
    line-height: 1.25;
    padding-bottom: 6px;
  }
  .afsp-hero-meta {
    font-size: 12px;
    color: var(--mid);
    font-weight: 500;
    text-align: right;
    padding-bottom: 10px;
    letter-spacing: 0.01em;
  }
  .afsp-hero-meta strong { color: var(--dark); font-weight: 800; }

  .afsp-loading { padding: 48px 20px; text-align: center; color: var(--mid); font-size: 13px; }

  /* Te plannen lijst */
  .afsp-te-plannen-lijst { display: flex; flex-direction: column; gap: 12px; }

  .afsp-kaart {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 18px 20px 16px;
    position: relative;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
    animation: afspIn 0.36s cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
  }
  .afsp-kaart:hover {
    border-color: rgba(165,197,32,0.5);
    box-shadow: 0 1px 2px rgba(44,56,38,0.04), 0 14px 32px rgba(44,56,38,0.09);
  }
  @keyframes afspIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
  }
  .afsp-kaart:nth-child(1) { animation-delay: 0.02s; }
  .afsp-kaart:nth-child(2) { animation-delay: 0.06s; }
  .afsp-kaart:nth-child(3) { animation-delay: 0.10s; }
  .afsp-kaart:nth-child(4) { animation-delay: 0.14s; }
  .afsp-kaart:nth-child(5) { animation-delay: 0.18s; }
  .afsp-kaart:nth-child(6) { animation-delay: 0.22s; }
  .afsp-kaart:nth-child(n+7) { animation-delay: 0.26s; }

  .afsp-kaart-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 10px; }
  .afsp-type-chip { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; padding: 4px 9px; border-radius: 4px; }
  .afsp-type-chip.opname { background: #1C7EAC; color: #fff; }
  .afsp-type-chip.reservering { background: var(--lime); color: var(--dark); }

  /* Wachtdagen pill — kleur op urgentie */
  .afsp-wacht { display: inline-flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; padding: 5px 11px; border-radius: 999px; white-space: nowrap; border: 1px solid transparent; }
  .afsp-wacht svg { width: 11px; height: 11px; }
  .afsp-wacht.w-fresh { background: var(--cream); color: var(--dark); border-color: var(--border); }
  .afsp-wacht.w-notice { background: rgba(165,197,32,0.18); color: #5e6f11; border-color: rgba(165,197,32,0.35); }
  .afsp-wacht.w-warn { background: rgba(245,166,35,0.14); color: #a2640b; border-color: rgba(245,166,35,0.35); }
  .afsp-wacht.w-urgent { background: rgba(220,53,69,0.12); color: var(--red); border-color: rgba(220,53,69,0.35); animation: afspPulse 2.2s ease-in-out infinite; }
  @keyframes afspPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(220,53,69,0); }
    50% { box-shadow: 0 0 0 5px rgba(220,53,69,0.08); }
  }

  .afsp-kaart-adres { font-size: 19px; font-weight: 800; color: var(--dark); line-height: 1.2; letter-spacing: -0.005em; }
  .afsp-kaart-adres .afsp-unit { color: var(--mid); font-weight: 600; }
  .afsp-kaart-meta { display: flex; gap: 14px; flex-wrap: wrap; font-size: 11.5px; color: var(--mid); margin-top: 5px; }
  .afsp-kaart-meta-item { display: inline-flex; align-items: center; gap: 5px; }
  .afsp-kaart-meta-item svg { width: 12px; height: 12px; flex-shrink: 0; }

  .afsp-kaart-huurder { display: flex; flex-wrap: wrap; gap: 10px 16px; margin-top: 12px; padding: 10px 14px; background: var(--light-bg); border-radius: 8px; border: 1px solid rgba(217,228,208,0.6); font-size: 12.5px; }
  .afsp-kaart-huurder-item { display: inline-flex; align-items: center; gap: 6px; color: var(--dark); }
  .afsp-kaart-huurder-item svg { width: 12px; height: 12px; color: var(--mid); flex-shrink: 0; }
  .afsp-kaart-huurder-item a { color: var(--blue); text-decoration: none; font-weight: 500; transition: color var(--transition-fast); }
  .afsp-kaart-huurder-item a:hover { text-decoration: underline; }
  .afsp-kaart-huurder-leeg { color: var(--mid); font-style: italic; }

  .afsp-kaart-acties { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }

  .afsp-btn-inplan { display: inline-flex; align-items: center; gap: 7px; padding: 10px 16px; background: var(--dark); color: #fff; border: none; border-radius: 8px; font-family: 'proxima-nova', sans-serif; font-size: 12.5px; font-weight: 700; cursor: pointer; transition: transform var(--transition-fast), background var(--transition-fast), box-shadow var(--transition-fast); }
  .afsp-btn-inplan:hover { background: #1e2819; transform: translateY(-1px); box-shadow: 0 8px 18px rgba(44,56,38,0.22); }
  .afsp-btn-inplan:active { transform: translateY(0); box-shadow: 0 2px 6px rgba(44,56,38,0.15); }
  .afsp-btn-inplan svg { width: 13px; height: 13px; stroke: var(--lime); }

  .afsp-btn-ghost { display: inline-flex; align-items: center; gap: 6px; padding: 10px 14px; background: var(--white); color: var(--dark); border: 1px solid var(--border); border-radius: 8px; font-family: 'proxima-nova', sans-serif; font-size: 12.5px; font-weight: 600; cursor: pointer; transition: all var(--transition-fast); }
  .afsp-btn-ghost:hover { border-color: var(--lime); background: rgba(165,197,32,0.06); }
  .afsp-btn-ghost svg { width: 13px; height: 13px; }

  .afsp-badge-sent { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; color: #1C7EAC; padding: 9px 12px; border-radius: 8px; background: #e8f4f8; border: 1px solid #cfe3ed; }
  .afsp-badge-sent svg { width: 12px; height: 12px; }

  /* Lege staat — celebratoir maar ingetogen */
  .afsp-hero-leeg { padding: 60px 24px; text-align: center; border: 1px dashed var(--border); border-radius: 14px; background: var(--white); }
  .afsp-hero-leeg-icon { width: 56px; height: 56px; border-radius: 50%; background: rgba(165,197,32,0.18); color: var(--dark); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 14px; }
  .afsp-hero-leeg-icon svg { width: 26px; height: 26px; stroke: var(--dark); }
  .afsp-hero-leeg-titel { font-size: 16px; font-weight: 800; color: var(--dark); }
  .afsp-hero-leeg-sub { font-size: 12.5px; color: var(--mid); margin-top: 4px; }

  /* ── Agenda modal ──────────────────────────────────────────────────────── */
  .agenda-modal {
    width: 760px !important;
    max-width: calc(100vw - 32px);
    max-height: calc(100vh - 48px);
    padding: 0 !important;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .agenda-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
    background: var(--white);
  }
  .agenda-zoek-wrap {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: var(--light-bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  }
  .agenda-zoek-wrap:focus-within {
    border-color: var(--lime);
    box-shadow: 0 0 0 3px rgba(165,197,32,0.1);
    background: var(--white);
  }
  .agenda-zoek-icon { width: 16px; height: 16px; color: var(--mid); flex-shrink: 0; }
  .agenda-zoek-wrap input {
    flex: 1;
    border: none;
    background: transparent;
    outline: none;
    font-size: 14px;
    font-family: 'proxima-nova', sans-serif;
    color: var(--dark);
  }
  .agenda-zoek-wrap input::placeholder { color: var(--mid); }

  .agenda-close {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--white);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--mid);
    flex-shrink: 0;
    transition: all var(--transition-fast);
  }
  .agenda-close:hover { color: var(--dark); border-color: var(--dark); }
  .agenda-close svg { width: 16px; height: 16px; }

  .agenda-body {
    padding: 20px 24px 24px;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
  }

  .agenda-nav {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 18px;
  }
  .agenda-nav-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--white);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--dark);
    transition: all var(--transition-fast);
  }
  .agenda-nav-btn:hover { border-color: var(--dark); background: var(--dark); color: #fff; }
  .agenda-nav-btn svg { width: 15px; height: 15px; }
  .agenda-maand-label {
    font-size: 18px;
    font-weight: 900;
    color: var(--dark);
    text-transform: capitalize;
    letter-spacing: -0.01em;
    flex: 1;
    text-align: center;
  }
  .agenda-vandaag {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 7px 14px;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: var(--white);
    color: var(--dark);
    cursor: pointer;
    transition: all var(--transition-fast);
  }
  .agenda-vandaag:hover { border-color: var(--lime); background: rgba(165,197,32,0.08); }

  .agenda-weekdagen {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
    padding: 0 2px 8px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--mid);
    text-align: center;
  }
  .agenda-kalender {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
    margin-bottom: 22px;
  }
  .agenda-cel {
    aspect-ratio: 1;
    border: 1px solid var(--border);
    background: var(--white);
    border-radius: 8px;
    padding: 6px 8px 4px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    transition: all var(--transition-fast);
    position: relative;
    min-height: 48px;
  }
  .agenda-cel:hover { border-color: var(--dark); }
  .agenda-cel.buiten-maand { background: var(--light-bg); color: var(--mid); cursor: default; }
  .agenda-cel.buiten-maand:hover { border-color: var(--border); }
  .agenda-cel.weekend { background: linear-gradient(180deg, var(--light-bg) 0%, var(--white) 100%); }
  .agenda-cel.vandaag { border-color: var(--dark); box-shadow: 0 0 0 2px rgba(44,56,38,0.08); }
  .agenda-cel.vandaag .agenda-cel-nummer { color: var(--dark); font-weight: 900; }
  .agenda-cel.geselecteerd { background: var(--dark); border-color: var(--dark); }
  .agenda-cel.geselecteerd .agenda-cel-nummer { color: #fff; }
  .agenda-cel.geselecteerd .agenda-cel-dots span { background: var(--lime); }
  .agenda-cel.geselecteerd .agenda-cel-count { color: var(--lime); }

  .agenda-cel-nummer {
    font-size: 14px;
    font-weight: 700;
    color: var(--dark);
    line-height: 1;
    font-feature-settings: "tnum";
  }
  .agenda-cel-dots {
    display: flex;
    gap: 2px;
    margin-top: auto;
    align-items: center;
    flex-wrap: wrap;
  }
  .agenda-cel-dots span {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--dark);
  }
  .agenda-cel-dots span.opname { background: #1C7EAC; }
  .agenda-cel-dots span.reservering { background: var(--lime); }
  .agenda-cel-count {
    font-size: 9px;
    font-weight: 800;
    color: var(--mid);
    margin-left: 2px;
  }

  /* Dag drill-down */
  .agenda-dag {
    border-top: 1px solid var(--border);
    padding-top: 16px;
    min-height: 120px;
  }
  .agenda-dag-leeg {
    padding: 24px 0;
    text-align: center;
    font-size: 12px;
    color: var(--mid);
    font-style: italic;
  }
  .agenda-dag-kop {
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--dark);
    margin-bottom: 10px;
  }
  .agenda-dag-lijst { display: flex; flex-direction: column; gap: 6px; }
  .agenda-dag-item {
    display: grid;
    grid-template-columns: 64px 1fr auto;
    gap: 14px;
    align-items: center;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--white);
    cursor: pointer;
    transition: all var(--transition-fast);
  }
  .agenda-dag-item:hover {
    border-color: var(--lime);
    box-shadow: 0 2px 8px rgba(44,56,38,0.05);
  }
  .agenda-dag-tijd {
    font-size: 15px;
    font-weight: 900;
    color: var(--dark);
    font-feature-settings: "tnum";
    letter-spacing: -0.02em;
  }
  .agenda-dag-body { min-width: 0; }
  .agenda-dag-adres {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--dark);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .agenda-dag-sub {
    font-size: 11.5px;
    color: var(--mid);
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .agenda-dag-type {
    font-size: 9.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 4px 8px;
    border-radius: 4px;
    flex-shrink: 0;
  }
  .agenda-dag-type.opname { background: #1C7EAC; color: #fff; }
  .agenda-dag-type.reservering { background: var(--lime); color: var(--dark); }

  /* Zoekresultaten (overlayt kalender) */
  .agenda-zoekresultaten {
    padding: 20px 24px 24px;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
  }
  .agenda-zoek-kop {
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--mid);
    margin-bottom: 10px;
  }
  .agenda-zoek-geen {
    padding: 40px 20px;
    text-align: center;
    font-size: 13px;
    color: var(--mid);
  }
  .agenda-zoek-lijst { display: flex; flex-direction: column; gap: 6px; }
  .agenda-zoek-item {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 14px;
    align-items: center;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--white);
    cursor: pointer;
    transition: all var(--transition-fast);
  }
  .agenda-zoek-item:hover {
    border-color: var(--lime);
    box-shadow: 0 2px 8px rgba(44,56,38,0.05);
  }
  .agenda-zoek-item-datum {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 44px;
    padding: 4px 0;
    border-right: 1px solid var(--border);
    padding-right: 14px;
    margin-right: -4px;
  }
  .agenda-zoek-item-dag {
    font-size: 18px;
    font-weight: 900;
    color: var(--dark);
    line-height: 1;
    font-feature-settings: "tnum";
  }
  .agenda-zoek-item-maand {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--mid);
    margin-top: 2px;
  }
  .agenda-zoek-item-status {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--orange);
    padding: 3px 7px;
    border-radius: 3px;
    background: rgba(245,166,35,0.14);
  }
  .agenda-zoek-item-status.ingepland { color: var(--green); background: rgba(122,156,88,0.14); }

  @media (max-width: 1100px) {
    .afsp-layout { grid-template-columns: 1fr; }
    .vandaag-panel { position: static; max-height: none; }
    .afsp-hero-cijfer { font-size: 80px; }
  }
  @media (max-width: 640px) {
    .afsp-hero-head { flex-direction: column; align-items: flex-start; gap: 12px; }
    .afsp-hero-meta { text-align: left; padding-bottom: 0; }
    .afsp-hero-cijfer { font-size: 68px; }
    .afsp-kaart-adres { font-size: 17px; }
  }

  /* ── Inplan modal met scheduling overzicht ────────────────────────────── */
  .afsp-inplan-modal {
    width: calc(100vw - 80px);
    max-width: 1100px;
    max-height: 92vh;
    padding: 0 !important;
    border-radius: 14px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: var(--white);
    box-shadow: 0 8px 30px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.06);
  }

  /* Banner */
  .inplan-banner {
    background: var(--dark);
    padding: 0 18px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
  }
  .inplan-banner h3 {
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    margin: 0;
  }
  .banner-type-badge {
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 3px 9px;
    border-radius: 4px;
    flex-shrink: 0;
  }
  .banner-type-badge.opname { background: #1C7EAC; color: #fff; }
  .banner-type-badge.reservering { background: var(--lime); color: var(--dark); }
  .inplan-banner-sluit {
    background: none;
    border: none;
    color: rgba(255,255,255,0.35);
    cursor: pointer;
    padding: 4px;
    transition: color var(--transition-fast);
  }
  .inplan-banner-sluit:hover { color: #fff; }
  .inplan-banner-sluit svg { width: 16px; height: 16px; display: block; }

  /* Footer */
  .inplan-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 18px;
    border-top: 1px solid var(--border);
    background: var(--light-bg);
    flex-shrink: 0;
    gap: 16px;
  }
  .inplan-footer .inplan-keuze-leeg {
    font-size: 11px;
    color: var(--mid);
    font-style: italic;
  }
  .inplan-footer .inplan-keuze-gevuld {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 600;
    color: var(--dark);
    padding: 4px 12px;
    background: rgba(165,197,32,0.1);
    border: 1px solid rgba(165,197,32,0.3);
    border-radius: 6px;
  }
  .inplan-footer .inplan-keuze-gevuld .inplan-keuze-tijd { font-size: 12px; font-weight: 800; }
  .inplan-footer .inplan-keuze-gevuld strong { font-weight: 800; }
  .inplan-footer .inplan-keuze-gevuld svg { display: none; }
  .inplan-footer-btns {
    display: flex;
    gap: 8px;
  }
  .inplan-footer-btns .btn { font-size: 12px; padding: 7px 18px; }

  /* Controls rij */
  .inplan-controls {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 10px 18px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
  }
  .inplan-ctrl-groep { display: flex; flex-direction: column; gap: 3px; }
  .inplan-ctrl-grow { flex: 1; min-width: 0; }
  .inplan-label {
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--mid);
  }
  .inplan-select {
    padding: 5px 8px;
    border: 1px solid var(--border);
    border-radius: 5px;
    font-family: 'proxima-nova', sans-serif;
    font-size: 11.5px;
    font-weight: 600;
    background: var(--white);
    color: var(--dark);
    transition: border-color var(--transition-fast);
  }
  .inplan-select:focus { border-color: var(--lime); outline: none; box-shadow: 0 0 0 2px rgba(165,197,32,0.12); }

  /* Info rij — drie kaders */
  .inplan-info-rij {
    display: flex;
    gap: 10px;
    padding: 10px 18px;
    border-bottom: 1px solid var(--border);
    background: var(--light-bg);
    flex-shrink: 0;
  }
  .ibox {
    flex: 1;
    border: 1px solid var(--border);
    border-left: 3px solid var(--dark);
    border-radius: 6px;
    padding: 9px 12px 8px;
    background: var(--white);
    min-width: 0;
    box-shadow: 0 1px 3px rgba(43,54,37,0.04), 0 4px 12px rgba(43,54,37,0.03);
    transition: box-shadow 0.2s;
  }
  .ibox:hover {
    box-shadow: 0 2px 6px rgba(43,54,37,0.07), 0 8px 20px rgba(43,54,37,0.05);
  }
  .ibox-tag {
    font-size: 7.5px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #fff;
    background: var(--dark);
    padding: 2px 7px 1px;
    border-radius: 3px;
    display: inline-block;
    margin-bottom: 5px;
    line-height: 1.4;
  }
  .ibox-tag-warn {
    background: #f5a623;
    color: #fff;
  }
  .ibox-huidig {
    border-left-color: #f5a623;
  }
  .ibox-hoofd {
    font-size: 13px;
    font-weight: 800;
    color: var(--dark);
    line-height: 1.3;
    letter-spacing: -0.01em;
  }
  .ibox-rij {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    color: var(--dark);
    line-height: 1.5;
    margin-top: 1px;
  }
  .ibox-rij a { color: var(--blue); text-decoration: none; font-weight: 600; }
  .ibox-rij a:hover { text-decoration: underline; }
  .ibox-ico { width: 11px; height: 11px; color: var(--lime); flex-shrink: 0; opacity: 0.8; }
  .ibox-label {
    font-size: 10px;
    color: var(--mid);
    font-weight: 600;
    min-width: 100px;
    flex-shrink: 0;
  }
  .ibox-val {
    font-size: 11.5px;
    font-weight: 700;
    color: var(--dark);
  }

  /* Agenda wrapper */
  .inplan-agenda-wrap {
    display: flex;
    flex-direction: column;
    min-height: 0;
    flex: 1;
    overflow: hidden;
  }
  .inplan-agenda-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 18px;
    flex-shrink: 0;
    border-bottom: 1px solid rgba(217,228,208,0.5);
  }
  .inplan-meta {
    font-weight: 500;
    color: var(--mid);
    font-size: 10px;
    margin-left: auto;
    white-space: nowrap;
  }

  .inplan-medewerker-chips {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
  }
  .inplan-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 13px 7px 10px;
    border: 1px solid var(--border);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    color: var(--dark);
    background: var(--white);
    cursor: pointer;
    transition: all var(--transition-fast);
    user-select: none;
  }
  .inplan-chip:hover { border-color: var(--dark); }
  .inplan-chip-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--border);
    transition: background var(--transition-fast);
    flex-shrink: 0;
  }
  .inplan-chip.actief {
    background: var(--dark);
    color: #fff;
    border-color: var(--dark);
  }
  .inplan-chip.actief .inplan-chip-dot { background: var(--lime); }

  /* Weeknavigatie */
  .inplan-week-nav {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
  }
  .inplan-week-btn {
    width: 26px;
    height: 26px;
    border: 1px solid var(--border);
    border-radius: 5px;
    background: var(--white);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-fast);
    padding: 0;
    flex-shrink: 0;
  }
  .inplan-week-btn:hover { border-color: var(--dark); background: var(--light-bg); }
  .inplan-week-btn svg { width: 12px; height: 12px; color: var(--dark); }
  .inplan-week-label {
    font-size: 12px;
    font-weight: 700;
    color: var(--dark);
    margin-right: 8px;
  }
  .inplan-vandaag-btn {
    padding: 3px 10px;
    border: 1px solid var(--border);
    border-radius: 5px;
    background: var(--white);
    font-family: 'proxima-nova', sans-serif;
    font-size: 11px;
    font-weight: 700;
    color: var(--dark);
    cursor: pointer;
    transition: all var(--transition-fast);
    margin-left: 4px;
  }
  .inplan-vandaag-btn:hover { border-color: var(--dark); background: var(--light-bg); }

  /* Dag-tabs */
  .inplan-dag-tabs {
    display: flex;
    gap: 3px;
  }
  .inplan-dag-tab {
    padding: 4px 10px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--white);
    cursor: pointer;
    text-align: center;
    transition: all var(--transition-fast);
    font-family: 'proxima-nova', sans-serif;
    display: flex;
    align-items: center;
    gap: 6px;
  }
  .inplan-dag-tab:hover { border-color: var(--dark); background: var(--light-bg); }
  .inplan-dag-tab.actief {
    background: var(--dark);
    color: #fff;
    border-color: var(--dark);
  }
  .inplan-dag-tab-dag {
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }
  .inplan-dag-tab.actief .inplan-dag-tab-dag { color: var(--lime); }
  .inplan-dag-tab-num {
    font-size: 13px;
    font-weight: 900;
  }
  .inplan-dag-tab-slots {
    font-size: 9px;
    font-weight: 600;
    color: var(--mid);
  }
  .inplan-dag-tab.actief .inplan-dag-tab-slots { color: rgba(255,255,255,0.5); }
  .inplan-dag-tab-slots.geen { color: var(--red); }
  .inplan-dag-tab.actief .inplan-dag-tab-slots.geen { color: rgba(220,53,69,0.7); }

  .inplan-sched {
    padding: 0;
    background: var(--white);
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: auto;
  }
  .inplan-sched-leeg,
  .inplan-sched-loading { color: var(--mid); font-size: 11.5px; text-align: center; padding: 40px 20px; flex: 1; display: flex; align-items: center; justify-content: center; }
  .inplan-sched-error { color: var(--red); font-size: 11.5px; text-align: center; padding: 40px 20px; flex: 1; display: flex; align-items: center; justify-content: center; }
  .inplan-sched-warn {
    background: rgba(245,166,35,0.1);
    border-bottom: 1px solid rgba(245,166,35,0.35);
    color: #a2640b;
    font-size: 11.5px;
    padding: 8px 12px;
    display: flex;
    align-items: center;
    gap: 7px;
    font-weight: 600;
  }
  .inplan-sched-warn svg { width: 13px; height: 13px; flex-shrink: 0; }

  /* Dagagenda: verticale tijdlijn, kolom per medewerker */
  .dag-agenda {
    display: flex;
  }
  .dag-agenda-tijden {
    position: sticky;
    left: 0;
    z-index: 3;
    background: var(--light-bg);
    border-right: 1px solid var(--border);
    flex-shrink: 0;
    width: 46px;
  }
  .dag-agenda-tijden-head {
    height: 32px;
    border-bottom: 1px solid var(--border);
  }
  .dag-agenda-footer {
    display: flex;
    align-items: center;
    height: 28px;
    background: var(--light-bg);
    border-top: 1px solid var(--border);
    flex-shrink: 0;
  }
  .dag-agenda-footer-tijd {
    width: 46px;
    font-size: 9.5px;
    font-weight: 700;
    color: var(--mid);
    text-align: right;
    padding-right: 6px;
    font-feature-settings: "tnum";
    border-right: 1px solid var(--border);
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }
  .dag-agenda-uur {
    height: 50px;
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    padding: 0 6px;
    font-size: 9.5px;
    font-weight: 700;
    color: var(--mid);
    border-bottom: 1px solid rgba(217,228,208,0.3);
    transform: translateY(-6px);
    font-feature-settings: "tnum";
  }
  .dag-agenda-kolommen {
    display: flex;
    flex: 1;
    min-width: 0;
  }
  .dag-agenda-kolom {
    flex: 1;
    min-width: 90px;
    border-right: 1px solid rgba(217,228,208,0.4);
  }
  .dag-agenda-kolom:last-child { border-right: none; }
  .dag-agenda-kolom-head {
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    border-bottom: 1px solid var(--border);
    background: var(--light-bg);
    position: sticky;
    top: 0;
    z-index: 2;
    padding: 0 4px;
  }
  .dag-agenda-init {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--dark);
    color: var(--lime);
    font-size: 8px;
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }
  .dag-agenda-naam {
    font-size: 11px;
    font-weight: 700;
    color: var(--dark);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .dag-agenda-body {
    position: relative;
  }
  .dag-agenda-uurlijn {
    height: 50px;
    border-bottom: 1px solid rgba(217,228,208,0.3);
    position: relative;
    pointer-events: none;
  }
  .dag-agenda-uurlijn-half {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    border-top: 1px dashed rgba(217,228,208,0.35);
  }
  .dag-agenda-slot {
    position: absolute;
    left: 2px;
    right: 2px;
    border-radius: 3px;
    cursor: pointer;
    border: none;
    padding: 0;
    font: inherit;
    transition: background 0.1s, box-shadow 0.1s;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9.5px;
    font-weight: 700;
    color: transparent;
    z-index: 1;
  }
  .dag-agenda-slot.vrij {
    background: rgba(165,197,32,0.1);
    border: 1px solid rgba(165,197,32,0.18);
  }
  .dag-agenda-slot.vrij:hover {
    background: rgba(165,197,32,0.25);
    border-color: var(--lime);
    color: #5e6f11;
  }
  .dag-agenda-slot.bezet {
    background: var(--border);
    cursor: not-allowed;
  }
  .dag-agenda-slot.gekozen {
    background: var(--lime) !important;
    border: 2px solid var(--dark) !important;
    color: var(--dark);
    z-index: 2;
  }

  .inplan-sched-legenda {
    display: flex;
    gap: 14px;
    margin-left: auto;
    font-size: 10px;
    color: var(--mid);
    font-weight: 600;
    background: var(--light-bg);
    flex-shrink: 0;
  }
  .inplan-sched-legenda-item { display: flex; align-items: center; gap: 4px; }
  .inplan-sched-legenda-kleur { width: 12px; height: 8px; border-radius: 2px; flex-shrink: 0; }
  .inplan-sched-legenda-kleur.vrij { background: rgba(165,197,32,0.1); border: 1px solid rgba(165,197,32,0.25); }
  .inplan-sched-legenda-kleur.bezet { background: var(--border); }
  .inplan-sched-legenda-kleur.gekozen { background: var(--lime); border: 1px solid var(--dark); }

  /* Gekozen-readout */
  .inplan-keuze-leeg {
    font-size: 11px;
    color: var(--mid);
    font-style: italic;
  }

  /* Modal header met icoon */
  .afsp-modal { max-width: 420px; }
  .afsp-modal-header { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 20px; }
  .afsp-modal-icon { width: 40px; height: 40px; border-radius: 10px; background: rgba(165,197,32,0.12); color: var(--green); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
  .afsp-modal-icon svg { width: 20px; height: 20px; }
  .afsp-modal-icon-send { background: rgba(28,126,172,0.1); color: var(--blue); }
  .afsp-modal-header h3 { font-size: 17px; font-weight: 700; color: var(--dark); margin: 0; }
  .afsp-modal-sub { font-size: 13px; font-weight: 600; color: var(--dark); margin-top: 2px; }
  .afsp-modal-email { font-size: 12px; color: var(--mid); margin-top: 1px; }
  .afsp-fout { display: none; color: var(--red); font-size: 13px; margin-top: 8px; padding: 8px 12px; background: rgba(220,53,69,0.06); border-radius: 6px; border: 1px solid rgba(220,53,69,0.15); }

  .drawer-close-btn { background: none; border: none; cursor: pointer; padding: 8px; margin: -8px; color: rgba(255,255,255,0.5); transition: color var(--transition-fast); }
  .drawer-close-btn:hover { color: #fff; }

  /* ── Afspraak detail drawer — editorial redesign ───────────────────────── */
  #afspraak-detail-body { padding: 0 !important; }

  .dd-hero {
    padding: 22px 24px 24px;
    border-bottom: 1px solid var(--border);
    position: relative;
  }
  .dd-hero-gepland { background: linear-gradient(180deg, rgba(165,197,32,0.08) 0%, rgba(165,197,32,0) 100%); }
  .dd-hero-plannen { background: linear-gradient(180deg, rgba(245,166,35,0.06) 0%, rgba(245,166,35,0) 100%); }

  .dd-hero-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
  }
  .dd-hero-status {
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--green);
    padding: 4px 9px;
    border-radius: 4px;
    background: rgba(122,156,88,0.12);
  }

  .dd-hero-datum {
    font-size: 13px;
    font-weight: 700;
    color: var(--mid);
    text-transform: capitalize;
    letter-spacing: 0.01em;
    margin-bottom: 2px;
  }
  .dd-hero-tijd {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 14px;
  }
  .dd-hero-tijd-cijfer {
    font-size: 52px;
    font-weight: 900;
    color: var(--dark);
    letter-spacing: -0.04em;
    line-height: 0.9;
    font-feature-settings: "tnum";
    position: relative;
  }
  .dd-hero-tijd-cijfer::after {
    content: '';
    position: absolute;
    left: -3px;
    right: -3px;
    bottom: 6px;
    height: 10px;
    background: var(--lime);
    z-index: -1;
    opacity: 0.5;
  }
  .dd-hero-tijd-duur {
    font-size: 12px;
    font-weight: 700;
    color: var(--mid);
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }
  .dd-hero-medewerker {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 700;
    color: var(--dark);
    margin-bottom: 18px;
  }
  .dd-hero-medewerker svg { width: 14px; height: 14px; color: var(--mid); }

  .dd-hero-te-plannen-titel {
    font-size: 22px;
    font-weight: 900;
    color: var(--dark);
    letter-spacing: -0.015em;
    margin-bottom: 4px;
    margin-top: 4px;
  }
  .dd-hero-te-plannen-sub {
    font-size: 12.5px;
    color: var(--mid);
    margin-bottom: 18px;
  }

  .dd-hero-acties { display: flex; gap: 8px; flex-wrap: wrap; }
  .dd-hero-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 18px;
    background: var(--dark);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-family: 'proxima-nova', sans-serif;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: transform var(--transition-fast), background var(--transition-fast), box-shadow var(--transition-fast);
  }
  .dd-hero-btn:hover { background: #1e2819; transform: translateY(-1px); box-shadow: 0 8px 18px rgba(44,56,38,0.22); }
  .dd-hero-btn svg { width: 14px; height: 14px; stroke: var(--lime); }
  .dd-hero-btn-terug {
    background: var(--white);
    color: var(--dark);
    border: 1px solid var(--border);
  }
  .dd-hero-btn-terug:hover { background: var(--light-bg); border-color: var(--dark); box-shadow: 0 4px 12px rgba(44,56,38,0.08); }
  .dd-hero-btn-terug svg { stroke: var(--dark); }

  .dd-sectie {
    padding: 18px 24px;
    border-top: 1px solid var(--border);
  }
  .dd-kicker {
    font-size: 9.5px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--mid);
    margin-bottom: 10px;
  }

  .dd-stack { display: flex; flex-direction: column; gap: 9px; }
  .dd-kv {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: var(--dark);
    font-weight: 500;
  }
  .dd-kv svg {
    width: 14px;
    height: 14px;
    color: var(--mid);
    flex-shrink: 0;
  }
  .dd-kv a { color: var(--blue); text-decoration: none; font-weight: 600; }
  .dd-kv a:hover { text-decoration: underline; }

  .dd-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 18px;
  }
  .dd-grid-label {
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--mid);
    margin-bottom: 3px;
  }
  .dd-grid-waarde {
    font-size: 13.5px;
    color: var(--dark);
    font-weight: 700;
  }

  .dd-leeg {
    font-size: 12px;
    color: var(--mid);
    font-style: italic;
  }
  .dd-opmerking {
    font-size: 13px;
    color: var(--dark);
    line-height: 1.55;
    padding: 12px 14px;
    background: var(--light-bg);
    border-radius: 8px;
    border: 1px solid rgba(217,228,208,0.6);
    white-space: pre-wrap;
  }

  /* Uitnodigingsmodal */
  .uitnodig-modal {
    width: calc(100vw - 80px);
    max-width: 720px;
    padding: 0 !important;
    border-radius: 14px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: var(--white);
    box-shadow: 0 8px 30px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.06);
  }
  .uitnodig-form {
    padding: 16px 18px;
  }
  .uitnodig-kolommen {
    display: flex;
    gap: 18px;
    align-items: flex-start;
  }
  .uitnodig-kolom-links {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 280px;
    flex-shrink: 0;
  }
  .uitnodig-kolom-rechts {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
  }
  .uitnodig-veld {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  .uitnodig-tijdblok-add { font-size: 11px !important; padding: 3px 8px !important; margin-top: 4px; align-self: flex-start; }

  /* Mini-kalender */
  .uitnodig-kalender {
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 10px;
    background: var(--white);
  }
  .uitnodig-kal-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
  }
  .uitnodig-kal-maand {
    font-size: 13px;
    font-weight: 700;
    color: var(--dark);
  }
  .uitnodig-kal-weekdagen {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--mid);
    margin-bottom: 4px;
  }
  .uitnodig-kal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
  }
  .uitnodig-kal-dag {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 600;
    color: var(--dark);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.1s;
    border: none;
    background: none;
    padding: 0;
    font-family: 'proxima-nova', sans-serif;
  }
  .uitnodig-kal-dag:hover { background: var(--cream); }
  .uitnodig-kal-dag.leeg { visibility: hidden; }
  .uitnodig-kal-dag.verleden { color: var(--border); cursor: default; }
  .uitnodig-kal-dag.verleden:hover { background: none; }
  .uitnodig-kal-dag.weekend { color: var(--mid); opacity: 0.4; cursor: default; }
  .uitnodig-kal-dag.weekend:hover { background: none; }
  .uitnodig-kal-dag.start {
    background: var(--dark);
    color: #fff;
    border-radius: 6px 2px 2px 6px;
  }
  .uitnodig-kal-dag.eind {
    background: var(--dark);
    color: #fff;
    border-radius: 2px 6px 6px 2px;
  }
  .uitnodig-kal-dag.start.eind { border-radius: 6px; }
  .uitnodig-kal-dag.bereik {
    background: rgba(165,197,32,0.15);
    color: var(--dark);
    border-radius: 2px;
  }
  .uitnodig-periode-tekst {
    font-size: 11px;
    color: var(--mid);
    margin-top: 4px;
    font-style: italic;
  }
  .uitnodig-periode-tekst.actief {
    color: var(--dark);
    font-weight: 600;
    font-style: normal;
  }

  /* Slots teller */
  .uitnodig-slots-teller {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: var(--cream);
    border: 1px solid var(--border);
    border-left: 3px solid var(--lime);
    border-radius: 6px;
    font-size: 12px;
    font-weight: 700;
    color: var(--dark);
  }
  .uitnodig-tijdblok { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
  .uitnodig-tijdblok input[type="time"] {
    padding: 5px 8px;
    border: 1px solid var(--border);
    border-radius: 5px;
    font-size: 11.5px;
    font-family: 'proxima-nova', sans-serif;
    font-weight: 600;
    color: var(--dark);
    width: 100px;
    box-sizing: border-box;
  }
  .uitnodig-tijdblok input[type="time"]:focus { border-color: var(--lime); outline: none; box-shadow: 0 0 0 2px rgba(165,197,32,0.12); }
  .uitnodig-tijdblok span { font-size: 11px; color: var(--mid); }
  .btn-tijdblok-verwijder { background: none; border: none; cursor: pointer; color: var(--mid); font-size: 16px; padding: 2px 4px; line-height: 1; }
  .btn-tijdblok-verwijder:hover { color: var(--red); }
  .uitnodig-medewerkers-lijst { display: flex; flex-direction: column; gap: 4px; }
  .uitnodig-medewerker-optie {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    padding: 6px 10px;
    border: 1px solid var(--border);
    border-radius: 6px;
    transition: all 0.12s;
  }
  .uitnodig-medewerker-optie:hover { border-color: var(--dark); background: var(--light-bg); }
  .uitnodig-medewerker-optie input[type="checkbox"] { accent-color: var(--lime); }
  .uitnodiging-badge { display: inline-flex; align-items: center; font-size: 11px; font-weight: 600; color: #1C7EAC; background: #e8f4f8; padding: 4px 10px; border-radius: 4px; }

  /* Toast animaties */
  @keyframes toastIn { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: translateX(0); } }
  @keyframes toastUit { from { opacity: 1; transform: translateX(0); } to { opacity: 0; transform: translateX(40px); } }

  /* Saved-bevestiging: zie shared.css */

/* ╔══════════════════════════════════════════════════════════════════╗
   ║  HUB · GLASS REDESIGN OVERRIDES (V1 Frosted Light)                ║
   ║  Laadt NA hub.css. Overschrijft alleen het frame (sidebar,        ║
   ║  topbar, greeting, panelen, knoppen). Modals/formulieren blijven  ║
   ║  intact zodat alle bestaande functionaliteit werkt.               ║
   ╚══════════════════════════════════════════════════════════════════╝ */

:root {
  --glass-bg: rgba(255,255,255,0.55);
  --glass-bg-strong: rgba(255,255,255,0.72);
  --glass-border: rgba(255,255,255,0.7);
  --glass-inner: inset 0 1px 0 rgba(255,255,255,0.9), inset 0 0 0 1px rgba(255,255,255,0.35);
  --shadow-glass: 0 1px 2px rgba(43,54,37,0.04), 0 12px 40px rgba(43,54,37,0.08), 0 2px 8px rgba(43,54,37,0.04);
}

/* ═══ Aurora mesh achtergrond ══════════════════════════════════════ */
body {
  background: transparent;
}
body::before {
  content: '';
  position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background: linear-gradient(180deg, #F6F9F0 0%, #EEF3E6 55%, #E8EEDE 100%);
}
body::after {
  content: '';
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  opacity: 0.32; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}

/* ═══ Sidebar → frosted light glass ════════════════════════════════ */
.sidebar {
  background: linear-gradient(180deg, rgba(255,255,255,0.58) 0%, rgba(238,243,230,0.5) 100%);
  backdrop-filter: blur(26px) saturate(1.4);
  -webkit-backdrop-filter: blur(26px) saturate(1.4);
  border-right: 1px solid rgba(255,255,255,0.6);
  box-shadow: 1px 0 0 rgba(43,54,37,0.04), 12px 0 40px rgba(43,54,37,0.05);
}
.sidebar::after { background: none; }

.sidebar-logo {
  background: transparent;
  border-bottom: 1px solid rgba(43,54,37,0.06);
}
.sidebar-logo::after { background: linear-gradient(90deg, transparent, rgba(43,54,37,0.08), transparent); }
/* Logo-swap: licht logo op licht glas (alleen voor het volledige logo) */
.sidebar-logo .sidebar-logo-full {
  content: url('../../logo/gruno-vastgoed-logo-full-color-rgb.svg');
  filter: drop-shadow(0 1px 2px rgba(43,54,37,0.08));
}
.sidebar-logo .sidebar-logo-mark {
  filter: drop-shadow(0 2px 6px rgba(43,54,37,0.15));
}

.nav-label {
  color: rgba(43,54,37,0.42);
}
.nav-item {
  color: rgba(43,54,37,0.72);
  border-left: 0;
  margin: 2px 10px;
  border-radius: 11px;
  padding: 10px 14px;
}
.nav-item:hover {
  color: var(--dark);
  background: rgba(255,255,255,0.55);
}
.nav-item.active {
  color: var(--dark);
  background: linear-gradient(135deg, rgba(255,255,255,0.85) 0%, rgba(255,255,255,0.55) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.95), 0 2px 10px rgba(43,54,37,0.06), 0 0 0 1px rgba(165,197,32,0.25);
  border-left: 0;
  position: relative;
}
.nav-item.active::before {
  content: '';
  position: absolute; left: -4px; top: 22%; bottom: 22%; width: 3px; border-radius: 2px;
  background: linear-gradient(180deg, var(--lime), var(--green));
  box-shadow: 0 0 12px rgba(165,197,32,0.7);
}
.nav-item .nav-icon { opacity: 0.75; }
.nav-item:hover .nav-icon { opacity: 1; color: var(--dark); }
.nav-item.active .nav-icon { opacity: 1; color: var(--dark); }

/* Admin collapsible submenu */
.nav-group-header {
  color: rgba(43,54,37,0.72);
  border-left: 0;
  margin: 2px 10px;
  border-radius: 11px;
  padding: 10px 14px;
}
.nav-group-header:hover {
  color: var(--dark);
  background: rgba(255,255,255,0.55);
}
.nav-group-header.active {
  color: var(--dark);
  background: linear-gradient(135deg, rgba(255,255,255,0.85) 0%, rgba(255,255,255,0.55) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.95), 0 2px 10px rgba(43,54,37,0.06), 0 0 0 1px rgba(165,197,32,0.25);
  border-left: 0;
}

/* Sidebar footer */
.sidebar-footer {
  background: transparent;
  border-top: 1px solid rgba(43,54,37,0.06);
}
.sidebar-footer::before { background: linear-gradient(90deg, transparent, rgba(43,54,37,0.08), transparent); }
.user-pill {
  background: rgba(255,255,255,0.6);
  border: 1px solid rgba(255,255,255,0.7);
  box-shadow: var(--glass-inner);
}
.user-pill:hover { background: rgba(255,255,255,0.75); }
.user-name { color: var(--dark); }
.user-role { color: var(--mid); }
.user-av {
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.6), 0 4px 12px rgba(165,197,32,0.3);
}

.logout-btn {
  background: rgba(255,255,255,0.5);
  color: rgba(43,54,37,0.7);
  border: 1px solid rgba(43,54,37,0.08);
}
.logout-btn:hover {
  background: rgba(255,255,255,0.85);
  color: var(--dark);
  border-color: rgba(43,54,37,0.12);
}

/* ═══ Topbar → frosted glass ═══════════════════════════════════════ */
.topbar {
  background: rgba(255,255,255,0.55);
  backdrop-filter: blur(22px) saturate(1.5);
  -webkit-backdrop-filter: blur(22px) saturate(1.5);
  border-bottom: 1px solid rgba(255,255,255,0.6);
  box-shadow: 0 1px 0 rgba(43,54,37,0.04);
}

/* ═══ Dashboard greeting → glass card met aurora accent ═══════════ */
.greeting {
  background: linear-gradient(135deg, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0.45) 100%);
  backdrop-filter: blur(22px) saturate(1.4);
  -webkit-backdrop-filter: blur(22px) saturate(1.4);
  border: 1px solid rgba(255,255,255,0.7);
  border-radius: 22px;
  box-shadow: var(--shadow-glass), var(--glass-inner);
}
.greeting::before {
  top: auto; left: auto; right: -120px; bottom: auto; top: -80px;
  width: 360px; height: 360px;
  background: radial-gradient(closest-side, rgba(165,197,32,0.55), transparent 70%);
  filter: blur(10px);
}
.greeting::after { display: none; }
.greeting-text h2 {
  color: var(--dark);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.greeting-text p {
  color: var(--mid);
  font-size: 14px;
  line-height: 1.55;
  margin-top: 6px;
  max-width: 560px;
}

/* ═══ Panels & cards → glass ═══════════════════════════════════════ */
.panel {
  background: linear-gradient(135deg, rgba(255,255,255,0.65) 0%, rgba(255,255,255,0.4) 100%);
  backdrop-filter: blur(20px) saturate(1.3);
  -webkit-backdrop-filter: blur(20px) saturate(1.3);
  border: 1px solid rgba(255,255,255,0.65);
  border-radius: 18px;
  box-shadow: var(--shadow-glass), var(--glass-inner);
}
.panel:hover { box-shadow: var(--shadow-glass), var(--glass-inner), 0 16px 48px rgba(43,54,37,0.1); }
.panel-head {
  background: transparent;
  border-bottom: 1px solid rgba(43,54,37,0.06);
}

/* ═══ User-list rows (beheer) ══════════════════════════════════════ */
.user-row {
  border-bottom: 1px solid rgba(43,54,37,0.06);
}
.user-row:hover { background: rgba(255,255,255,0.55); }
.user-row:active { background: rgba(255,255,255,0.7); }

/* ═══ Knoppen ══════════════════════════════════════════════════════ */
.btn { border-radius: 11px; }
/* Primair = donkergroen Gruno-anchor met subtiele lime-gleam (glass top)*/
/* Lime blijft accent-only, niet als primair vlak                        */
.btn-primary {
  background: linear-gradient(180deg, #3a4830 0%, #2b3625 100%);
  color: #fff;
  box-shadow:
    inset 0 1px 0 rgba(165,197,32,0.32),
    inset 0 0 0 1px rgba(255,255,255,0.06),
    0 2px 6px rgba(43,54,37,0.18),
    0 6px 18px rgba(43,54,37,0.18);
}
.btn-primary:hover {
  background: linear-gradient(180deg, #475635 0%, #323e2b 100%);
  box-shadow:
    inset 0 1px 0 rgba(165,197,32,0.45),
    inset 0 0 0 1px rgba(255,255,255,0.1),
    0 4px 10px rgba(43,54,37,0.22),
    0 8px 22px rgba(43,54,37,0.2);
  transform: translateY(-1px);
}
.btn-secondary {
  background: rgba(255,255,255,0.6);
  border: 1px solid rgba(255,255,255,0.8);
  box-shadow: var(--glass-inner);
}
.btn-secondary:hover {
  background: rgba(255,255,255,0.85);
  border-color: rgba(255,255,255,0.9);
}

/* ═══ Afspraken inplannen view ═════════════════════════════════════ */
/* Hero (te plannen) */
.afsp-hero {
  background: linear-gradient(135deg, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0.45) 100%);
  backdrop-filter: blur(22px) saturate(1.4);
  -webkit-backdrop-filter: blur(22px) saturate(1.4);
  border: 1px solid rgba(255,255,255,0.7);
  border-radius: 22px;
  box-shadow: var(--shadow-glass), var(--glass-inner);
  position: relative;
  overflow: hidden;
}
.afsp-hero::before {
  content: '';
  position: absolute; right: -120px; top: -80px; width: 340px; height: 340px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(165,197,32,0.5), transparent 70%);
  filter: blur(10px); pointer-events: none;
}
.afsp-hero-cijfer {
  background: linear-gradient(180deg, var(--dark) 0%, #4a5b39 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: none;
}
.afsp-hero-cijfer::after { display: none; }

.afsp-kaart {
  background: rgba(255,255,255,0.6);
  border: 1px solid rgba(255,255,255,0.75);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 2px 8px rgba(43,54,37,0.04);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  padding: 0 !important;            /* compact rij/detail beheren eigen padding */
  overflow: hidden;
  transition: background 0.15s, box-shadow 0.2s, border-color 0.15s;
}
.afsp-kaart:hover {
  background: rgba(255,255,255,0.75);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.95), 0 6px 20px rgba(43,54,37,0.1);
}
.afsp-kaart.open {
  background: rgba(255,255,255,0.78);
  border-color: rgba(255,255,255,0.9);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.95), 0 8px 28px rgba(43,54,37,0.12);
}

/* ─── Compacte rij — altijd zichtbaar ─────────────────────────────── */
.afsp-kaart-rij {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 16px;
  cursor: pointer;
  user-select: none;
  transition: background 0.15s;
}
.afsp-kaart-rij:hover {
  background: rgba(255,255,255,0.35);
}
.afsp-kaart-rij:focus-visible {
  outline: 2px solid rgba(165,197,32,0.5);
  outline-offset: -2px;
}
.afsp-kaart-rij-hoofd {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
}
.afsp-kaart-rij-tekst {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  flex: 1;
}
.afsp-kaart-rij-adres {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--dark);
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}
.afsp-kaart-rij-meta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--mid);
  letter-spacing: 0;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.afsp-kaart-rij-meta svg {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  opacity: 0.7;
}
.afsp-kaart-rij-meta strong {
  color: var(--dark);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.afsp-kaart-rij-adres .afsp-unit {
  color: var(--mid);
  font-weight: 600;
}
.afsp-kaart-plaats {
  color: var(--mid);
  font-weight: 500;
  font-size: 13.5px;
}
.afsp-kaart-rij-acties {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
/* Wacht-pill in de rij iets compacter */
.afsp-kaart-rij .afsp-wacht {
  padding: 4px 10px;
  font-size: 10.5px;
  font-variant-numeric: tabular-nums;
}
.afsp-kaart-chevron {
  width: 16px;
  height: 16px;
  color: var(--mid);
  transition: transform 0.18s cubic-bezier(0.16, 1, 0.3, 1), color 0.15s;
  flex-shrink: 0;
}
.afsp-kaart-rij:hover .afsp-kaart-chevron { color: var(--dark); }
.afsp-kaart.open .afsp-kaart-chevron {
  transform: rotate(180deg);
  color: var(--dark);
}

/* ─── Detail-blok: smooth uitklap (grid-rows trick) ───────────────── */
.afsp-kaart-detail {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}
.afsp-kaart.open .afsp-kaart-detail {
  grid-template-rows: 1fr;
}
.afsp-kaart-detail-inner {
  overflow: hidden;
  min-height: 0;
}

/* ─── Detail-rij: event-pill links + acties rechts ────────────────── */
.afsp-detail-rij {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 16px;
  border-top: 1px dashed rgba(43,54,37,0.1);
  flex-wrap: wrap;
}

/* Event-pill: datum-tegel + "Beschikbaar vanaf" + volle datum als één geheel */
.afsp-detail-event {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px 4px 4px;
  background: linear-gradient(135deg, rgba(255,255,255,0.65), rgba(238,243,230,0.45));
  border: 1px solid rgba(255,255,255,0.85);
  border-radius: 11px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.95), 0 1px 3px rgba(43,54,37,0.04);
  min-width: 0;
}

.afsp-detail-datum {
  flex-shrink: 0;
  width: 36px;
  text-align: center;
  background: rgba(255,255,255,0.55);
  border: 1px solid rgba(255,255,255,0.7);
  border-radius: 8px;
  padding: 4px 0 3px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.85);
}
.afsp-detail-datum.afsp-detail-datum-leeg {
  background: rgba(43,54,37,0.04);
  border-color: rgba(43,54,37,0.08);
  box-shadow: none;
}
.afsp-detail-datum-dag {
  font-size: 14px;
  font-weight: 800;
  color: var(--dark);
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.afsp-detail-datum-maand {
  font-size: 8.5px;
  font-weight: 800;
  color: var(--mid);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-top: 2px;
}

.afsp-detail-event-tekst {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.afsp-detail-label {
  font-size: 8.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--mid);
  line-height: 1.2;
}
.afsp-detail-datum-vol {
  font-size: 12px;
  font-weight: 700;
  color: var(--dark);
  letter-spacing: -0.01em;
  line-height: 1.2;
  text-transform: capitalize;
}

/* Acties links, event-pill rechts (margin-left: auto) */
.afsp-detail-acties {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.afsp-detail-rij > .afsp-detail-event {
  margin-left: auto;
}

/* Niveau 2a — Uitnodigen: outline-pill met lime accent (nieuwe actie) */
.afsp-btn-uitnodig {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 14px;
  border: 1px solid rgba(165,197,32,0.55);
  border-radius: 10px;
  background: rgba(255,255,255,0.78);
  color: var(--dark);
  font-family: 'proxima-nova', sans-serif;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 1px 3px rgba(43,54,37,0.04);
  transition: all 0.15s;
}
.afsp-btn-uitnodig:hover {
  background: rgba(255,255,255,0.95);
  border-color: var(--lime);
  transform: translateY(-1px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.95), 0 4px 10px rgba(165,197,32,0.18);
}
.afsp-btn-uitnodig svg { width: 12px; height: 12px; stroke: #5e8042; }

/* Niveau 2b — Opnieuw versturen: outline-pill met blue accent (re-actie) */
.afsp-btn-hervestuur {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 14px;
  border: 1px solid rgba(28,126,172,0.45);
  border-radius: 10px;
  background: rgba(255,255,255,0.78);
  color: var(--dark);
  font-family: 'proxima-nova', sans-serif;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 1px 3px rgba(43,54,37,0.04);
  transition: all 0.15s;
}
.afsp-btn-hervestuur:hover {
  background: rgba(255,255,255,0.95);
  border-color: var(--blue);
  transform: translateY(-1px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.95), 0 4px 10px rgba(28,126,172,0.18);
}
.afsp-btn-hervestuur svg { width: 12px; height: 12px; stroke: var(--blue); }

/* Niveau 3 — Bekijken: neutrale glass-pill, zelfde grootte als secundair */
.afsp-btn-bekijk {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 14px;
  border: 1px solid rgba(43,54,37,0.1);
  background: rgba(255,255,255,0.6);
  color: var(--dark);
  font-family: 'proxima-nova', sans-serif;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  border-radius: 10px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.85), 0 1px 3px rgba(43,54,37,0.04);
  transition: all 0.15s;
}
.afsp-btn-bekijk:hover {
  background: rgba(255,255,255,0.85);
  border-color: rgba(43,54,37,0.18);
  transform: translateY(-1px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 4px 10px rgba(43,54,37,0.08);
}
.afsp-btn-bekijk svg { width: 12px; height: 12px; color: var(--mid); }

/* ╔══════════════════════════════════════════════════════════════════╗
   ║  AFSPRAAK DETAIL DRAWER — Volledig bekijken (liquid glass)        ║
   ╚══════════════════════════════════════════════════════════════════╝ */

/* Drawer-body transparant — laat de glassdrawer-achtergrond door */
#afspraak-detail-body {
  padding: 16px 0 24px !important;
  background: transparent;
}

/* ─── HERO sectie ─────────────────────────────────────────────────── */
.dd-hero {
  position: relative;
  background: linear-gradient(135deg, rgba(255,255,255,0.62), rgba(238,243,230,0.42)) !important;
  border: 1px solid rgba(255,255,255,0.75) !important;
  border-radius: 18px !important;
  padding: 18px 20px 20px !important;
  margin: 0 16px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.95), 0 2px 10px rgba(43,54,37,0.06);
  overflow: hidden;
}
.dd-hero::before {
  content: '';
  position: absolute;
  right: -70px; top: -70px;
  width: 220px; height: 220px;
  border-radius: 50%;
  filter: blur(8px);
  pointer-events: none;
  z-index: 0;
}
.dd-hero-gepland::before {
  background: radial-gradient(closest-side, rgba(165,197,32,0.5), transparent 70%);
}
.dd-hero-plannen::before {
  background: radial-gradient(closest-side, rgba(245,166,35,0.42), transparent 70%);
}
.dd-hero-gepland { background: linear-gradient(135deg, rgba(255,255,255,0.62), rgba(238,243,230,0.42)) !important; }
.dd-hero-plannen { background: linear-gradient(135deg, rgba(255,255,255,0.62), rgba(254,247,232,0.42)) !important; }

.dd-hero > * { position: relative; z-index: 1; }

/* Status-pill (Ingepland) */
.dd-hero-status {
  background: linear-gradient(135deg, rgba(165,197,32,0.18), rgba(122,156,88,0.08)) !important;
  color: #3f5b28 !important;
  border: 1px solid rgba(165,197,32,0.4);
  border-radius: 999px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.55);
  padding: 4px 10px !important;
  font-size: 9.5px !important;
}

/* Hero-row layout: type-chip + verstuurd-badge gestapeld links, wacht-pill rechts */
.dd-hero-row {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 10px !important;
}
.dd-hero-row-links {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

/* Datum bovenin */
.dd-hero-datum { color: var(--mid); }

/* Big tijd-cijfer met lime-glow underline */
.dd-hero-tijd-cijfer {
  font-size: 56px !important;
  letter-spacing: -0.04em;
  background: linear-gradient(180deg, var(--dark) 0%, #4a5b39 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
}
.dd-hero-tijd-cijfer::after {
  background: linear-gradient(90deg, var(--lime), var(--green)) !important;
  border-radius: 4px;
  bottom: 4px !important;
  height: 8px !important;
  opacity: 0.55 !important;
}
.dd-hero-tijd-duur {
  background: rgba(255,255,255,0.7);
  border: 1px solid rgba(255,255,255,0.85);
  border-radius: 6px;
  padding: 3px 8px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.85);
}

/* Medewerker rij */
.dd-hero-medewerker {
  background: rgba(255,255,255,0.55);
  border: 1px solid rgba(255,255,255,0.7);
  border-radius: 10px;
  padding: 8px 12px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.85);
}

/* Te-plannen titel + sub */
.dd-hero-te-plannen-titel { color: var(--dark); }
.dd-hero-te-plannen-sub { color: var(--mid); }

/* Action buttons in hero — drie hiërarchische varianten */
.dd-hero-acties { gap: 8px !important; }

/* Default dd-hero-btn — gebruiken we voor "primary" actie (Type inplannen) */
.dd-hero-btn {
  background: linear-gradient(180deg, #3a4830 0%, #2b3625 100%) !important;
  color: #fff !important;
  border-radius: 11px !important;
  padding: 10px 16px !important;
  border: 1px solid transparent !important;
  box-shadow:
    inset 0 1px 0 rgba(165,197,32,0.32),
    inset 0 0 0 1px rgba(255,255,255,0.06),
    0 2px 6px rgba(43,54,37,0.18) !important;
  transition: all 0.15s !important;
}
.dd-hero-btn:hover {
  background: linear-gradient(180deg, #475635 0%, #323e2b 100%) !important;
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(165,197,32,0.45),
    inset 0 0 0 1px rgba(255,255,255,0.1),
    0 6px 18px rgba(43,54,37,0.22) !important;
}
.dd-hero-btn svg { stroke: var(--lime) !important; }

/* Variant: Medewerker wijzigen → outline lime */
.dd-hero-btn.dd-hero-btn-mw {
  background: rgba(255,255,255,0.78) !important;
  color: var(--dark) !important;
  border: 1px solid rgba(165,197,32,0.5) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 1px 3px rgba(43,54,37,0.04) !important;
}
.dd-hero-btn.dd-hero-btn-mw:hover {
  background: rgba(255,255,255,0.95) !important;
  border-color: var(--lime) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.95), 0 4px 10px rgba(165,197,32,0.18) !important;
}
.dd-hero-btn.dd-hero-btn-mw svg { stroke: #5e8042 !important; }

/* Variant: Verplaatsen → outline blue */
.dd-hero-btn.dd-hero-btn-verplaats {
  background: rgba(255,255,255,0.78) !important;
  color: var(--dark) !important;
  border: 1px solid rgba(28,126,172,0.45) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 1px 3px rgba(43,54,37,0.04) !important;
}
.dd-hero-btn.dd-hero-btn-verplaats:hover {
  background: rgba(255,255,255,0.95) !important;
  border-color: var(--blue) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.95), 0 4px 10px rgba(28,126,172,0.18) !important;
}
.dd-hero-btn.dd-hero-btn-verplaats svg { stroke: var(--blue) !important; }

/* Variant: Opnieuw inplannen (terug) → subtiel rood (destructive) */
.dd-hero-btn.dd-hero-btn-terug {
  background: rgba(255,255,255,0.78) !important;
  color: var(--dark) !important;
  border: 1px solid rgba(220,53,69,0.35) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 1px 3px rgba(43,54,37,0.04) !important;
}
.dd-hero-btn.dd-hero-btn-terug:hover {
  background: rgba(255,255,255,0.95) !important;
  border-color: rgba(220,53,69,0.6) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.95), 0 4px 10px rgba(220,53,69,0.16) !important;
}
.dd-hero-btn.dd-hero-btn-terug svg { stroke: #c54a3c !important; }

/* Variant: Type inplannen — vol primary, gelijk gewicht aan andere acties */
.dd-hero-btn.dd-hero-btn-plannen {
  /* laat natuurlijke breedte - naast uitnodig/hervestuur knoppen */
}

/* Variant: Uitnodigen (te-plannen state) → outline lime */
.dd-hero-btn.dd-hero-btn-uitnodig {
  background: rgba(255,255,255,0.78) !important;
  color: var(--dark) !important;
  border: 1px solid rgba(165,197,32,0.5) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 1px 3px rgba(43,54,37,0.04) !important;
}
.dd-hero-btn.dd-hero-btn-uitnodig:hover {
  background: rgba(255,255,255,0.95) !important;
  border-color: var(--lime) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.95), 0 4px 10px rgba(165,197,32,0.18) !important;
}
.dd-hero-btn.dd-hero-btn-uitnodig svg { stroke: #5e8042 !important; }

/* Variant: Opnieuw versturen → outline blue */
.dd-hero-btn.dd-hero-btn-hervestuur {
  background: rgba(255,255,255,0.78) !important;
  color: var(--dark) !important;
  border: 1px solid rgba(28,126,172,0.45) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 1px 3px rgba(43,54,37,0.04) !important;
}
.dd-hero-btn.dd-hero-btn-hervestuur:hover {
  background: rgba(255,255,255,0.95) !important;
  border-color: var(--blue) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.95), 0 4px 10px rgba(28,126,172,0.18) !important;
}
.dd-hero-btn.dd-hero-btn-hervestuur svg { stroke: var(--blue) !important; }

/* ─── SECTIES (Locatie / Huurder / Details / Opmerkingen) ──────── */
.dd-sectie {
  background: linear-gradient(135deg, rgba(255,255,255,0.5), rgba(255,255,255,0.32)) !important;
  border: 1px solid rgba(255,255,255,0.65) !important;
  border-top: 1px solid rgba(255,255,255,0.65) !important;
  border-radius: 16px;
  padding: 14px 16px !important;
  margin: 12px 16px 0;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.85), 0 1px 3px rgba(43,54,37,0.04);
}
.dd-kicker {
  color: var(--mid) !important;
  font-size: 10px !important;
  letter-spacing: 0.14em !important;
  margin-bottom: 12px !important;
}

/* KV-items: icoon + waarde, glass-row */
.dd-kv {
  background: rgba(255,255,255,0.55);
  border: 1px solid rgba(255,255,255,0.7);
  border-radius: 10px;
  padding: 9px 12px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.85);
  font-weight: 600 !important;
}
.dd-kv svg {
  background: linear-gradient(135deg, rgba(165,197,32,0.18), rgba(122,156,88,0.08));
  border: 1px solid rgba(165,197,32,0.3);
  border-radius: 7px;
  padding: 4px;
  box-sizing: content-box;
  color: #5e8042 !important;
  flex-shrink: 0;
}
.dd-kv a {
  color: var(--blue) !important;
  font-weight: 600;
}

/* Details-grid → 2-koloms glass tiles */
.dd-grid {
  gap: 10px !important;
}
.dd-grid-veld {
  background: rgba(255,255,255,0.55);
  border: 1px solid rgba(255,255,255,0.7);
  border-radius: 10px;
  padding: 9px 12px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.85);
}
.dd-grid-label {
  color: var(--mid) !important;
  font-size: 9.5px !important;
  letter-spacing: 0.1em !important;
  margin-bottom: 4px !important;
}
.dd-grid-waarde {
  color: var(--dark) !important;
  font-size: 13px !important;
}

/* Opmerking */
.dd-opmerking {
  background: rgba(255,255,255,0.55);
  border: 1px solid rgba(255,255,255,0.7);
  border-radius: 10px;
  padding: 12px 14px;
  color: var(--dark);
  font-size: 13px;
  line-height: 1.5;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.85);
}

.dd-leeg {
  color: var(--mid);
  font-style: italic;
  padding: 6px 0;
}

/* ─── Collapsible secties (Details, Logboek) ──────────────────────── */
.dd-sectie-collapsible {
  padding: 0 !important;
  overflow: hidden;
}
.dd-sectie-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 16px;
  border: none;
  background: transparent;
  cursor: pointer;
  font-family: 'proxima-nova', sans-serif;
  text-align: left;
  border-radius: 16px;
  transition: background 0.15s;
}
.dd-sectie-toggle:hover {
  background: rgba(255,255,255,0.45);
}
.dd-sectie-toggle .dd-kicker {
  margin: 0 !important;
  font-size: 11px !important;
  letter-spacing: 0.14em;
  font-weight: 800;
}
.dd-sectie-chevron {
  width: 16px;
  height: 16px;
  color: var(--mid);
  transition: transform 0.18s cubic-bezier(0.16, 1, 0.3, 1), color 0.15s;
  flex-shrink: 0;
}
.dd-sectie-toggle:hover .dd-sectie-chevron { color: var(--dark); }
.dd-sectie-collapsible.open .dd-sectie-chevron {
  transform: rotate(180deg);
  color: var(--dark);
}

/* Smooth uitklap (grid-rows trick) */
.dd-sectie-inhoud {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}
.dd-sectie-collapsible.open .dd-sectie-inhoud {
  grid-template-rows: 1fr;
}
.dd-sectie-inhoud-inner {
  overflow: hidden;
  min-height: 0;
}
.dd-sectie-collapsible.open .dd-sectie-inhoud-inner {
  padding: 0 16px 14px;
}

/* ─── Logboek items in glass-stijl ────────────────────────────────── */
.dd-logboek-lijst {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
}
.dd-logboek-item {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 10px 12px;
  background: rgba(255,255,255,0.55);
  border: 1px solid rgba(255,255,255,0.7);
  border-radius: 11px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.85);
}
.dd-logboek-icoon {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 1px solid transparent;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.55);
}
.dd-logboek-icoon svg { width: 13px; height: 13px; }
.dd-logboek-icoon.aangemaakt {
  background: linear-gradient(135deg, rgba(165,197,32,0.22), rgba(122,156,88,0.12));
  color: #5e8042;
  border-color: rgba(165,197,32,0.35);
}
.dd-logboek-icoon.gewijzigd {
  background: linear-gradient(135deg, rgba(28,126,172,0.18), rgba(28,126,172,0.08));
  color: var(--blue);
  border-color: rgba(28,126,172,0.3);
}
.dd-logboek-icoon.verwijderd {
  background: linear-gradient(135deg, rgba(220,53,69,0.16), rgba(220,53,69,0.06));
  color: #c54a3c;
  border-color: rgba(220,53,69,0.3);
}
.dd-logboek-icoon.gearchiveerd {
  background: rgba(43,54,37,0.08);
  color: var(--mid);
  border-color: rgba(43,54,37,0.12);
}
.dd-logboek-icoon.onhold {
  background: linear-gradient(135deg, rgba(245,166,35,0.18), rgba(245,166,35,0.08));
  color: #8a5d0d;
  border-color: rgba(245,166,35,0.3);
}
.dd-logboek-inhoud { flex: 1; min-width: 0; }
.dd-logboek-actie {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--dark);
  letter-spacing: -0.005em;
  margin-bottom: 2px;
}
.dd-logboek-details {
  font-size: 11.5px;
  color: var(--mid);
  line-height: 1.45;
  word-break: break-word;
}
.dd-logboek-meta {
  font-size: 10.5px;
  color: rgba(43,54,37,0.45);
  margin-top: 4px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.dd-logboek-leeg {
  text-align: center;
  color: var(--mid);
  font-size: 12.5px;
  padding: 18px 0;
  font-style: italic;
}

/* Detail drawer breder voor leesbaarheid */
#afspraak-detail-drawer { width: 480px !important; max-width: 100vw; }

/* Drawer-header: 2 icoon-knoppen rechts (bekijk + sluiten), zichtbaar op glass */
.drawer-header-acties {
  display: flex;
  align-items: center;
  gap: 6px;
}
.drawer-icoon-btn,
#afspraak-detail-drawer .drawer-close-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  margin: 0;
  background: rgba(255,255,255,0.6);
  border: 1px solid rgba(255,255,255,0.85);
  border-radius: 9px;
  color: var(--mid);
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.85);
  transition: all 0.15s;
}
.drawer-icoon-btn:hover {
  background: rgba(255,255,255,0.9);
  border-color: rgba(165,197,32,0.5);
  color: var(--dark);
}
#afspraak-detail-drawer .drawer-close-btn:hover {
  background: rgba(255,255,255,0.9);
  border-color: rgba(43,54,37,0.18);
  color: var(--dark);
}
.drawer-icoon-btn svg { width: 15px; height: 15px; }

/* Verstuurd-badge in compacte rij — matcht wacht-pill formaat + lime success */
.afsp-badge-sent {
  display: inline-flex !important;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  background: linear-gradient(135deg, rgba(165,197,32,0.18), rgba(122,156,88,0.08)) !important;
  color: #3f5b28 !important;
  border: 1px solid rgba(165,197,32,0.4) !important;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.55);
  white-space: nowrap;
}
.afsp-badge-sent svg {
  width: 11px;
  height: 11px;
  stroke: #5e8042;
  flex-shrink: 0;
}

/* Zones: actie vereist / in afwachting */
.afsp-zone-titel { color: var(--dark); }
.afsp-zone-sub { color: var(--mid); }

.afsp-fase {
  background: linear-gradient(135deg, rgba(255,255,255,0.65) 0%, rgba(255,255,255,0.4) 100%);
  backdrop-filter: blur(20px) saturate(1.3);
  -webkit-backdrop-filter: blur(20px) saturate(1.3);
  border: 1px solid rgba(255,255,255,0.65);
  border-radius: 18px;
  box-shadow: var(--shadow-glass), var(--glass-inner);
}
.afsp-fase-lijst .afsp-kaart {
  background: rgba(255,255,255,0.5);
  border: 1px solid rgba(255,255,255,0.65);
}

/* Empty state */
.afsp-empty {
  background: rgba(255,255,255,0.4);
  border: 1px dashed rgba(43,54,37,0.14);
  border-radius: 16px;
  color: var(--mid);
}

/* Inplan-modal en uitnodig-modal laten we met rust (behouden huidige kaart-stijl) */

/* ═══ Content padding voor ademruimte ══════════════════════════════ */
.content { padding: 26px 32px 48px; }

/* Design-toggle is verwijderd nu glass de standaard is */
.design-toggle { display: none !important; }

/* ═══ Mobile nav → glass ═══════════════════════════════════════════ */
@media (max-width: 768px) {
  .mobile-nav {
    background: rgba(255,255,255,0.85);
    backdrop-filter: blur(22px) saturate(1.5);
    -webkit-backdrop-filter: blur(22px) saturate(1.5);
    border-top: 1px solid rgba(43,54,37,0.08);
  }
  .mobile-nav a { color: rgba(43,54,37,0.55); }
  .mobile-nav a.active { color: var(--dark); }
}

/* ╔══════════════════════════════════════════════════════════════════╗
   ║  COMPLETE GLASS PASS                                              ║
   ║  Modals, drawers, forms, custom-selects, beheer, toast, etc.      ║
   ╚══════════════════════════════════════════════════════════════════╝ */

/* ═══ Modal & drawer overlay (achtergrond) ═════════════════════════ */
.modal-overlay,
.drawer-overlay {
  background: rgba(43,54,37,0.18);
  backdrop-filter: blur(8px) saturate(1.2);
  -webkit-backdrop-filter: blur(8px) saturate(1.2);
}
.drawer-overlay.active { background: rgba(43,54,37,0.18); }

/* ═══ Modal kaart (gebruikers / rollen / nieuwe) → glass ═══════════ */
.modal {
  background: linear-gradient(135deg, rgba(255,255,255,0.85) 0%, rgba(255,255,255,0.7) 100%);
  backdrop-filter: blur(28px) saturate(1.4);
  -webkit-backdrop-filter: blur(28px) saturate(1.4);
  border: 1px solid rgba(255,255,255,0.7);
  border-radius: 22px;
  box-shadow: 0 1px 2px rgba(43,54,37,0.06), 0 24px 64px rgba(43,54,37,0.18), var(--glass-inner);
}
.modal h3 { color: var(--dark); letter-spacing: -0.015em; }

/* ═══ Drawer (rechts uitschuivend voor gebruikersdetail) → glass ═══ */
.drawer {
  background: linear-gradient(180deg, rgba(255,255,255,0.78) 0%, rgba(238,243,230,0.65) 100%);
  backdrop-filter: blur(28px) saturate(1.4);
  -webkit-backdrop-filter: blur(28px) saturate(1.4);
  box-shadow: -1px 0 0 rgba(43,54,37,0.06), -12px 0 48px rgba(43,54,37,0.12);
  border-left: 1px solid rgba(255,255,255,0.6);
}
.drawer-header {
  background: linear-gradient(180deg, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0.35) 100%);
  border-bottom: 1px solid rgba(43,54,37,0.06);
  backdrop-filter: blur(14px) saturate(1.3);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
}
.drawer-header h3 { color: var(--dark); }
.drawer-close { color: rgba(43,54,37,0.5); }
.drawer-close:hover { color: var(--dark); }

.drawer-profile {
  background: linear-gradient(180deg, rgba(165,197,32,0.06) 0%, transparent 100%);
}
.drawer-name { color: var(--dark); }
.drawer-email { color: var(--mid); }
.drawer-role-badge {
  background: linear-gradient(135deg, rgba(165,197,32,0.22), rgba(122,156,88,0.14));
  color: var(--dark);
  border: 1px solid rgba(165,197,32,0.3);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.55);
  font-weight: 700;
}
.drawer-section { border-top: 1px solid rgba(43,54,37,0.06); }

/* ═══ Form fields → frosted glass ══════════════════════════════════ */
.drawer-field input,
.drawer-field select,
.modal-field input,
.modal-field select,
.modal-field textarea {
  background: rgba(255,255,255,0.7);
  border: 1px solid rgba(255,255,255,0.85);
  border-radius: 11px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.85), 0 1px 2px rgba(43,54,37,0.03);
  transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.drawer-field input:hover,
.drawer-field select:hover,
.modal-field input:hover,
.modal-field select:hover,
.modal-field textarea:hover {
  background: rgba(255,255,255,0.85);
  border-color: rgba(255,255,255,0.95);
}
.drawer-field input:focus,
.drawer-field select:focus,
.modal-field input:focus,
.modal-field select:focus,
.modal-field textarea:focus {
  background: rgba(255,255,255,0.95);
  border-color: rgba(165,197,32,0.5);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 0 0 4px rgba(165,197,32,0.15);
}
.drawer-field label,
.modal-field label {
  color: var(--mid);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 11px;
}

/* Drawer actions (bewaren/annuleren rij) */
.drawer-actions { border-top: 1px solid rgba(43,54,37,0.06); }
.drawer-danger { border-top: 1px solid rgba(43,54,37,0.06); }
.drawer-danger-btn {
  background: rgba(220,53,69,0.06);
  border: 1px solid rgba(220,53,69,0.25);
  border-radius: 11px;
  font-weight: 600;
}
.drawer-danger-btn:hover {
  background: rgba(220,53,69,0.12);
  border-color: rgba(220,53,69,0.45);
}

/* Errors */
.drawer-error,
.modal-error {
  background: rgba(220,53,69,0.08);
  border: 1px solid rgba(220,53,69,0.22);
  border-radius: 11px;
  font-weight: 500;
}

/* Custom-select glass: zie shared.css */

/* ═══ Beheer-views (gebruikers / rollen / rechten) ═════════════════ */
.user-list { background: transparent; }
.role-row { border-bottom: 1px solid rgba(43,54,37,0.06); }
.role-row:hover { background: rgba(255,255,255,0.55); }
.role-row:active { background: rgba(255,255,255,0.7); }
.role-row-name { color: var(--dark); }
.role-row-name .system-badge {
  background: linear-gradient(135deg, rgba(28,126,172,0.85), rgba(28,126,172,0.7));
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.25), 0 2px 6px rgba(28,126,172,0.25);
}
.role-row-desc { color: var(--mid); }
.role-row-count { color: var(--mid); }

/* ═══ Afspraak inplan-modal (planning) → glass ═════════════════════ */
.afsp-inplan-modal {
  background: linear-gradient(135deg, rgba(255,255,255,0.85) 0%, rgba(255,255,255,0.65) 100%);
  backdrop-filter: blur(28px) saturate(1.4);
  -webkit-backdrop-filter: blur(28px) saturate(1.4);
  border: 1px solid rgba(255,255,255,0.7);
  box-shadow: 0 1px 2px rgba(43,54,37,0.06), 0 24px 64px rgba(43,54,37,0.18), var(--glass-inner);
}

/* Generieke "afsp-modal" (gebruikt voor confirm + andere) */
.afsp-modal {
  background: linear-gradient(135deg, rgba(255,255,255,0.85) 0%, rgba(255,255,255,0.65) 100%);
  backdrop-filter: blur(28px) saturate(1.4);
  -webkit-backdrop-filter: blur(28px) saturate(1.4);
  border: 1px solid rgba(255,255,255,0.7);
  box-shadow: 0 1px 2px rgba(43,54,37,0.06), 0 24px 64px rgba(43,54,37,0.18), var(--glass-inner);
}
.afsp-modal-header h3 { color: var(--dark); letter-spacing: -0.015em; }
.afsp-modal-sub { color: var(--dark); }
.afsp-modal-email { color: var(--mid); }
.afsp-modal-icon {
  background: linear-gradient(135deg, rgba(165,197,32,0.25), rgba(122,156,88,0.15));
  border: 1px solid rgba(165,197,32,0.25);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.55);
}
.afsp-modal-icon-send {
  background: linear-gradient(135deg, rgba(28,126,172,0.22), rgba(28,126,172,0.1));
  border-color: rgba(28,126,172,0.25);
}

/* ─── Hervestuur-keuze modal ───────────────────────────────────── */
.hervestuur-keuze-lijst {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 18px 0 18px;
}
.hervestuur-keuze-kaart {
  display: grid;
  grid-template-columns: 40px 1fr 20px;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: rgba(255,255,255,0.6);
  border: 1px solid rgba(43,54,37,0.1);
  border-radius: 14px;
  font-family: 'proxima-nova', sans-serif;
  text-align: left;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.2s ease, border-color 0.2s ease, background 0.2s ease;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.85), 0 1px 3px rgba(43,54,37,0.04);
}
.hervestuur-keuze-kaart:hover {
  transform: translateY(-1px);
  background: #fff;
  border-color: rgba(28,126,172,0.4);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.95), 0 6px 18px rgba(28,126,172,0.12);
}
.hervestuur-keuze-kaart:active {
  transform: translateY(0);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 2px 6px rgba(28,126,172,0.1);
}
.hervestuur-keuze-kaart:hover .hervestuur-keuze-arrow {
  transform: translateX(3px);
  color: var(--blue);
}
.hervestuur-keuze-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(28,126,172,0.14), rgba(28,126,172,0.06));
  border: 1px solid rgba(28,126,172,0.2);
  color: var(--blue);
  flex-shrink: 0;
}
.hervestuur-keuze-ico svg {
  width: 18px;
  height: 18px;
}
#hervestuur-keuze-nieuw .hervestuur-keuze-ico {
  background: linear-gradient(135deg, rgba(165,197,32,0.22), rgba(165,197,32,0.08));
  border-color: rgba(165,197,32,0.3);
  color: #5e8042;
}
.hervestuur-keuze-tekst {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.hervestuur-keuze-titel {
  font-size: 14px;
  font-weight: 700;
  color: var(--dark);
  letter-spacing: -0.005em;
  line-height: 1.3;
}
.hervestuur-keuze-sub {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--mid);
  line-height: 1.45;
}
.hervestuur-keuze-arrow {
  width: 16px;
  height: 16px;
  color: var(--soft, #93988a);
  transition: transform 0.18s ease, color 0.18s ease;
  flex-shrink: 0;
}

/* ═══ Inputs & textareas globaal in modals/inplan ══════════════════ */
.afsp-inplan-modal input,
.afsp-inplan-modal select,
.afsp-inplan-modal textarea {
  background: rgba(255,255,255,0.7);
  border: 1px solid rgba(255,255,255,0.85);
  border-radius: 11px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.85), 0 1px 2px rgba(43,54,37,0.03);
}
.afsp-inplan-modal input:focus,
.afsp-inplan-modal select:focus,
.afsp-inplan-modal textarea:focus {
  background: rgba(255,255,255,0.95);
  border-color: rgba(165,197,32,0.5);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 0 0 4px rgba(165,197,32,0.15);
  outline: none;
}

/* ═══ Toast (vervangt alert) → glass ═══════════════════════════════ */
#hub-toast {
  background: rgba(255,255,255,0.92) !important;
  backdrop-filter: blur(22px) saturate(1.4);
  -webkit-backdrop-filter: blur(22px) saturate(1.4);
  border: 1px solid rgba(255,255,255,0.7) !important;
  border-radius: 14px !important;
  box-shadow: 0 1px 2px rgba(43,54,37,0.06), 0 16px 48px rgba(43,54,37,0.18), inset 0 1px 0 rgba(255,255,255,0.9) !important;
}

/* Saved-bevestiging glass-override: zie shared.css */

/* ╔══════════════════════════════════════════════════════════════════╗
   ║  LOGIN PAGINA + WACHTWOORD-VERGETEN + ALLE MELDINGEN              ║
   ╚══════════════════════════════════════════════════════════════════╝ */

/* ═══ Login background → aurora mesh (sterker dan default) ═════════ */
body.login-body {
  background: transparent !important;
  background-image: none !important;
}
body.login-body::before {
  content: '';
  position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(60% 50% at 18% 22%, rgba(165,197,32,0.32), transparent 60%),
    radial-gradient(50% 45% at 85% 15%, rgba(122,156,88,0.26), transparent 65%),
    radial-gradient(55% 50% at 75% 85%, rgba(238,243,230,0.95), transparent 60%),
    radial-gradient(40% 45% at 10% 90%, rgba(165,197,32,0.22), transparent 65%),
    linear-gradient(180deg, #F4F7EE 0%, #EEF3E6 55%, #E9EFE0 100%);
}

/* ═══ Login card → glass ═══════════════════════════════════════════ */
.login-card {
  background: linear-gradient(135deg, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0.45) 100%) !important;
  backdrop-filter: blur(28px) saturate(1.4);
  -webkit-backdrop-filter: blur(28px) saturate(1.4);
  border: 1px solid rgba(255,255,255,0.7) !important;
  border-radius: 22px !important;
  box-shadow: 0 1px 2px rgba(43,54,37,0.06), 0 24px 64px rgba(43,54,37,0.18), inset 0 1px 0 rgba(255,255,255,0.85) !important;
}
.login-title { color: var(--dark); letter-spacing: -0.015em; }
.login-sub { color: var(--mid); }
.login-lbl {
  color: var(--mid) !important;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 11px;
}
.login-input {
  background: rgba(255,255,255,0.7) !important;
  border: 1px solid rgba(255,255,255,0.85) !important;
  border-radius: 11px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.85), 0 1px 2px rgba(43,54,37,0.03);
}
.login-input:focus {
  background: rgba(255,255,255,0.95) !important;
  border-color: rgba(165,197,32,0.5) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 0 0 4px rgba(165,197,32,0.15) !important;
}
/* Login-btn was al donkergroen — alleen lime-gleam toevoegen */
.login-btn {
  background: linear-gradient(180deg, #3a4830 0%, #2b3625 100%) !important;
  border-radius: 11px !important;
  box-shadow:
    inset 0 1px 0 rgba(165,197,32,0.32),
    inset 0 0 0 1px rgba(255,255,255,0.06),
    0 2px 6px rgba(43,54,37,0.18),
    0 6px 18px rgba(43,54,37,0.18) !important;
}
.login-btn:hover {
  background: linear-gradient(180deg, #475635 0%, #323e2b 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(165,197,32,0.45),
    inset 0 0 0 1px rgba(255,255,255,0.1),
    0 4px 10px rgba(43,54,37,0.22),
    0 8px 22px rgba(43,54,37,0.2) !important;
}

/* ═══ Wachtwoord-vergeten overlay + card ═══════════════════════════ */
.ww-overlay {
  background: rgba(43,54,37,0.18) !important;
  backdrop-filter: blur(8px) saturate(1.2) !important;
  -webkit-backdrop-filter: blur(8px) saturate(1.2) !important;
}
.ww-card {
  background: linear-gradient(135deg, rgba(255,255,255,0.85) 0%, rgba(255,255,255,0.65) 100%) !important;
  backdrop-filter: blur(28px) saturate(1.4);
  -webkit-backdrop-filter: blur(28px) saturate(1.4);
  border: 1px solid rgba(255,255,255,0.7) !important;
  border-radius: 22px !important;
  box-shadow: 0 1px 2px rgba(43,54,37,0.06), 0 24px 64px rgba(43,54,37,0.18), inset 0 1px 0 rgba(255,255,255,0.85) !important;
}
.ww-check {
  background: linear-gradient(135deg, rgba(165,197,32,0.25), rgba(122,156,88,0.15)) !important;
  border: 1px solid rgba(165,197,32,0.3);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.55);
}
/* Knoppen binnen ww-card (inline-styled) overriden */
.ww-state button[onclick="verstuurResetLink()"],
.ww-state button[onclick="sluitWachtwoordVergeten()"] {
  border-radius: 11px !important;
  font-weight: 700 !important;
  transition: all 0.15s !important;
}
.ww-state button[onclick="verstuurResetLink()"] {
  background: linear-gradient(180deg, #3a4830 0%, #2b3625 100%) !important;
  color: #fff !important;
  box-shadow:
    inset 0 1px 0 rgba(165,197,32,0.32),
    inset 0 0 0 1px rgba(255,255,255,0.06),
    0 2px 6px rgba(43,54,37,0.18) !important;
}
.ww-state button[onclick="verstuurResetLink()"]:hover {
  background: linear-gradient(180deg, #475635 0%, #323e2b 100%) !important;
  transform: translateY(-1px);
}
.ww-state-form button[onclick="sluitWachtwoordVergeten()"] {
  background: rgba(255,255,255,0.6) !important;
  border: 1px solid rgba(255,255,255,0.8) !important;
  color: var(--dark) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.85);
}
.ww-state-form button[onclick="sluitWachtwoordVergeten()"]:hover {
  background: rgba(255,255,255,0.85) !important;
}
.ww-state-done button {
  background: linear-gradient(180deg, #3a4830 0%, #2b3625 100%) !important;
  color: #fff !important;
  border-radius: 11px !important;
  box-shadow:
    inset 0 1px 0 rgba(165,197,32,0.32),
    inset 0 0 0 1px rgba(255,255,255,0.06),
    0 2px 6px rgba(43,54,37,0.18) !important;
}
/* Email-input in ww-card */
#ww-vergeten-email {
  background: rgba(255,255,255,0.7) !important;
  border: 1px solid rgba(255,255,255,0.85) !important;
  border-radius: 11px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.85);
}
#ww-vergeten-email:focus {
  background: rgba(255,255,255,0.95) !important;
  border-color: rgba(165,197,32,0.5) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 0 0 3px rgba(165,197,32,0.15) !important;
  outline: none !important;
}
/* WW-vergeten melding (foutmelding inline) */
#ww-vergeten-melding {
  background: linear-gradient(135deg, rgba(220,53,69,0.1), rgba(220,53,69,0.04)) !important;
  border: 1px solid rgba(220,53,69,0.3) !important;
  border-radius: 11px !important;
  color: #8a2a1e !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.5);
}

/* ╔══════════════════════════════════════════════════════════════════╗
   ║  MELDINGEN — alle in dezelfde glass-stijl                         ║
   ╚══════════════════════════════════════════════════════════════════╝ */

/* ═══ Toast (vervangt alert) ═══════════════════════════════════════ */
/* hub-toast wordt via JS .style.cssText opgebouwd — alles overrulen  */
#hub-toast {
  background: linear-gradient(135deg, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.72) 100%) !important;
  backdrop-filter: blur(22px) saturate(1.4) !important;
  -webkit-backdrop-filter: blur(22px) saturate(1.4) !important;
  border: 1px solid rgba(255,255,255,0.7) !important;
  border-radius: 14px !important;
  box-shadow: 0 1px 2px rgba(43,54,37,0.06), 0 16px 48px rgba(43,54,37,0.18), inset 0 1px 0 rgba(255,255,255,0.9) !important;
  padding: 14px 18px !important;
  color: var(--dark) !important;
}

/* ═══ Login-error pill (rood) ══════════════════════════════════════ */
.login-error {
  background: linear-gradient(135deg, rgba(220,53,69,0.1), rgba(220,53,69,0.04)) !important;
  border: 1px solid rgba(220,53,69,0.3) !important;
  border-radius: 11px !important;
  color: #8a2a1e !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.5);
  font-weight: 600;
}

/* ═══ Drawer/modal-error en afsp-fout ══════════════════════════════ */
.drawer-error,
.modal-error,
.afsp-fout {
  background: linear-gradient(135deg, rgba(220,53,69,0.1), rgba(220,53,69,0.04)) !important;
  border: 1px solid rgba(220,53,69,0.3) !important;
  border-radius: 11px !important;
  color: #8a2a1e !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.5);
  font-weight: 500;
}

/* ═══ Hub-confirm modal (vervangt browser confirm) ═════════════════ */
#hub-confirm-overlay { background: rgba(43,54,37,0.18) !important; backdrop-filter: blur(8px) saturate(1.2) !important; }
#hub-confirm-icon {
  border: 1px solid rgba(255,255,255,0.55);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.55);
  border-radius: 12px !important;
}
#hub-confirm-titel { color: var(--dark) !important; letter-spacing: -0.015em; }
#hub-confirm-tekst { color: var(--mid) !important; }
/* Danger-knop in confirm */
.btn.btn-danger {
  background: linear-gradient(180deg, #e64759 0%, #c62232 100%) !important;
  color: #fff !important;
  border-radius: 11px !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.25),
    inset 0 0 0 1px rgba(255,255,255,0.08),
    0 2px 6px rgba(220,53,69,0.18),
    0 6px 18px rgba(220,53,69,0.18) !important;
  border: none !important;
}
.btn.btn-danger:hover {
  background: linear-gradient(180deg, #ed5a6b 0%, #d33342 100%) !important;
  transform: translateY(-1px);
}

/* ═══ Inline-styled "open uitnodiging" banner in hub view ══════════ */
/* Gebruikt zelfde patroon als leegstand uitnodiging-banner — geel    */
[id^="open-uitnodiging-melding"],
[id*="uitnodiging-melding"] {
  background: linear-gradient(135deg, rgba(245,166,35,0.18), rgba(245,166,35,0.08)) !important;
  border: 1px solid rgba(245,166,35,0.35) !important;
  border-left: 4px solid #f5a623 !important;
  border-radius: 14px !important;
  backdrop-filter: blur(12px) saturate(1.2);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.55), 0 2px 12px rgba(245,166,35,0.1) !important;
  color: #6b4700 !important;
}

/* ═══ Status-waarschuwing modals (statuswijziging confirm) ═════════ */
[id*="status-waarschuwing"],
[id*="status-warning"] {
  background: linear-gradient(135deg, rgba(245,166,35,0.18), rgba(245,166,35,0.08)) !important;
  border: 1px solid rgba(245,166,35,0.35) !important;
  border-radius: 14px !important;
  color: #6b4700 !important;
}

/* ═══ Mobile nav glass tweak — al gedaan, hier tabel/secties ═══════ */

/* ╔══════════════════════════════════════════════════════════════════╗
   ║  AFSPRAKEN INPLANNEN — VOLLEDIG GLASS                             ║
   ║  Hero-kaarten, chips, wacht-pills, knoppen, agenda-modal,         ║
   ║  inplan-modal (banner/controls/week-tabs/schedule), uitnodig.     ║
   ╚══════════════════════════════════════════════════════════════════╝ */

/* Layout: main-kolom + rechter rail met week-agenda */
.afsp-layout {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 340px !important;
  gap: 32px !important;
  align-items: start !important;
  max-width: none !important;
  width: 100% !important;
}
.afsp-main { min-width: 0; }

/* Hero-header (groot cijfer + "wachten op planning" + meta) tijdelijk leeg */
.afsp-hero-head { display: none !important; }
.afsp-hero { background: transparent !important; box-shadow: none !important; border: none !important; padding: 0 !important; }
.afsp-hero::before { display: none !important; }

/* ─── Week-rail (Lijst-week) ───────────────────────────────────── */
.afsp-week-rail {
  position: sticky;
  top: 24px;
  background: rgba(255,255,255,0.55);
  border: 1px solid rgba(255,255,255,0.7);
  border-radius: 18px;
  padding: 22px 4px 16px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.7),
    0 2px 8px rgba(43,54,37,0.06);
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
}
.afsp-rail-head {
  padding: 0 20px 14px;
  display: flex; align-items: baseline; justify-content: space-between;
  border-bottom: 1px solid rgba(43,54,37,0.08);
}
.afsp-rail-titel {
  font-size: 13px; font-weight: 700;
  letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--dark);
}
.afsp-rail-sub {
  font-size: 11.5px; color: var(--mid);
  font-variant-numeric: tabular-nums;
}
.afsp-rail-dag {
  padding: 14px 20px 10px;
  border-bottom: 1px solid rgba(43,54,37,0.06);
}
.afsp-rail-dag:last-child { border-bottom: none; padding-bottom: 4px; }
.afsp-rail-dag.vandaag {
  background: linear-gradient(90deg, rgba(165,197,32,0.07), transparent 70%);
}
.afsp-rail-dag-kop {
  display: flex; align-items: baseline; gap: 10px;
  margin-bottom: 8px;
}
.afsp-rail-dag-naam {
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--mid);
}
.afsp-rail-dag.vandaag .afsp-rail-dag-naam { color: var(--dark); }
.afsp-rail-dag-nr {
  font-size: 18px; font-weight: 700;
  letter-spacing: -0.015em; color: var(--dark);
  font-variant-numeric: tabular-nums;
}
.afsp-rail-dag-maand {
  font-size: 11px; font-weight: 600;
  color: var(--soft, #93988a); margin-left: 2px;
}
.afsp-rail-dag.vandaag .afsp-rail-dag-nr::after {
  content: ''; display: inline-block;
  width: 6px; height: 6px; border-radius: 999px;
  background: var(--lime, #A5C520);
  margin-left: 8px;
  transform: translateY(-2px);
}
.afsp-rail-afspr {
  display: grid; grid-template-columns: 52px 1fr;
  gap: 10px; align-items: baseline;
  padding: 7px 0;
  font-size: 12.5px;
  border-top: 1px dashed rgba(43,54,37,0.08);
  cursor: pointer;
  transition: opacity 0.15s ease, transform 0.15s ease;
}
.afsp-rail-afspr:first-of-type { border-top: none; }
.afsp-rail-afspr:hover { opacity: 0.75; transform: translateX(2px); }
.afsp-rail-tijd {
  font-weight: 700; color: var(--dark);
  font-variant-numeric: tabular-nums;
}
.afsp-rail-adres {
  color: var(--mid); line-height: 1.35;
  min-width: 0; overflow: hidden;
}
.afsp-rail-adres strong {
  color: var(--dark); font-weight: 600;
  display: block;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.afsp-rail-afspr.is-verleden { opacity: 0.55; }
.afsp-rail-afspr.is-verleden .afsp-rail-tijd { font-weight: 600; }
.afsp-rail-leeg {
  font-size: 11.5px; color: var(--soft, #93988a);
  font-style: italic; padding: 2px 0;
}

/* Compact op smaller scherm: rail onder main i.p.v. ernaast */
@media (max-width: 1100px) {
  .afsp-layout {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .afsp-week-rail { position: static; }
}

/* ─── Tabs: glass segmented control (subtiel) ─────────────────────── */
.afsp-tabs {
  display: flex;
  align-items: center;
  gap: 3px;
  width: 100%;
  padding: 6px;
  margin-bottom: 22px;
  background: rgba(255,255,255,0.4);
  border: 1px solid rgba(255,255,255,0.6);
  border-radius: 16px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.7),
    0 1px 3px rgba(43,54,37,0.04);
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
}

.afsp-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 22px;
  border: none;
  background: transparent;
  font-family: 'proxima-nova', sans-serif;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--mid);
  cursor: pointer;
  border-radius: 12px;
  letter-spacing: -0.005em;
  white-space: nowrap;
  transition: all 0.18s ease;
}
.afsp-tab:not(.active):hover {
  color: var(--tab-accent, var(--dark));
  background: var(--tab-accent-soft, rgba(255,255,255,0.5));
}
.afsp-tab:not(.active):hover .afsp-tab-count {
  background: color-mix(in srgb, var(--tab-accent) 22%, transparent);
}

/* Per-tab kleuraccenten */
.afsp-tab[data-tab="nieuw"]     { --tab-accent: #3d7a8a; --tab-accent-soft: rgba(61,122,138,0.14); }
.afsp-tab[data-tab="verlopen"]  { --tab-accent: #b85040; --tab-accent-soft: rgba(184,80,64,0.14); }
.afsp-tab[data-tab="verstuurd"] { --tab-accent: #c08433; --tab-accent-soft: rgba(192,132,51,0.14); }
.afsp-tab[data-tab="ingepland"] { --tab-accent: #6b8e3f; --tab-accent-soft: rgba(107,142,63,0.16); }
.afsp-tab[data-tab="voltooid"]  { --tab-accent: #6a6f63; --tab-accent-soft: rgba(106,111,99,0.14); }

/* Klein gekleurd stipje voor identiteit */
.afsp-tab::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--tab-accent, var(--mid));
  flex-shrink: 0;
  opacity: 0.7;
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.afsp-tab.active::before {
  opacity: 1;
}
.afsp-tab:not(.active):hover::before {
  opacity: 1;
  transform: scale(1.15);
}

/* Actief: schoon wit pilletje */
.afsp-tab.active {
  color: var(--dark);
  background: #fff;
  box-shadow:
    0 1px 3px rgba(43,54,37,0.10),
    0 1px 1px rgba(43,54,37,0.05);
}

/* Voltooid rechts uitgelijnd */
.afsp-tabs > .afsp-tab-eind {
  margin-left: auto;
}

.afsp-tab-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 20px;
  padding: 0 7px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  background: var(--tab-accent-soft, rgba(43,54,37,0.08));
  color: var(--tab-accent, var(--dark));
  font-variant-numeric: tabular-nums;
  transition: background 0.18s ease, color 0.18s ease;
}
.afsp-tab.active .afsp-tab-count {
  background: var(--tab-accent);
  color: #fff;
}

@media (max-width: 1100px) {
  .afsp-tabs { flex-wrap: wrap; }
  .afsp-tab-eind { margin-left: 0; }
}

/* ─── Actie-chip: maakt expliciet wat er moet gebeuren ───────────── */
.afsp-actie-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 11px 4px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.02em;
  border: 1px solid transparent;
  white-space: nowrap;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.55);
}
.afsp-actie-chip svg { width: 11px; height: 11px; flex-shrink: 0; }
/* Verstuur uitnodiging — lime (positieve actie) */
.afsp-actie-chip.act-verzend {
  background: linear-gradient(135deg, rgba(165,197,32,0.22), rgba(122,156,88,0.12));
  color: #3f5b28;
  border-color: rgba(165,197,32,0.45);
}
.afsp-actie-chip.act-verzend svg { color: #5e8042; }
/* Bel huurder (geen email) — amber */
.afsp-actie-chip.act-bel-geen-email {
  background: linear-gradient(135deg, rgba(245,166,35,0.2), rgba(245,166,35,0.08));
  color: #8a5d0d;
  border-color: rgba(245,166,35,0.45);
}
.afsp-actie-chip.act-bel-geen-email svg { color: #b27300; }
/* Verlopen — rood (urgent) */
.afsp-actie-chip.act-verlopen {
  background: linear-gradient(135deg, rgba(220,53,69,0.16), rgba(220,53,69,0.06));
  color: #8a2a1e;
  border-color: rgba(220,53,69,0.45);
}
.afsp-actie-chip.act-verlopen svg { color: #c54a3c; }

/* ─── Datum-pill voor geplande/voltooide afspraken in kaart-rij ──── */
.afsp-datum-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px 4px 8px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  border: 1px solid transparent;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.afsp-datum-pill svg { width: 11px; height: 11px; flex-shrink: 0; }
.afsp-datum-pill.st-toekomst {
  background: linear-gradient(135deg, rgba(165,197,32,0.18), rgba(122,156,88,0.08));
  color: #3f5b28;
  border-color: rgba(165,197,32,0.4);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.55);
}
.afsp-datum-pill.st-verleden {
  background: rgba(43,54,37,0.06);
  color: var(--mid);
  border-color: rgba(43,54,37,0.12);
}

/* ─── Topbar tools: zoekbalk + agenda-knop ────────────────────────── */
.afsp-topbar-tools {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
  justify-content: flex-end;
}
.afsp-zoek-wrap {
  position: relative;
  flex: 1;
  max-width: 480px;
  min-width: 220px;
}
.afsp-zoek-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.afsp-zoek-icon {
  position: absolute;
  left: 14px;
  width: 14px;
  height: 14px;
  color: var(--mid);
  pointer-events: none;
}
#afsp-zoek-input {
  width: 100%;
  padding: 9px 38px 9px 38px;
  background: rgba(255,255,255,0.7);
  border: 1px solid rgba(255,255,255,0.85);
  border-radius: 999px;
  font-family: 'proxima-nova', sans-serif;
  font-size: 13px;
  color: var(--dark);
  outline: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.85), 0 1px 2px rgba(43,54,37,0.03);
  transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
}
#afsp-zoek-input::placeholder { color: var(--mid); }
#afsp-zoek-input:hover {
  background: rgba(255,255,255,0.85);
  border-color: rgba(255,255,255,0.95);
}
#afsp-zoek-input:focus {
  background: rgba(255,255,255,0.95);
  border-color: rgba(165,197,32,0.5);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 0 0 3px rgba(165,197,32,0.15);
}
.afsp-zoek-clear {
  position: absolute;
  right: 6px;
  width: 24px;
  height: 24px;
  border: none;
  background: rgba(43,54,37,0.06);
  border-radius: 50%;
  color: var(--mid);
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background 0.15s, color 0.15s;
}
.afsp-zoek-clear:hover {
  background: rgba(43,54,37,0.14);
  color: var(--dark);
}
.afsp-zoek-clear svg { width: 12px; height: 12px; }

/* Dropdown met resultaten */
.afsp-zoek-resultaten {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  z-index: 60;
  display: none;
  max-height: 60vh;
  overflow-y: auto;
  background: linear-gradient(135deg, rgba(255,255,255,0.92) 0%, rgba(255,255,255,0.78) 100%);
  backdrop-filter: blur(22px) saturate(1.4);
  -webkit-backdrop-filter: blur(22px) saturate(1.4);
  border: 1px solid rgba(255,255,255,0.7);
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(43,54,37,0.06), 0 16px 48px rgba(43,54,37,0.18), inset 0 1px 0 rgba(255,255,255,0.85);
  padding: 6px;
}
.afsp-zoek-resultaten.open { display: block; }

.afsp-zoek-groep + .afsp-zoek-groep {
  margin-top: 4px;
  padding-top: 6px;
  border-top: 1px dashed rgba(43,54,37,0.08);
}
.afsp-zoek-groep-kop {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px 6px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mid);
}
.afsp-zoek-groep-aantal {
  background: rgba(43,54,37,0.08);
  color: var(--dark);
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0;
}

.afsp-zoek-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  border-radius: 11px;
  cursor: pointer;
  transition: background 0.12s;
}
.afsp-zoek-item:hover { background: rgba(165,197,32,0.12); }
.afsp-zoek-item-body { flex: 1; min-width: 0; }

.afsp-zoek-item-datum {
  width: 44px;
  text-align: center;
  background: rgba(43,54,37,0.06);
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 5px 0;
  flex-shrink: 0;
}
.afsp-zoek-item-datum.st-toekomst {
  background: linear-gradient(135deg, rgba(165,197,32,0.18), rgba(122,156,88,0.1));
  border-color: rgba(165,197,32,0.35);
}
.afsp-zoek-item-datum.st-verleden {
  background: rgba(43,54,37,0.06);
  border-color: rgba(43,54,37,0.08);
}
.afsp-zoek-item-datum.st-teplannen {
  background: linear-gradient(135deg, rgba(43,54,37,0.92), rgba(43,54,37,0.78));
  border-color: rgba(43,54,37,0.4);
  color: #fff;
}
.afsp-zoek-item-datum.st-teplannen .afsp-zoek-item-dag,
.afsp-zoek-item-datum.st-teplannen .afsp-zoek-item-maand {
  color: #fff;
}
.afsp-zoek-item-datum.st-teplannen .afsp-zoek-item-maand {
  color: var(--lime);
}
.afsp-zoek-item-dag {
  font-size: 16px;
  font-weight: 800;
  color: var(--dark);
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.afsp-zoek-item-maand {
  font-size: 10px;
  font-weight: 700;
  color: var(--mid);
  text-transform: uppercase;
  margin-top: 1px;
  letter-spacing: 0.06em;
}

.afsp-zoek-item-body { min-width: 0; }
.afsp-zoek-item-adres {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--dark);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: -0.005em;
}
.afsp-zoek-item-sub {
  font-size: 11.5px;
  color: var(--mid);
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.afsp-zoek-geen {
  padding: 22px 14px;
  text-align: center;
  color: var(--mid);
  font-size: 13px;
}

/* Topbar in afspraken iets ruimer voor de tools */
#view-afspraken .topbar { gap: 16px; }
#view-afspraken .topbar > div:first-child { flex-shrink: 0; }

/* ═══ Te-plannen kaarten (afsp-kaart) → glass detail ═══════════════ */
.afsp-kaart-adres { color: var(--dark); letter-spacing: -0.01em; }
.afsp-kaart-adres .afsp-unit { color: var(--mid); }
.afsp-kaart-meta { color: var(--mid); }
.afsp-kaart-meta-item svg { color: var(--mid); }

/* Huurder-strip binnenin de kaart → glass pill-row */
.afsp-kaart-huurder {
  background: rgba(255,255,255,0.55);
  border: 1px solid rgba(255,255,255,0.7);
  border-radius: 12px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.85);
}
.afsp-kaart-huurder-item { color: var(--dark); }
.afsp-kaart-huurder-item svg { color: var(--mid); }
.afsp-kaart-huurder-item a { color: var(--blue); font-weight: 600; }

/* Type-chip (opname / reservering) → glass-finish */
.afsp-type-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 108px;
  border-radius: 999px;
  padding: 4px 11px;
  letter-spacing: 0.08em;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), 0 1px 3px rgba(43,54,37,0.06);
  flex-shrink: 0;
}
.afsp-type-chip.opname {
  background: linear-gradient(135deg, rgba(28,126,172,0.95), rgba(28,126,172,0.8));
  color: #fff;
}
.afsp-type-chip.reservering {
  background: linear-gradient(135deg, #B9D83A, var(--lime));
  color: var(--dark);
}

/* Wacht-pill (fresh / notice / warn / urgent) */
.afsp-wacht {
  border-radius: 999px;
  backdrop-filter: blur(10px) saturate(1.2);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
}
.afsp-wacht.w-fresh {
  background: rgba(255,255,255,0.7);
  color: var(--dark);
  border-color: rgba(255,255,255,0.85);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.9);
}
.afsp-wacht.w-notice {
  background: rgba(165,197,32,0.18);
  border-color: rgba(165,197,32,0.35);
  color: #5a6d10;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.4);
}
.afsp-wacht.w-warn {
  background: rgba(245,166,35,0.16);
  border-color: rgba(245,166,35,0.4);
  color: #8a5d0d;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.4);
}
.afsp-wacht.w-urgent {
  background: rgba(220,53,69,0.14);
  border-color: rgba(220,53,69,0.4);
  color: #8a2a1e;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), 0 0 18px rgba(220,53,69,0.18);
}

/* Inplan-knop binnenin kaart → donkergroen primary, lime icoon-accent */
.afsp-btn-inplan {
  background: linear-gradient(180deg, #3a4830 0%, #2b3625 100%);
  color: #fff;
  border-radius: 11px;
  box-shadow:
    inset 0 1px 0 rgba(165,197,32,0.32),
    inset 0 0 0 1px rgba(255,255,255,0.06),
    0 2px 6px rgba(43,54,37,0.18),
    0 6px 18px rgba(43,54,37,0.18);
}
.afsp-btn-inplan:hover {
  background: linear-gradient(180deg, #475635 0%, #323e2b 100%);
  box-shadow:
    inset 0 1px 0 rgba(165,197,32,0.45),
    inset 0 0 0 1px rgba(255,255,255,0.1),
    0 8px 22px rgba(43,54,37,0.22);
  transform: translateY(-1px);
}
.afsp-btn-inplan svg { stroke: var(--lime); }

/* Ghost-knop binnenin kaart */
.afsp-btn-ghost {
  background: rgba(255,255,255,0.6);
  border: 1px solid rgba(255,255,255,0.8);
  border-radius: 11px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.85);
  color: var(--dark);
}
.afsp-btn-ghost:hover {
  background: rgba(255,255,255,0.85);
  border-color: rgba(165,197,32,0.4);
}

/* "Verstuurd" badge */
.afsp-badge-sent {
  background: rgba(28,126,172,0.1);
  border: 1px solid rgba(28,126,172,0.25);
  border-radius: 11px;
  color: #0f5e84;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.5);
}

/* Empty-state */
.afsp-hero-leeg {
  background: rgba(255,255,255,0.55);
  border: 1px dashed rgba(43,54,37,0.16);
  border-radius: 18px;
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
}
.afsp-hero-leeg-icon {
  background: linear-gradient(135deg, rgba(165,197,32,0.3), rgba(122,156,88,0.18));
  border: 1px solid rgba(165,197,32,0.3);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.6);
}

/* Errors binnen modals */
.afsp-fout {
  background: rgba(220,53,69,0.08);
  border: 1px solid rgba(220,53,69,0.22);
  border-radius: 11px;
}

/* ═══ AGENDA MODAL (kalender + dag-detail) → glass ═════════════════ */
.agenda-modal {
  background: linear-gradient(135deg, rgba(255,255,255,0.85) 0%, rgba(255,255,255,0.65) 100%);
  backdrop-filter: blur(28px) saturate(1.4);
  -webkit-backdrop-filter: blur(28px) saturate(1.4);
  border: 1px solid rgba(255,255,255,0.7);
  box-shadow: 0 1px 2px rgba(43,54,37,0.06), 0 24px 64px rgba(43,54,37,0.18), var(--glass-inner);
}
.agenda-head {
  background: linear-gradient(180deg, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0.3) 100%);
  border-bottom: 1px solid rgba(43,54,37,0.06);
}
.agenda-zoek-wrap {
  background: rgba(255,255,255,0.7);
  border: 1px solid rgba(255,255,255,0.85);
  border-radius: 999px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.9);
}
.agenda-zoek-wrap:focus-within {
  border-color: rgba(165,197,32,0.5);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 0 0 3px rgba(165,197,32,0.15);
}
.agenda-close {
  background: rgba(255,255,255,0.6);
  border: 1px solid rgba(255,255,255,0.8);
  border-radius: 11px;
  color: var(--mid);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.85);
}
.agenda-close:hover {
  background: rgba(255,255,255,0.85);
  color: var(--dark);
  border-color: rgba(43,54,37,0.15);
}

.agenda-nav-btn {
  background: rgba(255,255,255,0.6);
  border: 1px solid rgba(255,255,255,0.8);
  border-radius: 11px;
  color: var(--dark);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.85);
}
.agenda-nav-btn:hover {
  background: linear-gradient(180deg, var(--lime), #8aad18);
  border-color: var(--lime);
  color: var(--dark);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.55), 0 4px 12px rgba(165,197,32,0.3);
}
.agenda-nav-btn svg { color: var(--dark); }

.agenda-vandaag {
  background: rgba(255,255,255,0.6);
  border: 1px solid rgba(255,255,255,0.8);
  border-radius: 11px;
  color: var(--dark);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.85);
}
.agenda-vandaag:hover {
  background: rgba(165,197,32,0.18);
  border-color: rgba(165,197,32,0.4);
}

.agenda-maand-label { color: var(--dark); }
.agenda-weekdagen { color: var(--mid); }

/* Kalendercellen */
.agenda-cel {
  background: rgba(255,255,255,0.55);
  border: 1px solid rgba(255,255,255,0.7);
  border-radius: 12px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.85);
  transition: background 0.15s, border-color 0.15s, transform 0.15s;
}
.agenda-cel:hover {
  background: rgba(255,255,255,0.85);
  border-color: rgba(165,197,32,0.4);
  transform: translateY(-1px);
}
.agenda-cel.buiten-maand {
  background: rgba(255,255,255,0.2);
  border-color: rgba(255,255,255,0.3);
  color: var(--mid);
}
.agenda-cel.buiten-maand:hover {
  border-color: rgba(255,255,255,0.4);
  transform: none;
}
.agenda-cel.weekend {
  background: linear-gradient(180deg, rgba(238,243,230,0.55) 0%, rgba(255,255,255,0.4) 100%);
}
.agenda-cel.vandaag {
  border-color: var(--lime);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.85), 0 0 0 2px rgba(165,197,32,0.25);
}
.agenda-cel.vandaag .agenda-cel-nummer { color: var(--dark); }
.agenda-cel.geselecteerd {
  background: linear-gradient(135deg, var(--dark), #1e2a18);
  border-color: var(--dark);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), 0 6px 20px rgba(43,54,37,0.25);
}
.agenda-cel.geselecteerd .agenda-cel-nummer { color: #fff; }
.agenda-cel.geselecteerd .agenda-cel-dots span { background: var(--lime); }
.agenda-cel.geselecteerd .agenda-cel-count { color: var(--lime); }

.agenda-cel-nummer { color: var(--dark); }
.agenda-cel-count { color: var(--mid); }

/* Dag-detail rechter kolom */
.agenda-dag {
  background: rgba(255,255,255,0.45);
  border-radius: 14px;
  padding: 12px;
}
.agenda-dag-leeg { color: var(--mid); }
.agenda-dag-kop { color: var(--dark); }
.agenda-dag-item {
  background: rgba(255,255,255,0.6);
  border: 1px solid rgba(255,255,255,0.75);
  border-radius: 12px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.9);
  transition: background 0.15s, transform 0.15s;
}
.agenda-dag-item:hover {
  background: rgba(255,255,255,0.85);
  transform: translateY(-1px);
}
.agenda-dag-tijd { color: var(--dark); }
.agenda-dag-adres { color: var(--dark); }
.agenda-dag-sub { color: var(--mid); }
.agenda-dag-type {
  border-radius: 999px;
  padding: 3px 9px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.4);
}
.agenda-dag-type.opname {
  background: linear-gradient(135deg, rgba(28,126,172,0.95), rgba(28,126,172,0.8));
  color: #fff;
}
.agenda-dag-type.reservering {
  background: linear-gradient(135deg, #B9D83A, var(--lime));
  color: var(--dark);
}

/* Zoekresultaten in agenda */
.agenda-zoek-kop { color: var(--mid); }
.agenda-zoek-geen { color: var(--mid); }
.agenda-zoek-item {
  background: rgba(255,255,255,0.55);
  border: 1px solid rgba(255,255,255,0.7);
  border-radius: 12px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.85);
}
.agenda-zoek-item:hover {
  background: rgba(255,255,255,0.85);
  border-color: rgba(165,197,32,0.35);
}
.agenda-zoek-item-datum {
  background: linear-gradient(135deg, rgba(43,54,37,0.92), rgba(43,54,37,0.78));
  color: #fff;
  border-radius: 10px;
}
.agenda-zoek-item-status {
  border-radius: 999px;
  padding: 3px 9px;
}
.agenda-zoek-item-status.ingepland {
  background: rgba(122,156,88,0.18);
  color: #3f5b28;
  border: 1px solid rgba(122,156,88,0.35);
}

/* ═══ INPLAN MODAL (planning specifieke afspraak) → glass ══════════ */
/* Modal-shell zelf — match overige glass-modals + groter formaat */
.afsp-inplan-modal {
  width: calc(100vw - 60px) !important;
  max-width: 1320px !important;
  max-height: 94vh !important;
  background: linear-gradient(135deg, rgba(232,239,222,0.86) 0%, rgba(220,229,206,0.74) 100%) !important;
  backdrop-filter: blur(28px) saturate(1.4);
  -webkit-backdrop-filter: blur(28px) saturate(1.4);
  border: 1px solid rgba(255,255,255,0.7) !important;
  border-radius: 22px !important;
  box-shadow: 0 1px 2px rgba(43,54,37,0.06), 0 24px 64px rgba(43,54,37,0.22), inset 0 1px 0 rgba(255,255,255,0.85) !important;
}

/* Body: 2-kolommen layout — zijbalk links + agenda rechts */
.inplan-body {
  display: grid;
  grid-template-columns: 320px 1fr;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
.inplan-zijbalk {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px;
  overflow-y: auto;
  border-right: 1px solid rgba(43,54,37,0.06);
  background: transparent;
}
.inplan-hoofd {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

/* Info-rij in zijbalk: verticaal gestapeld (was horizontaal flex) */
.inplan-zijbalk .inplan-info-rij {
  display: flex !important;
  flex-direction: column !important;
  padding: 0 !important;
  gap: 10px !important;
  border: none !important;
}

/* Controls (Duur + Medewerkers) als twee aparte glass-kaders boven de agenda */
.inplan-hoofd .inplan-controls {
  margin: 14px 16px 12px !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  display: flex !important;
  gap: 12px !important;
  align-items: stretch !important;
  flex-shrink: 0;
}
.inplan-hoofd .inplan-controls .inplan-ctrl-groep {
  display: flex;
  flex-direction: column;
  gap: 8px !important;
  padding: 12px 16px !important;
  background: linear-gradient(135deg, rgba(255,255,255,0.55), rgba(255,255,255,0.35));
  border: 1px solid rgba(255,255,255,0.7);
  border-radius: 14px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.85), 0 1px 3px rgba(43,54,37,0.04);
}
.inplan-hoofd .inplan-controls .inplan-ctrl-groep:not(.inplan-ctrl-grow) {
  flex: 0 0 auto;
}
.inplan-hoofd .inplan-controls .inplan-ctrl-grow {
  flex: 1;
  min-width: 0;
}
.inplan-hoofd .inplan-controls .inplan-label {
  font-size: 9.5px !important;
  font-weight: 800 !important;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mid) !important;
  margin: 0 !important;
}
.inplan-hoofd .inplan-controls .inplan-select {
  min-width: 140px;
  height: 38px;
}
.inplan-hoofd .inplan-controls .inplan-medewerker-chips {
  min-height: 38px;
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.inplan-hoofd .inplan-controls .inplan-chip {
  height: 30px;
}

/* Sectie's in de zijbalk vullen volle breedte */
.inplan-zijbalk .inplan-sectie {
  flex: 0 0 auto !important;
}

/* Mobiel/smaller: terug naar 1 kolom (zijbalk boven) */
@media (max-width: 900px) {
  .inplan-body { grid-template-columns: 1fr; }
  .inplan-zijbalk {
    border-right: none;
    border-bottom: 1px solid rgba(43,54,37,0.06);
    max-height: 40vh;
  }
}
/* Banner bovenin (was donker) → compacte glass-balk met type-chip */
.inplan-banner {
  background: linear-gradient(180deg, rgba(255,255,255,0.55) 0%, rgba(238,243,230,0.4) 100%) !important;
  border-bottom: 1px solid rgba(43,54,37,0.06) !important;
  backdrop-filter: blur(14px) saturate(1.3);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  height: 50px !important;
  padding: 0 14px !important;
  position: relative;
  overflow: hidden;
}
.inplan-banner h3 {
  color: var(--dark) !important;
  letter-spacing: -0.015em !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  flex: 1;
  text-align: left;
  margin-left: 8px !important;
}
/* Type-badge in banner — match afsp-type-chip */
.banner-type-badge {
  border-radius: 999px !important;
  padding: 4px 10px !important;
  font-size: 9.5px !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), 0 1px 3px rgba(43,54,37,0.06);
}
.banner-type-badge.opname {
  background: linear-gradient(135deg, rgba(28,126,172,0.95), rgba(28,126,172,0.8)) !important;
  color: #fff !important;
}
.banner-type-badge.reservering {
  background: linear-gradient(135deg, #B9D83A, var(--lime)) !important;
  color: var(--dark) !important;
}
/* Sluit-X als compacte glass-pill */
.inplan-banner-sluit {
  width: 30px !important;
  height: 30px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(255,255,255,0.6) !important;
  border: 1px solid rgba(255,255,255,0.85) !important;
  border-radius: 9px !important;
  color: var(--mid) !important;
  padding: 0 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.85);
  position: relative;
}
.inplan-banner-sluit:hover {
  background: rgba(255,255,255,0.9) !important;
  color: var(--dark) !important;
  border-color: rgba(43,54,37,0.18) !important;
}
.inplan-banner-sluit svg { width: 14px !important; height: 14px !important; }

/* Controls bovenin body (medewerker, type etc.) */
.inplan-controls {
  background: rgba(255,255,255,0.4);
  border-bottom: 1px solid rgba(43,54,37,0.06);
}
.inplan-label {
  color: var(--mid);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-size: 11px;
}
.inplan-select {
  background: rgba(255,255,255,0.7);
  border: 1px solid rgba(255,255,255,0.85);
  border-radius: 11px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.85);
  color: var(--dark);
}
.inplan-select:focus {
  background: rgba(255,255,255,0.95);
  border-color: rgba(165,197,32,0.5);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 0 0 3px rgba(165,197,32,0.15);
}

/* Medewerker-chips */
.inplan-medewerker-chips { gap: 8px; }
.inplan-chip {
  background: rgba(255,255,255,0.6);
  border: 1px solid rgba(255,255,255,0.8);
  border-radius: 999px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.85);
  color: var(--dark);
  transition: all 0.15s;
}
.inplan-chip:hover {
  background: rgba(255,255,255,0.85);
  border-color: rgba(165,197,32,0.4);
}
.inplan-chip.actief {
  background: linear-gradient(135deg, rgba(43,54,37,0.95), rgba(43,54,37,0.8));
  color: #fff;
  border-color: rgba(165,197,32,0.5);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), 0 4px 12px rgba(43,54,37,0.2);
}
.inplan-chip-dot { background: rgba(43,54,37,0.3); }
.inplan-chip.actief .inplan-chip-dot { background: var(--lime); box-shadow: 0 0 8px rgba(165,197,32,0.6); }

/* Week-navigatie & vandaag-knop */
.inplan-week-btn {
  background: rgba(255,255,255,0.6);
  border: 1px solid rgba(255,255,255,0.8);
  border-radius: 10px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.85);
}
.inplan-week-btn:hover {
  background: rgba(255,255,255,0.9);
  border-color: rgba(165,197,32,0.4);
}
.inplan-vandaag-btn {
  background: rgba(255,255,255,0.6);
  border: 1px solid rgba(255,255,255,0.8);
  border-radius: 10px;
  color: var(--dark);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.85);
}
.inplan-vandaag-btn:hover {
  background: rgba(165,197,32,0.18);
  border-color: rgba(165,197,32,0.4);
}
.inplan-week-label { color: var(--dark); }

/* Dag-tabs (ma di wo do vr) */
.inplan-dag-tab {
  background: rgba(255,255,255,0.55);
  border: 1px solid rgba(255,255,255,0.75);
  border-radius: 12px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.9);
  transition: all 0.15s;
}
.inplan-dag-tab:hover {
  background: rgba(255,255,255,0.85);
  border-color: rgba(165,197,32,0.35);
  transform: translateY(-1px);
}
.inplan-dag-tab.actief {
  background: linear-gradient(135deg, rgba(43,54,37,0.95), rgba(43,54,37,0.8));
  color: #fff;
  border-color: rgba(165,197,32,0.5);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), 0 6px 18px rgba(43,54,37,0.2);
}
.inplan-dag-tab-dag { color: var(--mid); }
.inplan-dag-tab-num { color: var(--dark); }
.inplan-dag-tab.actief .inplan-dag-tab-dag,
.inplan-dag-tab.actief .inplan-dag-tab-num { color: #fff; }
.inplan-dag-tab.actief .inplan-dag-tab-dag { color: var(--lime); }
.inplan-dag-tab-slots { color: var(--mid); }
.inplan-dag-tab.actief .inplan-dag-tab-slots { color: rgba(255,255,255,0.6); }
.inplan-dag-tab-slots.geen { color: #c54a3c; }

/* Schedule grid */
.inplan-sched {
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
}

/* Agenda-wrap als eigen glass-kader, uitgelijnd met de controls erboven */
.inplan-agenda-wrap {
  margin: 0 16px 16px !important;
  padding: 0 !important;
  background: linear-gradient(135deg, rgba(255,255,255,0.55), rgba(255,255,255,0.35)) !important;
  border: 1px solid rgba(255,255,255,0.7) !important;
  border-radius: 16px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.85), 0 1px 3px rgba(43,54,37,0.04);
  overflow: hidden;
}
.inplan-agenda-head {
  padding: 10px 14px !important;
  margin: 0 !important;
  border-bottom: 1px solid rgba(43,54,37,0.06) !important;
}
.inplan-sched {
  padding: 8px 14px 12px !important;
  margin: 0 !important;
}
.inplan-sched-leeg,
.inplan-sched-loading { color: var(--mid); }
.inplan-sched-error { color: #c54a3c; }
.inplan-sched-warn {
  background: rgba(245,166,35,0.14);
  border: 1px solid rgba(245,166,35,0.3);
  border-radius: 11px;
  color: #8a5d0d;
}
.inplan-sched-legenda { color: var(--mid); }
.inplan-sched-legenda-kleur.vrij {
  background: rgba(165,197,32,0.18);
  border-color: rgba(165,197,32,0.4);
}
.inplan-sched-legenda-kleur.bezet {
  background: rgba(43,54,37,0.12);
}
.inplan-sched-legenda-kleur.gekozen {
  background: linear-gradient(180deg, var(--lime), #8aad18);
  border-color: var(--dark);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.4);
}

/* Footer: keuze + actieknoppen */
.inplan-footer {
  background: linear-gradient(180deg, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0.7) 100%);
  border-top: 1px solid rgba(43,54,37,0.06);
  backdrop-filter: blur(14px) saturate(1.3);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
}
.inplan-keuze-leeg { color: var(--mid); }
.inplan-keuze-gevuld {
  background: rgba(165,197,32,0.18);
  border: 1px solid rgba(165,197,32,0.35);
  border-radius: 11px;
  color: var(--dark);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.5);
}

/* Info-rij met context: Woning / Huurder / Team / Huidige afspraak */
.inplan-info-rij {
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid rgba(43,54,37,0.06) !important;
  padding: 14px 18px !important;
  display: flex !important;
  gap: 12px !important;
  align-items: stretch !important;
}

/* dd-sectie modifier voor de inplan-info-rij (gelijke kolommen) */
.inplan-sectie {
  flex: 1 !important;
  min-width: 0 !important;
  margin: 0 !important;
}
.inplan-sectie .dd-stack { gap: 6px !important; }

/* "Huidige afspraak" sectie krijgt amber accent */
.inplan-sectie-warn {
  background: linear-gradient(135deg, rgba(245,166,35,0.12), rgba(245,166,35,0.05)) !important;
  border-color: rgba(245,166,35,0.3) !important;
}
.inplan-sectie-warn .dd-kicker { color: #8a5d0d !important; }

/* Verlopen voorstel → rode accent (consistent met rode banner) */
.inplan-sectie-danger {
  background: linear-gradient(135deg, rgba(220,53,69,0.12), rgba(220,53,69,0.04)) !important;
  border-color: rgba(220,53,69,0.3) !important;
}
.inplan-sectie-danger .dd-kicker { color: #7a1d26 !important; }

/* Drawer-variant: Team inklapbaar wanneer er een verstuurd voorstel bij staat */
.inplan-sectie-drawer {
  padding: 0 !important;
  overflow: hidden;
}
.inplan-sectie-drawer .inplan-sectie-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 12px 14px !important;
  border: none;
  background: transparent;
  font-family: inherit;
  cursor: pointer;
  text-align: left;
  transition: background 0.18s ease;
  border-radius: 16px;
}
.inplan-sectie-drawer .inplan-sectie-toggle:hover {
  background: rgba(255,255,255,0.35);
}
.inplan-sectie-drawer .inplan-sectie-toggle .dd-kicker {
  margin: 0 !important;
}
.inplan-sectie-drawer .inplan-sectie-chevron {
  width: 14px;
  height: 14px;
  color: var(--mid);
  transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  flex-shrink: 0;
}
.inplan-sectie-drawer[data-collapsed="false"] .inplan-sectie-chevron {
  transform: rotate(180deg);
}
.inplan-sectie-drawer .inplan-sectie-inhoud {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.25s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.2s ease,
              padding 0.25s ease;
  opacity: 0;
  padding: 0 14px;
}
.inplan-sectie-drawer .inplan-sectie-inhoud > * {
  min-height: 0;
  overflow: hidden;
}
.inplan-sectie-drawer[data-collapsed="false"] .inplan-sectie-inhoud {
  grid-template-rows: 1fr;
  opacity: 1;
  padding: 0 14px 12px;
}

/* dd-grid 1-kolom variant voor smalle inplan-sectie kolommen */
.dd-grid-1 {
  grid-template-columns: 1fr !important;
  gap: 6px !important;
}

/* IBox kaarten — glass i.p.v. wit met donker-groene rand */
.ibox {
  flex: 1;
  background: rgba(255,255,255,0.55) !important;
  border: 1px solid rgba(255,255,255,0.7) !important;
  border-left: 1px solid rgba(255,255,255,0.7) !important;
  border-radius: 12px !important;
  padding: 10px 12px 10px 14px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 1px 3px rgba(43,54,37,0.04) !important;
  position: relative;
  overflow: hidden;
  transition: background 0.15s, box-shadow 0.2s !important;
}
.ibox::before {
  content: '';
  position: absolute;
  left: 0; top: 8px; bottom: 8px;
  width: 3px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--lime), var(--green));
}
.ibox:hover {
  background: rgba(255,255,255,0.72) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.95), 0 4px 12px rgba(43,54,37,0.08) !important;
}

/* Tag: kicker-style i.p.v. donkere pill */
.ibox-tag {
  background: transparent !important;
  color: var(--mid) !important;
  padding: 0 !important;
  font-size: 9px !important;
  font-weight: 800 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase;
  border-radius: 0 !important;
  margin-bottom: 6px !important;
  display: block;
}
.ibox-tag-warn {
  background: transparent !important;
  color: #8a5d0d !important;
}
.ibox-huidig::before {
  background: linear-gradient(180deg, #f5a623, #d68910);
}

/* Inhoud */
.ibox-hoofd {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--dark) !important;
  letter-spacing: -0.005em !important;
}
.ibox-rij {
  font-size: 12.5px !important;
  margin-top: 4px !important;
  gap: 8px !important;
}
.ibox-rij a { color: var(--blue) !important; }
.ibox-ico { color: #5e8042 !important; opacity: 1 !important; width: 12px !important; height: 12px !important; }
/* Labels in Title Case i.p.v. UPPERCASE — leesbaarder in kleine pills */
.ibox-label {
  font-size: 11.5px !important;
  font-weight: 500 !important;
  color: var(--mid) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  min-width: auto !important;
}
.ibox-val {
  font-size: 12.5px !important;
  font-weight: 700 !important;
  color: var(--dark) !important;
  letter-spacing: -0.005em;
}

/* Event-pill binnen ibox — exact dezelfde stijl als in de drawer */
.ibox-event {
  margin-top: 8px !important;
}

/* Schedule: vult de hele rechter kolom */
.inplan-sched {
  min-height: 0;
  flex: 1;
}

/* Inline-styled "open uitnodiging" banner in inplan-modal → glass amber */
#inplan-uitnodiging-banner {
  background: linear-gradient(135deg, rgba(245,166,35,0.18), rgba(245,166,35,0.08)) !important;
  border: 1px solid rgba(245,166,35,0.35) !important;
  border-left: 4px solid #f5a623 !important;
  border-radius: 12px !important;
  margin: 14px 18px 0 !important;
  padding: 10px 14px !important;
  backdrop-filter: blur(12px) saturate(1.2);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.55), 0 2px 12px rgba(245,166,35,0.1) !important;
}
#inplan-uitnodiging-banner > div {
  color: #6b4700 !important;
}
#inplan-uitnodiging-banner strong { color: #5a3c00 !important; }

/* Verlopen variant → rood accent (geen reactie op self-service) */
#inplan-uitnodiging-banner.verlopen {
  background: linear-gradient(135deg, rgba(220,53,69,0.14), rgba(220,53,69,0.05)) !important;
  border-color: rgba(220,53,69,0.35) !important;
  border-left-color: #dc3545 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.55), 0 2px 12px rgba(220,53,69,0.1) !important;
}
#inplan-uitnodiging-banner.verlopen > div { color: #7a1d26 !important; }
#inplan-uitnodiging-banner.verlopen strong { color: #5c1117 !important; }
#inplan-uitnodiging-banner.verlopen svg { stroke: #b02a37 !important; }

/* Agenda-wrap binnen inplan-modal */
.inplan-agenda-wrap {
  background: rgba(255,255,255,0.4);
  border: 1px solid rgba(255,255,255,0.6);
  border-radius: 14px;
}
.inplan-agenda-head {
  border-bottom: 1px solid rgba(43,54,37,0.06);
}
.inplan-meta { color: var(--mid); }

/* ═══ UITNODIG MODAL — match inplan-modal layout & sizing ═════════ */
.uitnodig-modal {
  width: calc(100vw - 60px) !important;
  max-width: 1320px !important;
  max-height: 94vh !important;
  background: linear-gradient(135deg, rgba(232,239,222,0.86) 0%, rgba(220,229,206,0.74) 100%) !important;
  backdrop-filter: blur(28px) saturate(1.4);
  -webkit-backdrop-filter: blur(28px) saturate(1.4);
  border: 1px solid rgba(255,255,255,0.7) !important;
  border-radius: 22px !important;
  box-shadow: 0 1px 2px rgba(43,54,37,0.06), 0 24px 64px rgba(43,54,37,0.22), inset 0 1px 0 rgba(255,255,255,0.85) !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 0 !important;
  overflow: hidden;
}

/* Controls glass-kaders: gedefinieerd in .inplan-hoofd .inplan-controls hierboven,
   geldt voor beide modals (inplan + uitnodig) */

/* Titel gecentreerd in de topbar (zowel inplan- als uitnodig-modal) */
.uitnodig-modal .inplan-banner,
.afsp-inplan-modal .inplan-banner {
  position: relative;
}
.uitnodig-modal .inplan-banner h3,
.afsp-inplan-modal .inplan-banner h3 {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  margin: 0 !important;
  text-align: center;
  pointer-events: none;
}

/* Form binnen hoofd-kolom: vult ruimte, scrollt indien nodig */
.uitnodig-modal .uitnodig-form {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 14px 20px 20px !important;
}
.uitnodig-modal .uitnodig-kolommen {
  display: grid !important;
  grid-template-columns: 1.1fr 1fr !important;
  gap: 24px !important;
  align-items: stretch;
  height: 100%;
}
.uitnodig-modal .uitnodig-kolom-links,
.uitnodig-modal .uitnodig-kolom-rechts {
  width: auto !important;
  flex: unset !important;
  min-width: 0;
}

/* ─── Kalender: glass-paneel, grotere cellen, betere typografie ─── */
.uitnodig-modal .uitnodig-kalender {
  background: linear-gradient(135deg, rgba(255,255,255,0.55), rgba(255,255,255,0.35)) !important;
  border: 1px solid rgba(255,255,255,0.7) !important;
  border-radius: 16px !important;
  padding: 16px 18px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.85), 0 1px 3px rgba(43,54,37,0.04);
}
.uitnodig-modal .uitnodig-kal-nav {
  margin-bottom: 14px !important;
}
.uitnodig-modal .uitnodig-kal-maand {
  font-size: 16px !important;
  letter-spacing: -0.01em;
  font-weight: 800 !important;
  color: var(--dark);
}
.uitnodig-modal .uitnodig-kal-weekdagen {
  font-size: 10.5px !important;
  letter-spacing: 0.1em !important;
  margin-bottom: 6px !important;
  padding: 0 2px;
}
.uitnodig-modal .uitnodig-kal-grid {
  gap: 4px !important;
}
.uitnodig-modal .uitnodig-kal-dag {
  font-size: 14px !important;
  font-weight: 700 !important;
  border-radius: 9px !important;
  background: rgba(255,255,255,0.5);
  border: 1px solid rgba(255,255,255,0.65);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.85);
  transition: all 0.15s !important;
}
.uitnodig-modal .uitnodig-kal-dag:hover {
  background: rgba(255,255,255,0.85) !important;
  border-color: rgba(165,197,32,0.4);
  transform: translateY(-1px);
}
.uitnodig-modal .uitnodig-kal-dag.verleden,
.uitnodig-modal .uitnodig-kal-dag.weekend {
  background: rgba(255,255,255,0.2);
  border-color: rgba(255,255,255,0.3);
}
.uitnodig-modal .uitnodig-kal-dag.start,
.uitnodig-modal .uitnodig-kal-dag.eind {
  background: linear-gradient(180deg, #3a4830 0%, #2b3625 100%) !important;
  color: #fff !important;
  border-color: rgba(43,54,37,0.6);
  box-shadow:
    inset 0 1px 0 rgba(165,197,32,0.32),
    inset 0 0 0 1px rgba(255,255,255,0.06),
    0 4px 14px rgba(43,54,37,0.22);
}
.uitnodig-modal .uitnodig-kal-dag.bereik {
  background: linear-gradient(135deg, rgba(165,197,32,0.22), rgba(122,156,88,0.12)) !important;
  border-color: rgba(165,197,32,0.4);
  color: var(--dark) !important;
}

.uitnodig-modal .uitnodig-periode-tekst {
  font-size: 12.5px !important;
  margin-top: 12px !important;
  padding: 8px 12px;
  background: rgba(255,255,255,0.5);
  border: 1px solid rgba(255,255,255,0.7);
  border-radius: 10px;
  text-align: center;
  font-style: normal !important;
}
.uitnodig-modal .uitnodig-periode-tekst.actief {
  background: linear-gradient(135deg, rgba(165,197,32,0.18), rgba(122,156,88,0.08));
  border-color: rgba(165,197,32,0.4);
  color: #3f5b28 !important;
}
/* "Kies eerst een duur" — amber waarschuwing */
.uitnodig-modal .uitnodig-periode-tekst.is-vereist {
  background: linear-gradient(135deg, rgba(245,166,35,0.16), rgba(245,166,35,0.06));
  border-color: rgba(245,166,35,0.4);
  color: #8a5d0d !important;
  font-weight: 700;
}

/* Disabled kalender — als er nog geen duur is gekozen */
.uitnodig-modal .uitnodig-kalender.is-disabled {
  position: relative;
}
.uitnodig-modal .uitnodig-kalender.is-disabled .uitnodig-kal-grid {
  opacity: 0.4;
  pointer-events: none;
  filter: saturate(0.5);
}
.uitnodig-modal .uitnodig-kalender.is-disabled .uitnodig-kal-dag {
  cursor: not-allowed !important;
}

/* Shake-animatie op duur-veld als gebruiker probeert te klikken zonder selectie */
@keyframes uitnodigDuurShake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-4px); }
  40%, 80% { transform: translateX(4px); }
}
.uitnodig-modal .uitnodig-duur-shake {
  animation: uitnodigDuurShake 0.4s cubic-bezier(0.36, 0.07, 0.19, 0.97);
  border-color: #f5a623 !important;
  box-shadow: 0 0 0 3px rgba(245,166,35,0.25) !important;
}

/* ─── Tijdblokken: glass-rijen, grotere inputs ───────────────────── */
.uitnodig-modal .uitnodig-kolom-rechts .uitnodig-veld {
  background: linear-gradient(135deg, rgba(255,255,255,0.55), rgba(255,255,255,0.35));
  border: 1px solid rgba(255,255,255,0.7);
  border-radius: 16px;
  padding: 16px 18px !important;
  gap: 10px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.85), 0 1px 3px rgba(43,54,37,0.04);
}
.uitnodig-modal #uitnodig-tijdblokken {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.uitnodig-modal .uitnodig-tijdblok {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: rgba(255,255,255,0.7);
  border: 1px solid rgba(255,255,255,0.85);
  border-radius: 12px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.9);
}
.uitnodig-modal .uitnodig-tijdblok input[type="time"] {
  flex: 1;
  padding: 9px 12px !important;
  background: rgba(255,255,255,0.85) !important;
  border: 1px solid rgba(255,255,255,0.9) !important;
  border-radius: 9px !important;
  font-family: 'proxima-nova', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: var(--dark);
  text-align: center;
  font-variant-numeric: tabular-nums;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.85);
}
.uitnodig-modal .uitnodig-tijdblok input[type="time"]:focus {
  background: #fff !important;
  border-color: rgba(165,197,32,0.5) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 0 0 3px rgba(165,197,32,0.15) !important;
  outline: none;
}
.uitnodig-modal .uitnodig-tijdblok > span {
  font-size: 11px !important;
  color: var(--mid) !important;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.uitnodig-modal .btn-tijdblok-verwijder {
  width: 28px;
  height: 28px;
  border: 1px solid rgba(43,54,37,0.1);
  background: rgba(255,255,255,0.6);
  border-radius: 8px;
  color: var(--mid);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.15s;
}
.uitnodig-modal .btn-tijdblok-verwijder:hover {
  background: rgba(220,53,69,0.1);
  border-color: rgba(220,53,69,0.3);
  color: #c54a3c;
}
.uitnodig-modal .uitnodig-tijdblok-add {
  margin-top: 4px !important;
  padding: 9px 14px !important;
  font-size: 12.5px !important;
  background: rgba(255,255,255,0.7) !important;
  border: 1px dashed rgba(43,54,37,0.2) !important;
  border-radius: 10px !important;
  color: var(--dark) !important;
  font-weight: 700;
  align-self: stretch !important;
  cursor: pointer;
  transition: all 0.15s;
}
.uitnodig-modal .uitnodig-tijdblok-add:hover {
  background: rgba(165,197,32,0.12) !important;
  border-color: rgba(165,197,32,0.5) !important;
  border-style: solid !important;
}

/* Footer-knoppen — groter (beide modals: inplan + uitnodig) */
.inplan-footer {
  padding: 14px 20px !important;
}
.inplan-footer-btns {
  gap: 10px !important;
}
.inplan-footer-btns .btn {
  font-size: 14px !important;
  padding: 11px 22px !important;
  border-radius: 11px !important;
}
.inplan-footer-btns .btn svg {
  width: 14px !important;
  height: 14px !important;
}
/* Uitnodig-modal: footer rechts uitgelijnd (geen keuze/legenda links) */
.uitnodig-modal .inplan-footer {
  justify-content: flex-end !important;
}
.uitnodig-modal #uitnodig-fout {
  flex: 0 1 auto !important;
  margin-right: auto !important;
  max-width: 50%;
}
.uitnodig-form input,
.uitnodig-form select,
.uitnodig-form textarea {
  background: rgba(255,255,255,0.7);
  border: 1px solid rgba(255,255,255,0.85);
  border-radius: 11px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.85);
}
.uitnodig-form input:focus,
.uitnodig-form select:focus,
.uitnodig-form textarea:focus {
  background: rgba(255,255,255,0.95);
  border-color: rgba(165,197,32,0.5);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 0 0 3px rgba(165,197,32,0.15);
  outline: none;
}
.uitnodig-tijdblok-add {
  background: rgba(255,255,255,0.6) !important;
  border: 1px solid rgba(255,255,255,0.85) !important;
  color: var(--dark) !important;
  border-radius: 8px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.85);
}
.uitnodig-tijdblok-add:hover {
  background: rgba(165,197,32,0.18) !important;
  border-color: rgba(165,197,32,0.4) !important;
}

/* ╔══════════════════════════════════════════════════════════════════╗
   ║  INKLAPBARE SIDEBAR                                                ║
   ╚══════════════════════════════════════════════════════════════════╝ */

:root {
  --sidebar-w-expanded: 232px;
  --sidebar-w-collapsed: 76px;
  --sidebar-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --sidebar-dur: 0.28s;
}

/* Sidebar + main animeren de breedte smooth */
.sidebar {
  transition: width var(--sidebar-dur) var(--sidebar-ease) !important;
  overflow: visible !important;
}
.main {
  transition: margin-left var(--sidebar-dur) var(--sidebar-ease);
}
/* In collapsed state mag de nav niet clippen (flyout steekt eruit, scrollbar ongewenst) */
body.sidebar-collapsed .sidebar nav {
  overflow: visible !important;
}

/* Toggle-knop: zwevend pilletje aan de rechterrand van de sidebar */
.sidebar-toggle {
  position: absolute;
  top: 28px;
  right: -13px;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid rgba(43,54,37,0.12);
  box-shadow: 0 2px 8px rgba(43,54,37,0.14), inset 0 1px 0 rgba(255,255,255,0.9);
  cursor: pointer;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--mid);
  padding: 0;
  transition: transform 0.2s ease, color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}
.sidebar-toggle:hover {
  color: var(--dark);
  background: #fff;
  transform: scale(1.1);
  box-shadow: 0 4px 14px rgba(43,54,37,0.18), inset 0 1px 0 rgba(255,255,255,0.95);
}
.sidebar-toggle-ico {
  width: 13px;
  height: 13px;
  transition: transform var(--sidebar-dur) var(--sidebar-ease);
}
body.sidebar-collapsed .sidebar-toggle-ico { transform: rotate(180deg); }

/* Volledig logo laten we met rust — alleen fade-opacity bij collapse.
   Beeldmerk zit absoluut er-overheen. Container krijgt alleen een stacking-context. */
.sidebar-logo { position: relative; }
.sidebar-logo-full {
  transition: opacity var(--sidebar-dur) ease;
}
.sidebar-logo-mark {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 40px;
  height: auto;
  transform: translate(-50%, -50%);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--sidebar-dur) ease;
}
body.sidebar-collapsed .sidebar-logo-full { opacity: 0; }
body.sidebar-collapsed .sidebar-logo-mark { opacity: 1; }

/* Collapsed: sidebar smaller + main margin updates via CSS var */
body.sidebar-collapsed { --sidebar-w: var(--sidebar-w-collapsed); }
body.sidebar-collapsed .sidebar { width: var(--sidebar-w-collapsed); }

/* Labels fade + krimpen */
.nav-text {
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  max-width: 220px;
  opacity: 1;
  transition: max-width var(--sidebar-dur) var(--sidebar-ease),
              opacity 0.18s ease;
}
body.sidebar-collapsed .nav-text {
  max-width: 0;
  opacity: 0;
}
body.sidebar-collapsed .nav-label {
  opacity: 0;
  pointer-events: none;
  height: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  transition: opacity 0.15s ease, height 0.2s ease, margin 0.2s ease, padding 0.2s ease;
}
.nav-label {
  transition: opacity 0.2s ease;
}

/* Nav-items: centreren in collapsed state, chevron verbergen */
body.sidebar-collapsed .nav-item,
body.sidebar-collapsed .nav-group-header {
  justify-content: center !important;
  padding: 12px 0 !important;
  gap: 0 !important;
  position: relative;
}
body.sidebar-collapsed .nav-arrow { display: none; }
body.sidebar-collapsed .nav-title {
  justify-content: center;
  gap: 0 !important;
  width: 100%;
}
/* Tekstspan in sidebar-zelf hard op 0-breedte (labels weg).
   Binnen de flyout laten we ze zichtbaar — zie .nav-group-items rule hieronder. */
body.sidebar-collapsed nav > .nav-item > .nav-text,
body.sidebar-collapsed .nav-title > .nav-text {
  width: 0 !important;
  max-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Tijdens de sidebar-toggle: flyout zonder transition om flikker te voorkomen
   wanneer .nav-group-items van inline (display:none) naar flyout (display:flex)
   wisselt. Class wordt 1 frame later weer verwijderd in toggleSidebar(). */
body.sidebar-toggling .nav-group-items,
body.sidebar-toggling .nav-group:hover .nav-group-items {
  transition: none !important;
}

/* Admin-submenu → flyout in collapsed state */
body.sidebar-collapsed .nav-group { position: relative; }
body.sidebar-collapsed .nav-group-items {
  position: absolute;
  left: 100%;
  top: 0;
  min-width: 230px;
  margin-left: 10px;
  padding: 10px 8px;
  background: rgba(255,255,255,0.94);
  backdrop-filter: blur(22px) saturate(1.4);
  -webkit-backdrop-filter: blur(22px) saturate(1.4);
  border: 1px solid rgba(255,255,255,0.75);
  border-radius: 14px;
  box-shadow: 0 10px 32px rgba(43,54,37,0.14), inset 0 1px 0 rgba(255,255,255,0.9);
  opacity: 0;
  visibility: hidden;
  transform: translateX(-6px);
  transition:
    opacity 0.18s ease 0.12s,
    transform 0.18s ease 0.12s,
    visibility 0s linear 0.3s;
  z-index: 300;
  pointer-events: none;
  display: flex !important;
  flex-direction: column;
  gap: 2px;
  height: auto !important;
  max-height: none !important;
}
body.sidebar-collapsed .nav-group:hover .nav-group-items,
body.sidebar-collapsed .nav-group-items:hover {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
  pointer-events: auto;
  transition:
    opacity 0.18s ease,
    transform 0.18s ease,
    visibility 0s linear 0s;
}
/* Onzichtbare hover-brug rechts van de nav-group, zodat .nav-group:hover actief
   blijft tot cursor het flyout bereikt. (pointer-events op flyout schakelt te snel,
   daarom bridge op de nav-group zelf.) */
body.sidebar-collapsed .nav-group::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  right: -16px;
  width: 16px;
  pointer-events: auto;
}
body.sidebar-collapsed .nav-group-items .nav-item {
  justify-content: flex-start !important;
  padding: 10px 14px !important;
  gap: 11px !important;
  margin: 0 !important;
}
body.sidebar-collapsed .nav-group-items .nav-text {
  max-width: 220px;
  opacity: 1;
}

/* Flyout-kopje */
.nav-flyout-titel { display: none; }
body.sidebar-collapsed .nav-flyout-titel {
  display: block;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(43,54,37,0.5);
  padding: 4px 14px 8px;
  border-bottom: 1px solid rgba(43,54,37,0.08);
  margin-bottom: 4px;
}

/* Tooltip voor enkele items in collapsed state */
body.sidebar-collapsed .nav-item[data-tip]:hover::after,
body.sidebar-collapsed .nav-group-header[data-tip]:hover::after {
  content: attr(data-tip);
  position: absolute;
  left: calc(100% + 14px);
  top: 50%;
  transform: translateY(-50%);
  padding: 6px 11px;
  background: var(--dark);
  color: var(--cream);
  font-size: 12px;
  font-weight: 600;
  border-radius: 8px;
  white-space: nowrap;
  box-shadow: 0 4px 14px rgba(43,54,37,0.2);
  z-index: 310;
  pointer-events: none;
  animation: sidebarTipIn 0.12s ease both;
}
@keyframes sidebarTipIn {
  from { opacity: 0; transform: translate(-4px, -50%); }
  to   { opacity: 1; transform: translate(0, -50%); }
}
/* Admin heeft een flyout, dus tooltip op de header onderdrukken als flyout open is */
body.sidebar-collapsed .nav-group:hover .nav-group-header::after {
  display: none;
}

/* Footer in collapsed: alleen avatar + icon-only logout */
body.sidebar-collapsed .sidebar-footer {
  padding: 14px 10px !important;
}
body.sidebar-collapsed .user-pill {
  padding: 6px !important;
  justify-content: center;
  gap: 0 !important;
}
body.sidebar-collapsed .user-pill > div:not(.user-av) {
  display: none;
}
body.sidebar-collapsed .logout-btn {
  padding: 8px !important;
  justify-content: center;
  gap: 0 !important;
  font-size: 0;
}
body.sidebar-collapsed .logout-btn svg {
  width: 16px;
  height: 16px;
  margin: 0;
}

/* Active-accent strepje links iets inzetten zodat ie past in smalle sidebar */
body.sidebar-collapsed .nav-item.active::before {
  left: -2px;
}

/* Mobile fallback overschrijft alles — laat de collapsed-state daar niks doen */
@media (max-width: 768px) {
  body.sidebar-collapsed .sidebar { display: none; }
  body.sidebar-collapsed { --sidebar-w: 0px; }
  body.sidebar-collapsed .main { margin-left: 0; padding-bottom: 64px; }
}