/* ─────────────────────────────────────────────────────────────────────────────
   HQMail — дизайн-система.

   Язык взят из HQForce (docs/ДИЗАЙН.md той системы), чтобы экосистема выглядела
   единой: зелёно-белая палитра, один акцент, иерархию держит типографика,
   строки с hairline-разделителями вместо толстых карточек-коробок.

   Bootstrap оставлен как каркас (сетка, утилиты, поведение), но перенастроен
   через свои переменные — своей вёрстки с нуля не пишем.
   Дух: Linear / Stripe / Notion — плотно, спокойно, без «админки 2015».
   ───────────────────────────────────────────────────────────────────────────── */

:root {
    /* Бренд — единственный акцент. Цветом не сорим. */
    --brand:       #16a34a;
    --brand-700:   #15803d;
    --brand-800:   #136a34;
    --brand-50:    #f0fdf4;
    --brand-100:   #dcfce7;
    --brand-200:   #bbf7d0;

    /* Нейтрали */
    --ink:         #14241b;
    --text:        #1f2a24;
    --muted:       #6b7b72;
    --faint:       #93a39a;
    --line:        #e6ebe8;
    --hair:        rgba(20, 40, 30, .09);
    --bg:          #f5f8f6;
    --card:        #ffffff;

    /* Статусы */
    --danger:      #dc2626;  --danger-bg: #fef2f2;
    --warn:        #b45309;  --warn-bg:   #fffbeb;
    --ok:          #15803d;  --ok-bg:     #ecfdf3;
    --info:        #1d4ed8;  --info-bg:   #eff6ff;

    --radius:      12px;
    --radius-sm:   8px;
    --radius-pill: 999px;

    --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

    /* ── Перенастройка Bootstrap под наш язык ─────────────────────────────── */
    --bs-primary: var(--brand);
    --bs-link-color: var(--brand-700);
    --bs-link-hover-color: var(--brand-800);
    --bs-body-color: var(--text);
    --bs-body-bg: var(--bg);
    --bs-body-font-family: var(--font);
    --bs-body-font-size: 14.5px;
    --bs-body-line-height: 1.5;
    --bs-border-color: var(--line);
    --bs-border-radius: var(--radius);
    --bs-border-radius-sm: var(--radius-sm);
    --bs-border-radius-lg: var(--radius);
    --bs-emphasis-color: var(--ink);
    --bs-secondary-color: var(--muted);
}

