/* ══════════════════════════════════════════════════════════════════
   COMPACTE DAG-STROOK (1 regel) + TOPBAR INBOX DROPDOWN
   ══════════════════════════════════════════════════════════════════ */

/* Dag-nav: alles op één regel om schermruimte te besparen */
.dag-nav { padding:0.22rem 0.45rem; gap:0.25rem; }
.dag-nav-center { min-width:0; }
.dag-nav-day { font-size:0.82rem; line-height:1.1; }
.dag-nav-date { font-size:0.64rem; }
.dag-nav-today { padding:0.14rem 0.5rem; font-size:0.65rem; margin-left:0; min-height:24px; }
.dag-nav-btn { font-size:1.15rem; padding:0.05rem 0.15rem; width:28px; height:28px; }

/* Compacte vulavond-pills inline (maan-icoon + uur) */
.vul-pills-inline {
  display:flex; gap:0.22rem; flex-shrink:0;
  align-items:center;
}
.vul-pill-mini {
  min-height:24px;
  padding:0.12rem 0.38rem; border-radius:99px;
  background:#f3f4f6; border:1.5px solid #e5e7eb;
  font-size:0.66rem; font-weight:800; color:#9ca3af;
  display:inline-flex; align-items:center; gap:0.15rem;
  line-height:1;
  transition:all 0.15s ease;
}
.vul-pill-mini::before {
  content:''; display:inline-block;
  width:11px; height:11px;
  background-color:currentColor;
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z'/></svg>") center/contain no-repeat;
          mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z'/></svg>") center/contain no-repeat;
  opacity:0.55;
}
.vul-toggle input:checked + .vul-pill-mini {
  background:#7d2f3d; border-color:#7d2f3d; color:white;
  box-shadow:0 2px 8px rgba(125,47,61,0.38);
}
.vul-toggle input:checked + .vul-pill-mini::before { opacity:1; }
.vul-toggle:active .vul-pill-mini { transform:scale(0.92); }

/* Topbar inbox-knop (envelop + badge) */
.topbar-right { display:flex; align-items:center; gap:0.5rem; }
.topbar-icon-btn {
  position:relative;
  width:36px; height:36px; border-radius:9px;
  background:rgba(255,255,255,0.08); border:none; color:white;
  cursor:pointer; display:inline-flex; align-items:center; justify-content:center;
  transition:background 0.15s, transform 0.08s; font-family:inherit;
  text-decoration:none;
}
.topbar-icon-btn:hover { background:rgba(255,255,255,0.16); }
.topbar-icon-btn.on { background:rgba(255,255,255,0.24); }
.topbar-icon-btn:active { transform:scale(0.92); }
.topbar-icon-btn svg { width:20px; height:20px; display:block; }
.inbox-badge {
  position:absolute; top:-3px; right:-3px;
  min-width:18px; height:18px; padding:0 4px;
  background:#f0b020; color:#2a1418;
  border-radius:99px; font-size:0.68rem; font-weight:800;
  display:none; align-items:center; justify-content:center;
  box-shadow:0 0 0 2px #a83545;
  line-height:1;
}
.inbox-badge.show { display:inline-flex; }

