/* Фінансовий портал МОНІ — доступи та прив'язки.
   Стилі для: білого списку пошт (/admin/settings), відв'язки Telegram (/profile),
   кнопки «Прив'язати пізніше» і дії в картці сповіщення.

   ⛔ ОКРЕМИЙ ФАЙЛ НАВМИСНО. app.css на проді розійшовся з репозиторієм
      (див. памʼятку prototype-requests-mirror), тож правити його цілком —
      найкоротший шлях відкотити чужі зміни. Тут — тільки нове.
   ⛔ Інлайнові <style> заборонені CSP (style-src 'self'), тому все живе у файлі.
   ⛔ Після правок цього файла бампати asset_version, інакше кеш віддасть старе. */

/* --- «Прив'язати пізніше» на екрані привʼязки ------------------------------ */
.tg-skip {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
}
.tg-skip__hint {
    font-size: 13px;
    color: var(--text-mut);
}

/* --- Відв'язка Telegram у профілі ------------------------------------------ */
.tg-unlink {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 4px;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: 10px;
}
.tg-unlink__text { display: flex; flex-direction: column; gap: 4px; max-width: 60ch; }
.tg-unlink__hint { font-size: 13px; color: var(--text-mut); line-height: 1.45; }

/* Блок «Telegram не прив'язано» у стрічці — тон спокійний, це пропозиція, не докір. */
.tg-pref--off { opacity: .95; }

/* --- Дія просто в картці сповіщення (напр. «Завантажити квитанцію») -------- */
.notif__act--dl {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: auto;
    padding: 0 10px;
    white-space: nowrap;
}
.notif__act-label { font-size: 12px; font-weight: 600; }
@media (max-width: 640px) {
    /* На вузькому екрані лишаємо саму іконку — підпис зʼїдає рядок. */
    .notif__act-label { display: none; }
    .notif__act--dl { padding: 0; }
}

/* --- Мʼяке нагадування про Telegram у шапці -------------------------------- */
.tg-remind {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 8px 16px;
    font-size: 13px;
    background: var(--bg-soft, #f6f2ee);
    border-bottom: 1px solid var(--border);
    color: var(--text-mut);
}
.tg-remind a { font-weight: 600; }

/* --- Білий список пошт (/admin/settings) ----------------------------------- */
.allow { margin-top: 18px; }

.allow__warn {
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-left: 3px solid var(--primary);
    border-radius: 8px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--text-mut);
}
.allow__warn code {
    padding: 1px 5px;
    border-radius: 4px;
    background: var(--bg-soft, #f2efec);
}

.allow__form {
    display: grid;
    grid-template-columns: minmax(220px, 2fr) minmax(200px, 2fr) minmax(150px, 1fr) auto;
    gap: 12px;
    align-items: end;
    margin: 4px 0 8px;
}
@media (max-width: 860px) {
    .allow__form { grid-template-columns: 1fr; align-items: stretch; }
}

.allow__table { width: 100%; border-collapse: collapse; font-size: 14px; }
.allow__table th {
    text-align: left;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--text-mut);
    padding: 8px 10px;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}
.allow__table td {
    padding: 10px;
    border-bottom: 1px solid var(--border);
    vertical-align: top;
}
.allow__row--revoked,
.allow__row--expired { opacity: .6; }

.allow__sub {
    display: block;
    font-size: 12px;
    color: var(--text-mut);
    margin-top: 2px;
}

.allow__state {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    border: 1px solid var(--border);
}
.allow__state--live    { border-color: #2e7d5b; color: #2e7d5b; }
.allow__state--expired { border-color: #a8791f; color: #a8791f; }
.allow__state--revoked { border-color: var(--border); color: var(--text-mut); }

.allow__acts { text-align: right; white-space: nowrap; }
.allow__foot { font-size: 13px; color: var(--text-mut); }

/* Картка користувача: розтягнутий рядок «ключ — значення» під довгий текст. */
.us-kv--wide { align-items: flex-start; }
.us-kv--wide span { max-width: 46ch; line-height: 1.45; }
.us-form--inline { margin-top: -4px; }