/* Кнопка сповіщень — окремий блок сайдбара без заголовка (base.html).
   Сірий стан за замовчуванням («Сповіщення»). */
.notice-btn {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .55rem .9rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-2);
    color: var(--text-muted);
    font-size: .9rem;
    text-decoration: none;
}
.notice-btn:hover { color: var(--text); }

/* Червоний стан («Є нові сповіщення») — crit-рівень. */
.notice-btn--new {
    border-color: var(--crit);
    background: var(--crit);
    color: #fff;
}
.notice-btn--new:hover { color: #fff; }

/* ── сторінка списку сповіщень ── */
.notice-toolbar {
    display: flex;
    gap: .5rem;
    margin-bottom: 1rem;
}

.notice-filters {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: 1rem;
}

/* Плашки-лічильники по важливості — притиснуті вправо. */
.notice-counts {
    display: flex;
    gap: .4rem;
    margin-left: auto;
}
/* Плашка-фільтр важливості: увімкнена (.is-on) — кольорова, вимкнена — сіра. */
.notice-count {
    min-width: 2.2rem;
    padding: .35rem .6rem;
    border-radius: var(--radius);
    text-align: center;
    font-weight: 500;
    font-size: .85rem;
    cursor: pointer;
    /* вимкнений стан за замовчуванням: сіра, приглушена */
    color: var(--text-muted);
    background: var(--surface-2);
    border: 1px solid var(--border);
}
/* увімкнена: колір рівня текстом + напівпрозора заливка (не кислотно) */
.notice-count--info.is-on     { color: var(--info); background: var(--info-soft); border-color: var(--info); }
.notice-count--warning.is-on  { color: var(--warn); background: var(--warn-soft); border-color: var(--warn); }
.notice-count--critical.is-on { color: var(--crit); background: var(--crit-soft); border-color: var(--crit); }

.notice-list {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    list-style: none;
}

/* Рядок: кольорова смужка рівня + текст + мета. */
/* [hidden] має перемагати display:flex (інакше атрибут hidden не ховає рядок). */
.notice-item[hidden] { display: none; }

.notice-item {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .75rem 1rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
/* Тіло займає весь простір -> кнопка «Створити зустріч» відкидається вправо. */
.notice-item__body { flex: 1; min-width: 0; }
.notice-item__create { flex-shrink: 0; }
/* Маркер важливості — SVG-іконка за рівнем, колір із severity-токена (currentColor).
   Фіксований квадрат, щоб рядки не стрибали. */
.notice-item__icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.6rem;
    height: 1.6rem;
}
.notice-item__icon svg { width: 1.4rem; height: 1.4rem; display: block; }
.notice-item__icon--info     { color: var(--info); }
.notice-item__icon--warning  { color: var(--warn); }
.notice-item__icon--critical { color: var(--crit); }

.notice-item__text { color: var(--text); }
/* «В роботі» (PENDING): зустріч призначено, умова ще тримається. Приглушений
   інфо-тон, той самий синій, що LVL.info на дашборді. */
.notice-item__pending {
    margin-left: .4rem;
    padding: .1rem .45rem;
    border-radius: var(--radius);
    font-size: .7rem;
    font-weight: 600;
    color: var(--info);
    background: var(--info-soft);
    border: 1px solid var(--info);
    white-space: nowrap;
}
.notice-item__meta {
    margin-top: .2rem;
    font-size: .75rem;
    color: var(--text-muted);
}

/* Заглушка порожнього індексу. */
.notice-empty {
    padding: 2rem;
    color: var(--text-muted);
    text-align: center;
}

/* Попап «Створити зустріч»: ширший за дефолтний modal (26rem) — двоколонковий
   (команди ліворуч + форма праворуч), як слот-попап календаря. */
.notice-create__box { max-width: 44rem; }