/* Inbox-popover (dropdown vanuit envelop) */
.inbox-backdrop {
  position:fixed; inset:0; background:transparent;
  z-index:90; display:none;
}
.inbox-backdrop.open { display:block; }
.inbox-popover {
  position:fixed;
  top:calc(52px + env(safe-area-inset-top));
  right:0.5rem;
  width:min(calc(100vw - 1rem), 380px);
  max-height:min(calc(100vh - 80px), 540px);
  background:white; border-radius:14px;
  box-shadow:0 14px 40px rgba(0,0,0,0.25);
  display:none; flex-direction:column;
  z-index:95; overflow:hidden;
  transform-origin:top right;
}
.inbox-popover.open {
  display:flex;
  animation:inboxDrop 0.22s cubic-bezier(0.2,0.9,0.3,1);
}
@keyframes inboxDrop {
  from { opacity:0; transform:translateY(-10px) scale(0.96); }
  to   { opacity:1; transform:translateY(0) scale(1); }
}
.inbox-pop-head {
  padding:0.55rem 0.75rem 0.5rem;
  border-bottom:1px solid #f4ede3;
  flex-shrink:0;
}
.inbox-pop-title-row {
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:0.35rem;
}
.inbox-pop-title { font-size:0.95rem; font-weight:800; color:#a83545; }
.inbox-pop-count { font-size:0.7rem; color:#9ca3af; font-weight:700; }
.inbox-tabs { display:flex; gap:0.3rem; }
.inbox-tab {
  flex:1; min-height:30px; padding:0.2rem 0.5rem;
  border:1.5px solid #e2e8f0; background:white;
  border-radius:999px; font-size:0.74rem; font-weight:700;
  color:#6b7280; font-family:inherit; cursor:pointer;
  transition:all 0.12s;
  -webkit-tap-highlight-color:transparent;
}
.inbox-tab:active { transform:scale(0.96); }
.inbox-tab.on { background:#a83545; color:white; border-color:#a83545; }
.inbox-list {
  flex:1; overflow-y:auto;
  -webkit-overflow-scrolling:touch; margin:0;
}
.inbox-row {
  padding:0.55rem 0.75rem 0.55rem 0.95rem;
  display:flex; gap:0.55rem; align-items:flex-start;
  border-bottom:1px solid #f7f8fa;
  cursor:pointer; transition:background 0.12s;
  -webkit-tap-highlight-color:transparent;
  position:relative;
}
.inbox-row:active { background:#f4ede3; }
.inbox-row.is-unread { background:#f4f8ff; }
.inbox-row.is-unread:active { background:#e6eeff; }
.inbox-row.is-done { opacity:0.6; }
.inbox-row.is-unread::before {
  content:''; position:absolute; left:0.35rem; top:50%;
  transform:translateY(-50%);
  width:6px; height:6px; border-radius:50%; background:#f0b020;
}
.inbox-avatar {
  width:30px; height:30px; flex-shrink:0;
  border-radius:50%; background:#a83545; color:white;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:0.76rem; font-weight:800;
}
.inbox-main { flex:1; min-width:0; }
.inbox-row-top {
  display:flex; align-items:center; gap:0.4rem;
  margin-bottom:0.1rem;
}
.inbox-sender {
  font-size:0.72rem; font-weight:700; color:#6b7280;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  flex:1; min-width:0;
}
.inbox-time { font-size:0.66rem; color:#9ca3af; flex-shrink:0; }
.inbox-title {
  font-size:0.82rem; font-weight:700; color:#1f2937;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  margin-bottom:0.08rem;
}
.inbox-row.is-unread .inbox-title { color:#a83545; }
.inbox-preview {
  font-size:0.72rem; color:#6b7280;
  overflow:hidden;
  display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical;
  line-height:1.35;
}
.inbox-row.expanded .inbox-preview {
  -webkit-line-clamp:unset; display:block;
  white-space:pre-wrap; font-size:0.8rem; color:#1f2937;
  margin-top:0.35rem;
}
.inbox-row-actions {
  display:none; gap:0.35rem;
  margin-top:0.5rem; padding-top:0.45rem;
  border-top:1px dashed #e5e7eb;
}
.inbox-row.expanded .inbox-row-actions { display:flex; }
.inbox-act-btn {
  flex:1; min-height:32px; padding:0.3rem 0.5rem;
  border:1.5px solid #e2e8f0; background:white;
  border-radius:8px; font-size:0.72rem; font-weight:700;
  color:#a83545; font-family:inherit; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; gap:0.25rem;
  -webkit-tap-highlight-color:transparent;
  transition:all 0.12s;
}
.inbox-act-btn:active { transform:scale(0.96); }
.inbox-act-btn.on-r { background:#e6f7ee; border-color:#9ee7bd; color:#0a7d3e; }
.inbox-act-btn.on-d { background:#f4e2e5; border-color:#d9a5b0; color:#7d2f3d; }
.inbox-empty { padding:2.5rem 1rem; text-align:center; color:#9ca3af; }
.inbox-empty .ei { font-size:2.2rem; margin-bottom:0.5rem; display:block; }
.inbox-pop-foot {
  padding:0.6rem; border-top:1px solid #f4ede3;
  background:#fafbfc; flex-shrink:0;
  font-size:0.78rem; font-weight:700; color:#a83545;
  border:none; font-family:inherit; cursor:pointer;
  text-align:center; width:100%;
  -webkit-tap-highlight-color:transparent;
  transition:background 0.12s;
}
.inbox-pop-foot:active { background:#eef0f3; }