/* ==================== PREDS USER STYLES (NOCTIS — dark theme) ====================
   Страница лежит внутри <div class="col-lg-12"> — как sessions и остальные
   разделы темы. min-width:0 обязателен: без него grid-элементы не сжимаются
   и широкая таблица выталкивает страницу вправо. */
.preds-page { display: grid; gap: 16px; min-width: 0; max-width: 100%; }
.preds-page > * { min-width: 0; }
.preds-page .table-responsive { overflow-x: auto; max-width: 100%; }

.preds-card {
    background: #232323;
    border: 1px solid #262626;
    border-radius: 15px;
    padding: 18px;
    transition: border-color 0.2s ease;
}
.preds-card:hover { border-color: #2e2e2e; }

.preds-card h3 {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 12px;
    font-size: 18px;
    font-weight: 600;
    color: #e6e6e6;
}
.preds-card h3::before {
    content: '';
    width: 4px;
    height: 20px;
    border-radius: 4px;
    background: #8C69FB;
    flex-shrink: 0;
}

.preds-filters { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; align-items: end; }
/* Высота подписи задана жёстко у всех ячеек фильтра, включая пустую подпись
   над кнопкой. Иначе высота строки зависит от line-height шрифта, и кнопка
   уезжает относительно полей на пару пикселей. */
.preds-filters .preds-filter-item label {
    display: block;
    height: 20px;
    line-height: 20px;
    margin: 0 0 6px;
    font-size: 13px;
    font-weight: 600;
    color: #b7b4bf;
    overflow: hidden;
}
/* У блока с кнопкой нет подписи, поэтому без явного выравнивания он съезжает
   относительно соседних полей */
/* Ячейка кнопки повторяет геометрию соседей явно: 26px под подпись
   (20px текст + 6px отступ) и 46px под сам элемент. Пустой <label> для этого
   не годился — его высота зависела от line-height шрифта.
   Сама кнопка — отдельный класс .preds-apply, не связанный с .btn2/.btn:
   на тех классах наслоилось слишком много правил темы и модуля. */
.preds-filter-actions {
    display: grid;
    grid-template-rows: 26px 46px;
    align-self: start;
}
.preds-filter-actions .preds-apply { grid-row: 2; }

/* ВНИМАНИЕ: тема noctis собрана на Bootstrap 4.1, где btn-default / btn-xs /
   input-group-btn отсутствуют (это классы Bootstrap 3), .btn2 не определён нигде,
   а .btn-primary — стоковый синий. Поэтому всю разметку формы стилизуем сами,
   scoped под .preds-page, чтобы ничего не текло на остальной сайт. */

/* Плашка .shopscontainer идёт вплотную к контенту — отбиваем её */
.shopscontainer + .col-lg-12 .preds-page { margin-top: 18px; }

/* Правила: три коротких блока в ряд на всю ширину карточки.
   Раньше это была простыня из 9 абзацев на пол-экрана. */
.preds-rules-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 16px;
}
.preds-rule { display: grid; gap: 8px; align-content: start; }
.preds-rule p { margin: 0; color: #b7b4bf; font-size: 13px; line-height: 1.55; }
.preds-rule p b { color: #e6e6e6; }
.preds-rule p a { color: #8C69FB; }
.preds-rule .pred-kind { justify-self: start; }
.preds-rule-appeal { background: rgba(140, 105, 251, 0.15); color: #8C69FB; border: 1px solid rgba(140, 105, 251, 0.3); }

.preds-page label {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 600;
    color: #b7b4bf;
}

/* Единая высота у полей и кнопок — иначе кнопка «Показать» не совпадает
   с соседними полями, а текст в select-ах сидит не по центру.
   !important нужен: тема задаёт свои height/padding для .form-control. */
.preds-page .form-control,
.preds-page input[type="text"],
.preds-page input[type="number"],
.preds-page select {
    width: 100%;
    height: 46px !important;
    min-height: 46px;
    padding: 0 14px !important;
    line-height: 44px !important;
    background: #1a1a1a;
    border: 1px solid #262626;
    border-radius: 10px;
    color: #e6e6e6;
    font-size: 14px;
    box-shadow: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.preds-page textarea {
    width: 100%;
    min-height: 46px;
    padding: 11px 14px;
    background: #1a1a1a;
    border: 1px solid #262626;
    border-radius: 10px;
    color: #e6e6e6;
    font-size: 14px;
    line-height: 1.45;
    box-shadow: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.preds-page .form-control:focus,
.preds-page select:focus,
.preds-page textarea:focus {
    outline: none;
    border-color: #8C69FB;
    box-shadow: 0 0 0 3px rgba(140, 105, 251, .12);
}

.preds-page .form-control::placeholder { color: #7a7a7a; }
.preds-page select option { background: #232323; color: #e6e6e6; }
.preds-page textarea { resize: vertical; }

/* Кнопки: .btn2/.preds-btn — основное действие, .btn-default — второстепенное */
.preds-page .btn,
.preds-page .btn2 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 46px;
    padding: 0 18px;
    border-radius: 10px;
    border: 1px solid transparent;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}

.preds-page .btn2,
.preds-page .preds-btn {
    background: #8C69FB;
    border-color: #8C69FB;
    color: #fff;
}

.preds-page .btn2:hover,
.preds-page .preds-btn:hover {
    background: #7a55f0;
    border-color: #7a55f0;
    color: #fff;
}

.preds-page .btn-default {
    background: #232323;
    border-color: #262626;
    color: #b7b4bf;
}

.preds-page .btn-default:hover {
    background: #2d2d2d;
    border-color: #2e2e2e;
    color: #e6e6e6;
}

.preds-page .btn-xs {
    height: 30px;
    padding: 0 12px;
    font-size: 12px;
    border-radius: 8px;
}

/* input-group: в Bootstrap 4 нет input-group-btn, поэтому раскладку задаём сами */
.preds-page .input-group {
    display: flex;
    align-items: stretch;
    width: 100%;
}

.preds-page .input-group > .form-control {
    flex: 1 1 auto;
    width: auto;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-right: 0;
}

.preds-page .input-group-btn {
    display: flex;
    flex: 0 0 auto;
}

.preds-page .input-group-btn > .btn {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    height: 100%;
}

/* Пагинация ядра (Bootstrap 3 разметка ul.pagination) */
.preds-pagination { display: flex; justify-content: center; }
.preds-pagination .pagination { display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin: 0; list-style: none; }
.preds-pagination .pagination > li > a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    border: 1px solid #262626;
    border-radius: 10px;
    background: #232323;
    color: #b7b4bf;
    text-decoration: none;
    font-size: 13px;
    transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.preds-pagination .pagination > li > a:hover { border-color: #8C69FB; color: #e6e6e6; }
.preds-pagination .pagination > li.active > a {
    background: rgba(140, 105, 251, .14);
    border-color: #8C69FB;
    color: #8C69FB;
    font-weight: 700;
}

/* 7 колонок вместо 10: id ушёл под ник, количество — к типу, срок — под дату.
   min-width подобран так, чтобы таблица помещалась без горизонтального скролла. */
.preds-table { border-collapse: collapse; min-width: 640px; width: 100%; table-layout: auto; }
.preds-table thead th {
    background: #1a1a1a;
    color: #787878;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 12px 14px;
    border-bottom: 1px solid #2a2931;
    font-weight: 500;
}
.preds-table tbody td {
    padding: 10px 14px;
    font-size: 14px;
    color: #b7b4bf;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    vertical-align: middle;
}
.preds-table tbody tr { transition: background 0.2s ease; }
.preds-table tbody tr:hover td { background: rgba(140, 105, 251, 0.04); }
.preds-table tbody tr > td a { color: #8C69FB; text-decoration: none; transition: color 0.2s; }
.preds-table tbody tr > td a:hover { color: #a88dfc; text-decoration: underline; }

/* Колонки таблицы: без этих правил ячейки «плывут» по ширине и переносятся вкривь */
.preds-col-user { min-width: 150px; }
.preds-col-reason { min-width: 220px; }
.preds-col-kind, .preds-col-status { white-space: nowrap; text-align: center; }
.preds-col-kind { display: table-cell; }
.preds-col-kind .preds-points-badge { margin-top: 6px; }
.preds-col-date { min-width: 120px; }
.preds-filter-card { padding-bottom: 18px; }

.preds-user-cell { display: flex; align-items: center; gap: 10px; }
.preds-avatar { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; border: 2px solid #2a2931; }
/* ID переехал под ник — делаем его подписью, а не отдельной колонкой */
.preds-col-id { white-space: nowrap; font-family: 'Courier New', monospace; color: #787878; font-size: 11px; margin-top: 2px; }
.preds-col-expire { font-size: 11px; color: #787878; margin-top: 3px; }
.preds-col-server { font-size: 12px; color: #787878; }
.preds-col-date, .preds-col-expire { white-space: nowrap; font-size: 13px; color: #787878; }
.preds-points-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; padding: 5px 10px; border-radius: 999px; font-size: 13px; font-weight: 700; color: #8C69FB; background: rgba(140, 105, 251, 0.1); border: 1px solid rgba(140, 105, 251, 0.2); }
.preds-reason { font-weight: 600; color: #e6e6e6; }
.preds-comment, .preds-author { color: #787878; font-size: 12px; margin-top: 4px; }
.preds-author { font-style: italic; }

.pred-status { display: inline-block; padding: 5px 12px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.pred-status-active { background: rgba(71, 188, 138, 0.15); color: #47bc8a; border: 1px solid rgba(71, 188, 138, 0.3); }
.pred-status-closed { background: rgba(216, 87, 82, 0.15); color: #d85752; border: 1px solid rgba(216, 87, 82, 0.3); }

.pred-kind { display: inline-block; padding: 5px 12px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.pred-kind-warning { background: rgba(240, 185, 11, 0.15); color: #f0b90b; border: 1px solid rgba(240, 185, 11, 0.3); }
.pred-kind-reprimand { background: rgba(216, 87, 82, 0.15); color: #d85752; border: 1px solid rgba(216, 87, 82, 0.3); }

.preds-rules-card h3 { margin: 0 0 8px; }
.preds-rules-card h3:not(:first-child) { margin-top: 20px; }
.preds-rules-card p { margin: 0 0 8px; color: #b7b4bf; line-height: 1.55; }
.preds-rules-card p a { color: #8C69FB; }
.preds-rules-card p b { color: #e6e6e6; }

.preds-issue-card h3 { margin: 0 0 12px; }
.preds-issue-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; align-items: start; }
.preds-issue-form .preds-filter-actions { align-self: end; }
.preds-quick-expire { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }

.preds-search-results { margin-top: 10px; display: grid; gap: 8px; }
.preds-search-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border: 1px solid #262626; border-radius: 12px; background: #1a1a1a; text-align: left; color: #b7b4bf; transition: border-color 0.15s ease, background 0.15s ease; }
.preds-search-item:hover { border-color: #3a3846; background: #232323; }
.preds-search-avatar { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; border: 2px solid #232323; }
.preds-search-login { font-weight: 700; color: #e6e6e6; }
.preds-search-meta, .preds-search-group, .preds-search-empty { font-size: 12px; color: #7a7a7a; }
.preds-selected-user-wrap { margin-top: 10px; }
.preds-selected-user { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid rgba(71, 188, 138, 0.3); background: rgba(71, 188, 138, 0.08); border-radius: 12px; }

/* Подгрузка таблицы без перезагрузки — лёгкое затемнение вместо мигания */
.preds-table-loading tbody { opacity: .45; transition: opacity .15s ease; }
.preds-table tbody { transition: opacity .15s ease; }

.preds-sort-link { display: inline-flex; align-items: center; gap: 6px; color: #787878; text-decoration: none; cursor: pointer; transition: color 0.15s ease; }
.preds-sort-link:hover { color: #8C69FB; }
.preds-sort-active { color: #8C69FB; font-weight: 700; }
.preds-sort-icon { font-size: 11px; }

.pred-priority { display: inline-flex; padding: 3px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; margin-bottom: 6px; }
.pred-priority-minor { background: rgba(122, 122, 122, 0.15); color: #aeaeae; }
.pred-priority-medium { background: rgba(240, 185, 11, 0.15); color: #f0b90b; }
.pred-priority-critical { background: rgba(216, 87, 82, 0.15); color: #d85752; }

/* Кнопка обжалования в публичной таблице */
.preds-col-action { white-space: nowrap; }
.preds-appeal-btn {
    display: inline-block;
    padding: 5px 12px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
    color: #f0b90b;
    background: rgba(240, 185, 11, 0.12);
    border: 1px solid rgba(240, 185, 11, 0.35);
    transition: background 0.15s ease, border-color 0.15s ease;
}
.preds-appeal-btn:hover { background: rgba(240, 185, 11, 0.2); border-color: #f0b90b; color: #f0b90b; }

.preds-profile-list { display: grid; gap: 10px; }
.preds-profile-item { padding: 10px 12px; border: 1px solid #262626; border-radius: 12px; background: #1a1a1a; transition: border-color 0.15s ease; }
.preds-profile-item:hover { border-color: #3a3846; }
.preds-profile-item-top { display: flex; justify-content: space-between; gap: 12px; font-size: 12px; margin-bottom: 6px; }
.preds-profile-points { font-weight: 700; color: #d85752; }
.preds-profile-server, .preds-profile-date, .preds-profile-comment, .preds-profile-empty { color: #7a7a7a; font-size: 12px; }
.preds-profile-reason { font-weight: 600; margin-bottom: 4px; color: #e6e6e6; }

/* ==================== Мои обжалования (публичный раздел, тёмная тема) ==================== */
.preds-appeals-card h3 { margin: 0 0 12px; }
.preds-appeals-list { display: grid; gap: 10px; }
.preds-appeal-item { padding: 12px; border: 1px solid #262626; border-radius: 12px; background: #1a1a1a; transition: border-color 0.15s ease; }
.preds-appeal-item:hover { border-color: #3a3846; }
.preds-appeal-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.preds-appeal-user { font-weight: 700; color: #e6e6e6; }
.preds-appeal-meta { font-size: 12px; color: #787878; margin-bottom: 6px; }
.preds-appeal-reason { font-size: 13px; color: #b7b4bf; margin-bottom: 6px; }
.preds-appeal-text { font-size: 13px; color: #e6e6e6; background: #232323; border: 1px solid #2a2931; border-radius: 8px; padding: 8px 10px; margin-bottom: 8px; word-wrap: break-word; }
.preds-appeal-resolution { font-size: 12px; color: #47bc8a; margin-bottom: 8px; }
.preds-appeal-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* Чат переписки внутри заявки */
.preds-appeal-chat { display: none; margin-top: 10px; border: 1px solid #2a2931; border-radius: 12px; background: #232323; padding: 12px; }
.preds-appeal-chat-messages { display: grid; gap: 8px; max-height: 360px; overflow-y: auto; margin-bottom: 10px; }
.preds-chat-msg { max-width: 80%; padding: 8px 12px; border-radius: 12px; font-size: 13px; }
.preds-chat-msg-mine { justify-self: end; background: rgba(140, 105, 251, 0.16); border: 1px solid rgba(140, 105, 251, 0.35); color: #e6e6e6; }
.preds-chat-msg-theirs { justify-self: start; background: #1a1a1a; border: 1px solid #2a2931; color: #e6e6e6; }
.preds-chat-msg-meta { font-size: 11px; color: #787878; margin-bottom: 4px; }
.preds-chat-msg-text { color: #e6e6e6; word-wrap: break-word; }
.preds-appeal-chat-form { display: flex; gap: 8px; align-items: flex-start; }
.preds-appeal-chat-form textarea { flex: 1; resize: vertical; min-height: 42px; border: 1px solid #3a3846; border-radius: 8px; background: #1a1a1a; color: #e6e6e6; padding: 8px 10px; }
.preds-appeal-chat-form textarea:focus { outline: none; border-color: #8C69FB; }

/* Вложения в заявке */
.preds-appeal-files { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.preds-appeal-file { display: block; }
.preds-appeal-file img { width: 72px; height: 72px; object-fit: cover; border-radius: 8px; border: 1px solid #2a2931; transition: opacity 0.15s ease; }
.preds-appeal-file img:hover { opacity: 0.85; }

/* Модальное окно подачи обжалования */
.preds-modal-overlay { position: fixed; inset: 0; z-index: 99999; background: rgba(0, 0, 0, 0.7); display: flex; align-items: center; justify-content: center; padding: 16px; }
.preds-modal { width: 100%; max-width: 520px; background: #232323; border: 1px solid #2a2931; border-radius: 12px; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5); overflow: hidden; }
.preds-modal-head { padding: 14px 16px; font-size: 15px; font-weight: 700; color: #e6e6e6; border-bottom: 1px solid #2a2931; display: flex; align-items: center; justify-content: space-between; }
.preds-modal-close { cursor: pointer; font-size: 22px; line-height: 1; color: #787878; }
.preds-modal-close:hover { color: #e6e6e6; }
.preds-modal-body { padding: 16px; }
.preds-modal-body label { display: block; font-size: 13px; font-weight: 600; color: #b7b4bf; margin-bottom: 6px; }
.preds-modal-body textarea { width: 100%; border: 1px solid #3a3846; border-radius: 8px; background: #1a1a1a; color: #e6e6e6; padding: 8px 10px; }
.preds-modal-body textarea:focus { outline: none; border-color: #8C69FB; }
.preds-appeal-uploads { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.preds-upload-thumb { position: relative; display: inline-block; }
.preds-upload-thumb img { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; border: 1px solid #2a2931; }
.preds-upload-remove { position: absolute; top: -6px; right: -6px; width: 20px; height: 20px; background: #d85752; color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px; cursor: pointer; line-height: 1; }
.preds-appeal-upload-row { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.preds-upload-hint { font-size: 11px; color: #787878; }
.preds-modal-foot { padding: 12px 16px; border-top: 1px solid #2a2931; display: flex; justify-content: flex-end; gap: 8px; }

/* Непрочитанные сообщения */
.preds-appeal-item.preds-appeal-unread { border-color: #8C69FB; background: rgba(140, 105, 251, 0.06); }
.preds-unread-badge { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px; font-size: 10px; font-weight: 700; background: #8C69FB; color: #fff; vertical-align: middle; }

/* ==================== Кнопка фильтра ====================
   Отдельный класс без общих правил с .btn / .btn2 / .preds-btn — на них
   наслоились стили темы, bootstrap и самого модуля, и высота кнопки каждый
   раз оказывалась не той. Здесь всё задано явно и ни от чего не наследуется. */
.preds-apply {
    -webkit-appearance: none;
    appearance: none;
    display: block;
    box-sizing: border-box;
    width: 100%;
    height: 46px;
    min-height: 0;
    max-height: none;
    margin: 0;
    padding: 0 18px;
    background: #8C69FB;
    border: 1px solid #8C69FB;
    border-radius: 10px;
    color: #fff;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    line-height: 44px;
    text-align: center;
    vertical-align: top;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease;
}

.preds-apply:hover { background: #7a55f0; border-color: #7a55f0; }
.preds-apply:focus { outline: none; box-shadow: 0 0 0 3px rgba(140, 105, 251, .3); }