body {
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

a { text-decoration: none; }
a:hover { text-decoration: none; color: var(--brand-800); }

/* Иерархию держит типографика, а не рамки. Веса только 400 и 500. */
h1, .h1 { font-size: 22px; font-weight: 500; letter-spacing: -.01em; }
h2, .h2 { font-size: 18px; font-weight: 500; }
h3, .h3 { font-size: 16px; font-weight: 500; }
h4, .h4, h5, .h5, h6, .h6 { font-weight: 500; }
.h5 { font-size: 17px; }
.h6 { font-size: 14.5px; }

/* ── Шапка ────────────────────────────────────────────────────────────────── */

.navbar {
    background: var(--card);
    border-bottom: 1px solid var(--hair);
    padding: 0;
    min-height: 56px;
}
.navbar-brand {
    font-size: 16px;
    font-weight: 500;
    color: var(--ink);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.navbar-brand .brand-mark {
    width: 26px; height: 26px;
    border-radius: 7px;
    background: var(--brand);
    color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 15px;
}
.navbar .nav-link {
    color: var(--muted);
    font-size: 14px;
    padding: 8px 12px;
    border-radius: var(--radius-sm);
}
.navbar .nav-link:hover { color: var(--text); background: var(--bg); }
.navbar .nav-link.is-active { color: var(--brand-700); background: var(--brand-50); }

/* ── Карточки: лёгкие, на hairline, без чанковости ────────────────────────── */

.card {
    background: var(--card);
    border: 1px solid var(--hair);
    border-radius: var(--radius);
    box-shadow: none;
}
.card-header {
    background: transparent;
    border-bottom: 1px solid var(--hair);
    padding: 13px 18px;
    font-size: 13px;
    color: var(--muted);
    font-weight: 500;
}
.card-body { padding: 18px; }

/* ── Тулбар страницы: заголовок + фильтры + главное действие ───────────────── */

.toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}
.toolbar h1 { margin: 0; }
.toolbar .toolbar__spacer { margin-left: auto; }
.toolbar__hint { color: var(--muted); font-size: 13px; }

/* ── Кнопки ───────────────────────────────────────────────────────────────── */

.btn {
    height: 36px;
    padding: 0 14px;
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    border-radius: var(--radius-sm);
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1;
    border: 1px solid transparent;
}
.btn i { font-size: 15px; }
.btn-sm { height: 30px; padding: 0 10px; font-size: 13px; }
.btn-lg { height: 42px; font-size: 15px; }

.btn-primary { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn-primary:hover, .btn-primary:focus { background: var(--brand-700); border-color: var(--brand-700); color: #fff; }

.btn-outline-secondary {
    background: var(--card); color: var(--text); border-color: var(--line);
}
.btn-outline-secondary:hover { background: var(--bg); color: var(--text); border-color: #d4ddd8; }

.btn-outline-danger { background: var(--card); color: var(--danger); border-color: #f1cccc; }
.btn-outline-danger:hover { background: var(--danger-bg); color: var(--danger); border-color: #e8b4b4; }

.btn-link { color: var(--brand-700); height: auto; padding: 0; }

/* ── Списки строками: основной паттерн вместо коробок ─────────────────────── */

.rows { display: flex; flex-direction: column; }
.row-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 18px;
    border-bottom: 1px solid var(--hair);
    color: var(--text);
    transition: background .12s;
}
.row-item:last-child { border-bottom: 0; }
.row-item:hover { background: var(--bg); }
.row-item.is-active { background: var(--brand-50); }

/* ── Таблицы ──────────────────────────────────────────────────────────────── */

.table { --bs-table-bg: transparent; margin-bottom: 0; }
.table > thead > tr > th {
    font-size: 12px;
    font-weight: 500;
    color: var(--faint);
    border-bottom: 1px solid var(--hair);
    padding: 10px 12px;
    white-space: nowrap;
}
.table > tbody > tr > td {
    padding: 12px;
    border-bottom: 1px solid var(--hair);
    vertical-align: middle;
}
.table > tbody > tr:last-child > td { border-bottom: 0; }
.table-hover > tbody > tr:hover > * { background: var(--bg); }

/* ── Строка письма ────────────────────────────────────────────────────────── */

.msg-row { cursor: pointer; }
.msg-row.unread .msg-subject,
.msg-row.unread .msg-from { font-weight: 500; color: var(--ink); }
.msg-row.unread td:first-child { box-shadow: inset 2px 0 0 var(--brand); }
.msg-from { color: var(--text); }
.msg-subject { color: var(--text); }
.msg-meta { color: var(--faint); font-size: 12.5px; }
.msg-date { color: var(--muted); font-size: 12.5px; white-space: nowrap; }

/* ── Боковая навигация почты ──────────────────────────────────────────────── */

.side-nav { display: flex; flex-direction: column; gap: 1px; padding: 6px; }
.side-nav a {
    display: flex; align-items: center; gap: 9px;
    padding: 8px 10px;
    border-radius: var(--radius-sm);
    color: var(--text);
    font-size: 14px;
}
.side-nav a:hover { background: var(--bg); }
.side-nav a.is-active { background: var(--brand-50); color: var(--brand-800); font-weight: 500; }
.side-nav a i { color: var(--faint); font-size: 15px; width: 17px; }
.side-nav a.is-active i { color: var(--brand); }
.side-nav .count { margin-left: auto; font-size: 12px; color: var(--muted); }
.side-nav a.is-active .count { color: var(--brand-700); }
.side-title {
    font-size: 11.5px; color: var(--faint); font-weight: 500;
    padding: 12px 10px 5px;
}

/* ── Бейджи-статусы ───────────────────────────────────────────────────────── */

.badge {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 12px; font-weight: 500;
    padding: 3px 9px;
    border-radius: var(--radius-pill);
    line-height: 1.4;
}
.badge::before {
    content: ""; width: 5px; height: 5px;
    border-radius: 50%; background: currentColor;
}
.badge.badge--plain::before { display: none; }
.badge-ok    { background: var(--ok-bg);     color: var(--ok); }
.badge-gray  { background: #f1f4f3;          color: var(--muted); }
.badge-warn  { background: var(--warn-bg);   color: var(--warn); }
.badge-info  { background: var(--info-bg);   color: var(--info); }
.badge-danger{ background: var(--danger-bg); color: var(--danger); }
.badge-count {
    background: var(--brand-100); color: var(--brand-800);
    font-variant-numeric: tabular-nums;
}
.badge-count::before { display: none; }

/* ── Пустые состояния ─────────────────────────────────────────────────────── */

.empty {
    text-align: center;
    padding: 56px 24px;
    color: var(--muted);
}
.empty i { font-size: 40px; color: var(--brand-200); display: block; margin-bottom: 12px; }
.empty__title { color: var(--text); font-size: 15px; margin-bottom: 4px; }
.empty__hint { font-size: 13.5px; }

/* ── Формы ────────────────────────────────────────────────────────────────── */

.form-control, .form-select {
    border-color: var(--line);
    border-radius: var(--radius-sm);
    font-size: 14px;
    min-height: 36px;
    color: var(--text);
}
.form-control:focus, .form-select:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px var(--brand-100);
}
.form-label { font-size: 13px; color: var(--muted); margin-bottom: 4px; }
.form-text  { font-size: 12.5px; color: var(--faint); }
.form-check-input:checked { background-color: var(--brand); border-color: var(--brand); }
.form-check-input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-100); }
.input-group-text {
    background: var(--bg); border-color: var(--line);
    font-size: 13.5px; color: var(--muted);
}

/* ── Сообщения ────────────────────────────────────────────────────────────── */

.alert {
    border-radius: var(--radius-sm);
    border-width: 1px;
    font-size: 13.5px;
    padding: 11px 14px;
}
.alert-success { background: var(--ok-bg);     border-color: #bfe6cd; color: var(--ok); }
.alert-danger  { background: var(--danger-bg); border-color: #f1cccc; color: var(--danger); }
.alert-warning { background: var(--warn-bg);   border-color: #f0dfb3; color: var(--warn); }
.alert-light   { background: var(--card);      border-color: var(--hair); color: var(--muted); }
.alert-secondary { background: var(--bg);      border-color: var(--hair); color: var(--muted); }

/* ── Письмо ───────────────────────────────────────────────────────────────── */

.letter-head h1 { font-size: 19px; }
.letter-meta { color: var(--muted); font-size: 13px; }
.letter-meta strong { color: var(--text); font-weight: 500; }
.letter-body {
    white-space: pre-wrap;
    word-break: break-word;
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--text);
}
.letter-html {
    width: 100%;
    min-height: 60vh;
    border: 1px solid var(--hair);
    border-radius: var(--radius-sm);
    background: #fff;
}
.attachment {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 0;
    border-top: 1px solid var(--hair);
    font-size: 13.5px;
}
.attachment i { color: var(--faint); font-size: 17px; }

/* ── Вкладки ──────────────────────────────────────────────────────────────── */

.nav-pills .nav-link {
    color: var(--muted); font-size: 13.5px; font-weight: 500;
    padding: 6px 12px; border-radius: var(--radius-sm);
}
.nav-pills .nav-link.active { background: var(--brand-50); color: var(--brand-800); }

/* ── Пагинация ────────────────────────────────────────────────────────────── */

.pagination { --bs-pagination-color: var(--text); font-size: 13.5px; }
.page-link { border-color: var(--hair); border-radius: var(--radius-sm) !important; margin: 0 2px; }
.page-item.active .page-link { background: var(--brand); border-color: var(--brand); }
.page-link:hover { background: var(--bg); color: var(--text); }

/* Длинные адреса не растягивают страницу */
.text-wrap-anywhere { overflow-wrap: anywhere; }

/* ── Мобильные: 375 ───────────────────────────────────────────────────────── */

@media (max-width: 767.98px) {
    .card-body { padding: 14px; }
    .toolbar { gap: 8px; }
    .toolbar .toolbar__spacer { margin-left: 0; width: 100%; }

    /* Таблица писем превращается в стопку строк — колонки на 375 не помещаются */
    .table-cards thead { display: none; }
    .table-cards tbody tr {
        display: block;
        padding: 12px;
        border-bottom: 1px solid var(--hair);
    }
    .table-cards tbody tr:last-child { border-bottom: 0; }
    .table-cards tbody td {
        display: block;
        padding: 1px 0;
        border: 0;      /* внутри карточки разделители не нужны — это одно письмо */
    }
    /* Маршрут и дата — в одну строку под темой, а не отдельными блоками */
    .table-cards tbody td:nth-child(3),
    .table-cards tbody td:nth-child(4) {
        display: inline-block;
        margin-top: 6px;
        margin-right: 10px;
    }
    .table-cards .msg-date > div { display: inline; }
    .msg-row.unread td:first-child { box-shadow: none; }
    .msg-row.unread { box-shadow: inset 2px 0 0 var(--brand); }
}

/* ── Отправитель: кружок с инициалом, как в почтовых клиентах ─────────────── */

.sender-avatar {
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%;
    color: #fff;
    font-weight: 500;
    flex: 0 0 auto;
    line-height: 1;
    user-select: none;
}

/* Начало письма серым после темы — помогает решить, открывать ли */
.msg-preview { color: var(--faint); font-weight: 400; }

.min-width-0 { min-width: 0; }

/* Тема с превью занимает максимум две строки и не растягивает таблицу */
.text-truncate-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Подпись псевдонима правится прямо в строке: заводят их пачками,
   и ходить в отдельную форму ради одной фразы никто не станет. */
.alias-note {
    border: 0;
    background: transparent;
    padding: 0;
    font-size: 12.5px;
    color: var(--faint);
    width: 100%;
    max-width: 420px;
}
.alias-note:focus {
    outline: none;
    color: var(--text);
    border-bottom: 1px solid var(--brand-200);
}
.alias-note::placeholder { color: #c3ccc7; }

/* ── Псевдонимы в меню почты ──────────────────────────────────────────────── */

.alias-row {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 6px 10px;
    border: 0;
    background: transparent;
    border-radius: var(--radius-sm);
    text-align: left;
    cursor: pointer;
    color: var(--text);
}
.alias-row:hover { background: var(--bg); }
.alias-row > i { color: var(--faint); font-size: 13px; flex: 0 0 auto; }

/* Текст занимает всё оставшееся место и обрезается — адреса длинные */
.alias-row__text { flex: 1 1 auto; min-width: 0; }
.alias-row__email,
.alias-row__note {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.alias-row__email { font-size: 12.5px; }
.alias-row__note  { font-size: 11.5px; color: var(--faint); }

/* Заголовки секций меню: обычный и с кнопкой-стрелкой */
.side-title--row {
    display: flex; align-items: center; justify-content: space-between;
}
.side-title--row a { font-size: 11.5px; color: var(--brand-700); }

.side-title--toggle {
    display: flex; align-items: center; justify-content: space-between;
    width: 100%;
    border: 0; background: transparent;
    cursor: pointer;
    text-align: left;
}
.side-title--toggle i { transition: transform .15s; font-size: 11px; }
.side-title--toggle.collapsed i { transform: rotate(-90deg); }

/* Новый псевдоним подсвечивается, чтобы его было видно среди остальных.
   Оранжевый выбран намеренно: он не путается с зелёным «всё в порядке». */
.alias-row--new {
    background: #fff7ed;
    box-shadow: inset 2px 0 0 #f59e0b;
    animation: alias-appear .25s ease-out;
}
.alias-row--new .alias-row__email { color: #b45309; font-weight: 500; }
.alias-row { transition: background .6s, box-shadow .6s; }

@keyframes alias-appear {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: none; }
}

/* Ошибка создания псевдонима — под полем, без всплывающих окон */
.alias-error {
    margin-top: 6px;
    padding: 6px 9px;
    border-radius: var(--radius-sm);
    background: var(--danger-bg);
    color: var(--danger);
    font-size: 11.5px;
    line-height: 1.35;
}