/* ===== Main area ===== */
.main {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--bg-warm);
}

.topbar {
  height: 56px;
  background: var(--bg-cream);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  padding: 0 24px;
  gap: 16px;
  flex-shrink: 0;
}
.breadcrumb {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px;
  color: var(--ink-soft);
}
.breadcrumb .crumb { color: var(--ink-mute); }
.breadcrumb .sep { color: var(--ink-mute); opacity: 0.5; }
.breadcrumb .crumb-active { color: var(--ink); font-weight: 600; }

.topbar-search {
  flex: 1;
  max-width: 480px;
  margin: 0 auto;
  position: relative;
}
.topbar-search input {
  width: 100%;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 12px 8px 36px;
  font-size: 13px;
  color: var(--ink);
  outline: none;
  transition: border 0.12s, box-shadow 0.12s;
}
.topbar-search input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
/* `>` zodat alleen het vergrootglas dit krijgt — niet de icoontjes
   in de resultaten-dropdown, die ook binnen .topbar-search leeft. */
.topbar-search > svg {
  position: absolute;
  left: 11px; top: 50%; transform: translateY(-50%);
  width: 15px; height: 15px;
  color: var(--ink-mute);
  pointer-events: none;
}
.global-search-results {
  position: absolute;
  top: calc(100% + 6px);
  left: 0; right: 0;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow-xl);
  z-index: 600;
  max-height: 480px;
  overflow-y: auto;
}
.gsr-group-label {
  padding: 10px 14px 4px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.gsr-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  cursor: pointer;
  border-radius: 0;
  transition: background 0.1s;
}
.gsr-item:hover, .gsr-item.focused { background: var(--accent-soft); }
.gsr-icon {
  flex-shrink: 0;
  width: 28px; height: 28px;
  border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px;
  background: var(--bg-cream);
  color: var(--ink-soft);
}
.gsr-main { flex: 1; min-width: 0; }
.gsr-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gsr-title mark {
  background: transparent;
  color: var(--accent);
  font-weight: 700;
}
.gsr-sub {
  font-size: 11.5px;
  color: var(--ink-mute);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 1px;
}
.gsr-type-badge {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 4px;
  background: var(--bg-cream);
  color: var(--ink-mute);
  flex-shrink: 0;
  text-transform: capitalize;
}
.gsr-divider { height: 1px; background: var(--border-soft); margin: 4px 0; }
.gsr-empty { padding: 20px 14px; text-align: center; font-size: 13px; color: var(--ink-mute); }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: none;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: 7px;
  transition: background 0.12s, transform 0.06s;
}
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn:disabled:hover { transform: none; }
.btn-primary {
  background: var(--accent);
  color: white;
}
.btn-primary:hover { background: var(--accent-hover); }
.btn-primary:active { transform: translateY(1px); }
.btn-danger { background: #dc2626; color: white; }
.btn-danger:hover { background: #b91c1c; }
.btn-danger:active { transform: translateY(1px); }
.btn-success { background: #059669; color: white; }
.btn-success:hover { background: #047857; }
.btn-success:active { transform: translateY(1px); }
.btn-ghost {
  background: transparent;
  color: var(--ink-soft);
  border: 1px solid var(--border);
}
.btn-ghost:hover { background: var(--white); border-color: var(--ink-mute); color: var(--ink); }
.btn-text {
  background: transparent;
  color: var(--ink-soft);
  padding: 8px 12px;
}
.btn-text:hover { color: var(--ink); }

.icon-btn {
  width: 32px; height: 32px;
  border: 1px solid var(--border);
  background: var(--white);
  border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  color: var(--ink-soft);
  transition: background 0.12s, border 0.12s;
}
.icon-btn:hover { border-color: var(--ink-mute); color: var(--ink); }

/* ===== Notifications ===== */
.notif-badge {
  position: absolute; top: -5px; right: -5px;
  min-width: 16px; height: 16px; padding: 0 4px;
  background: var(--danger, #ef4444); color: #fff;
  font-size: 10px; font-weight: 700; line-height: 16px;
  border-radius: 9px; text-align: center;
  box-shadow: 0 0 0 2px var(--bg-cream);
}
/* Tweede bolletje op de bel: BLAUW voor lead-reacties, links van de klok in
   plaats van rechts. Bewust de andere hoek — met beide badges rechtsboven gaan ze
   over elkaar heen zodra er van beide iets is, en dan zie je juist niks. Rood
   rechtsboven blijft dus precies waar het was. */
.notif-badge-leads {
  /* Diagonaal tegenover het rode bolletje: linksONDER. Naast elkaar past niet — de bel
     is 32px breed en beide badges zijn er 22, dus bij "9+" en "9+" overlapten ze 4px
     (gemeten). Tegenover elkaar kan het bij geen enkel aantal misgaan. */
  top: auto; bottom: -5px;
  left: -5px; right: auto;
  background: var(--info, #2563eb);
}
.notif-leads:empty { display: none; }
.notif-leads {
  border-bottom: 1px solid var(--border);
  max-height: 46vh; overflow-y: auto;
}
.notif-leads-head {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 14px 6px;
  font-size: 11px; font-weight: 700; letter-spacing: .02em;
  color: var(--ink-soft); text-transform: uppercase;
}
.notif-leads-head .notif-leads-count {
  background: var(--info, #2563eb); color: #fff;
  border-radius: 9px; padding: 1px 6px; font-size: 10px; letter-spacing: 0;
}
.notif-leads-day {
  padding: 4px 14px 2px;
  font-size: 11px; font-weight: 600; color: var(--ink-mute);
}
.notif-lead {
  display: flex; align-items: flex-start; gap: 9px;
  padding: 8px 14px 9px; cursor: pointer;
  border-left: 2px solid var(--info, #2563eb);
}
.notif-lead:hover { background: var(--bg-hover, rgba(0,0,0,0.03)); }
.notif-lead-body { min-width: 0; flex: 1; }
.notif-lead-who {
  font-size: 12.5px; font-weight: 600; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.notif-lead-subject {
  font-size: 11.5px; color: var(--ink-soft);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.notif-lead-time { font-size: 10.5px; color: var(--ink-mute); margin-top: 2px; }
.notif-lead-done {
  flex: 0 0 auto; width: 22px; height: 22px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border); border-radius: 6px;
  background: var(--bg); color: var(--ink-mute); cursor: pointer;
}
.notif-lead-done:hover { color: var(--ok, #16a34a); border-color: var(--ok, #16a34a); }
.notif-leads-empty { padding: 10px 14px 12px; font-size: 12px; color: var(--ink-mute); }

.notif-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,0.12); z-index: 1400;
}
.notif-overlay.open { display: block; }
.notif-panel {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: 380px; max-width: 92vw;
  background: var(--white); border-left: 1px solid var(--border);
  box-shadow: -8px 0 30px rgba(57, 57, 57,0.12);
  z-index: 1401; display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform 0.22s ease;
}
.notif-panel.open { transform: translateX(0); }
/* Dicht: geen schaduw, anders valt er een grijze band langs de rechterrand van elk scherm. */
.notif-panel:not(.open) { box-shadow: none; }
.notif-panel-head {
  display: flex; align-items: center; gap: 10px;
  padding: 16px 18px; border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.notif-panel-title { font-size: 15px; font-weight: 700; color: var(--ink); flex: 1; }
.notif-markall {
  background: none; border: none; cursor: pointer;
  font-size: 12px; color: var(--accent); font-family: inherit; padding: 4px 6px; border-radius: 6px;
}
.notif-markall:hover { background: var(--accent-soft); }
.notif-close { background: none; border: none; cursor: pointer; color: var(--ink-mute); padding: 4px; border-radius: 6px; display: inline-flex; }
.notif-close:hover { background: var(--bg-warm); color: var(--ink); }
.notif-list { flex: 1; overflow-y: auto; padding: 8px; }
.notif-empty { padding: 40px 20px; text-align: center; color: var(--ink-mute); font-size: 13px; }
.notif-item {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 12px; border-radius: 10px; cursor: pointer;
  transition: background 0.12s;
}
.notif-item:hover { background: var(--bg-warm); }
.notif-item.unread { background: var(--accent-soft); }
.notif-item.unread:hover { background: rgba(245, 119, 34, 0.14); }
.notif-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); margin-top: 6px; flex-shrink: 0; }
.notif-item.read .notif-dot { background: transparent; }
.notif-item-body { min-width: 0; flex: 1; }
.notif-item-title { font-size: 13px; font-weight: 600; color: var(--ink); line-height: 1.35; }
.notif-item-time { font-size: 11px; color: var(--ink-mute); margin-top: 3px; }
/* De aanleiding van een melding staat in het fragment — bij een @-vermelding is dát
   waar je op klikt, dus laten we het zien in plaats van alleen de kop. */
.notif-item-snippet {
  font-size: 12px; color: var(--ink-soft); line-height: 1.4; margin-top: 3px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* Een melding van de automatische rem (mailbox gestopt, campagne gepauzeerd): de reden
   en wat je moet doen staan in het fragment, dus dat tonen we helemaal. */
.notif-item-snippet.full { display: block; -webkit-line-clamp: unset; }
.notif-at {
  width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0; margin-top: 1px;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent); color: #fff; font-size: 11px; font-weight: 800;
}
.notif-item.read .notif-at { background: var(--border); color: var(--ink-mute); }

/* ===== Page content ===== */
.page {
  flex: 1;
  overflow: hidden;
  display: flex;
}

.sub-nav {
  width: 200px;
  background: var(--bg-cream);
  border-right: 1px solid var(--border);
  padding: 16px 12px;
  flex-shrink: 0;
}
.sub-nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px;
  border-radius: 7px;
  font-size: 13px;
  color: var(--ink-soft);
  cursor: pointer;
  font-weight: 500;
  margin-bottom: 2px;
}
.sub-nav-item:hover { background: var(--bg-warm); color: var(--ink); }
.sub-nav-item.active { background: var(--accent-soft); color: var(--accent); }
.sub-nav-icon { width: 16px; height: 16px; }

.page-body {
  flex: 1;
  overflow-y: auto;
  /* Reserveer de scrollbar-ruimte altijd, zodat de inhoud niet smaller
     wordt (en verspringt) zodra er een scrollbar verschijnt. */
  scrollbar-gutter: stable;
  padding: 24px 32px 80px;
}

.page-header {
  display: flex; justify-content: space-between; align-items: flex-start;
  margin-bottom: 20px;
  gap: 16px;
}
.page-title {
  font-family: 'Inter', sans-serif;
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.page-sub { color: var(--ink-mute); font-size: 13px; margin-top: 2px; }

.toolbar {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 16px;
}
.filter-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 12.5px;
  color: var(--ink-soft);
  background: var(--white);
  cursor: pointer;
}
.filter-chip:hover { border-color: var(--ink-mute); }
.filter-chip.active { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }


/* Reserve the scrollbar gutter on views that scroll on the .page-view itself (inline overflow-y:auto),
   so expanding a section doesn't shift content left when the scrollbar appears. */
.page-view[data-view="api"], .page-view[data-view="settings"], .page-view[data-view="sequences"] { scrollbar-gutter: stable; }

/* ===== Telefoon (onder 768 px): het hoofdmenu achter een knop =====
   Op de laptop staan de smalle zijbalk (72 px) en per pagina een submenu (200 px) naast de
   inhoud; op een telefoon van 390 px bleef daarvan 118 px over. Hier schuift de zijbalk in
   als menu achter de knop linksboven, en wordt een submenu een strook tabs boven de pagina. */
.topbar .nav-toggle, .nav-scrim { display: none; }
@media (max-width: 767px) {
  .app { grid-template-columns: minmax(0, 1fr); height: 100svh; }
  /* Dicht: buiten beeld én onzichtbaar (dan zit hij ook niet in de tabvolgorde of bij een
     schermlezer); de zichtbaarheid wisselt pas als het schuiven klaar is. */
  .sidebar { position: fixed; top: 0; bottom: 0; left: 0; width: 240px; z-index: 900; transform: translateX(-100%); visibility: hidden; transition: transform .2s ease, visibility 0s linear .2s; padding: 10px 0; }
  .app.nav-open .sidebar { transform: none; visibility: visible; box-shadow: var(--shadow-xl); transition: transform .2s ease, visibility 0s; }
  .sidebar-footer .user-meta { display: block; margin-left: 10px; min-width: 0; }
  .app.nav-open .nav-scrim { display: block; position: fixed; inset: 0; z-index: 899; background: rgba(0, 0, 0, .35); }
  .brand { justify-content: flex-start; padding: 8px 18px 14px; }
  .nav-section { padding: 6px 10px; }
  .nav-item { flex-direction: row; justify-content: flex-start; gap: 12px; font-size: 14px; padding: 10px 12px; min-height: 44px; text-align: left; }
  .nav-badge { position: static; margin-left: auto; }
  .sidebar-footer { justify-content: flex-start; padding: 12px 18px; min-height: 56px; }
  .sidebar-user-menu { left: 16px; bottom: 72px; z-index: 950; }
  .main { min-width: 0; }
  .topbar { padding: 0 8px; gap: 6px; }
  .topbar .nav-toggle { display: flex; width: 44px; height: 44px; flex-shrink: 0; }
  /* Waar je bent: alleen het laatste stuk van het kruimelpad (Overzicht, Senders …). */
  .topbar .breadcrumb .crumb, .topbar .breadcrumb .sep { display: none; }
  .topbar .breadcrumb { flex-shrink: 1; min-width: 0; max-width: 34%; }
  .topbar .breadcrumb .crumb-active { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .topbar-search { min-width: 0; }
  .topbar #notif-bell { width: 44px; height: 44px; flex-shrink: 0; }
  /* Op een telefoon zoomt iOS in bij een veld onder 16 px. */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea { font-size: 16px !important; }
  .topbar-search input { min-height: 40px; }
  /* Een submenu (People/Organizations, Campaigns/Leads/Senders/Overzicht): tabs bovenaan,
     zonder iconen zodat ze naast elkaar passen; het actieve tabblad scrolt in beeld. */
  .page-view.active:has(> .sub-nav), .page:has(> .sub-nav) { flex-direction: column; }
  .sub-nav { width: auto; display: flex; flex-direction: row; gap: 2px; padding: 6px 6px; border-right: 0; border-bottom: 1px solid var(--border); overflow-x: auto; overflow-y: hidden; flex-shrink: 0; scrollbar-width: none; }
  .sub-nav::-webkit-scrollbar { display: none; }
  .sub-nav-item { flex: 0 0 auto; margin: 0; min-height: 44px; padding: 8px 10px; white-space: nowrap; }
  .sub-nav-item .sub-nav-icon { display: none; }
}
@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
  .sidebar, .app.nav-open .sidebar { transition: none; }
}