/* ============================================================
   HEADER — Whatnot-stijl app-header (authenticated)
   ============================================================ */
.site-topbar { border-bottom:1px solid var(--line-soft); background:color-mix(in srgb, var(--surface) 94%, transparent); backdrop-filter:blur(18px); }
.site-topbar-inner { min-height:var(--topbar-height); padding:10px 22px; gap:14px; flex-wrap:nowrap; }

/* ── Brand ── */
.wn-brand      { display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--text); flex-shrink:0; }
.wn-brand-logo { width:auto; height:auto; max-width:230px; max-height:56px; object-fit:contain; display:block; image-rendering:auto; }
.wn-brand-mark { width:52px; height:52px; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:19px; font-weight:900; color:#111827; background:var(--accent-warm); flex-shrink:0; }
.wn-brand-name { font-size:18px; font-weight:900; letter-spacing:0; white-space:nowrap; }

/* ── Nav pills ── */
.wn-nav { display:flex; align-items:center; gap:4px; flex-shrink:0; }
.wn-nav-pill { display:inline-flex; align-items:center; padding:7px 14px; border-radius:8px; font-size:14px; font-weight:700; text-decoration:none; color:var(--text); transition:.14s; border:1px solid transparent; white-space:nowrap; }
.wn-nav-pill:hover { background:var(--line-soft); }
.wn-nav-pill.active { background:var(--accent-warm); color:#111827; border-color:#d7ba16; }

/* ── Searchbar ── */
.wn-search { flex:1 1 0; min-width:0; max-width:600px; position:relative; }
.wn-search-input { width:100%; height:42px; padding:0 16px 0 42px; border-radius:10px; border:1px solid var(--line); background:var(--input-bg); color:var(--text); font-size:14px; transition:.15s; outline:none; box-shadow:0 1px 2px rgba(17,24,39,.04); }
.wn-search-input:focus { border-color:var(--accent); box-shadow:0 0 0 4px color-mix(in srgb, var(--accent) 14%, transparent); }
.wn-search-input::placeholder { color:var(--muted); }
.wn-search-icon { position:absolute; left:14px; top:50%; transform:translateY(-50%); color:var(--muted); font-size:16px; pointer-events:none; }

/* ── Right actions group ── */
.wn-actions { display:flex; align-items:center; gap:4px; flex-shrink:0; }

/* Icon buttons: round, transparent */
.wn-icon-btn { position:relative; width:40px; height:40px; border-radius:8px; border:none; background:transparent; color:var(--text); cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:19px; transition:.14s; text-decoration:none; }
.wn-icon-btn:hover { background:var(--line-soft); }
.wn-icon-btn .badge-dot   { position:absolute; top:6px; right:6px; width:8px; height:8px; border-radius:50%; background:#ef4444; border:2px solid var(--surface); }
.wn-icon-btn .badge-count { position:absolute; top:4px; right:3px; min-width:17px; height:17px; border-radius:999px; background:var(--accent); color:#fff; font-size:10px; font-weight:800; display:flex; align-items:center; justify-content:center; padding:0 4px; border:2px solid var(--surface); }

/* ── Avatar button ── */
.wn-avatar-btn { width:64px; height:64px; border-radius:50%; border:1px solid var(--line); background:linear-gradient(135deg,var(--accent-warm),var(--accent)); color:#111827; font-size:22px; font-weight:900; display:flex; align-items:center; justify-content:center; cursor:pointer; overflow:hidden; flex:0 0 64px; padding:0; }
.wn-avatar-btn img { width:100%; height:100%; object-fit:cover; border-radius:50%; display:block; flex-shrink:0; }

/* ── Theme toggle ── */
.wn-theme-btn { height:40px; padding:0 13px; border-radius:8px; border:1px solid var(--line); background:var(--input-bg); color:var(--text); cursor:pointer; display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:600; transition:.14s; white-space:nowrap; }
.wn-theme-btn:hover { background:var(--line-soft); }

/* ── Profile avatar (inside dropdown head) ── */
.profile-avatar { width:42px; height:42px; border-radius:50%; overflow:hidden; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,var(--accent-warm),var(--accent)); color:#111827; font-weight:900; font-size:16px; flex-shrink:0; }
.profile-avatar img { width:42px; height:42px; object-fit:cover; border-radius:50%; display:block; }

/* ── Search autocomplete dropdown ── */
.wn-search-results {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(17,24,39,.14);
    z-index: 200;
    overflow: hidden;
    display: none;
}
.wn-search-results.is-open { display: block; }
.wn-search-result-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    text-decoration: none;
    color: var(--text);
    font-size: 14px;
    transition: background .12s;
    border-bottom: 1px solid var(--line-soft);
    cursor: pointer;
}
.wn-search-result-item:last-child { border-bottom: none; }
.wn-search-result-item:hover,
.wn-search-result-item.is-focused { background: var(--accent-soft); }
.wn-search-result-icon { font-size: 18px; width: 28px; text-align: center; flex-shrink: 0; }
.wn-search-result-meta { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.wn-search-result-label { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wn-search-result-sub { font-size: 12px; color: var(--muted); }
.wn-search-result-price { margin-left: auto; font-weight: 800; color: var(--accent); font-size: 13px; flex-shrink: 0; padding-left: 8px; }
.wn-search-no-results { padding: 16px; text-align: center; color: var(--muted); font-size: 14px; }

/* ── Responsive ── */
@media(max-width:860px) { .wn-search { max-width:none; } .wn-brand-name { display:none; } }
@media(max-width:640px) { .wn-nav { display:none; } }
@media(max-width:480px) { .wn-icon-btn:not(.always-show) { display:none; } }

/* ── Guest / unauthenticated topbar ── */
.topbar-logo-link    { display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--text); flex-shrink:0; }
.topbar-logo-link img { width:auto; height:auto; max-width:230px; max-height:56px; object-fit:contain; display:block; image-rendering:auto; }
.topbar-brand-mark   { width:52px; height:52px; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:19px; font-weight:900; color:#111827; background:var(--accent-warm); flex-shrink:0; }
.topbar-brand-name   { font-size:18px; font-weight:900; letter-spacing:0; white-space:nowrap; }
.topbar-search-wrap  { flex:1 1 0; min-width:0; max-width:600px; position:relative; }
.topbar-search-icon  { position:absolute; left:14px; top:50%; transform:translateY(-50%); color:var(--muted); font-size:16px; pointer-events:none; }
.topbar-search-input { width:100%; height:42px; padding:0 16px 0 42px; border-radius:10px; border:1px solid var(--line); background:var(--input-bg); color:var(--text); font-size:14px; outline:none; box-shadow:0 1px 2px rgba(17,24,39,.04); }
.topbar-actions      { display:flex; align-items:center; gap:6px; flex-shrink:0; }

/* ── Logo per thema ───────────────────────────────────────────────────
   Het thema wordt client-side gezet (data-theme op <html>), dus de server
   weet bij het renderen niet welk logo nodig is. Beide worden uitgezonden;
   CSS kiest. De selectors zijn expliciet omdat `.topbar-logo-link img`
   (0,1,1) een kale `.brand-logo--dark` (0,1,0) zou verslaan. */
.brand-logo--dark,
.topbar-logo-link img.brand-logo--dark { display: none; }

[data-theme="dark"] .brand-logo--light,
[data-theme="dark"] .topbar-logo-link img.brand-logo--light { display: none; }

[data-theme="dark"] .brand-logo--dark,
[data-theme="dark"] .topbar-logo-link img.brand-logo--dark { display: block; }

/* ── Notificatiebel ───────────────────────────────────────────────────── */
.wn-notif { position:relative; }
.wn-notif-btn.has-unread { color:var(--accent-2); }
.wn-notif-badge { position:absolute; top:4px; right:4px; min-width:16px; height:16px;
                  padding:0 4px; border-radius:999px; background:var(--danger); color:#fff;
                  font-size:10px; font-weight:800; line-height:16px; text-align:center;
                  box-shadow:0 0 0 2px var(--surface); }
.wn-notif-badge[hidden] { display:none; }
/* Zachte puls zodat nieuwe berichten opvallen. */
.wn-notif-btn.has-unread .wn-notif-badge { animation:wn-notif-pulse 2s ease-in-out infinite; }
@keyframes wn-notif-pulse { 0%,100% { transform:scale(1); } 50% { transform:scale(1.18); } }

.wn-notif-panel { position:absolute; top:calc(100% + 8px); right:0; width:340px; max-width:92vw;
                  background:var(--surface); border:1px solid var(--line); border-radius:14px;
                  box-shadow:0 12px 34px rgba(16,24,40,.22); z-index:120; overflow:hidden; }
.wn-notif-panel[hidden] { display:none; }
.wn-notif-head { display:flex; align-items:center; justify-content:space-between;
                 padding:12px 16px; border-bottom:1px solid var(--line); }
.wn-notif-readall { margin:0; }
.wn-notif-readall-btn { background:none; border:none; color:var(--accent-2); cursor:pointer;
                        font-size:12px; font-weight:700; padding:0; }
.wn-notif-list { list-style:none; margin:0; padding:0; max-height:380px; overflow-y:auto; }
.wn-notif-item a { display:grid; grid-template-columns:1fr auto; gap:2px 10px; align-items:baseline;
                   padding:11px 16px; text-decoration:none; color:var(--text); border-bottom:1px solid var(--line-soft); }
.wn-notif-item a:hover { background:var(--surface-2); }
.wn-notif-item.is-unread a { background:var(--accent-soft); }
.wn-notif-item.is-unread a:hover { background:color-mix(in srgb, var(--accent) 14%, var(--surface-2)); }
.wn-notif-title { font-size:13px; font-weight:600; grid-column:1; }
.wn-notif-ref { grid-column:1; font-size:12px; color:var(--accent-2); font-weight:700; }
.wn-notif-ago { grid-column:2; grid-row:1; font-size:11px; color:var(--muted); white-space:nowrap; }
.wn-notif-empty { padding:20px 16px; text-align:center; color:var(--muted); font-size:13px; }
.wn-notif-all { display:block; text-align:center; padding:11px; font-size:13px; font-weight:700;
                color:var(--accent-2); text-decoration:none; border-top:1px solid var(--line); }
.wn-notif-all:hover { background:var(--surface-2); }