/* ==========================================================================
   ФАЙЛ: static/css/style.css
   НАЗНАЧЕНИЕ: все стили проекта ПНД — Техподдержка.
   ========================================================================== */

@charset "UTF-8";

/* ==========================================================================
   1. ПЕРЕМЕННЫЕ И БАЗА
   ========================================================================== */
:root {
    --primary: #1565a7;
    --primary-dark: #0d4a7c;
    --primary-light: #e8f1f8;
    --bg: #f4f7fa;
    --text: #000000;
    --muted: #475569;
    --border: #e2e8f0;
    --border-input: #cbd5e0;
    --danger: #d64545;
    --radius: 8px;
}

* { box-sizing: border-box; }

body {
    font-family: 'Segoe UI', 'Inter', Arial, sans-serif;
    margin: 0;
    background: var(--bg);
    color: var(--text);
    line-height: 1.6;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

a { color: var(--primary); text-decoration: none; font-weight: 500; }
a:hover { text-decoration: underline; }

h1 { color: var(--primary-dark); font-size: 26px; margin: 0 0 20px; }
h2 { color: var(--primary-dark); font-size: 20px; }

/* ==========================================================================
   2. КОНТЕЙНЕР
   ========================================================================== */
.container {
    flex: 1 0 auto;
    max-width: 1400px;
    margin: 32px auto;
    padding: 0 24px;
    width: 100%;
}

.footer {
    flex-shrink: 0;
    text-align: center;
    color: var(--muted);
    font-size: 12px;
    padding: 24px 0 32px;
}

/* ==========================================================================
   3. ШАПКА (NAVBAR)
   ========================================================================== */
.navbar {
    background: var(--primary-dark);
    padding: 0 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 64px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    position: sticky;
    top: 0;
    z-index: 100;
    gap: 16px;
}

.navbar-brand { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.navbar-logo { font-size: 24px; }
.navbar-title { color: white; font-weight: 700; font-size: 16px; white-space: nowrap; }

/* Плашка филиала */
.navbar-branch {
    color: #ffffff;
    font-size: 12px;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.25);
    padding: 3px 12px;
    border-radius: 20px;
    white-space: nowrap;
}

.navbar-links {
    display: flex;
    gap: 4px;
    flex: 1;
    justify-content: center;
    min-width: 0;
}
.navbar-links a {
    color: #ffffff;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    padding: 8px 12px;
    border-radius: 6px;
    white-space: nowrap;
    transition: background 0.2s;
}
.navbar-links a:hover { background: rgba(255, 255, 255, 0.15); text-decoration: none; }

.navbar-user { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.navbar-profile-link { color: white; text-decoration: none; font-size: 14px; font-weight: 500; white-space: nowrap; }
.navbar-profile-link:hover { text-decoration: underline; }

/* Кнопка выйти */
.btn-logout {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.3);
    padding: 6px 16px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    font-family: inherit;
    transition: all 0.2s;
}
.btn-logout:hover { background: rgba(255, 255, 255, 0.25); border-color: rgba(255, 255, 255, 0.5); }

/* ==========================================================================
   4. ХЛЕБНЫЕ КРОШКИ
   ========================================================================== */
.breadcrumbs {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    padding: 8px 0;
}

.breadcrumb-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--primary);
    font-weight: 600;
    font-size: 15px;
    padding: 4px 8px;
    border-radius: 6px;
    transition: background 0.15s, color 0.15s;
}
.breadcrumb-link:hover { background: #eff6ff; color: var(--primary-dark); text-decoration: none; }

.breadcrumb-arrow { font-size: 16px; margin-right: 4px; transition: transform 0.15s; }
.breadcrumb-link:hover .breadcrumb-arrow { transform: translateX(-3px); }
.breadcrumb-sep { color: #cbd5e0; font-size: 16px; }
.breadcrumb-current { color: #0f172a; font-weight: 700; font-size: 15px; padding: 3px 6px; }

/* ==========================================================================
   5. КНОПКИ
   ========================================================================== */
.btn-primary, .btn-export, .btn-reset, .btn-cancel {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    padding: 0 16px;
    border-radius: var(--radius);
    font-size: 14px;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: all 0.15s;
    border: 1px solid transparent;
    box-sizing: border-box;
    margin: 0;
}

.btn-primary { background: var(--primary); color: white; font-weight: 600; }
.btn-primary:hover { background: var(--primary-dark); transform: translateY(-1px); text-decoration: none; }

.btn-export, .btn-reset, .btn-cancel { background: white; color: var(--text); border-color: var(--border); }
.btn-export:hover, .btn-reset:hover, .btn-cancel:hover { background: var(--primary-light); border-color: var(--primary); text-decoration: none; }

.btn-full { width: 100%; }

/* ==========================================================================
   6. ФОРМЫ (ОБЩИЕ)
   ========================================================================== */
form p { margin: 0 0 15px 0; }

form input, form select, form textarea {
    width: 100%;
    height: 40px;
    padding: 0 12px;
    border: 1px solid var(--border-input);
    border-radius: var(--radius);
    font-size: 14px;
    font-family: inherit;
    background: white;
    transition: border-color 0.2s, box-shadow 0.2s;
    margin: 0;
}

form textarea { height: auto; min-height: 100px; padding: 10px 12px; }

form input:focus, form select:focus, form textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(21, 101, 167, 0.12);
}

form label {
    display: block;
    font-weight: 600;
    color: var(--text);
    font-size: 13px;
    margin-bottom: 6px;
}

/* ==========================================================================
   7. БЕЙДЖИ
   ========================================================================== */
.badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 14px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    border: 1px solid transparent;
    white-space: nowrap;
}

.badge-new { background-color: #e3f2fd; color: #1565c0; border-color: #bbdefb; }
.badge-in_progress { background-color: #fff8e1; color: #b26a00; border-color: #ffe082; }
.badge-resolved { background-color: #e8f5e9; color: #2e7d32; border-color: #c8e6c9; }
.badge-closed { background-color: #eceff1; color: #546e7a; border-color: #cfd8dc; }

.badge-priority-low { background-color: #e8f5e9; color: #2e7d32; border-color: #c8e6c9; }
.badge-priority-medium { background-color: #e3f2fd; color: #1565c0; border-color: #bbdefb; }
.badge-priority-high { background-color: #fff3e0; color: #e65100; border-color: #ffe0b2; }
.badge-priority-critical { background-color: #fdecea; color: #b3261e; border-color: #f5b5ae; }

/* ==========================================================================
   8. ПАНЕЛЬ ФИЛЬТРОВ
   ========================================================================== */
.filters-panel {
    background: white;
    border-radius: var(--radius);
    padding: 20px;
    border: 1px solid var(--border);
    margin-top: 0;
    margin-bottom: 12px;
    box-shadow: none;
}

.filters-toolbar {
    display: flex;
    align-items: flex-end;
    gap: 14px;
    flex-wrap: wrap;
    width: 100%;
}

.filter-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1 1 150px;
    min-width: 140px;
    width: auto;
}
.filter-field-search { flex: 1 1 250px; }
.filter-field-branch { flex: 1 1 230px; }

.filter-field label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--muted);
    margin: 0;
}

.filter-field input, .filter-field select {
    height: 42px;
    background-color: #f8fafc;
    border: 1px solid var(--border-input);
    padding: 0 14px;
    font-size: 14px;
    box-sizing: border-box;
    margin: 0;
}
.filter-field input:focus, .filter-field select:focus { background-color: white; }

.filters-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-left: auto;
    gap: 12px;
    height: 42px;
    flex-wrap: nowrap;
    flex-shrink: 0;
}

.filters-count {
    margin: 0;
    padding: 0;
    font-size: 14px;
    color: var(--muted);
    white-space: nowrap;
    line-height: 42px;
}

.filters-toolbar .btn-primary,
.filters-toolbar .btn-reset {
    height: 42px;
    margin: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ==========================================================================
   9. СТРАНИЦА СПИСКА ЗАЯВОК (ТАБЛИЦА)
   ========================================================================== */
.list-page { display: flex; flex-direction: column; gap: 5px; }
.list-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 5px; flex-wrap: wrap; gap: 16px; }
.list-title { margin: 0; font-size: 26px; color: var(--primary-dark); }
.list-header-actions { display: flex; gap: 12px; flex-wrap: wrap; }

.list-card {
    background: white;
    border-radius: var(--radius);
    border: 1px solid var(--border-input);
    overflow: hidden;
    margin-top: 0;
    width: 100%;
}

.tickets-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: auto;
    font-size: 14px;
    background: white;
}

/* Заголовки и ячейки: строгая сетка */
.tickets-table th, .tickets-table td {
    text-align: center;
    vertical-align: middle;
    padding: 16px 12px;
    border-right: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    position: relative;
}

.tickets-table th:last-child, .tickets-table td:last-child { border-right: none; }
.tickets-table tbody tr:last-child td { border-bottom: none; }

/* Заголовки таблицы */
.tickets-table thead th {
    background-color: #f8fafc;
    color: var(--primary-dark);
    font-weight: 700;
    font-size: 13px;
    white-space: nowrap;
}

.tickets-table thead th.sortable { padding: 0; }
.tickets-table thead th.sortable a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 16px 12px;
    color: var(--primary-dark);
    text-decoration: none;
    width: 100%;
}
.tickets-table thead th.sortable.active a { color: var(--primary); }

/* Строки */
.tickets-table tbody tr { transition: background 0.15s; cursor: pointer; }
.tickets-table tbody tr:hover td { background-color: #f1f5f9; }

/* Цвета и выравнивание текста */
.tickets-table td, .tickets-table td a, .tickets-table td > span:not(.badge) { color: #000000; }
.tickets-table td a { font-weight: 600; }
.tickets-table td a:hover { text-decoration: underline; }

.tickets-table td em, .tickets-table td .muted {
    color: #718096;
    font-style: italic;
    display: inline-block;
    width: 100%;
    text-align: center;
}

/* Фиксация ширины узких колонок */
.tickets-table th:nth-child(1), .tickets-table td:nth-child(1) { width: 60px; }
.tickets-table th:nth-child(5), .tickets-table td:nth-child(5) { width: 110px; }
.tickets-table th:nth-child(6), .tickets-table td:nth-child(6) { width: 110px; }

/* ==========================================================================
   10. ДЕТАЛЬНАЯ ЗАЯВКА
   ========================================================================== */
.ticket-page {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 400px;
    gap: 32px;
    align-items: start;
    width: 100%;
    margin-top: 0;
}

.ticket-main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.ticket-sidebar { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 88px; }

.ticket-card {
    background: white;
    border-radius: var(--radius);
    padding: 24px;
    border: 1px solid var(--border-input);
    box-shadow: none;
}

.ticket-header { margin-bottom: 20px; }
.ticket-title { font-size: 26px; font-weight: 700; margin: 0 0 8px; color: var(--primary-dark); }
.ticket-subtitle { color: var(--muted); font-size: 13px; }
.ticket-subtitle .dot { margin: 0 6px; opacity: 0.5; }
.ticket-description { padding-top: 16px; border-top: 1px solid var(--border); font-size: 15px; color: var(--text); }

/* Рабочая зона (Действия + Управление) */
.ticket-work-area {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 0;
    width: 100%;
}

.action-box, .manage-box { width: 100%; box-sizing: border-box; }

/* Блок кнопок быстрых действий */
.action-box .quick-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 12px; }
.action-box .quick-action-form { flex: 1 1 auto; margin: 0; padding: 0; background: none; }

.btn-action {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 44px;
    padding: 0 24px;
    border: none;
    border-radius: var(--radius);
    font-size: 14px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.15s;
    text-align: center;
    text-decoration: none;
}

.btn-action-primary { background: var(--primary); color: white; }
.btn-action-primary:hover { background: var(--primary-dark); transform: translateY(-1px); text-decoration: none; }

.btn-action-success { background: #10b981; color: white; }
.btn-action-success:hover { background: #059669; transform: translateY(-1px); text-decoration: none; }

.btn-action-secondary { background: white; color: var(--muted); border: 1px solid var(--border-input); }
.btn-action-secondary:hover { background: #f1f5f9; color: var(--text); border-color: var(--primary); text-decoration: none; }

/* Блок Управления */
.manage-box form { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; width: 100%; align-items: end; }
.manage-box .form-field { margin-bottom: 0; width: 100%; }
.manage-box .btn-primary { grid-column: 1 / -1; margin-top: 8px; height: 44px; }

/* Сайдбар (Сведения, Сроки, История) */
.sidebar-title {
    font-size: 15px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--primary-dark);
    margin: 0 0 16px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border);
}

.meta-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 0; font-size: 14px; border-bottom: 1px dashed var(--border); }
.meta-row:last-child { border-bottom: none; }
.meta-row .label { color: var(--muted); font-weight: 500; font-size: 13px; flex-shrink: 0; }
.meta-row span:last-child { font-weight: 500; color: var(--text); }
.meta-row em, .meta-row .muted { color: #64748b; font-style: italic; }

/* Блок SLA */
.sla-status { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; border-radius: 8px; margin-bottom: 12px; font-weight: 600; }
.sla-status-ok { background: #e8f5e9; color: #2e7d32; }
.sla-status-warning { background: #fff8e1; color: #b26a00; }
.sla-status-overdue { background: #fdecea; color: #b3261e; }
.sla-status-paused { background: #eceff1; color: #546e7a; }

.sla-status-label { font-size: 14px; display: flex; align-items: center; gap: 6px; }
.sla-status-value { font-size: 15px; font-weight: 700; }

.sla-progress { height: 6px; background: #e2e8f0; border-radius: 10px; margin: 12px 0; overflow: hidden; }
.sla-progress-fill { height: 100%; border-radius: 10px; transition: width 0.4s ease; }
.sla-progress-fill.sla-progress-ok { background-color: #10b981; }
.sla-progress-fill.sla-progress-warning { background-color: #f59e0b; }
.sla-progress-fill.sla-progress-overdue { background-color: #ef4444; }
.sla-progress-fill.sla-progress-paused { background-color: #64748b; }

.sla-deadline { font-size: 12px; color: var(--muted); margin-bottom: 10px; }
.sla-done { display: flex; align-items: center; gap: 12px; padding: 12px; background: #e8f5e9; border-radius: 10px; }
.sla-done-text { display: flex; flex-direction: column; gap: 2px; }
.sla-done-text strong { color: #2e7d32; font-size: 14px; }
.sla-done-text span { color: #4a7c4e; font-size: 12px; }

/* История */
.history-list { display: flex; flex-direction: column; position: relative; padding-left: 14px; max-height: 400px; overflow-y: auto; padding-right: 8px; }
.history-list::before { content: ""; position: absolute; left: 3px; top: 8px; bottom: 8px; width: 2px; background: var(--border); }
.history-item { position: relative; padding: 8px 0 12px 12px; }
.history-dot { position: absolute; left: -14px; top: 14px; width: 10px; height: 10px; border-radius: 50%; background: var(--primary); border: 2px solid white; box-shadow: 0 0 0 2px var(--primary-light); z-index: 1; }
.history-body { font-size: 13px; }
.history-action { color: var(--text); line-height: 1.4; margin-bottom: 4px; word-break: break-word; }
.history-action strong { color: var(--primary-dark); font-weight: 600; }
.history-new { color: var(--primary); font-weight: 600; }
.history-meta { display: flex; justify-content: space-between; gap: 8px; font-size: 11px; color: var(--muted); }

/* Комментарии */
.comment { display: flex; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--border); }
.comment:last-of-type { border-bottom: none; }
.comment-avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--primary); color: white; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 16px; flex-shrink: 0; }
.comment-body { flex: 1; min-width: 0; }
.comment-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 4px; }
.comment-date { color: var(--muted); font-size: 12px; }
.comment-text { font-size: 14px; line-height: 1.5; }
.comment-form { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border); }
.comment-form .btn-primary { align-self: flex-start; padding: 0 24px; }

/* Вложения */
.attachments-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
.attachment-thumb { display: block; aspect-ratio: 1 / 1; border-radius: 10px; overflow: hidden; border: 1px solid var(--border); background: #f9fbfd; cursor: zoom-in; }
.attachment-thumb img { width: 100%; height: 100%; object-fit: cover; }
.attachment-file { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 16px 10px; aspect-ratio: 1 / 1; border-radius: 10px; border: 1px solid var(--border); background: #f9fbfd; text-decoration: none; transition: background 0.15s; }
.attachment-file:hover { background: var(--primary-light); border-color: var(--primary); text-decoration: none; }
.attachment-file-icon { font-size: 32px; }
.attachment-file-name { color: var(--primary-dark); font-size: 12px; font-weight: 500; text-align: center; word-break: break-word; }

/* Зона загрузки файлов */
.form-field-file .file-drop { position: relative; display: flex; align-items: center; gap: 16px; padding: 20px 24px; background: #f9fbfd; border: 2px dashed var(--border-input); border-radius: 12px; cursor: pointer; transition: border-color 0.15s; }
.form-field-file .file-drop:hover { border-color: var(--primary); background: var(--primary-light); }
.form-field-file .file-drop input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.file-drop-text strong { color: var(--primary-dark); font-size: 14px; }
.file-drop-text span { color: var(--muted); font-size: 12px; }

/* ==========================================================================
   11. ДАШБОРД
   ========================================================================== */
.dashboard-page { display: flex; flex-direction: column; gap: 20px; }
.dashboard-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 8px; }
.dashboard-title { margin: 0 0 4px; font-size: 28px; color: var(--primary-dark); }
.dashboard-subtitle { margin: 0; color: var(--muted); font-size: 14px; }

/* Сетки */
.stats-grid { display: grid; gap: 16px; }
.stats-grid-5 { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.stats-grid-2 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.dashboard-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 20px; }

/* Карточки статистики */
.stat-card { display: flex; align-items: center; gap: 16px; padding: 20px 24px; background: white; border-radius: var(--radius); border: 1px solid var(--border-input); border-left-width: 4px; }
.stat-icon { font-size: 32px; }
.stat-value { font-size: 28px; font-weight: 700; line-height: 1.1; }
.stat-label { font-size: 13px; color: var(--muted); margin-top: 4px; }

.stat-card-total { border-left-color: #0d4a7c; }
.stat-card-total .stat-value { color: #0d4a7c; }
.stat-card-new { border-left-color: #1565c0; }
.stat-card-new .stat-value { color: #1565c0; }
.stat-card-progress { border-left-color: #b26a00; }
.stat-card-progress .stat-value { color: #b26a00; }
.stat-card-resolved { border-left-color: #2e7d32; }
.stat-card-resolved .stat-value { color: #2e7d32; }
.stat-card-closed { border-left-color: #64748b; }
.stat-card-closed .stat-value { color: #64748b; }
.stat-card-week { border-left-color: #7b1fa2; }
.stat-card-week .stat-value { color: #7b1fa2; }
.stat-card-week-resolved { border-left-color: #00695c; }
.stat-card-week-resolved .stat-value { color: #00695c; }

/* Карточки контента */
.dashboard-card { background: white; border-radius: var(--radius); padding: 24px; border: 1px solid var(--border-input); }
.dashboard-card-title { margin: 0 0 16px; font-size: 16px; font-weight: 700; color: var(--primary-dark); padding-bottom: 10px; border-bottom: 1px solid var(--border); }
.dashboard-empty { padding: 40px 20px; font-size: 15px; color: var(--muted); background: #f8fafc; border-radius: 8px; border: 1px dashed var(--border-input); margin-top: 10px; text-align: center; font-style: italic; }

/* Списки внутри дашборда */
.top-list { display: flex; flex-direction: column; gap: 10px; }
.top-list-item { position: relative; padding: 10px 14px; border-radius: 8px; background: #f9fbfd; overflow: hidden; }
.top-list-content { position: relative; display: flex; justify-content: space-between; align-items: center; z-index: 1; }
.top-list-name { font-size: 14px; color: var(--text); font-weight: 500; }
.top-list-count { font-size: 14px; font-weight: 700; color: var(--primary-dark); }

/* Графики */
.charts-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 20px; }
.chart-card { background: white; border-radius: var(--radius); padding: 24px; border: 1px solid var(--border-input); }
.chart-card-title { margin: 0 0 16px; font-size: 16px; font-weight: 700; color: var(--primary-dark); padding-bottom: 10px; border-bottom: 1px solid var(--border); }
.chart-wrapper { position: relative; height: 280px; }
.chart-wrapper-wide { height: 300px; }
.chart-wrapper-tall { height: 200px; }

/* ==========================================================================
   12. АВТОРИЗАЦИЯ И ПРОФИЛЬ
   ========================================================================== */
.auth-page { display: flex; justify-content: center; align-items: flex-start; padding: 40px 20px; min-height: calc(100vh - 64px - 100px); }
.auth-card { width: 100%; max-width: 420px; background: white; border-radius: var(--radius); padding: 40px 36px 32px; box-shadow: 0 4px 20px rgba(13, 74, 124, 0.08); border: 1px solid var(--border-input); }
.auth-header { text-align: center; margin-bottom: 28px; padding-bottom: 24px; border-bottom: 1px solid var(--border); }
.auth-logo { font-size: 40px; margin-bottom: 12px; }
.auth-title { margin: 0 0 4px; font-size: 22px; color: var(--primary-dark); font-weight: 700; }
.auth-subtitle { margin: 0; font-size: 13px; color: var(--muted); }
.auth-submit { width: 100%; padding: 12px 20px; margin-top: 6px; background: var(--primary); color: white; border: none; border-radius: 8px; font-size: 15px; font-weight: 600; cursor: pointer; }
.auth-submit:hover { background: var(--primary-dark); }

.btn-social-yandex { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 12px 20px; background: #FC3F1D; color: white; border: none; border-radius: 8px; font-size: 15px; font-weight: 600; text-decoration: none; cursor: pointer; }
.btn-social-yandex:hover { background: #e6361a; text-decoration: none; }

.profile-grid { display: grid; grid-template-columns: 1fr 340px; gap: 24px; align-items: start; }
.profile-avatar { width: 72px; height: 72px; border-radius: 50%; background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%); color: white; display: flex; align-items: center; justify-content: center; font-size: 32px; font-weight: 700; }
.profile-title { margin: 0 0 4px; font-size: 24px; color: var(--primary-dark); font-weight: 700; }
.profile-subtitle { margin: 0; color: var(--muted); font-size: 14px; }

/* ==========================================================================
   13. ПАГИНАЦИЯ
   ========================================================================== */
.pagination-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 18px 24px; margin-top: 8px; }
.pagination-info { color: var(--muted); font-size: 13px; }
.pagination { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.page-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; height: 36px; padding: 0 10px; background: white; color: var(--primary-dark); border: 1px solid var(--border-input); border-radius: 8px; font-size: 14px; font-weight: 600; text-decoration: none; }
.page-btn:hover { background: var(--primary-light); border-color: var(--primary); text-decoration: none; }
.page-btn-active { background: var(--primary); color: white; border-color: var(--primary); }
.page-btn-disabled { opacity: 0.4; cursor: not-allowed; }
.per-page-form { display: flex; align-items: center; gap: 8px; margin: 0; padding: 0; }
.per-page-form select { width: auto; padding: 6px 10px; height: 36px; font-size: 13px; border-radius: 8px; margin: 0; border: 1px solid var(--border-input); }

/* ==========================================================================
   14. ЛАЙТБОКС
   ========================================================================== */
.lightbox { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.88); z-index: 9999; align-items: center; justify-content: center; }
.lightbox.show { display: flex; }
.lightbox-content { max-width: 90vw; max-height: 90vh; object-fit: contain; border-radius: 8px; }
.lightbox-close { position: absolute; top: 20px; right: 30px; color: white; font-size: 40px; cursor: pointer; opacity: 0.7; }
.lightbox-nav { position: absolute; top: 50%; transform: translateY(-50%); color: white; font-size: 72px; cursor: pointer; opacity: 0.4; padding: 20px; }
.lightbox-prev { left: 16px; }
.lightbox-next { right: 16px; }

/* ==========================================================================
   15. ШАБЛОНЫ ОТВЕТОВ (CANNED RESPONSES)
   ========================================================================== */
.canned-wrapper { position: relative; }
.btn-canned-toggle { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; background: white; color: var(--primary-dark); border: 1px solid var(--border-input); border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer; }
.btn-canned-toggle:hover { background: var(--primary-light); }
.canned-menu { display: none; position: absolute; top: calc(100% + 6px); left: 0; z-index: 20; min-width: 320px; max-height: 320px; overflow-y: auto; background: white; border-radius: 10px; box-shadow: 0 8px 24px rgba(13, 74, 124, 0.15); border: 1px solid var(--border-input); padding: 6px; }
.canned-menu.show { display: block; }
.canned-item { padding: 10px 12px; border-radius: 8px; cursor: pointer; }
.canned-item:hover { background: var(--primary-light); }
.canned-item-title { font-weight: 600; font-size: 13px; color: var(--primary-dark); margin-bottom: 2px; }
.canned-item-preview { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ==========================================================================
   16. АДАПТИВНОСТЬ
   ========================================================================== */
@media (max-width: 1200px) {
    .navbar { padding: 0 15px; gap: 10px; }
    .navbar-links a { padding: 8px 10px; font-size: 13px; }
}

@media (max-width: 1100px) {
    .ticket-page, .profile-grid { grid-template-columns: 1fr; }
    .ticket-sidebar, .profile-sidebar { position: static; }
    .filter-field-search { flex: 1 1 100%; }
    .filters-actions { width: 100%; justify-content: flex-end; margin-top: 12px; height: auto; }
    .filters-count { line-height: normal; }
    .manage-box form { grid-template-columns: 1fr; }
}

@media (max-width: 992px) {
    .navbar-title, .navbar-branch { display: none; }
    .navbar-links { justify-content: flex-start; }
    .filters-toolbar .btn-primary, .filters-toolbar .btn-reset { width: 100%; justify-content: center; }
    .filters-count { width: 100%; padding-bottom: 0; text-align: right; }
}

@media (max-width: 768px) {
    .navbar-profile-link { display: none; }
    .navbar { padding: 0 12px; }
    .list-header { flex-direction: column; align-items: flex-start; }
    .filters-toolbar { flex-direction: column; }
    .filter-field { width: 100%; }
    .pagination-bar { flex-direction: column; align-items: stretch; }
    .charts-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   17. ВОЗВРАЩАЕМ ПОТЕРЯННЫЕ ДЕТАЛИ (УВЕДОМЛЕНИЯ, ЗАГРУЗКА, ГРАФИКИ)
   ========================================================================== */

/* 1. Полоски прогресса на дашборде (Топ-5 и Паузы) */
.top-list-bar {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: linear-gradient(90deg, rgba(21, 101, 167, 0.15) 0%, rgba(21, 101, 167, 0.02) 100%);
    transition: width 0.4s ease;
    z-index: 0;
}
.top-list-bar-executor {
    background: linear-gradient(90deg, rgba(46, 125, 50, 0.15) 0%, rgba(46, 125, 50, 0.02) 100%);
}
.top-list-bar-pause {
    background: linear-gradient(90deg, rgba(230, 81, 0, 0.15) 0%, rgba(230, 81, 0, 0.02) 100%);
}
.top-list-content {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* 2. Уведомления (messages) */
.alert {
    padding: 12px 16px;
    border-radius: 8px;
    margin-bottom: 16px;
    font-size: 14px;
    line-height: 1.45;
    border: 1px solid transparent;
    border-left-width: 4px;
}
.alert-success { background: #e8f5e9; color: #2e7d32; border-color: #a5d6a7; border-left-color: #43a047; }
.alert-warning { background: #fff8e1; color: #b26a00; border-color: #ffe082; border-left-color: #ffb300; }
.alert-error { background: #fdecea; color: #b3261e; border-color: #f5b5ae; border-left-color: #e53935; }
.alert-info { background: #e3f2fd; color: #0d47a1; border-color: #bbdefb; border-left-color: #1e88e5; }

/* 3. Зона загрузки файлов (Создание заявки) */
.file-drop {
    position: relative;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 24px;
    background: #f9fbfd;
    border: 2px dashed #cbd5e0;
    border-radius: 12px;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}
.file-drop:hover { border-color: var(--primary); background: var(--primary-light); }
.file-drop input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.file-drop-icon { font-size: 28px; }
.file-drop-text strong { display: block; color: var(--primary-dark); font-size: 14px; }
.file-drop-text span { color: var(--muted); font-size: 12px; }
.file-drop-list { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.file-drop-item { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: var(--primary-light); border-radius: 8px; font-size: 13px; color: var(--primary-dark); }
.file-drop-item::before { content: "📄"; font-size: 16px; }
.file-drop-item-size { margin-left: auto; color: var(--muted); font-size: 12px; }

/* 4. Зона загрузки файлов (Комментарии) */
.comment-attach-zone {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: #f9fbfd;
    border: 1.5px dashed #cbd5e0;
    border-radius: 8px;
    cursor: pointer;
    font-size: 13px;
    color: var(--muted);
    align-self: flex-start;
    transition: all 0.15s;
}
.comment-attach-zone:hover { border-color: var(--primary); background: var(--primary-light); color: var(--primary-dark); }
.comment-attach-zone input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.comment-attach-icon { font-size: 16px; pointer-events: none; }
.comment-attach-text em { font-style: normal; opacity: 0.7; font-size: 12px; pointer-events: none; }

/* 5. Предупреждающий блок */
.warning-box {
    background: #fffbeb;
    border: 1px solid #f6ad55;
    border-left: 4px solid #dd6b20;
    padding: 12px 16px;
    border-radius: 8px;
    margin-bottom: 16px;
    color: #9c4221;
    font-size: 14px;
}

/* 6. Теги (если где-то остались в коде) */
.ticket-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.tag-badge { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; border: 1px solid; }
.tag-remove { background: none; border: none; color: inherit; cursor: pointer; font-size: 14px; font-weight: 700; padding-left: 4px; opacity: 0.6; }
.tag-remove:hover { opacity: 1; }

/* ==========================================================================
   125. ФИКС ПАНЕЛИ ФИЛЬТРОВ (ВОЗВРАЩАЕМ КНОПКУ НА МЕСТО)
   ========================================================================== */

/* 1. Задаем панели правильный flex */
.filters-toolbar {
    display: flex !important;
    align-items: flex-end !important;
    gap: 12px !important;
    flex-wrap: wrap !important;
    width: 100% !important;
}

/* 2. Поля делаем чуть уже, чтобы они не съедали всё место */
.filter-field {
    flex: 1 1 140px !important; 
    min-width: 130px !important;
}

/* 3. Прижимаем счетчик вправо */
.filters-count {
    margin-left: auto !important; 
    line-height: 42px !important; /* Выравниваем по высоте полей */
    white-space: nowrap !important;
    margin-right: 12px !important;
}

/* 4. Кнопки фиксируем, чтобы они не сжимались и не прыгали */
.filters-toolbar .btn-primary,
.filters-toolbar .btn-reset {
    height: 42px !important;
    margin: 0 !important;
    flex-shrink: 0 !important; /* Запрещаем кнопке сжиматься */
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* 5. Адаптив для маленьких экранов */
@media (max-width: 992px) {
    .filter-field {
        flex: 1 1 100% !important;
    }
    .filters-count {
        width: 100% !important;
        text-align: right !important;
        margin-bottom: 8px !important;
    }
    .filters-toolbar .btn-primary,
    .filters-toolbar .btn-reset {
        width: 100% !important;
    }
}

/* ==========================================================================
   126. УБИРАЕМ ПОДЧЕРКИВАНИЕ У ЗАГОЛОВКА В ТАБЛИЦЕ
   ========================================================================== */

/* Заголовок заявки не должен подчеркиваться при наведении */
.tickets-table tbody td.td-title a {
    text-decoration: none !important;
    color: #000000 !important; /* Оставляем текст черным */
}

/* И при наведении тоже не подчеркиваем */
.tickets-table tbody td.td-title a:hover {
    text-decoration: none !important;
    color: #000000 !important; 
}

/* Но курсор-руку оставляем, чтобы было понятно, что на строку можно нажать */
.tickets-table tbody td.td-title a {
    cursor: pointer;
}

/* ==========================================================================
   127. ВОЗВРАЩАЕМ СТИЛИ ДЛЯ СТРАНИЦЫ СОЗДАНИЯ ЗАЯВКИ
   ========================================================================== */

/* 1. Центрируем форму и ограничиваем ширину (чтобы поля не растягивались) */
.create-page {
    max-width: 720px !important;
    margin: 0 auto !important;
    width: 100% !important;
}

/* 2. Возвращаем белую карточку с рамкой */
.create-card {
    background: white !important;
    border-radius: var(--radius) !important;
    padding: 32px !important;
    border: 1px solid var(--border-input) !important;
    box-shadow: none !important;
}

/* 3. Заголовки и подзаголовки */
.create-title {
    margin: 0 0 8px !important;
    font-size: 24px !important;
    color: var(--primary-dark) !important;
}

.create-subtitle {
    margin: 0 0 28px !important;
    color: var(--muted) !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    padding-bottom: 20px !important;
    border-bottom: 1px solid var(--border) !important;
}

/* 4. Отступы между полями формы */
.create-form .form-field {
    margin-bottom: 20px !important;
}

.create-form label {
    display: block !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--text) !important;
    margin-bottom: 6px !important;
}

/* 5. Делаем поля чуть просторнее */
.create-form input,
.create-form select,
.create-form textarea {
    width: 100% !important;
    padding: 11px 14px !important;
    margin: 0 !important;
}

.create-form textarea {
    min-height: 140px !important;
    resize: vertical !important;
}

/* 6. Красивый блок с кнопками внизу */
.form-actions {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    margin-top: 28px !important;
    padding-top: 20px !important;
    border-top: 1px solid var(--border) !important;
}

.form-actions .btn-primary {
    margin: 0 !important;
    padding: 0 28px !important;
    height: 42px !important;
}

.form-actions .btn-cancel {
    margin: 0 !important;
    padding: 0 20px !important;
    height: 42px !important;
}

/* 7. Текст подсказки под загрузкой файлов (чтобы не прилипал к кнопкам) */
.form-field-file .field-hint {
    display: block !important;
    margin-top: 8px !important;
    margin-bottom: 20px !important;
    color: var(--muted) !important;
    font-size: 12px !important;
}

/* ==========================================================================
   128. ИДЕАЛЬНЫЕ ОТСТУПЫ НА ДАШБОРДЕ
   ========================================================================== */

/* 1. Убираем отступы у панели фильтров на дашборде, чтобы сетка сама их распределила */
.dashboard-page .filters-panel {
    margin-top: 0 !important;
    margin-bottom: 24px !important; /* Вот этот отступ задает расстояние до карточек */
}

/* 2. Делаем сетку карточек чуть плотнее */
.dashboard-page .stats-grid {
    margin-top: 0 !important;
    margin-bottom: 8px !important;
}

/* 3. Выравниваем шапку дашборда (заголовок и кнопки экспорта) */
.dashboard-header {
    margin-bottom: 0 !important;
}

/* Если ты убрал иконку, но отступ у заголовка остался большим, фиксим и это */
.dashboard-title {
    margin: 0 0 4px 0 !important;
}

/* ==========================================================================
   129. ФИКС ОТСТУПА МЕЖДУ ФИЛЬТРОМ И КАРТОЧКАМИ (УБИРАЕМ ДВОЙНОЙ ОТСТУП)
   ========================================================================== */

/* 1. Контейнер дашборда сам задает расстояние между всеми блоками (16px) */
.dashboard-page {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important; /* Единый отступ для всех элементов */
}

/* 2. Убираем собственный отступ у панели фильтров, чтобы не было двойного */
.dashboard-page .filters-panel {
    margin-bottom: 0 !important;
}

/* 3. Убираем отступы у сеток со статистикой */
.dashboard-page .stats-grid {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* 4. Если у шапки дашборда остался отступ снизу — убираем */
.dashboard-header {
    margin-bottom: 0 !important;
}

/* ==========================================================================
   130. ВЫРАВНИВАЕМ ЖИРНОСТЬ ЗАГОЛОВКОВ И ТЕКСТА В ЗАЯВКЕ
   ========================================================================== */

/* 1. Делаем заголовки секций (Вложения, Комментарии) полужирными, а не слишком жирными */
.section-title {
    font-weight: 600 !important; 
    font-size: 18px !important;
    color: var(--primary-dark) !important;
}

/* 2. Имя автора в комментариях делаем чуть легче (было слишком жирным) */
.comment-head strong {
    font-weight: 600 !important;
    color: #0f172a !important; /* Черный цвет */
}

/* 3. Сам текст комментария делаем обычным, чтобы он читался легко */
.comment-text {
    font-weight: 400 !important;
}

/* ==========================================================================
   131. ВОЗВРАЩАЕМ ПРОГРЕСС-БАР И ТАБЛИЦУ ПОСЛЕДНИХ ЗАЯВОК
   ========================================================================== */

/* --- 1. ПРОГРЕСС-БАР (Прогресс по заявкам) --- */
.progress-bar {
    height: 12px !important;
    background: var(--primary-light) !important;
    border-radius: 999px !important;
    overflow: hidden !important;
    margin: 12px 0 !important;
    width: 100% !important;
}

.progress-fill {
    height: 100% !important;
    background: linear-gradient(90deg, var(--primary) 0%, #2e7d32 100%) !important;
    border-radius: 999px !important;
    transition: width 0.4s ease !important;
}

.progress-text {
    margin: 0 !important;
    font-size: 14px !important;
    color: var(--muted) !important;
}

.progress-text strong {
    color: var(--primary-dark) !important;
    font-size: 16px !important;
}

/* --- 2. ТАБЛИЦА «ПОСЛЕДНИЕ ЗАЯВКИ» --- */
.dashboard-table {
    overflow-x: auto !important;
    margin-top: 10px !important;
}

.dashboard-table table {
    width: 100% !important;
    border-collapse: collapse !important;
    font-size: 14px !important;
    background: white !important;
}

/* Заголовки таблицы */
.dashboard-table th {
    padding: 12px 16px !important;
    text-align: left !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    color: var(--primary-dark) !important;
    background: #f8fafc !important;
    border-bottom: 2px solid var(--border-input) !important;
    white-space: nowrap !important;
}

/* Ячейки таблицы */
.dashboard-table td {
    padding: 12px 16px !important;
    border-bottom: 1px solid var(--border) !important;
    vertical-align: middle !important;
    text-align: left !important;
    color: var(--text) !important;
}

.dashboard-table tbody tr:last-child td {
    border-bottom: none !important;
}

.dashboard-table tbody tr:hover td {
    background-color: #f8fbfe !important;
}

/* Специфичные колонки */
.dashboard-table .td-id {
    color: var(--muted) !important;
    font-weight: 500 !important;
    width: 60px !important;
}

.dashboard-table .td-title a {
    color: var(--primary) !important;
    font-weight: 600 !important;
    text-decoration: none !important;
}

.dashboard-table .td-title a:hover {
    text-decoration: underline !important;
}

.dashboard-table .td-date {
    color: var(--muted) !important;
    font-size: 13px !important;
    white-space: nowrap !important;
}

/* ==========================================================================
   132. КУРСОР-РУКА ДЛЯ СТРОК НА ДАШБОРДЕ
   ========================================================================== */

.dashboard-table tbody tr.ticket-row {
    cursor: pointer !important;
    transition: background-color 0.15s ease;
}

/* ==========================================================================
   133. СИНХРОНИЗАЦИЯ ТАБЛИЦЫ ДАШБОРДА С ГЛАВНОЙ (ЦВЕТА И ПОДЧЕРКИВАНИЕ)
   ========================================================================== */

/* 1. Делаем цвет подсветки строки точно таким же, как на главной */
.dashboard-table tbody tr:hover td {
    background-color: #f1f5f9 !important; 
}

/* 2. Убираем подчеркивание у заголовка заявки в таблице на дашборде */
.dashboard-table .td-title a {
    text-decoration: none !important;
    color: #000000 !important; /* Оставляем черным, как на главной */
}

/* 3. Убираем подчеркивание при наведении мышки */
.dashboard-table .td-title a:hover {
    text-decoration: none !important;
    color: #000000 !important;
}

/* ==========================================================================
   134. ВЕРТИКАЛЬНАЯ СЕТКА ДЛЯ ТАБЛИЦЫ НА ДАШБОРДЕ
   ========================================================================== */

/* 1. Добавляем вертикальные линии (как на главной) */
.dashboard-table th,
.dashboard-table td {
    border-right: 1px solid #e2e8f0 !important;
    border-bottom: 1px solid #e2e8f0 !important;
    padding: 12px 16px !important;
    vertical-align: middle !important;
}

/* 2. Убираем правую границу у последней колонки, чтобы не было двойной рамки */
.dashboard-table th:last-child,
.dashboard-table td:last-child {
    border-right: none !important;
}

/* 3. Заголовки делаем с таким же серым фоном, как на главной */
.dashboard-table th {
    background-color: #f8fafc !important;
    color: var(--primary-dark) !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    border-bottom: 2px solid var(--border-input) !important; /* Четкая линия под заголовком */
}

/* 4. Выравниваем текст по центру (как на главной) */
.dashboard-table td {
    text-align: center !important;
}
.dashboard-table th {
    text-align: center !important;
}

/* 5. Заголовок заявки оставляем слева (чтобы читалось удобнее) */
.dashboard-table .td-title {
    text-align: left !important;
}

/* ==========================================================================
   144. ОПУСКАЕМ КНОПКИ ЭКСПОРТА НИЖЕ
   ========================================================================== */

/* 1. Выравниваем содержимое шапки по нижнему краю (кнопки опустятся вниз) */
.dashboard-header {
    align-items: flex-end !important; 
}

/* 2. Если нужно опустить еще ниже (под подзаголовок), добавляем отступ сверху кнопкам */
.dashboard-actions {
    margin-top: 20px !important; /* Чем больше значение, тем ниже кнопки */
}

/* ==========================================================================
   145. КРАСИВЫЙ БЛОК ПРИЧИНЫ ПАУЗЫ SLA
   ========================================================================== */

.sla-pause-reason {
    display: flex !important;
    flex-direction: column !important; /* Метка сверху, значение снизу */
    gap: 4px !important;               /* Отступ между ними */
    padding: 12px 14px !important;
    background: #f1f5f9 !important;
    border-radius: 8px !important;
    margin-bottom: 12px !important;
    border: 1px solid #e2e8f0 !important;
}

.sla-pause-reason-label {
    display: block !important;
    color: #64748b !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    margin-bottom: 0 !important;
}

.sla-pause-reason-value {
    color: #0f172a !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
    /* Чтобы длинный текст красиво переносился */
    word-break: break-word !important; 
}

/* ==========================================================================
   ФИНАЛЬНЫЕ СТИЛИ ДЛЯ КАРТОЧЕК КРИТИЧНЫХ ЗАЯВОК
   ========================================================================== */

/* Сама карточка: строго в одну строку */
.dashboard-list-item {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 12px 16px !important;
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-left: 4px solid #ef4444 !important; /* Красная полоска */
    border-radius: 8px !important;
    text-decoration: none !important;
    margin-bottom: 8px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    transition: background 0.15s !important;
}

.dashboard-list-item:hover {
    background: #f8fafc !important;
    text-decoration: none !important;
}

/* Левая часть: номер + заголовок (занимает всё свободное место) */
.dashboard-list-title {
    flex: 1 1 auto !important;
    text-align: left !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    color: #0f172a !important;
    margin: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important; /* Длинный текст обрезается ... */
}

.dashboard-list-id {
    color: #64748b !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    margin-right: 6px !important;
}

/* Правая часть: статус + исполнитель */
.dashboard-list-meta {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 16px !important;
    flex-shrink: 0 !important; /* Не даем сжиматься */
    margin: 0 !important;
}

.dashboard-list-meta .badge {
    display: inline-flex !important;
    align-items: center !important;
    height: 24px !important;
    padding: 0 12px !important;
    font-size: 12px !important;
    margin: 0 !important;
}

.dashboard-list-assignee {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    font-size: 13px !important;
    color: #475569 !important;
    white-space: nowrap !important;
    margin: 0 !important;
}
 
/* ==========================================================================
   ФИКС ОТСТУПОВ НА СТРАНИЦЕ ПРОФИЛЯ
   ========================================================================== */

/* Задаем жесткий отступ между карточками в левой колонке */
.profile-main {
    display: flex !important;
    flex-direction: column !important;
    gap: 24px !important; /* Расстояние между карточками */
}

/* На всякий случай убираем нижние отступы у самих карточек, чтобы они не дублировались */
.profile-main > .ticket-card {
    margin-bottom: 0 !important;
}

/* ==========================================================================
   ФИНАЛЬНАЯ ШЛИФОВКА СТРАНИЦЫ ВХОДА
   ========================================================================== */

.auth-hint {
    text-align: center;
    color: var(--muted);
    font-size: 13px;
    margin-bottom: 24px;
    line-height: 1.5;
}

.auth-footer {
    text-align: center;
    margin-top: 28px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
    font-size: 13px;
    color: var(--muted);
}

/* Центрируем SVG-логотип */
.auth-logo svg {
    display: inline-block;
    margin-bottom: 8px;
}

/* Делаем кнопку чуть более «сочной» */
.btn-social-yandex {
    margin-bottom: 0; /* Убираем лишние отступы, если есть */
}

/* ==========================================================================
   ФИКС РАДИОКНОПОК В БЛОКЕ SLA (ДЕТАЛЬНАЯ ЗАЯВКА)
   ========================================================================== */

.sla-pause-form input[type="radio"],
.sla-reason-option input[type="radio"] {
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    max-width: 20px !important;
    padding: 0 !important;
    margin: 0 10px 0 0 !important;
    display: inline-block !important;
    flex-shrink: 0 !important;
    cursor: pointer;
}

.sla-reason-option {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    padding: 10px !important;
}