*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
  :root {
    /* Fiscly 2.0 — deep slate + emerald */
    --bg:      #0b0d10;   /* pagina-achtergrond */
    --bg2:     #12151a;   /* sidebar / cards */
    --bg3:     #1a1e25;   /* inputs / hover */
    --bg4:     #232830;   /* lichtste surface */
    --border:  rgba(255,255,255,0.07);
    --border2: rgba(255,255,255,0.13);
    --text:    #eef1f4;
    --text2:   #9aa5b1;   /* subtiele tekst */
    --text3:   #85909e;   /* gedimd; haalt 5,2:1 contrast, was #5c6672 met 3,1:1 */
    --green:   #2dd48f;   /* Fiscly emerald accent */
    --green2:  #24bd7d;   /* hover groen */
    --green-dim: rgba(45,212,143,0.12);
    --red:     #f0655a;
    --orange:  #f2a13c;
    --blue:    #62a8f0;
    --purple:  #a58cf0;
    --radius:  14px;
    --radius-sm: 8px;
    --shadow-card: 0 1px 2px rgba(0,0,0,0.25), 0 8px 24px -12px rgba(0,0,0,0.4);
    --shadow-pop: 0 24px 64px -16px rgba(0,0,0,0.65), 0 0 0 1px rgba(255,255,255,0.04);
    --glow-green: 0 0 0 3px rgba(45,212,143,0.16);
  }
  html { scrollbar-color: var(--bg4) transparent; }
  body { font-family: 'Inter', sans-serif; background: var(--bg); color: var(--text); min-height: 100vh; display: flex; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
  ::selection { background: rgba(45,212,143,0.28); }
  ::-webkit-scrollbar { width: 10px; height: 10px; }
  ::-webkit-scrollbar-thumb { background: var(--bg4); border-radius: 8px; border: 2px solid var(--bg); }
  ::-webkit-scrollbar-thumb:hover { background: var(--text3); }
  ::-webkit-scrollbar-track { background: transparent; }

  /* ── Sidebar ── */
  .sidebar { width: 232px; min-height: 100vh; background: linear-gradient(180deg, var(--bg2) 0%, var(--bg) 100%); border-right: 1px solid var(--border); display: flex; flex-direction: column; padding: 0; position: fixed; top: 0; left: 0; bottom: 0; overflow-y: auto; z-index: 50; }
  .logo-wrap { padding: 22px 20px 18px; border-bottom: 1px solid var(--border); }
  .logo-img { height: 28px; width: auto; display: block; }
  .logo-sub { font-size: 11.5px; color: var(--text3); margin-top: 6px; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 500; }
  .nav-section { padding: 20px 22px 6px; font-size: 11.5px; font-weight: 700; color: var(--text3); letter-spacing: 0.12em; text-transform: uppercase; display: flex; align-items: center; justify-content: space-between; cursor: pointer; user-select: none; border: none; background: none; width: 100%; font-family: 'Inter', sans-serif; text-align: left; transition: color 0.15s; }
  .nav-section:hover { color: var(--text2); }
  .nav-section .nav-chevron { width: 11px; height: 11px; opacity: 0.5; transition: transform 0.2s ease; flex-shrink: 0; }
  .nav-groep { overflow: hidden; max-height: 400px; transition: max-height 0.25s ease; }
  .nav-groep.dicht { max-height: 0; }
  .nav-section.dicht .nav-chevron { transform: rotate(-90deg); }
  .nav-badge { margin-left: auto; min-width: 18px; height: 17px; padding: 0 5px; display: none; align-items: center; justify-content: center; font-size: 11.5px; font-weight: 700; font-family: 'JetBrains Mono', monospace; color: var(--orange); background: rgba(230,150,60,0.13); border: 1px solid rgba(230,150,60,0.25); border-radius: 9px; flex-shrink: 0; }
  .nav-badge.aan { display: inline-flex; }
  .nav-item.active .nav-badge { color: var(--green); background: var(--green-dim); border-color: rgba(45,212,143,0.3); }
  .nav-item { display: flex; align-items: center; gap: 11px; padding: 9px 14px; margin: 1px 10px; font-size: 13.5px; font-weight: 500; color: var(--text2); cursor: pointer; border: none; background: none; width: calc(100% - 20px); text-align: left; transition: all 0.16s ease; font-family: 'Inter', sans-serif; border-radius: var(--radius-sm); position: relative; }
  .nav-item:hover { color: var(--text); background: var(--bg3); }
  .nav-item.active { color: var(--green); background: var(--green-dim); font-weight: 600; }
  .nav-item.active::before { content: ''; position: absolute; left: -10px; top: 20%; bottom: 20%; width: 3px; border-radius: 0 3px 3px 0; background: var(--green); }
  .nav-icon { width: 16px; height: 16px; opacity: 0.55; flex-shrink: 0; transition: opacity 0.16s; }
  .nav-item:hover .nav-icon { opacity: 0.85; }
  .nav-item.active .nav-icon { opacity: 1; }
  .nav-item.active svg { stroke: var(--green); }

  /* ── Main ── */
  /* min-width:0 is essentieel: zonder deze regel groeit .main als flex-item
     mee met de breedste tabel en schuift de héle pagina opzij op een telefoon. */
  .main { margin-left: 232px; flex: 1; min-width: 0; min-height: 100vh; }
  .topbar { background: var(--bg2); background: color-mix(in srgb, var(--bg) 78%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--border); padding: 15px 32px; display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 100; }
  .page-title { font-size: 16px; font-weight: 700; color: var(--text); letter-spacing: -0.015em; }
  .page-subtitle { font-size: 12px; color: var(--text3); margin-top: 2px; }
  .topbar-actions { display: flex; gap: 10px; align-items: center; }
  .content { padding: 28px 32px 48px; }
  /* Zelfde reden: grid- en flexkinderen mogen hun kolom niet oprekken. */
  .stats-grid > *, .dash-grid > * { min-width: 0; }
  /* Groot scherm = alles groter. Vrijwel alle groottes staan als losse
     px-waarden inline in dashboard.js, dus één zoom op body is de enige
     manier om het hele dashboard consistent op te schalen. Media queries
     rekenen met de echte viewport en blijven dus gewoon werken; op
     mobiel/tablet verandert er niets. */
  .card { max-width: 100%; }

  /* ── Buttons ── */
  .btn { padding: 8px 15px; font-size: 13px; font-weight: 500; border-radius: var(--radius-sm); cursor: pointer; transition: all 0.16s ease; font-family: 'Inter', sans-serif; border: 1px solid var(--border2); background: var(--bg3); color: var(--text); display: inline-flex; align-items: center; gap: 6px; }
  .btn:hover { background: var(--bg4); border-color: rgba(255,255,255,0.2); transform: translateY(-1px); }
  .btn:active { transform: translateY(0); }
  .btn-primary { background: linear-gradient(180deg, var(--green) 0%, var(--green2) 100%); color: #05130c; border-color: transparent; font-weight: 700; box-shadow: 0 2px 10px -2px rgba(45,212,143,0.45); }
  .btn-primary:hover { background: linear-gradient(180deg, #3ce3a0 0%, var(--green) 100%); border-color: transparent; box-shadow: 0 4px 16px -2px rgba(45,212,143,0.55); }
  .btn-danger { background: rgba(240,101,90,0.1); color: var(--red); border-color: rgba(240,101,90,0.25); }
  .btn-danger:hover { background: rgba(240,101,90,0.2); border-color: rgba(240,101,90,0.4); }
  /* ── ⋯ actiemenu voor secundaire acties in tabellen ── */
  .actie-menu { position: relative; display: inline-block; }
  .actie-menu-lijst { display: none; position: absolute; right: 0; top: calc(100% + 4px); background: var(--bg4); border: 1px solid var(--border2); border-radius: 10px; box-shadow: var(--shadow-pop); z-index: 300; min-width: 165px; padding: 4px; }
  .actie-menu.open .actie-menu-lijst { display: block; }
  .actie-menu-lijst button { display: block; width: 100%; text-align: left; background: none; border: none; padding: 8px 12px; font-size: 13px; font-weight: 500; color: var(--text); cursor: pointer; border-radius: 7px; font-family: 'Inter', sans-serif; }
  .actie-menu-lijst button:hover { background: var(--bg3); }
  .actie-menu-lijst button.gevaar { color: var(--red); }
  .actie-menu-lijst button.gevaar:hover { background: rgba(240,101,90,0.12); }
  .btn-green { background: var(--green-dim); color: var(--green); border-color: rgba(45,212,143,0.25); }
  .btn-green:hover { background: rgba(45,212,143,0.2); border-color: rgba(45,212,143,0.4); }
  .btn-sm { padding: 5px 11px; font-size: 12px; }

  /* ── Stats ── */
  .stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 26px; }
  .stat-card { background: linear-gradient(180deg, var(--bg3) 0%, var(--bg2) 85%); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 20px; box-shadow: var(--shadow-card); transition: all 0.18s ease; position: relative; overflow: hidden; }
  .stat-card::after { content: ''; position: absolute; inset: 0 0 auto 0; height: 2px; background: linear-gradient(90deg, transparent, rgba(45,212,143,0.35), transparent); opacity: 0; transition: opacity 0.18s; }
  .stat-card:hover { border-color: var(--border2); transform: translateY(-2px); }
  .stat-card:hover::after { opacity: 1; }
  .stat-label { font-size: 11.5px; color: var(--text3); font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; margin-bottom: 9px; }
  .stat-value { font-size: 26px; font-weight: 700; color: var(--text); letter-spacing: -0.03em; font-family: 'JetBrains Mono', monospace; }
  .stat-sub { font-size: 12px; color: var(--text3); margin-top: 5px; }

  /* ── Card / Table ── */
  .card { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-card); }
  .card-header { padding: 15px 20px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; }
  .card-title { font-size: 13.5px; font-weight: 700; color: var(--text); letter-spacing: -0.01em; }
  .card-subtitle { font-size: 12px; color: var(--text3); margin-top: 2px; font-weight: 400; }
  table { width: 100%; border-collapse: collapse; }
  th { text-align: left; padding: 10px 20px; font-size: 11.5px; font-weight: 700; color: var(--text3); letter-spacing: 0.08em; text-transform: uppercase; border-bottom: 1px solid var(--border); background: rgba(255,255,255,0.015); }
  td { padding: 12px 20px; font-size: 13px; color: var(--text); border-bottom: 1px solid var(--border); vertical-align: middle; }
  tr:last-child td { border-bottom: none; }
  tr:hover td { background: rgba(45,212,143,0.035); }

  /* ── Badges ── */
  .badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 100px; font-size: 11.5px; font-weight: 600; letter-spacing: 0.02em; border: 1px solid transparent; }
  .badge::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: currentColor; box-shadow: 0 0 6px currentColor; }
  .badge-betaald    { background: rgba(45,212,143,0.12); color: var(--green); border-color: rgba(45,212,143,0.2); }
  .badge-verstuurd  { background: rgba(98,168,240,0.12); color: var(--blue); border-color: rgba(98,168,240,0.2); }
  .badge-concept    { background: rgba(154,165,177,0.1); color: var(--text2); border-color: rgba(154,165,177,0.18); }
  .badge-achterstallig { background: rgba(240,101,90,0.12); color: var(--red); border-color: rgba(240,101,90,0.22); }
  .badge-incasso    { background: rgba(242,161,60,0.12); color: var(--orange); border-color: rgba(242,161,60,0.22); }
  /* Vastgesteld = nog niet verstuurd: bewust een gevulde, afwijkende badge
     (gestippelde rand + open bolletje) zodat hij direct te onderscheiden is
     van het zachte blauwe "verstuurd". */
  .badge-vastgesteld { background: #7a5fd0; color: #ffffff; border: 1px dashed rgba(255,255,255,0.55); font-weight: 700; }
  .badge-vastgesteld::before { background: transparent; border: 1.5px solid #ffffff; box-shadow: none; width: 4px; height: 4px; }
  .badge-mislukt    { background: rgba(240,101,90,0.12); color: var(--red); border-color: rgba(240,101,90,0.22); }
  .badge-geannuleerd{ background: rgba(92,102,114,0.15); color: var(--text3); border-color: rgba(92,102,114,0.25); }
  .badge-akkoord    { background: rgba(45,212,143,0.12); color: var(--green); border-color: rgba(45,212,143,0.2); }
  .badge-open       { background: rgba(242,161,60,0.12); color: var(--orange); border-color: rgba(242,161,60,0.22); }
  .badge-bezig      { background: rgba(98,168,240,0.12); color: var(--blue); border-color: rgba(98,168,240,0.2); }
  .badge-afgerond   { background: rgba(45,212,143,0.12); color: var(--green); border-color: rgba(45,212,143,0.2); }
  .badge-nieuw      { background: rgba(98,168,240,0.12); color: var(--blue); border-color: rgba(98,168,240,0.2); }
  .badge-opgevolgd  { background: rgba(242,161,60,0.12); color: var(--orange); border-color: rgba(242,161,60,0.22); }
  .badge-afspraak_gepland { background: rgba(45,212,143,0.12); color: var(--green); border-color: rgba(45,212,143,0.2); }
  .badge-offerte    { background: rgba(98,168,240,0.12); color: var(--blue); border-color: rgba(98,168,240,0.2); }
  .badge-klant      { background: rgba(45,212,143,0.18); color: var(--green); border-color: rgba(45,212,143,0.3); }
  .badge-koud       { background: rgba(92,102,114,0.15); color: var(--text3); border-color: rgba(92,102,114,0.25); }

  .mono { font-family: 'JetBrains Mono', monospace; font-size: 12px; }

  /* ── Modal ── */
  .modal-overlay { display: none; position: fixed; inset: 0; background: rgba(4,6,8,0.7); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); z-index: 1000; align-items: center; justify-content: center; }
  .modal-overlay.open { display: flex; }
  .modal { background: var(--bg2); border: 1px solid var(--border2); border-radius: var(--radius); width: 540px; max-height: 88vh; overflow-y: auto; box-shadow: var(--shadow-pop); animation: modalIn 0.18s cubic-bezier(0.16,1,0.3,1); }
  @keyframes modalIn { from { transform: translateY(10px) scale(0.985); opacity: 0; } to { transform: none; opacity: 1; } }
  .modal-header { padding: 18px 24px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; background: var(--bg2); z-index: 1; }
  .modal-title { font-size: 15px; font-weight: 700; letter-spacing: -0.01em; }
  .modal-close { background: none; border: none; color: var(--text3); cursor: pointer; font-size: 20px; line-height: 1; padding: 3px 8px; border-radius: 6px; transition: all 0.14s; }
  .modal-close:hover { background: var(--bg3); color: var(--text); }
  .modal-body { padding: 24px; }
  .modal-footer { padding: 15px 24px; border-top: 1px solid var(--border); display: flex; gap: 8px; justify-content: flex-end; background: rgba(255,255,255,0.012); }

  /* ── Forms ── */
  .form-group { margin-bottom: 16px; }
  .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  label { display: block; font-size: 12px; font-weight: 600; color: var(--text2); margin-bottom: 6px; }
  input, select, textarea { width: 100%; padding: 9px 12px; font-size: 13px; background: var(--bg3); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); font-family: 'Inter', sans-serif; outline: none; transition: border-color 0.15s, box-shadow 0.15s; }
  input:hover, select:hover, textarea:hover { border-color: var(--border2); }
  input:focus, select:focus, textarea:focus { border-color: var(--green); box-shadow: var(--glow-green); }
  textarea { resize: vertical; min-height: 80px; }
  select option { background: var(--bg3); }
  input::placeholder, textarea::placeholder { color: var(--text3); }

  /* ── Tabs ── */
  .tab { padding: 10px 15px; font-size: 13px; font-weight: 500; color: var(--text3); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: all 0.15s; background: none; border-top: none; border-left: none; border-right: none; font-family: 'Inter', sans-serif; }
  .tab:hover { color: var(--text2); }
  .tab.active { color: var(--green); border-bottom-color: var(--green); font-weight: 600; }

  /* ── Toast ── */
  .toast-container { position: fixed; bottom: 22px; right: 22px; z-index: 9999; display: flex; flex-direction: column; gap: 8px; }
  .toast { background: var(--bg4); border: 1px solid var(--border2); border-radius: 10px; padding: 12px 16px; font-size: 13px; font-weight: 500; color: var(--text); box-shadow: var(--shadow-pop); animation: slideIn 0.22s cubic-bezier(0.16,1,0.3,1); min-width: 250px; backdrop-filter: blur(10px); }
  .toast.succes { border-left: 3px solid var(--green); }
  .toast.fout   { border-left: 3px solid var(--red); }
  @keyframes slideIn { from { transform: translateX(18px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }

  /* ── Misc ── */
  .empty { text-align: center; padding: 52px 24px; color: var(--text3); font-size: 13.5px; }
  .bulk-bar { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); background: var(--bg4); border: 1px solid var(--border2); border-radius: 100px; padding: 10px 20px; display: none; align-items: center; gap: 14px; box-shadow: var(--shadow-pop); z-index: 500; font-size: 13px; color: var(--text2); backdrop-filter: blur(10px); }
  .bulk-bar.visible { display: flex; animation: slideUp 0.2s cubic-bezier(0.16,1,0.3,1); }
  @keyframes slideUp { from { transform: translate(-50%, 12px); opacity: 0; } to { transform: translate(-50%, 0); opacity: 1; } }
  input[type="checkbox"] { width: 15px; height: 15px; accent-color: var(--green); cursor: pointer; padding: 0; }
  .dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
  .dot-green { background: var(--green); box-shadow: 0 0 6px rgba(45,212,143,0.6); }
  .dot-red   { background: var(--red); box-shadow: 0 0 6px rgba(240,101,90,0.6); }
  .search-wrap { position: relative; }
  .search-wrap input { padding-left: 32px; }
  .search-icon { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--text3); }

  /* ── Templates ── */
  .template-grid { display: grid; grid-template-columns: 230px 1fr; gap: 14px; min-height: 500px; }
  .template-list { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--bg2); }
  .template-item { padding: 12px 15px; border-bottom: 1px solid var(--border); cursor: pointer; transition: all 0.15s; border-left: 2px solid transparent; }
  .template-item:last-child { border-bottom: none; }
  .template-item:hover { background: var(--bg3); }
  .template-item.active { background: var(--green-dim); border-left-color: var(--green); }
  .template-item-naam { font-size: 13px; font-weight: 600; }
  .template-item-type { font-size: 11.5px; color: var(--text3); margin-top: 2px; }
  .preview-frame { width: 100%; height: 500px; border: none; border-radius: var(--radius-sm); background: white; }

  /* ── Spinner ── */
  .spinner { width: 18px; height: 18px; border: 2px solid var(--border2); border-top-color: var(--green); border-radius: 50%; animation: spin 0.6s linear infinite; display: inline-block; }
  @keyframes spin { to { transform: rotate(360deg); } }
  .loading { display: flex; align-items: center; justify-content: center; padding: 52px; }

  /* ── Vloeiend werken: skeleton bij eerste bezoek, fade bij paginawissel ── */
  .skelet { display: flex; flex-direction: column; gap: 14px; }
  .skelet-rij, .skelet-kaart { border-radius: var(--radius-sm); border: 1px solid var(--border); background: linear-gradient(100deg, var(--bg3) 40%, var(--bg4) 50%, var(--bg3) 60%); background-size: 200% 100%; animation: skelet 1.1s linear infinite; }
  .skelet-rij { height: 20px; width: 34%; border: none; }
  .skelet-kaart { height: 120px; }
  @keyframes skelet { to { background-position: -200% 0; } }
  #content.vlot-in { animation: vlotIn 0.16s ease; }
  @keyframes vlotIn { from { opacity: 0.5; transform: translateY(3px); } to { opacity: 1; transform: none; } }

  /* ── Knop-feedback: indrukgevoel, bezig-status en zichtbare focus ── */
  .btn:active { transform: translateY(1px); }
  .btn.is-bezig { opacity: 0.55; pointer-events: none; }
  .btn:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid rgba(62,196,138,0.55); outline-offset: 1px; }

  /* ── Pipeline (Pipedrive-stijl kanban) ── */
  .pipeline-board { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 10px; align-items: flex-start; }
  .pipeline-col { min-width: 180px; flex: 1; background: rgba(255,255,255,0.014); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px; }
  .pipeline-col-header { display: flex; align-items: center; justify-content: space-between; padding: 2px 4px 10px; border-bottom: 2px solid var(--border); margin-bottom: 10px; }
  .pipeline-col-title { font-size: 11.5px; font-weight: 800; color: var(--text2); text-transform: uppercase; letter-spacing: 0.08em; }
  .pipeline-col-count { font-size: 11.5px; font-weight: 700; background: var(--bg3); color: var(--text2); padding: 2px 8px; border-radius: 100px; border: 1px solid var(--border); }
  .pipeline-col:nth-child(1) .pipeline-col-header { border-bottom-color: var(--text3); }
  .pipeline-col:nth-child(2) .pipeline-col-header { border-bottom-color: var(--blue); }
  .pipeline-col:nth-child(3) .pipeline-col-header { border-bottom-color: var(--purple); }
  .pipeline-col:nth-child(4) .pipeline-col-header { border-bottom-color: var(--green); }
  .pipeline-col:nth-child(5) .pipeline-col-header { border-bottom-color: var(--red); }
  /* Kaarten scrollen binnen de kolom i.p.v. de pagina eindeloos lang te maken bij veel deals */
  .pipeline-col-body { max-height: calc(100vh - 300px); overflow-y: auto; overflow-x: hidden; margin: 0 -4px; padding: 0 4px; }
  .pipeline-col-body::-webkit-scrollbar { width: 6px; }
  .pipeline-col-body::-webkit-scrollbar-track { background: transparent; }
  .pipeline-col-body::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
  .pipeline-col-body::-webkit-scrollbar-thumb:hover { background: var(--text3); }
  .deal-card { background: var(--bg3); border: 1px solid var(--border); border-radius: 10px; padding: 12px; margin-bottom: 8px; cursor: pointer; transition: all 0.16s ease; }
  .deal-card:hover { border-color: rgba(45,212,143,0.45); background: var(--bg4); transform: translateY(-2px); box-shadow: 0 6px 16px -8px rgba(0,0,0,0.5); }
  .deal-card { touch-action: pan-y; } /* horizontale swipe = stage wisselen, verticaal = scrollen */
  .deal-card.slepen { opacity: 0.35; }
  /* Rotting deals (Pipedrive-stijl): kaart kleurt als er te lang geen activiteit is */
  .deal-card.rot-warn { border-left: 3px solid var(--orange); }
  .deal-card.rot-bad { border-left: 3px solid var(--red); background: rgba(240,101,90,0.05); }
  /* Sluimerstand: bewust geparkeerde leads vallen visueel weg tot de wek-datum */
  .deal-card.sluimert { opacity: 0.5; }
  .deal-card.sluimert:hover { opacity: 1; }
  .pipeline-col.drop-actief { border-color: var(--green); background: rgba(62,196,138,0.06); }
  .pipeline-col.drop-actief .pipeline-col-header { border-bottom-color: var(--green); }

  /* ── Taken ── */
  .taak-item { display: flex; align-items: center; gap: 12px; padding: 13px 20px; border-bottom: 1px solid var(--border); transition: background 0.12s; }
  .taak-item:hover { background: rgba(255,255,255,0.015); }
  .taak-check { width: 18px; height: 18px; border: 1.5px solid var(--border2); border-radius: 6px; cursor: pointer; flex-shrink: 0; display: flex; align-items: center; justify-content: center; transition: all 0.15s; }
  .taak-check:hover { border-color: var(--green); box-shadow: var(--glow-green); }
  .taak-check.done { background: var(--green); border-color: var(--green); color: #05130c; font-size: 12px; font-weight: 800; }

  /* ── Gesprekken ── */
  .gesprek-item { display:flex; gap:12px; padding:14px 20px; border-bottom:1px solid var(--border); }
  .gesprek-dot { width:7px; height:7px; border-radius:50%; background:var(--green); box-shadow: 0 0 6px rgba(45,212,143,0.5); flex-shrink:0; margin-top:5px; }
  .gesprek-datum { font-size:11.5px; color:var(--text3); margin-top:3px; }

  /* ── Losse klus inputs ── */
  .lk-input { width:100%; padding:7px 9px; font-size:13px; background:var(--bg3); border:1px solid var(--border); border-radius:var(--radius-sm); color:var(--text); font-family:'Inter',sans-serif; outline:none; transition: border-color 0.15s, box-shadow 0.15s; }
  .lk-input:focus { border-color: var(--green); box-shadow: var(--glow-green); }

  /* ── Klussen status dot ── */
  .klus-dot { width:9px; height:9px; border-radius:50%; flex-shrink:0; }

  /* ── Agenda Kalender ── */
  .agenda-layout { display: grid; grid-template-columns: 1fr 290px; gap: 16px; align-items: start; }
  .agenda-kalender { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-card); }
  .agenda-kal-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--border); }
  .agenda-kal-titel { font-size: 15px; font-weight: 800; color: var(--text); letter-spacing: -0.01em; }
  .agenda-kal-nav { display: flex; gap: 6px; align-items: center; }
  .agenda-kal-nav button { background: var(--bg3); border: 1px solid var(--border); color: var(--text2); cursor: pointer; font-size: 14px; padding: 5px 11px; border-radius: var(--radius-sm); transition: all 0.15s; }
  .agenda-kal-nav button:hover { background: var(--bg4); color: var(--text); border-color: var(--border2); }
  .agenda-kal-nav .vandaag-btn { font-size: 12px; font-weight: 700; color: var(--green); background: var(--green-dim); border-color: rgba(45,212,143,0.25); padding: 5px 13px; }
  .agenda-kal-grid { display: grid; grid-template-columns: repeat(7, 1fr); }
  .agenda-kal-dag-header { text-align: center; padding: 10px 4px; font-size: 11.5px; font-weight: 800; color: var(--text3); letter-spacing: 0.1em; text-transform: uppercase; border-bottom: 1px solid var(--border); }
  .agenda-kal-dag { min-height: 92px; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 6px 5px; cursor: pointer; transition: background 0.12s; position: relative; vertical-align: top; }
  .agenda-kal-dag:nth-child(7n) { border-right: none; }
  .agenda-kal-dag:hover { background: var(--bg3); }
  .agenda-kal-dag.vandaag { background: rgba(45,212,143,0.05); }
  .agenda-kal-dag.vandaag .dag-nummer { background: var(--green); color: #05130c; border-radius: 50%; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; font-weight: 800; box-shadow: 0 0 10px rgba(45,212,143,0.4); }
  .agenda-kal-dag.geselecteerd { background: rgba(45,212,143,0.08); outline: 2px solid var(--green); outline-offset: -2px; }
  .agenda-kal-dag.andere-maand { opacity: 0.32; }
  .dag-nummer { font-size: 12.5px; font-weight: 600; color: var(--text2); width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; margin-bottom: 4px; }
  .dag-events { display: flex; flex-direction: column; gap: 2px; }
  .dag-event-pill { font-size: 11.5px; font-weight: 600; padding: 2px 6px; border-radius: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  .dag-event-pill.type-afspraak { background: rgba(45,212,143,0.15); color: var(--green); }
  .dag-event-pill.type-taak { background: rgba(98,168,240,0.15); color: var(--blue); }
  .dag-event-pill.type-reminder { background: rgba(242,161,60,0.15); color: var(--orange); }
  .dag-event-pill.type-notitie { background: rgba(165,140,240,0.15); color: var(--purple); }
  .dag-meer { font-size: 11px; color: var(--text3); padding: 1px 4px; }
  .agenda-sidebar { display: flex; flex-direction: column; gap: 12px; }
  .agenda-dag-detail { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-card); }
  .agenda-dag-detail-header { padding: 14px 16px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; }
  .agenda-dag-detail-titel { font-size: 13.5px; font-weight: 800; color: var(--text); }
  .agenda-dag-items { padding: 8px; }
  .agenda-dag-item { display: flex; gap: 8px; padding: 9px 11px; border-radius: 8px; margin-bottom: 5px; cursor: pointer; transition: all 0.13s; border-left: 3px solid var(--green); background: var(--bg3); }
  .agenda-dag-item:hover { background: var(--bg4); transform: translateX(2px); }
  .agenda-dag-item.type-taak { border-left-color: var(--blue); }
  .agenda-dag-item.type-reminder { border-left-color: var(--orange); }
  .agenda-dag-item.type-notitie { border-left-color: var(--purple); }
  .agenda-dag-item-info { flex: 1; min-width: 0; }
  .agenda-dag-item-titel { font-size: 12.5px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .agenda-dag-item-meta { font-size: 11.5px; color: var(--text3); margin-top: 2px; }
  .agenda-dag-item-tijd { color: var(--green); font-family: 'JetBrains Mono', monospace; font-weight: 700; }

  /* ── Thema toggle: licht = Moneybird-fris ── */
  body.licht {
    --bg:      #f4f5f7;
    --bg2:     #ffffff;
    --bg3:     #eef0f3;
    --bg4:     #e2e5ea;
    --border:  rgba(15,23,32,0.08);
    --border2: rgba(15,23,32,0.15);
    --text:    #14181f;
    --text2:   #4b5563;
    --text3:   #5c6672;
    --green:   #0a8355;
    --green2:  #086e47;
    --green-dim: rgba(10,131,85,0.12);
    --red:     #c9302c;
    --orange:  #a86200;
    --blue:    #2470c4;
    --purple:  #7a5fd0;
    --shadow-card: 0 1px 2px rgba(15,23,32,0.05), 0 8px 24px -14px rgba(15,23,32,0.12);
    --shadow-pop: 0 24px 64px -16px rgba(15,23,32,0.25), 0 0 0 1px rgba(15,23,32,0.05);
    --glow-green: 0 0 0 3px rgba(10,131,85,0.16);
  }
  body.licht .sidebar { background: #ffffff; }
  body.licht .topbar { background: rgba(255,255,255,0.8); }
  body.licht th { background: rgba(15,23,32,0.015); }
  body.licht ::-webkit-scrollbar-thumb { border-color: var(--bg); }
  body.licht .btn-primary { color: #ffffff; box-shadow: 0 2px 10px -2px rgba(10,131,85,0.35); }
  body.licht .taak-check.done { color: #ffffff; }
  body.licht .agenda-kal-dag.vandaag .dag-nummer { color: #ffffff; }

  /* ── Snelzoeken overlay ── */
  .snelzoek-overlay { display:none; position:fixed; inset:0; background:rgba(4,6,8,0.65); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); z-index:2000; align-items:flex-start; justify-content:center; padding-top:88px; }
  .snelzoek-overlay.open { display:flex; }
  .snelzoek-box { background:var(--bg2); border:1px solid var(--border2); border-radius:var(--radius); width:580px; max-height:460px; overflow:hidden; box-shadow:var(--shadow-pop); display:flex; flex-direction:column; animation: modalIn 0.16s cubic-bezier(0.16,1,0.3,1); }
  .snelzoek-input-wrap { display:flex; align-items:center; gap:11px; padding:15px 19px; border-bottom:1px solid var(--border); }
  .snelzoek-input { flex:1; background:none; border:none; font-size:15px; color:var(--text); outline:none; font-family:'Inter',sans-serif; box-shadow: none !important; }
  .snelzoek-resultaten { overflow-y:auto; max-height:380px; }
  .snelzoek-sectie { padding:10px 19px 4px; font-size:11px; font-weight:800; color:var(--text3); letter-spacing:0.12em; text-transform:uppercase; }
  .snelzoek-item { display:flex; align-items:center; gap:11px; padding:10px 19px; cursor:pointer; transition:background 0.1s; border-left:3px solid transparent; }
  .snelzoek-item:hover, .snelzoek-item.actief { background:var(--bg3); border-left-color:var(--green); }
  .snelzoek-item-icon { width:30px; height:30px; border-radius:8px; background:var(--bg3); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; font-size:13.5px; flex-shrink:0; }
  .snelzoek-item-main { flex:1; min-width:0; }
  .snelzoek-item-titel { font-size:13.5px; font-weight:600; color:var(--text); }
  .snelzoek-item-sub { font-size:12px; color:var(--text3); }
  .snelzoek-item-badge { font-size:11.5px; font-weight:600; padding:2px 8px; border-radius:100px; background:var(--bg3); color:var(--text2); border:1px solid var(--border); }

  /* ── Notificaties balk ── */
  .notif-balk { display:flex; flex-direction:column; gap:7px; margin-bottom:18px; }
  .notif-item { display:flex; align-items:center; gap:10px; padding:10px 15px; border-radius:10px; font-size:13px; font-weight:500; cursor:pointer; transition:all 0.15s; }
  .notif-item:hover { filter:brightness(1.12); transform: translateX(2px); }
  .notif-fout { background:rgba(240,101,90,0.08); border:1px solid rgba(240,101,90,0.22); color:var(--red); }
  .notif-waarschuwing { background:rgba(242,161,60,0.08); border:1px solid rgba(242,161,60,0.22); color:var(--orange); }
  .notif-info { background:rgba(98,168,240,0.08); border:1px solid rgba(98,168,240,0.22); color:var(--blue); }

  /* ── Klant profiel ── */
  .klant-profiel-grid { display:grid; grid-template-columns:290px 1fr; gap:16px; align-items:start; }
  /* ── Klant-360 tijdlijn ── */
  .tl-lijst { position:relative; padding:6px 0; }
  .tl-lijst::before { content:''; position:absolute; left:33px; top:14px; bottom:14px; width:2px; background:var(--border); }
  .tl-item { display:flex; gap:12px; padding:9px 18px; position:relative; }
  .tl-icoon { width:30px; height:30px; border-radius:50%; background:var(--bg3); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; font-size:13.5px; flex-shrink:0; z-index:1; }
  .tl-item.tl-betaling .tl-icoon, .tl-item.tl-akkoord .tl-icoon, .tl-item.tl-aangifte .tl-icoon { background:var(--green-dim); border-color:rgba(45,212,143,0.3); }
  .tl-item.tl-toekomst .tl-icoon { border-style:dashed; border-color:var(--green); }
  .tl-body { flex:1; min-width:0; padding-top:2px; }
  .tl-titel { font-size:13px; font-weight:500; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .tl-sub { font-size:11.5px; color:var(--text3); margin-top:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .tl-meta { flex-shrink:0; text-align:right; padding-top:2px; }
  .tl-datum { font-size:11.5px; color:var(--text3); }
  .tl-bedrag { font-size:12px; font-weight:600; font-family:'JetBrains Mono',monospace; color:var(--text2); margin-top:1px; }
  .tl-item.tl-betaling .tl-bedrag { color:var(--green); }
  .tl-toekomst-label { font-size:11px; font-weight:700; color:var(--green); text-transform:uppercase; letter-spacing:.06em; }
  .tl-verborgen { display:none; }
  .klant-info-card { background:var(--bg2); border:1px solid var(--border); border-radius:var(--radius); padding:22px; box-shadow: var(--shadow-card); }
  .klant-avatar { width:52px; height:52px; border-radius:16px; background:linear-gradient(135deg, var(--green-dim), rgba(45,212,143,0.25)); border:1px solid rgba(45,212,143,0.35); display:flex; align-items:center; justify-content:center; font-size:19px; font-weight:800; color:var(--green); margin-bottom:14px; }

  /* ── Toegankelijkheid: gebruikers met "verminderde beweging" krijgen
     geen animaties/transities (systeeminstelling prefers-reduced-motion) ── */
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
    html { scroll-behavior: auto; }
  }

  /* ── Aging badges ── */
  .aging-0  { background:rgba(45,212,143,0.12); color:var(--green); }
  .aging-14 { background:rgba(242,161,60,0.12); color:var(--orange); }
  .aging-30 { background:rgba(240,101,90,0.12); color:var(--red); }

  /* ── Jaaroverzicht ── */
  .jaar-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:14px; margin-bottom:20px; }

  /* ── Email log ── */
  .log-status-verstuurd { color:var(--green); }
  .log-status-afgeleverd { color:var(--blue); }
  .log-status-geopend { color:var(--green); }
  .log-status-gebounced, .log-status-geblokkeerd { color:var(--red); }
  .log-status-mislukt { color:var(--red); }

  /* ── Tooltips ── */
  #fiscly-tooltip { position:fixed; z-index:99999; max-width:280px; padding:7px 11px; font-size:12px; font-weight:500; line-height:1.45; color:var(--text); background:var(--bg4); border:1px solid var(--border2); border-radius:8px; box-shadow:var(--shadow-pop); pointer-events:none; opacity:0; transform:translateY(3px); transition:opacity 0.12s ease, transform 0.12s ease; }
  #fiscly-tooltip.zichtbaar { opacity:1; transform:translateY(0); }

  /* ── Dashboard grid ── */
  .dash-grid { display:grid; grid-template-columns:minmax(0,2fr) minmax(0,1fr); gap:16px; align-items:start; }
  @media (max-width: 1100px) { .dash-grid { grid-template-columns:1fr; } }

  /* ── Topbar zoekbalk ── */
  .topbar-search { display:flex; align-items:center; gap:9px; margin:0 20px; padding:8px 13px; flex:1; max-width:380px; font-size:12.5px; color:var(--text3); background:var(--bg3); border:1px solid var(--border); border-radius:100px; cursor:pointer; font-family:'Inter',sans-serif; transition:all 0.16s; }
  .topbar-search:hover { border-color:var(--border2); color:var(--text2); background:var(--bg4); }
  .topbar-search span:first-of-type { flex:1; text-align:left; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .topbar-search-kbd { font-size:11px; background:var(--bg4); padding:2px 7px; border-radius:4px; border:1px solid var(--border); font-family:'JetBrains Mono',monospace; flex-shrink:0; }
  @media (max-width: 900px) { .topbar-search { display:none; } }

  /* ── Bottom nav (alleen mobiel zichtbaar) ── */
  .bottom-nav { display: none; }
  #mobiel-overlay { display: none; }

  /* ── Responsief: tablet ── */
  @media (max-width: 1100px) {
    .stats-grid { grid-template-columns: repeat(2, 1fr); }
    .agenda-layout, .klant-profiel-grid { grid-template-columns: 1fr; }
    .content { padding: 20px; }
    .topbar { padding: 13px 20px; }
  }

  /* ── Responsief: telefoon (app-modus) ── */
  @media (max-width: 768px) {
    /* Sidebar wordt uitschuifbaar menu */
    .sidebar { transform: translateX(-105%); transition: transform 0.28s cubic-bezier(0.16,1,0.3,1); width: 280px; z-index: 800; box-shadow: 24px 0 60px -20px rgba(0,0,0,0.6); padding-top: env(safe-area-inset-top); }
    .sidebar.open { transform: translateX(0); }
    #mobiel-overlay { position: fixed; inset: 0; background: rgba(4,6,8,0.6); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); z-index: 700; opacity: 0; pointer-events: none; transition: opacity 0.22s; display: block; }
    #mobiel-overlay.open { opacity: 1; pointer-events: auto; }
    .sidebar .nav-item { padding: 12px 14px; font-size: 14px; }

    .main { margin-left: 0; }
    .topbar { padding: 12px 16px; padding-top: calc(12px + env(safe-area-inset-top)); }
    .page-title { font-size: 15px; }
    .page-subtitle { display: none; }
    .topbar-actions { gap: 6px; }
    .topbar-actions .btn { padding: 8px 10px; font-size: 12px; white-space: nowrap; }
    .content { padding: 16px 14px calc(88px + env(safe-area-inset-bottom)); }

    /* Bottom tab bar */
    .bottom-nav { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 650; background: color-mix(in srgb, var(--bg2) 88%, transparent); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border-top: 1px solid var(--border); padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); }
    .bn-item { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 2px; background: none; border: none; color: var(--text3); font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 600; cursor: pointer; border-radius: 10px; }
    .bn-item.active { color: var(--green); }
    .bn-item:active { background: var(--bg3); }
    .bottom-nav .nav-item.active::before { display: none; }
    .bottom-nav .nav-item.active { background: none; }

    /* Grotere touch targets + geen iOS-zoom op inputs */
    input, select, textarea { font-size: 16px; padding: 11px 13px; }
    .btn { min-height: 40px; padding: 9px 14px; }
    .btn-sm { min-height: 34px; padding: 7px 11px; font-size: 12.5px; }
    .taak-check { width: 23px; height: 23px; }
    input[type="checkbox"] { width: 19px; height: 19px; }

    /* Stats compacter */
    .stats-grid { gap: 10px; margin-bottom: 18px; }
    .stat-card { padding: 14px 15px; }
    .stat-value { font-size: 20px; }
    .dash-grid { gap: 12px; }

    /* Tabellen horizontaal scrollbaar binnen cards */
    .card { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .card table { min-width: 540px; }
    th, td { padding: 10px 12px; }

    /* Modals worden bottom-sheets */
    .modal-overlay { align-items: flex-end; }
    .modal { width: 100%; max-height: 90vh; border-radius: 20px 20px 0 0; animation: sheetIn 0.26s cubic-bezier(0.16,1,0.3,1); padding-bottom: env(safe-area-inset-bottom); }
    .modal-footer { position: sticky; bottom: 0; background: var(--bg2); flex-wrap: wrap; }
    .modal-footer .btn { flex: 1; justify-content: center; }
    .form-row { grid-template-columns: 1fr; }

    /* Pipeline: swipen met snap */
    .pipeline-board { scroll-snap-type: x mandatory; gap: 10px; }
    .pipeline-col { min-width: 78vw; scroll-snap-align: start; }

    /* Agenda: compacte kalender met stippen i.p.v. tekst-pills */
    .agenda-kal-dag { min-height: 52px; padding: 4px 3px; }
    .dag-events { flex-direction: row; flex-wrap: wrap; gap: 3px; }
    .dag-event-pill { width: 6px; height: 6px; padding: 0; border-radius: 50%; font-size: 0; overflow: hidden; }
    .dag-meer { font-size: 11px; }

    /* Toasts en bulk-bar boven de tab bar */
    .toast-container { bottom: calc(78px + env(safe-area-inset-bottom)); right: 12px; left: 12px; }
    .toast { min-width: 0; }
    .bulk-bar { bottom: calc(78px + env(safe-area-inset-bottom)); width: calc(100% - 24px); justify-content: center; flex-wrap: wrap; }

    /* Template-editor en klantprofiel stapelen */
    .template-grid { grid-template-columns: 1fr; }
    .jaar-grid { grid-template-columns: 1fr; }

    /* Tooltips uit op touch (title blijft voor lang indrukken) */
    #fiscly-tooltip { display: none; }
  }
  @keyframes sheetIn { from { transform: translateY(40px); opacity: 0.6; } to { transform: none; opacity: 1; } }


/* Sorteerbare kolomkoppen in de facturenlijst */
.sorteer-kop { cursor: pointer; user-select: none; white-space: nowrap; }
.sorteer-kop:hover { color: var(--green); }

/* ── Mobiele polish: tabellen scrollbaar, grote tap-targets ── */
@media (max-width: 900px) {
  /* Tabellen scrollen binnen hun eigen kaart, niet de hele pagina. */
  .card { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .card table { min-width: 560px; }
}

@media (max-width: 640px) {
  /* Vandaag-cockpit en actieknoppen: comfortabele tap-targets */
  .vandaag-regel { min-height: 44px; }
  .vandaag-regel .btn, .taak-item .btn { min-height: 36px; }
  /* Topbar: +Snel-knop en acties binnen beeld houden */
  .topbar-actions { flex-wrap: wrap; row-gap: 6px; }
  .topbar-search span:not(.topbar-search-kbd) { display: none; }
}

/* ── Taken: focus-weergave (swipe-kaarten, één taak tegelijk) ──
   De bovenste kaart volgt je vinger/muis (transform wordt uit JS gezet), de
   stempels Klaar/Morgen/Overslaan lichten op naarmate je verder sleept. */
.focus-wrap { max-width: 520px; }
.focus-kop { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.focus-teller { font-size: 18px; font-weight: 600; color: var(--text); }
.focus-sub { font-size: 12.5px; color: var(--text3); margin-top: 2px; }
.focus-stapel { position: relative; height: 340px; margin: 4px 0 16px; }
.focus-kaart { position: absolute; inset: 0; background: linear-gradient(180deg, var(--bg3) 0%, var(--bg2) 100%); border: 1px solid var(--border2); border-radius: 20px; padding: 28px 28px 26px; box-shadow: var(--shadow-pop); display: flex; flex-direction: column; justify-content: center; overflow: hidden; }
.focus-kaart-achter { transform: translateY(10px) scale(0.95); opacity: 0.75; transition: transform 0.12s ease, opacity 0.12s ease; }
.focus-kaart-achter2 { transform: translateY(20px) scale(0.9); opacity: 0.4; }
.focus-kaart-voor { cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; will-change: transform; transition: transform 0.3s cubic-bezier(0.16,1,0.3,1); }
.focus-kaart-voor.sleept { transition: none; cursor: grabbing; }
.focus-kaart-voor.vliegt { transition: transform 0.26s ease-in, opacity 0.26s ease-in; opacity: 0; pointer-events: none; }
.focus-stempel { position: absolute; top: 18px; padding: 6px 12px; border-radius: 10px; font-size: 13.5px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; border: 2px solid currentColor; opacity: 0; pointer-events: none; }
.focus-stempel-rechts { left: 18px; color: var(--green); background: rgba(45,212,143,0.14); transform: rotate(-10deg); }
.focus-stempel-links { right: 18px; color: var(--orange); background: rgba(242,161,60,0.14); transform: rotate(10deg); }
.focus-stempel-boven { left: 50%; color: var(--blue); background: rgba(98,168,240,0.14); transform: translateX(-50%); }
.focus-kaart-meta { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.focus-chip { font-size: 11.5px; font-weight: 600; padding: 3px 9px; border-radius: 100px; background: var(--bg4); color: var(--text2); border: 1px solid var(--border); }
.focus-chip-hoog { background: rgba(240,101,90,0.14); color: var(--red); border-color: rgba(240,101,90,0.3); }
.focus-chip-laag { color: var(--text3); }
.focus-chip-laat { background: rgba(242,161,60,0.14); color: var(--orange); border-color: rgba(242,161,60,0.3); }
.focus-kaart-tekst { font-size: 22px; font-weight: 600; line-height: 1.3; color: var(--text); letter-spacing: -0.01em; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 7; -webkit-box-orient: vertical; overflow: hidden; }
.focus-kaart-klant { margin-top: 10px; font-size: 13.5px; color: var(--text2); }
.focus-acties { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
.focus-knop { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 8px; background: var(--bg2); border: 1px solid var(--border); border-radius: 14px; cursor: pointer; font-family: 'Inter', sans-serif; font-size: 12.5px; font-weight: 600; transition: all 0.16s ease; }
.focus-knop svg { width: 20px; height: 20px; }
.focus-knop:hover { transform: translateY(-1px); border-color: currentColor; }
.focus-knop-links { color: var(--orange); }
.focus-knop-boven { color: var(--blue); }
.focus-knop-rechts { color: var(--green); background: var(--green-dim); border-color: rgba(45,212,143,0.25); }
.focus-hint { text-align: center; font-size: 12px; color: var(--text3); margin-top: 12px; line-height: 1.5; }
.focus-toevoegen { display: flex; align-items: center; gap: 10px; margin-top: 22px; padding-top: 14px; border-top: 1px solid var(--border); }
.focus-toevoegen input { flex: 1; min-width: 0; background: var(--bg3); border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 14px; color: var(--text); outline: none; font-family: 'Inter', sans-serif; padding: 9px 12px; }
.focus-toevoegen input:focus { border-color: rgba(45,212,143,0.5); box-shadow: var(--glow-green); }
.focus-voet { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 14px; font-size: 12.5px; color: var(--text3); }
.focus-voet button { background: none; border: none; color: var(--text3); cursor: pointer; font-family: 'Inter', sans-serif; font-size: 12.5px; padding: 2px 4px; }
.focus-voet button:hover { color: var(--text); }
.focus-leeg { text-align: center; padding: 48px 20px 36px; background: var(--bg2); border: 1px dashed var(--border2); border-radius: 20px; }
.focus-leeg-icoon { width: 52px; height: 52px; margin: 0 auto 14px; border-radius: 50%; background: var(--green-dim); color: var(--green); display: flex; align-items: center; justify-content: center; }
.focus-leeg-icoon svg { width: 24px; height: 24px; }
.focus-leeg-titel { font-size: 17px; font-weight: 600; color: var(--text); }
.focus-leeg-sub { font-size: 13px; color: var(--text3); margin-top: 6px; line-height: 1.5; }
@media (max-width: 640px) {
  .focus-stapel { height: min(54vh, 400px); }
  .focus-kaart { padding: 22px 22px 20px; }
  .focus-kaart-tekst { font-size: 20px; }
  .focus-acties { gap: 8px; }
  .focus-knop { padding: 11px 6px; font-size: 12px; }
  .focus-hint { display: none; }
}

/* ── Groot scherm: alles groter via zoom ──
   Deze regels staan bewust ONDERAAN het bestand: vh-hoogtes worden door de
   zoom mee-geschaald (88vh × 1,3 is hoger dan het scherm), dus elke
   vh-hoogte moet hier door de zoomfactor gedeeld worden — en dat werkt
   alleen als deze regels ná de basisregels komen. Nieuwe vh-hoogte in de
   CSS? Hier ook compenseren. */
@media (min-width: 1440px) {
  body { zoom: 1.15; }
  body, .main { min-height: calc(100vh / 1.15); }
  .modal { max-height: calc(88vh / 1.15); }
  .pipeline-col-body { max-height: calc(100vh / 1.15 - 300px); }
}
@media (min-width: 1800px) {
  body { zoom: 1.3; }
  body, .main { min-height: calc(100vh / 1.3); }
  .modal { max-height: calc(88vh / 1.3); }
  .pipeline-col-body { max-height: calc(100vh / 1.3 - 300px); }
}