/*
 * Site header extras: icon buttons with live counters, dropdown menus, modals, list rows,
 * inline forms. Loaded by the site layout after site.css and by DEPO Album together with the
 * embedded site header (GET /_fragment/site-header, docs/front/sso.md), so both show the same header.
 * Tokens (--yellow, --line, …) come from site.css / album.css.
 */
/* Header bar, its icons and counters: css/site-chrome.css. */

/* dropdown menu (user menu): [data-dropdown-toggle=name] opens [data-dropdown=name] */
.dropdown { position: relative; }
.dropdown__panel {
    position: absolute; right: 0; top: calc(100% + 8px); z-index: 30; min-width: 220px; padding: 8px;
    background: rgb(39 38 43 / 0.92); border: 1px solid var(--line); border-radius: var(--radius);
    backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: var(--shadow);
}
.dropdown__item {
    display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 12px; border: 0; border-radius: 8px;
    background: none; color: var(--muted); text-align: left; cursor: pointer; font-size: 14px;
    transition: color var(--trans), background var(--trans);
}
.dropdown__item:hover { color: var(--text); background: rgb(255 255 255 / 0.06); }
.dropdown__sep { height: 1px; margin: 6px 4px; background: var(--line); }
.dropdown__head { padding: 8px 12px 10px; }
.dropdown__head strong { display: block; font-size: 14px; }
.dropdown__head span { font-size: 12px; color: var(--gray); }

@media (max-width: 1199px) {
    .dropdown__panel { position: static; margin-top: 8px; background: transparent; border: 0; box-shadow: none; padding: 0; }
}

/* header user menu (front/public/styles/Header.module.scss .dropdown / .userMenu) */
.user-menu.dropdown__panel {
    top: calc(100% + 16px); width: 330px; max-width: calc(100vw - 32px); padding: 35px;
    max-height: calc(100vh - var(--header-h, 70px) - 24px); overflow-y: auto; overscroll-behavior: contain;
    /* Next.js uses 0.7 over its dark pages; over photos that reads washed out, so (nearly) solid here. */
    background: rgb(54 56 63 / 0.97); border: 0; border-radius: 20px; color: #fff; font-size: 16px; line-height: 1.3;
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.user-menu a, .user-menu .link-button { color: #fff; }
.user-menu__header { position: relative; display: flex; flex-direction: column; min-height: 46px; margin-bottom: 20px; padding: 5.5px 0 0 62px; }
.user-menu__photo { position: absolute; top: 0; left: 0; width: 46px; height: 46px; border-radius: 50%; overflow: hidden; }
.user-menu__photo .avatar { width: 46px; height: 46px; }
.user-menu__identity { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.user-menu__badge { width: auto; height: 22px; max-width: 82px; object-fit: contain; }
.user-menu__name { font-weight: 600; overflow-wrap: anywhere; }
.user-menu__email { color: #71717a; font-size: 10px; overflow-wrap: anywhere; }
.user-menu__box { display: flex; flex-direction: column; gap: 18px; margin-bottom: 15px; padding-bottom: 15px; border-bottom: 1px solid #d9d9d9; }
.user-menu__box-title-row { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.user-menu__box-title { font-weight: 600; text-transform: uppercase; overflow-wrap: anywhere; }
.user-menu__box-badge { width: auto; height: 15px; flex: none; }
.user-menu__list, .user-menu__links { display: flex; flex-direction: column; gap: 5px; margin: 0; padding: 0; list-style: none; }
.user-menu__list a, .user-menu__list .link-button { display: flex; align-items: center; gap: 16px; }
.user-menu__list .link-button { font: inherit; line-height: inherit; text-align: left; color: inherit; }
.user-menu__list .link-button:hover span { text-decoration: underline; }
.user-menu__list .link-button:focus-visible { outline: 2px solid #469a58; outline-offset: 2px; border-radius: 4px; }
.user-menu__list .link-button[aria-disabled="true"] { opacity: .6; cursor: default; }
.user-menu__list .link-button[aria-disabled="true"]:hover span { text-decoration: none; }
.user-menu__list .icon { width: 20px; height: 20px; stroke-width: 1.5; }
.user-menu__list a:hover span, .user-menu__links a:hover, .user-menu__links .link-button:hover { text-decoration: underline; }
.user-menu__list a:focus-visible, .user-menu__links a:focus-visible, .user-menu__links .link-button:focus-visible, .user-menu__header:focus-visible { outline: 2px solid #469a58; outline-offset: 2px; border-radius: 4px; }
.user-menu__links .link-button { font: inherit; line-height: 1.3; text-align: left; }
@media (max-width: 1199px) {
    .user-menu-wrap { flex-basis: 100%; }
    .user-menu.dropdown__panel { width: 100%; max-width: none; max-height: none; margin-top: 8px; padding: 20px 15px; background: rgb(54 56 63 / 0.7); border-radius: 20px; }
}

/* modal: [data-modal=name], closed by [data-modal-close], Esc or overlay click */
.modal { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; padding: 16px; background: rgb(0 0 0 / 0.6); }
.modal__card { width: min(520px, 100%); max-height: calc(100vh - 32px); overflow: auto; padding: 28px; }
.modal__title { font-size: 20px; margin-bottom: 12px; }
.modal__actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 20px; flex-wrap: wrap; }
body.modal-open { overflow: hidden; }

/* cookie consent dialog (partials/cookie_consent.php, public/js/analytics.js): above every other layer */
.cookie-consent { z-index: 90; }
.cookie-consent__card { width: min(640px, 100%); text-align: center; }
.cookie-consent__logo { display: block; width: 120px; height: auto; margin: 0 auto 12px; }
.cookie-consent__title { color: var(--primary); }
.cookie-consent__text { font-size: 14px; line-height: 1.5; }
.cookie-consent__actions { justify-content: center; }
.cookie-consent__actions .btn { min-width: 150px; }

/* generic list rows (notifications, chats, settings lists) */
.list { display: flex; flex-direction: column; }
.list__item { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-bottom: 1px solid var(--line); transition: background var(--trans); }
.list__item:last-child { border-bottom: 0; }
a.list__item:hover { background: rgb(255 255 255 / 0.03); }
.list__item.is-unread { background: rgb(255 181 0 / 0.05); }
.list__body { flex: 1; min-width: 0; }
.list__title { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.list__text { color: var(--muted); font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.list__meta { color: var(--gray); font-size: 12px; white-space: nowrap; }

.inline-form { display: inline; margin: 0; }
.link-button { padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }