/* ---- Top bar: notifications + user menu (markup: common/header_actions.html, behaviour: js/header_menus.js) ---- */
.hdr-actions { display: flex; align-items: center; gap: 8px; color: #12151c; }
.hdr-menu { position: relative; }

.hdr-icon-btn, .hdr-user { display: inline-flex; align-items: center; border: 0; background: transparent; color: inherit; cursor: pointer; border-radius: 12px; transition: background-color 0.15s ease; }
.hdr-icon-btn:hover, .hdr-user:hover, .hdr-icon-btn[aria-expanded="true"], .hdr-user[aria-expanded="true"] { background: rgba(13, 17, 24, 0.07); }
.hdr-icon-btn:focus-visible, .hdr-user:focus-visible, .hdr-item:focus-visible { outline: 2px solid #A01745; outline-offset: 2px; }
.hdr-icon-btn { position: relative; justify-content: center; width: 40px; height: 40px; }
.hdr-badge { position: absolute; top: 3px; right: 3px; min-width: 17px; height: 17px; padding: 0 4px; box-sizing: border-box; border-radius: 999px; background: #A01745; color: #fff; font-size: 10px; font-weight: 700; line-height: 17px; text-align: center; }
.hdr-badge[hidden] { display: none; }

.hdr-user { gap: 10px; padding: 4px 8px 4px 4px; }
.hdr-avatar { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 10px; background: linear-gradient(135deg, #A01745, #6E0F2E); color: #fff; font-size: 14px; font-weight: 700; letter-spacing: 0.5px; }
.hdr-avatar--lg { width: 44px; height: 44px; border-radius: 12px; font-size: 16px; }
.hdr-user-text { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; line-height: 1.2; text-align: left; }
.hdr-user-name { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 700; }
.hdr-user-role { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: #5B6878; }
.hdr-chevron { flex: none; color: #5B6878; transition: transform 0.2s ease; }
.hdr-user[aria-expanded="true"] .hdr-chevron { transform: rotate(180deg); }

/* Dropdown panels */
.hdr-panel { position: absolute; right: 0; top: calc(100% + 8px); z-index: 50; box-sizing: border-box; max-width: calc(100vw - 24px); padding: 6px; border-radius: 14px; border: 1px solid #E3E8EF; background: #fff; color: #0D1118; box-shadow: 0 18px 40px -14px rgba(13, 17, 24, 0.35); transform-origin: top right; }
.hdr-panel[hidden] { display: none; }
.hdr-panel:not([hidden]) { animation: hdr-pop 0.16s ease-out; }
.hdr-panel--user { width: 280px; }
.hdr-panel--notifications { width: 340px; }
@keyframes hdr-pop { from { opacity: 0; transform: translateY(-6px) scale(0.97); } to { opacity: 1; transform: none; } }

.hdr-panel-title { padding: 10px 12px 8px; font-size: 14px; font-weight: 700; }
.hdr-empty { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 22px 16px 24px; text-align: center; list-style: none; }
.hdr-empty[hidden] { display: none; }
.hdr-empty b { font-size: 14px; }
.hdr-empty > span:last-child { font-size: 13px; color: #5B6878; }
.hdr-empty-icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-bottom: 6px; border-radius: 50%; background: rgba(22, 163, 74, 0.12); color: #16A34A; }

.hdr-user-card { display: flex; align-items: center; gap: 12px; padding: 12px; margin-bottom: 4px; border-radius: 10px; background: #F4F6F9; }
.hdr-user-card-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.hdr-user-card-text b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.hdr-user-card-text span { overflow-wrap: anywhere; font-size: 12px; color: #5B6878; }

.hdr-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; color: inherit; font-size: 14px; font-weight: 500; text-decoration: none; transition: background-color 0.15s ease; }
.hdr-item:hover, .hdr-item:focus-visible { background: #F1F3F7; }
.hdr-item svg { flex: none; color: #5B6878; }
.hdr-item--danger, .hdr-item--danger svg { color: #A01745; }
.hdr-item--danger:hover { background: rgba(160, 23, 69, 0.08); }
.hdr-sep { height: 1px; margin: 6px 4px; background: #E3E8EF; }

@media (prefers-color-scheme: dark) {
    .hdr-actions { color: #fff; }
    .hdr-icon-btn:hover, .hdr-user:hover, .hdr-icon-btn[aria-expanded="true"], .hdr-user[aria-expanded="true"] { background: rgba(255, 255, 255, 0.09); }
    .hdr-user-role, .hdr-chevron, .hdr-empty > span:last-child, .hdr-user-card-text span, .hdr-item svg { color: #9AA7B8; }
    .hdr-panel { background: #181E2B; border-color: #263044; color: #E6EDF7; box-shadow: 0 18px 40px -14px rgba(0, 0, 0, 0.7); }
    .hdr-user-card { background: #202839; }
    .hdr-item:hover, .hdr-item:focus-visible { background: #232C3F; }
    .hdr-item--danger, .hdr-item--danger svg { color: #FF7FA3; }
    .hdr-item--danger:hover { background: rgba(255, 127, 163, 0.12); }
    .hdr-sep { background: #263044; }
}

@media (max-width: 639px) {
    .hdr-user-text, .hdr-chevron { display: none; }
    .hdr-user { padding: 4px; }
    .hdr-panel--notifications { width: 300px; }
}

@media (prefers-reduced-motion: reduce) {
    .hdr-panel:not([hidden]) { animation: none; }
    .hdr-chevron, .hdr-icon-btn, .hdr-user, .hdr-item { transition: none; }
}

/* Public pages' top bar (common/header.html). Plain CSS: those pages have no Tailwind dark: classes. */
.public-bar { background: #F3F4F6; }
@media (prefers-color-scheme: dark) { .public-bar { background: #12151C; } }