/* Единое меню сайта — рендерится из lib/nav.php (render_nav()).
   Стили опираются на CSS-переменные --accent, --accent-glow, --ink-dim, --line —
   они должны быть определены на :root в каждой странице (есть и в layout.php,
   и в index.php). */

nav.main-nav {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
    align-items: center;
    padding: 14px 0;
    margin: -16px 0 32px;
    border-bottom: 1px solid var(--line);
    line-height: 1.4;
}
nav.main-nav > * {
    display: inline-flex;
    align-items: center;
}
nav.main-nav a {
    color: var(--ink-dim);
    text-decoration: none;
    font-size: 17px;
    font-weight: 600;
    letter-spacing: 0.02em;
    transition: color 0.15s ease;
}
nav.main-nav a:hover { color: var(--accent); }
nav.main-nav a.active { color: var(--accent); }
nav.main-nav .spacer { flex: 1; }

/* Logout — это форма с одной кнопкой (POST + CSRF), стилизуем кнопку
   как обычную ссылку меню, чтобы внешне ничего не отличалось. */
nav.main-nav .logout-form { margin: 0; padding: 0; }
nav.main-nav .logout-form button {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    color: var(--ink-dim);
    font: inherit;
    font-size: 17px;
    font-weight: 600;
    letter-spacing: 0.02em;
    cursor: pointer;
    min-height: 0;
    transition: color 0.15s ease;
}
nav.main-nav .logout-form button:hover { color: var(--accent); }

/* Имя пользователя в правой части меню */
nav.main-nav .who {
    color: var(--ink-dim);
    font-size: 17px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* Иконка-конверт «есть непрочитанные сообщения» */
.msg-bell {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--accent);
    text-decoration: none;
    line-height: 1;
    animation: msg-bell-blink 1.6s ease-in-out infinite;
}
.msg-bell svg { display: block; }
.msg-bell:hover { color: var(--accent-glow); }
@keyframes msg-bell-blink {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.45; }
}

/* Бейдж «админ» / счётчик. min-width рассчитан на 3 цифры (≈30px),
   чтобы и «1», и «100» выглядели одинаково по ширине. */
.badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 3px;
    font-size: 14px;
    background: var(--accent);
    color: #fff;
    line-height: 1.4;
    white-space: nowrap;
    min-width: 28px;
    text-align: center;
    box-sizing: border-box;
}

/* Внутри активной кнопки (.btn без .btn-secondary) фон у кнопки оранжевый,
   поэтому стандартный оранжевый бейдж сливается. Инвертируем. */
.btn:not(.btn-secondary) .badge {
    background: #fff;
    color: var(--accent);
}
.btn:not(.btn-secondary) .badge.badge-pulse {
    /* пульсация тоже должна быть видима на оранжевом фоне */
    box-shadow: none;
}
a.badge { text-decoration: none; }
a.badge:hover { background: var(--accent-glow); color: #fff; }
nav.main-nav a.badge { color: #fff; padding: 2px 10px; }
nav.main-nav a.badge:hover { color: #fff; background: var(--accent-glow); }

/* Когда админ внутри /admin/* — бейдж зелёный, чтобы было видно,
   что ты в админке. */
nav.main-nav a.badge.badge-admin-active {
    background: #2a8c3a;
}
nav.main-nav a.badge.badge-admin-active:hover {
    background: #34a847;
}

/* Пульсирующий бейдж — для счётчиков новых сообщений / заявок. */
.badge.badge-pulse {
    animation: badge-pulse 1.6s ease-in-out infinite;
}
@keyframes badge-pulse {
    0%, 100% { transform: scale(1);    box-shadow: 0 0 0 0 rgba(181, 72, 31, 0.5); }
    50%      { transform: scale(1.12); box-shadow: 0 0 0 6px rgba(181, 72, 31, 0); }
}

/* Баннер задолженности — рендерится в render_nav() после <nav>.
   Виден активированному пользователю с непогашенными долгами на ВСЕХ
   страницах сайта. */
.debt-banner {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    margin: 0 0 24px;
    background: #fff3d6;
    border: 1px solid #b88500;
    border-left: 6px solid #b88500;
    border-radius: 4px;
    font-size: 17px;
    line-height: 1.5;
    color: #5a4400;
}
.debt-banner-icon {
    font-size: 24px;
    line-height: 1;
    color: #b88500;
    flex: 0 0 auto;
}
.debt-banner-text { flex: 1; }
.debt-banner-amount {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    color: #8b2a2a;
}
.debt-banner a { color: #5a4400; font-weight: 700; text-decoration: none; border-bottom: none; }
.debt-banner a:hover { color: #b88500; text-decoration: none; }

/* Иконка-конверт админа (новые сообщения от пользователей). */
.admin-bell {
    display: inline-flex;
    align-items: center;
    color: var(--accent);
    text-decoration: none;
    padding: 4px 6px;
    border-radius: 4px;
    transition: background 0.15s ease;
}
.admin-bell:hover { background: rgba(181, 72, 31, 0.12); }
.admin-bell svg  { animation: bell-shake 2.4s ease-in-out infinite; }
@keyframes bell-shake {
    0%, 92%, 100% { transform: rotate(0deg); }
    93% { transform: rotate(-12deg); }
    95% { transform: rotate(10deg); }
    97% { transform: rotate(-6deg); }
    99% { transform: rotate(0deg); }
}

/* Общий футер */
footer.site-footer {
    margin-top: 64px;
    padding: 24px 0 0;
    border-top: 1px solid var(--line);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    color: var(--ink-dim);
    font-size: 16px;
}
footer.site-footer a {
    color: var(--ink-dim);
    text-decoration: none;
    transition: color 0.15s ease;
}
footer.site-footer a:hover {
    color: var(--accent);
}