/* =====================================================================
   style.css — цвета вынесены в переменные темы (см. theme-tokens.css).
   У каждой переменной есть запасное значение — исходный цвет системы:
   var(--accent, #0073aa). Если theme-tokens.css не подключился,
   CRM выглядит ровно как раньше, а не теряет цвета.

   Блоки .dark-mode ниже НЕ ТРОНУТЫ — это старая тёмная тема на
   filter: invert(). Она остаётся рабочей, пока из вью не вычищены
   инлайн-стили. После этого весь .dark-mode удаляется одним куском.
   ===================================================================== */

/* --- Сброс и базовые стили --- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html {
    overflow-x: hidden;
}
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
    background: var(--bg-surface-2, #f5f7fa);
    color: var(--text-1, #333);
    line-height: 1.6;
    overflow-x: hidden;
    max-width: 100vw;
}
a {
    color: var(--text-link, #0073aa);
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}

/* --- Шапка --- */
.main-header {
    background: var(--bg-surface, #ffffff);
    border-bottom: 2px solid var(--accent, #0073aa);
    padding: 10px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
.main-header .logo {
    display: flex;
    align-items: center;
}
.main-header .logo img {
    height: 40px;
    margin-right: 15px;
}
.header-user {
    display: flex;
    align-items: center;
    gap: 20px;
    font-size: 0.95em;
}
.header-user a {
    color: var(--danger, #d9534f);
    font-weight: bold;
}

/* --- Контейнер страницы --- */
.container {
    
    margin: 20px auto;
    padding: 0 20px;
}

/* --- Страница входа --- */
.login-page {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background: linear-gradient(135deg, #0073aa 0%, #00a0d2 100%);
}
.login-card {
    background: var(--bg-surface, white);
    border-radius: 8px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.15);
    padding: 40px 30px;
    width: 380px;
    max-width: 90%;
    text-align: center;
}
.login-card .logo {
    margin-bottom: 20px;
}
.login-card .logo img {
    height: 60px;
}
.login-card h2 {
    margin-bottom: 25px;
    color: var(--text-link, #0073aa);
    font-weight: 600;
}
.login-card input[type="email"],
.login-card input[type="password"] {
    width: 100%;
    padding: 12px 15px;
    margin-bottom: 15px;
    border: 1px solid var(--border, #ddd);
    border-radius: 4px;
    font-size: 1rem;
}
.login-card button {
    width: 100%;
    padding: 12px;
    background: var(--accent, #0073aa);
    color: var(--text-inverse, white);
    border: none;
    border-radius: 4px;
    font-size: 1.1rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.3s;
}
.login-card button:hover {
    background: var(--accent-hover, #005a87);
}
.login-card .error {
    color: var(--danger, #d9534f);
    margin: 10px 0;
}

/* --- Заголовки страниц --- */
.page-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}
.page-title h2 {
    font-size: 1.8em;
    color: var(--text-1, #2c3e50);
}
.btn {
    display: inline-block;
    padding: 8px 18px;
    background: var(--accent, #0073aa);
    color: var(--text-inverse, white) !important;
    border-radius: 4px;
    font-size: 0.95em;
    font-weight: 500;
    border: none;
    cursor: pointer;
    transition: background 0.2s;
}
/* ★★★ Тёмная тема: кнопки — сплошные цветные заливки со светлым текстом,
   и должны выглядеть так же в обеих темах, а не менять оттенок и терять
   контраст текста после общей инверсии страницы (см. header.php). */
.dark-mode .btn,
.dark-mode .btn-checkbox {
    filter: invert(1) hue-rotate(180deg);
}
/* .btn-ghost обычно прозрачная — под тем же фильтром это создало бы
   "окно", просвечивающее исходным (не тёмным) фоном страницы позади
   кнопки. Даём непрозрачный фон перед инверсией, чтобы просвечивать
   было нечему. */
.dark-mode .btn-ghost {
    background: #f5f5f5;
}
.btn:hover {
    background: var(--accent-hover, #005a87);
    text-decoration: none;
}
.btn-secondary {
    background: var(--btn-secondary-bg, #6c757d);
}
.btn-secondary:hover {
    background: var(--btn-secondary-hover, #545b62);
}

/* ★★★ Недостающие варианты кнопок для Базы знаний ★★★
   .btn уже синий по умолчанию — .btn-primary просто делает это явным,
   раз в разметке используется именно такое имя. */
.btn-primary {
    background: var(--accent, #0073aa);
}
.btn-primary:hover {
    background: var(--accent-hover, #005a87);
}

/* --- Компактная кнопка в ячейках таблиц ---
   Размер задаётся классом, а не инлайновым font-size в каждой вью:
   иначе кнопки в соседних колонках разъезжаются по высоте. Единая
   высота достигается одинаковыми padding и line-height, а не подгонкой
   кегля под длину подписи. */
.btn-sm {
    padding: 5px 10px;
    font-size: 0.82em;
    line-height: 1.25;
    white-space: nowrap;
}
.btn-sm i {
    margin-right: 3px;
}

/* Колонка «Действия»: ровный ряд с одинаковыми промежутками,
   перенос на вторую строку только когда места совсем нет. */
.row-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    align-items: center;
}
.row-actions .btn { margin: 0; }
.row-actions form { display: inline-flex; margin: 0; }
/* "Призрачная" кнопка — для второстепенных действий (Отмена и т.п.),
   не должна визуально спорить с основной кнопкой рядом. */
.btn-ghost {
    background: transparent;
    color: var(--text-2, #6c757d) !important;
    border: 1px solid var(--border, #ddd);
}
.btn-ghost:hover {
    background: var(--bg-surface-2, #f5f5f5);
    color: var(--text-2, #495057) !important;
}
/* Опасное действие — удаление, всегда красным */
.btn-danger {
    background: var(--danger, #d9534f);
}
.btn-danger:hover {
    background: var(--danger, #c9302c);
}

/* --- Цвет текста кнопок ---
   Кнопка без инлайн-фона красится акцентом темы, значит и текст на ней
   берётся из парного --accent-fg. Раньше везде стоял --text-inverse:
   в светлых темах совпадало (белый), а в тёмных и в темах с жёлтым
   акцентом давало тёмный текст на тёмной кнопке или белый на жёлтой.

   Кнопки с инлайн-фоном («Перехват», «Уд.», «Откл.») — это сигнальные
   цвета, одинаковые во всех темах; им остаётся --text-inverse из .btn.
   Отсюда :not([style*="background"]). */
.btn:not([style*="background"]) {
    color: var(--accent-fg, #fff) !important;
}
.btn.btn-secondary:not([style*="background"]) {
    color: var(--btn-secondary-fg, #fff) !important;
}
.btn.btn-danger {
    color: #fff !important;
}
.btn.btn-ghost,
.btn.btn-ghost:hover {
    color: var(--text-2, #6c757d) !important;
}

/* Ряд кнопок в Базе знаний (просмотр статьи/раздела, формы редактирования) */
.kb-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
}

/* ★★★ Перетаскиваемая зона загрузки файлов ★★★
   Изначально было только в tickets_create.php как локальный стиль —
   вынесено сюда, чтобы использовать в любой форме с файлами (в т.ч. в
   Базе знаний), не копируя одно и то же в каждый файл. */
.file-dropzone {
    border: 2px dashed var(--border, #ccc);
    border-radius: 6px;
    padding: 20px;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
    color: var(--text-2, #888);
}
.file-dropzone.dragover {
    border-color: var(--accent-hover, #2c6b9e);
    background: var(--accent-soft, #eaf2f8);
}
.file-dropzone-list {
    margin-top: 10px;
    text-align: left;
    font-size: 0.85em;
}
.file-dropzone-list .file-dropzone-item {
    padding: 3px 0;
    color: var(--text-1, #333);
}
/* Иконки редактирования/добавления статьи прямо в дереве разделов —
   были без единого отступа, слипались с названием раздела/статьи */
.tree-actions {
    margin-left: 10px;
    display: inline-flex;
    gap: 8px;
}
.tree-actions a {
    color: var(--text-3, #adb5bd) !important;
    font-size: 0.85em;
}
.tree-actions a:hover {
    color: var(--text-link, #2c6b9e) !important;
}

/* Утилита для рядов кнопок (шапка заявки, футеры модалок и т.п.) —
   на десктопе обычный ряд, на мобильном кнопки переносятся, но не
   растягиваются на всю ширину (см. переопределение в @media 768px). */
.btn-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

/* --- Таблица заявок --- */

/* --- Обёртка таблицы с горизонтальной прокруткой --- */
.table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    margin-bottom: 20px;
    background: var(--bg-surface, white);
}

/* --- Таблица заявок --- */
.tickets-table {
    width: 100%;
    min-width: 600px;   /* Чтобы на узких экранах не сжималась слишком сильно */
    border-collapse: collapse;
    background: var(--bg-surface, white);
    /* убрали overflow: hidden – теперь скругление на обёртке */
}
.tickets-table th {
    background: var(--bg-surface-2, #f0f3f5);
    text-align: left;
    padding: 12px 10px;
    font-weight: 600;
    color: var(--text-1, #2c3e50);
    font-size: 0.9em;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.tickets-table td {
    padding: 10px 10px;
    border-bottom: 1px solid var(--border, #ecf0f1);
    font-size: 0.95em;
    vertical-align: middle;
}
.tickets-table tr:last-child td {
    border-bottom: none;
}

/* Разрешаем перенос текста в теме и описании, чтобы таблица не раздувалась */
.tickets-table td:nth-child(4), /* Тема */
.tickets-table td:nth-child(5), /* Описание */
.tickets-table td:nth-child(2)  /* Клиент */ {
    white-space: normal;
    word-break: break-word;
}

/* Цветовые классы строк – без изменений, только убрали overflow: hidden */
.tickets-table tr.row-red { background-color: var(--row-red-bg, #ff4d4d); color: var(--row-red-fg, #fff); }
.tickets-table tr.row-blue { background-color: var(--row-blue-bg, #3399ff); color: var(--row-blue-fg, #fff); }
.tickets-table tr.row-orange { background-color: var(--row-orange-bg, #ff9900); color: var(--row-orange-fg, #fff); }
.tickets-table tr.row-yellow { background-color: var(--row-yellow-bg, #ffcc00); color: var(--row-yellow-fg, #000); }
.tickets-table tr.row-green { background-color: var(--row-green-bg, #33cc33); color: var(--row-green-fg, #fff); }
.tickets-table tr.row-completed { background-color: var(--row-completed-bg, #b3ffb3); color: var(--row-completed-fg, #000); }
.tickets-table tr.row-closed { background-color: var(--row-closed-bg, #dde3ea); color: var(--row-closed-fg, #4a5568); }
.tickets-table tr.row-deferred { background-color: var(--row-deferred-bg, #e0b0ff); color: var(--row-deferred-fg, #000); }
.tickets-table tr.row-waiting-reply { background-color: var(--row-waiting-bg, #ffd699); color: var(--row-waiting-fg, #000); }

/* Читаемость ссылок */
.tickets-table tr.row-red a,
.tickets-table tr.row-blue a,
.tickets-table tr.row-orange a,
.tickets-table tr.row-green a,
.tickets-table tr.row-completed a,
.tickets-table tr.row-deferred a,
.tickets-table tr.row-waiting-reply a {
    color: inherit;
    text-decoration: underline;
}
.tickets-table tr.row-yellow a,
.tickets-table tr.row-closed a {
    /* Отдельный токен, а не цвет текста строки — иначе ссылка
       сливается с обычным текстом и перестаёт читаться как ссылка */
    color: var(--row-link-dark, #34495e);
    text-decoration: underline;
}

/* ===== Тёмная тема: честные цвета вместо автоматической инверсии =====
   Обычная страница в тёмной теме идёт через filter:invert() целиком —
   для цветных строк заявок этого недостаточно (жёлтый превращается в
   грязно-коричневый, контраст текста местами теряется). Поэтому для
   этих классов задаём цвета вручную и гасим родительскую инверсию
   встречным filter:invert() — тот же приём, что и для картинок. */
.dark-mode .tickets-table tr.row-red {
    background-color: #7a2020 !important;
    color: #ffd9d9 !important;
    filter: invert(1) hue-rotate(180deg);
}
.dark-mode .tickets-table tr.row-blue {
    background-color: #1c5480 !important;
    color: #d3ecff !important;
    filter: invert(1) hue-rotate(180deg);
}
.dark-mode .tickets-table tr.row-orange {
    background-color: #8a5200 !important;
    color: #ffe3ba !important;
    filter: invert(1) hue-rotate(180deg);
}
.dark-mode .tickets-table tr.row-yellow {
    background-color: #6b5900 !important;
    color: #fff3c2 !important;
    filter: invert(1) hue-rotate(180deg);
}
.dark-mode .tickets-table tr.row-green {
    background-color: #1f6b1f !important;
    color: #cdf7cd !important;
    filter: invert(1) hue-rotate(180deg);
}
.dark-mode .tickets-table tr.row-completed {
    background-color: #234d33 !important;
    color: #bdf2ce !important;
    filter: invert(1) hue-rotate(180deg);
}
.dark-mode .tickets-table tr.row-closed {
    background-color: #363b42 !important;
    color: #c9cfd8 !important;
    filter: invert(1) hue-rotate(180deg);
}
.dark-mode .tickets-table tr.row-deferred {
    background-color: #4a2463 !important;
    color: #ecd2ff !important;
    filter: invert(1) hue-rotate(180deg);
}
.dark-mode .tickets-table tr.row-waiting-reply {
    background-color: #8a5a00 !important;
    color: #ffe9c2 !important;
    filter: invert(1) hue-rotate(180deg);
}
.dark-mode .tickets-table tr.row-yellow a,
.dark-mode .tickets-table tr.row-closed a {
    color: inherit !important;
}
/* ★★★ Номер новой заявки (id-badge-new) теряется на жёлтых/закрытых
   строках ★★★
   Правило выше (color: inherit) сделано для обычных ссылок — но оно
   же перебивает собственный красный цвет бейджа новой заявки, давая
   светлый текст на светло-розовом фоне бейджа — номер становится
   невидимым. Восстанавливаем цвет бейджа отдельно, с более высокой
   специфичностью. */
.dark-mode .tickets-table tr.row-yellow a.id-badge-new,
.dark-mode .tickets-table tr.row-closed a.id-badge-new {
    color: #c0392b !important;
}
/* ★★★ Кнопки внутри уже контр-инвертированной строки ★★★
   Строки выше (row-red/row-blue/...) сами гасят родительскую инверсию
   для ВСЕГО, что внутри них, включая кнопки. Если кнопка САМА ТОЖЕ
   получает filter:invert (см. .dark-mode .btn выше) — получается тройная
   инверсия вместо одной, и белый текст кнопки снова становится тёмным.
   Сбрасываем фильтр у кнопок конкретно внутри таких строк — их уже
   поправила сама строка. */
.dark-mode .tickets-table tr[class*="row-"] .btn {
    filter: none;
}

/* Иконки типов */
.type-icon {
    margin-right: 4px;
    color: var(--text-2, #555);
}
/* Средне-серый на тёмном фоне строки (особенно оливково-жёлтом) почти
   не виден — делаем светлее специально для тёмной темы. */
.dark-mode .type-icon {
    color: #ccc;
}
/* Гарантированный, неизменный зазор между иконкой и текстом типа —
   раньше при разной длине подписи ("Инцидент" vs "Регулярный выезд")
   визуально казалось, что иконка то рядом, то отъезжает. */
.type-cell-main {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

/* ★★★ Бейдж ID заявки — рамка ВСЕГДА на месте, просто прозрачная у
   обычных заявок и красная у новых ★★★
   Раньше рамка либо была, либо её не было вовсе — из-за этого сама
   ширина/отступ ячейки ID "прыгали" между строками таблицы. Теперь
   размер идентичен всегда, меняется только цвет рамки. Используется и
   в десктопной таблице, и в мобильных карточках (тот же класс). */
.id-badge {
    display: inline-block;
    border: 2px solid transparent;
    border-radius: 14px;
    padding: 1px 10px;
    font-weight: 500;
}
.id-badge-new {
    border-color: var(--danger, #d9534f) !important;
    background: var(--danger-soft, #fdecea) !important;
    color: var(--danger, #c0392b) !important;
    font-weight: 700 !important;
}

/* ★★★ Мобильные карточки заявок — независимая от таблицы разметка ★★★
   Переопределение display у <tr>/<td> (grid/flex) оказалось ненадёжным
   в мобильных браузерах — таблица продолжала вести себя как таблица.
   Поэтому вместо борьбы с табличными элементами используются обычные
   <div>, полностью отдельные от <table>: на десктопе видна таблица,
   на мобильном — эти карточки, переключение через простой display. */
.mobile-ticket-cards {
    display: none;
}

@media (max-width: 900px) {
    .tickets-table {
        display: none;
    }
    .mobile-ticket-cards {
        display: block;
    }

    .mobile-ticket-card {
        border-radius: 10px;
        box-shadow: 0 1px 4px rgba(0,0,0,0.18);
        padding: 10px 12px;
        margin-bottom: 10px;
    }
    .mobile-ticket-card:last-child {
        margin-bottom: 0;
    }

    .mtc-row {
        display: flex;
        align-items: center;
        gap: 8px;
    }
    .mtc-row-top {
        justify-content: space-between;
    }
    .mtc-row-meta {
        justify-content: space-between;
        font-size: 0.85em;
        opacity: 0.85;
        margin-top: 5px;
    }
    .mtc-row-meta i {
        margin-right: 3px;
    }
    .mtc-client {
        font-weight: 600;
        flex: 1 1 auto;
        text-align: center;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        min-width: 0;
    }
    .mtc-status {
        font-size: 0.85em;
        white-space: nowrap;
        flex-shrink: 0;
    }
    .mtc-subject {
        display: block;
        font-weight: 600;
        margin-top: 6px;
        padding-top: 6px;
        border-top: 1px solid rgba(0,0,0,0.15);
        white-space: normal;
    }
    .mtc-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        margin-top: 8px;
    }
    .mtc-actions .action-btn {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        width: auto !important;
        flex: 1 1 auto;
        font-size: 0.82em;
        padding: 6px 8px !important;
        white-space: nowrap;
        margin-bottom: 0 !important;
    }

    /* Цвета карточек — те же самые, что и у строк десктопной таблицы */
    .mobile-ticket-card.row-red { background-color: var(--row-red-bg, #ff4d4d); color: var(--row-red-fg, #fff); }
    .mobile-ticket-card.row-blue { background-color: var(--row-blue-bg, #3399ff); color: var(--row-blue-fg, #fff); }
    .mobile-ticket-card.row-orange { background-color: var(--row-orange-bg, #ff9900); color: var(--row-orange-fg, #fff); }
    .mobile-ticket-card.row-yellow { background-color: var(--row-yellow-bg, #ffcc00); color: var(--row-yellow-fg, #000); }
    .mobile-ticket-card.row-green { background-color: var(--row-green-bg, #33cc33); color: var(--row-green-fg, #fff); }
    .mobile-ticket-card.row-completed { background-color: var(--row-completed-bg, #b3ffb3); color: var(--row-completed-fg, #000); }
    .mobile-ticket-card.row-closed { background-color: var(--row-closed-bg, #dde3ea); color: var(--row-closed-fg, #4a5568); }
    .mobile-ticket-card.row-deferred { background-color: var(--row-deferred-bg, #e0b0ff); color: var(--row-deferred-fg, #000); }
    .mobile-ticket-card.row-waiting-reply { background-color: var(--row-waiting-bg, #ffd699); color: var(--row-waiting-fg, #000); }

    .mobile-ticket-card.row-red a, .mobile-ticket-card.row-red .id-badge,
    .mobile-ticket-card.row-blue a, .mobile-ticket-card.row-blue .id-badge,
    .mobile-ticket-card.row-orange a, .mobile-ticket-card.row-orange .id-badge,
    .mobile-ticket-card.row-green a, .mobile-ticket-card.row-green .id-badge,
    .mobile-ticket-card.row-completed a, .mobile-ticket-card.row-completed .id-badge,
    .mobile-ticket-card.row-deferred a, .mobile-ticket-card.row-deferred .id-badge,
    .mobile-ticket-card.row-waiting-reply a, .mobile-ticket-card.row-waiting-reply .id-badge {
        color: inherit;
        text-decoration: underline;
    }
    .mobile-ticket-card.row-yellow a, .mobile-ticket-card.row-yellow .id-badge,
    .mobile-ticket-card.row-closed a, .mobile-ticket-card.row-closed .id-badge {
        color: var(--row-link-dark, #34495e);
        text-decoration: underline;
    }
}


/* Фильтры */
.filters {
    background: var(--bg-surface, white);
    padding: 15px;
    margin-bottom: 20px;
    border-radius: 6px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.03);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 15px;
}
.filters select,
.filters input[type="date"] {
    padding: 6px 10px;
    border: 1px solid var(--border, #ddd);
    border-radius: 4px;
}
.filters button {
    padding: 6px 15px;
    background: var(--btn-secondary-bg, #6c757d);
    color: var(--text-inverse, white);
    border: none;
    border-radius: 4px;
    cursor: pointer;
}
.filters button.primary {
    background: var(--accent, #0073aa);
}

/* --- Управление пользователями --- */
.users-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--bg-surface, white);
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
.users-table th {
    background: var(--bg-surface-2, #f0f3f5);
    padding: 10px;
    text-align: left;
}
.users-table td {
    padding: 10px;
    border-bottom: 1px solid var(--border, #ecf0f1);
}

/* --- Детальная карточка заявки --- */
.ticket-header {
    padding: 15px;
    border-radius: 6px;
    margin-bottom: 20px;
    font-weight: bold;
    color: var(--text-1, #333);
}
/* Цвет текста берётся из парного токена строки, а не из --text-inverse:
   в тёмных темах фон строки тёмный, и «инверсный» текст оказывается
   тоже тёмным — шапка становится нечитаемой. */
.ticket-header.red { background-color: var(--row-red-bg, #ff4d4d); color: var(--row-red-fg, #fff); }
.ticket-header.blue { background-color: var(--row-blue-bg, #3399ff); color: var(--row-blue-fg, #fff); }
.ticket-header.orange { background-color: var(--row-orange-bg, #ff9900); color: var(--row-orange-fg, #fff); }
.ticket-header.yellow { background-color: var(--row-yellow-bg, #ffcc00); color: var(--row-yellow-fg, #000); }
.ticket-header.green { background-color: var(--row-green-bg, #33cc33); color: var(--row-green-fg, #fff); }
.ticket-header.completed { background-color: var(--row-completed-bg, #b3ffb3); color: var(--row-completed-fg, #000); }
.ticket-header.closed { background-color: var(--row-closed-bg, #dde3ea); color: var(--row-closed-fg, #4a5568); }
.ticket-header.deferred { background-color: var(--row-deferred-bg, #e0b0ff); color: var(--row-deferred-fg, #000); } /* исправлено на .deferred */
.ticket-header.waiting-reply { background-color: var(--row-waiting-bg, #ffd699); color: var(--row-waiting-fg, #000); } /* тот же оттенок, что и row-waiting-reply в списке заявок */

/* Тёмная тема — та же логика, что и для строк в списке заявок выше */
.dark-mode .ticket-header.red { background-color: #7a2020 !important; color: #ffd9d9 !important; filter: invert(1) hue-rotate(180deg); }
.dark-mode .ticket-header.blue { background-color: #1c5480 !important; color: #d3ecff !important; filter: invert(1) hue-rotate(180deg); }
.dark-mode .ticket-header.orange { background-color: #8a5200 !important; color: #ffe3ba !important; filter: invert(1) hue-rotate(180deg); }
.dark-mode .ticket-header.yellow { background-color: #6b5900 !important; color: #fff3c2 !important; filter: invert(1) hue-rotate(180deg); }
.dark-mode .ticket-header.green { background-color: #1f6b1f !important; color: #cdf7cd !important; filter: invert(1) hue-rotate(180deg); }
.dark-mode .ticket-header.completed { background-color: #234d33 !important; color: #bdf2ce !important; filter: invert(1) hue-rotate(180deg); }
.dark-mode .ticket-header.closed { background-color: #363b42 !important; color: #c9cfd8 !important; filter: invert(1) hue-rotate(180deg); }
.dark-mode .ticket-header.deferred { background-color: #4a2463 !important; color: #ecd2ff !important; filter: invert(1) hue-rotate(180deg); }
.dark-mode .ticket-header.waiting-reply { background-color: #8a5200 !important; color: #ffe3ba !important; filter: invert(1) hue-rotate(180deg); }

.ticket-header a {
    color: inherit;
    font-weight: bold;
    text-decoration: underline;
}

/* --- Формы --- */
.form-group {
    margin-bottom: 15px;
}
.form-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: 600;
}
.form-group input,
.form-group select,
.form-group textarea,
.form-control {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--border, #ddd);
    border-radius: 4px;
}
/* Чекбоксы/радио — исключение из правил выше. Без этого input {width:100%}
   растягивал сам квадратик чекбокса на всю ширину контейнера, а
   label {display:block} переносил текст под него отдельной строкой —
   "Уведомить клиента" и подобные однострочные галки разъезжались на 2 строки. */
.form-group label:has(input[type="checkbox"]),
.form-group label:has(input[type="radio"]) {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: normal;
    cursor: pointer;
}
.form-group input[type="checkbox"],
.form-group input[type="radio"] {
    width: auto;
    padding: 0;
    flex-shrink: 0;
}

/* --- Адаптивность --- */
@media (max-width: 768px) {
    .main-header {
        flex-direction: column;
        align-items: flex-start;
        padding: 15px;
    }
    .main-header .logo img {
        height: 32px;
        margin-bottom: 10px;
    }
    .header-user {
        flex-wrap: wrap;
        gap: 10px;
        font-size: 0.9em;
    }
    .container {
        padding: 0 10px;
        margin: 10px auto;
    }
    .page-title {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    .page-title h2 {
        font-size: 1.4em;
    }
    .filters {
        flex-direction: column;
        align-items: stretch;
    }
    .filters select,
    .filters input[type="date"],
    .filters input[type="text"],
    .filters button,
    .filters a.btn,
    .filters a.btn-secondary,
    .filters > span {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }
    /* На узких экранах инлайновые min-width у полей поиска (220px/200px)
       раньше заставляли всю строку фильтра, а с ней и всю страницу,
       становиться шире экрана — отсюда горизонтальная прокрутка и
       "съехавшее" меню. min-width убираем принудительно. */
    .filters input[type="text"] {
        min-width: 0 !important;
    }
    .users-table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }
    .users-table th,
    .users-table td {
        font-size: 0.85em;
        padding: 8px 6px;
    }
    .btn {
        display: block;
        width: 100%;
        text-align: center;
        margin-bottom: 5px;
    }
    /* Кнопки внутри рядов/групп (шапка заявки, футеры модалок и т.п.)
       не должны растягиваться на всю ширину — иначе они наезжают друг
       на друга или разъезжаются в столбик там, где задуман ряд. */
    .btn-row .btn,
    .btn-row.btn,
    .ticket-header-actions .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: auto;
        flex: 1 1 auto;
        margin-bottom: 0;
    }
    .form-group input,
    .form-group select,
    .form-group textarea {
        font-size: 16px;
    }
    .ticket-header {
        padding: 10px;
        font-size: 0.9em;
    }
    td .btn {
        display: inline-block;
        width: auto;
        margin: 2px;
    }
}
@media (max-width: 480px) {
    .login-card {
        padding: 20px 15px;
        width: 100%;
    }
    .header-user a {
        font-size: 0.85em;
    }
}
/* Единый размер для кнопок действий */
.action-btn {
    display: inline-block;
    font-size: 0.85em;
    padding: 5px 12px;
    min-width: 95px;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    margin: 2px 0;
}
.tickets-table td:last-child {
    white-space: nowrap;   /* чтобы кнопки не переносились */
}

.range-buttons {
    display: flex;
    gap: 0; /* чтобы кнопки были вплотную */
}
.range-buttons label:first-child {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
.range-buttons label:last-child {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}
.range-buttons label:not(:first-child):not(:last-child) {
    border-radius: 0;
}

.btn-checkbox {
    display: inline-block;
    padding: 6px 15px;
    background: var(--accent, #0073aa);
    color: var(--text-inverse, white) !important;
    border-radius: 4px;
    font-size: 0.95em;
    font-weight: 500;
    border: none;
    cursor: pointer;
    transition: background 0.2s;
    position: relative; /* для позиционирования скрытого чекбокса */
}
.btn-checkbox.btn-secondary {
    background: var(--btn-secondary-bg, #6c757d);
}
.btn-checkbox:hover {
    background: var(--accent-hover, #005a87);
}
.btn-checkbox.btn-secondary:hover {
    background: var(--btn-secondary-hover, #545b62);
}

.action-btn[disabled] {
    opacity: 0.6;
    cursor: not-allowed;
}

.table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch; /* плавный скролл на мобильных */
    margin-bottom: 20px;
}

/* --- Карточка заявки (улучшенный дизайн) --- */
.ticket-detail-header {
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 20px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
.ticket-meta {
    font-size: 0.95em;
    margin-top: 8px;
}
.ticket-columns {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}
.ticket-main {
    flex: 1 1 65%;
    min-width: 300px;
}
.ticket-sidebar {
    flex: 0 0 30%;
    min-width: 250px;
}
/* ★★★ На мобильном min-width выше легко не влезает в экран (особенно
   с отступами контейнера на узких телефонах 320-375px) — именно это,
   судя по всему, и уводило кнопки/комментарии за край экрана. Убираем
   ограничение, колонки просто занимают всю доступную ширину. ★★★ */
@media (max-width: 900px) {
    .ticket-main, .ticket-sidebar {
        min-width: 0;
        flex-basis: 100%;
    }
}
.ticket-section {
    background: var(--bg-surface, white);
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    margin-bottom: 20px;
    max-width: 100%;
    box-sizing: border-box;
    overflow-x: hidden;
}
.comment-text {
    word-break: break-word;
    overflow-wrap: break-word;
}
.section-title {
    margin-top: 0;
    margin-bottom: 15px;
    font-size: 1.2em;
    color: var(--text-1, #2c3e50);
    border-bottom: 2px solid var(--border, #ecf0f1);
    padding-bottom: 8px;
}
.subsection-title {
    margin-top: 20px;
    font-size: 1.05em;
    color: var(--text-2, #555);
}
/* Формы внутри карточки */
.inline-form {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}
.form-row {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}
.input-hours {
    padding: 6px 10px;
    border: 1px solid var(--border, #ddd);
    border-radius: 4px;
    width: 100px;
}
/* Таблицы времени и файлов */
.time-table, .files-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 10px;
}
.time-table th, .time-table td,
.files-table th, .files-table td {
    padding: 8px;
    border-bottom: 1px solid var(--border, #ecf0f1);
}
.related-table {
    width: 100%;
    border-collapse: collapse;
}
.related-table th, .related-table td {
    padding: 6px 4px;
    border-bottom: 1px solid var(--border, #ecf0f1);
}
/* Комментарии */
.comment-item {
    border-bottom: 1px solid var(--border, #eee);
    padding: 8px 0;
}
.comment-text.collapsed .comment-ellipsis {
    color: var(--text-2, #888);
}
.comment-toggle {
    background: none;
    border: none;
    color: var(--text-link, #0073aa);
    cursor: pointer;
    padding: 0;
    font-size: 0.9em;
    margin-top: 4px;
}
.comment-toggle:hover {
    text-decoration: underline;
}
.comment-form textarea {
    width: 100%;
    padding: 8px;
    border: 1px solid var(--border, #ddd);
    border-radius: 4px;
    margin-top: 15px;
}
.comment-form-controls {
    margin-top: 5px;
    display: flex;
    align-items: center;
    gap: 10px;
}
/* Уведомления */
.alert {
    padding: 10px;
    border-radius: 4px;
    margin-bottom: 15px;
}
.alert-info { background: var(--info-soft, #d9edf7); color: var(--info-fg, #31708f); }
.alert-danger { background: var(--danger-soft, #f8d7da); color: var(--danger-fg, #721c24); }
.alert-warning { background: var(--warning-soft, #fcf8e3); color: var(--warning-fg, #8a6d3b); }
/* Кнопки-иконки */
.btn-icon {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px 8px;
    font-size: 1em;
}
.btn-icon.danger { color: var(--danger, #d9534f); }
.btn-icon:hover { opacity: 0.7; }
/* Загрузка файлов */
.upload-form {
    margin-top: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.empty-text {
    color: var(--text-2, #888);
    font-style: italic;
}
.incognito-badge {
    color: var(--text-2, #888);
    font-style: italic;
}
/* Мелкие кнопки */
.btn-sm {
    font-size: 0.85em;
    padding: 6px 12px;
}
.group-header {
    background: var(--bg-surface-2, #f5f5f5);
    font-weight: bold;
}
.group-header td {
    padding: 8px 10px;
    border-bottom: 2px solid var(--border, #ddd);
}

/* --- Дашборд отчётов --- */
.dashboard-nav {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 15px;
    margin-bottom: 25px;
}
.kpi-card {
    background: var(--bg-surface, white);
    padding: 18px 20px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
.kpi-card .kpi-num {
    font-size: 2em;
    font-weight: 700;
    color: var(--text-1, #2c3e50);
    line-height: 1;
}
.kpi-card .kpi-label {
    font-size: 0.85em;
    color: var(--text-2, #777);
    margin-top: 8px;
}
.kpi-card.kpi-ok .kpi-num { color: var(--success, #28a745); }
.kpi-card.kpi-warn .kpi-num { color: var(--warning, #e0a800); }
.kpi-card.kpi-bad .kpi-num { color: var(--danger, #d9534f); }

.charts-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 20px;
    margin-bottom: 20px;
}
.charts-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}
@media (max-width: 900px) {
    .charts-grid,
    .charts-grid-2 {
        grid-template-columns: 1fr;
    }
    .page-title .dashboard-nav {
        width: 100%;
    }
}

/* ============================================================
   Мобильные таблицы: .tickets-table больше не прячется везде.
   ------------------------------------------------------------
   КУДА: вставить В САМЫЙ КОНЕЦ style.css (после всех остальных
   правил — этот блок должен идти позже старого правила
   "@media (max-width: 900px) { .tickets-table { display: none; } }"
   и переопределять его).

   ЗАЧЕМ: старое правило скрывало .tickets-table на экранах до 900px,
   потому что в списке заявок вместо таблицы показываются карточки
   (.mobile-ticket-cards). Но тот же класс используют отчёты, тарифы
   организаций и настройка спама — карточек у них нет, и на телефоне
   таблицы просто пропадали.

   КАК РАБОТАЕТ:
   1. Таблица остаётся видимой на телефоне и становится сама себе
      контейнером с горизонтальной прокруткой (display:block +
      overflow-x:auto). min-width:600px сбрасываем — иначе сам бокс
      таблицы шире экрана и прокручивать нечего, а body с
      overflow-x:hidden просто обрежет правый край.
   2. Скрываем таблицу только на странице, где есть карточки
      (body:has(.mobile-ticket-cards)) — это список заявок.
   3. Всё обёрнуто в @supports selector(:has(*)): в очень старых
      браузерах без :has() ничего не меняется (работает прежнее
      поведение), список заявок не пострадает нигде.
   ============================================================ */
@supports selector(:has(*)) {
    @media (max-width: 900px) {
        .tickets-table {
            display: block;
            overflow-x: auto;
            max-width: 100%;
            min-width: 0;
            -webkit-overflow-scrolling: touch;
        }
        /* Список заявок: вместо таблицы — мобильные карточки */
        body:has(.mobile-ticket-cards) .tickets-table {
            display: none;
        }
    }
}