/* ============================================
   ЕДИНАЯ СИСТЕМА UI-КОМПОНЕНТОВ
   Все глобальные стили для кнопок, таблиц,
   форм, бейджей, алертов, пагинации и т.д.
   ============================================ */

/* ============================================
   1. КНОПКИ (Buttons)
   ============================================ */

/* Базовая кнопка */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 20px;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s;
    line-height: 1.4;
    white-space: nowrap;
}

.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.btn .material-icons {
    font-size: 18px;
}

/* Варианты кнопок */
.btn-primary {
    background: var(--md-primary);
    color: var(--md-on-primary);
}

.btn-primary:hover {
    opacity: 0.9;
    box-shadow: 0 2px 8px rgba(103, 80, 164, 0.3);
}

.btn-secondary {
    background: var(--md-surface-variant);
    color: var(--md-on-surface-variant);
}

.btn-secondary:hover {
    background: var(--md-outline-variant);
}

.btn-danger {
    background: #dc3545;
    color: white;
}

.btn-danger:hover {
    background: #c82333;
}

.btn-success {
    background: #28a745;
    color: white;
}

.btn-success:hover {
    background: #218838;
}

.btn-outline {
    background: transparent;
    border: 1px solid var(--md-outline-variant);
    color: var(--md-on-surface);
}

.btn-outline:hover {
    background: var(--md-surface-variant);
    border-color: var(--md-primary);
    color: var(--md-primary);
}

.btn-outline-primary {
    background: transparent;
    border: 1px solid var(--md-primary);
    color: var(--md-primary);
}

.btn-outline-primary:hover {
    background: var(--md-primary);
    color: var(--md-on-primary);
}

.btn-outline-danger {
    background: transparent;
    border: 1px solid #dc3545;
    color: #dc3545;
}

.btn-outline-danger:hover {
    background: #dc3545;
    color: white;
}

/* Размеры кнопок */
.btn-sm {
    padding: 6px 12px;
    font-size: 13px;
}

.btn-sm .material-icons {
    font-size: 16px;
}

.btn-lg {
    padding: 12px 24px;
    font-size: 16px;
}

/* Текстовая кнопка (без рамки и фона) */
.btn-text {
    background: transparent;
    color: var(--md-primary, #1a73e8);
    padding: 8px 12px;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background 0.2s;
}

.btn-text:hover {
    background: rgba(26, 115, 232, 0.08);
    box-shadow: none;
}

/* Иконка-кнопка (квадратная, только иконка) */
.icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 1px solid var(--md-outline-variant);
    border-radius: 8px;
    background: transparent;
    cursor: pointer;
    color: var(--md-on-surface-variant);
    transition: all 0.2s;
    text-decoration: none;
}

.icon-btn:hover {
    background: var(--md-surface-variant);
}

.icon-btn.primary:hover {
    color: var(--md-primary);
    border-color: var(--md-primary);
}

.icon-btn.danger:hover {
    color: #dc3545;
    border-color: #dc3545;
}

.icon-btn.success:hover {
    color: #28a745;
    border-color: #28a745;
}

.icon-btn .material-icons {
    font-size: 18px;
}

/* Группа кнопок-иконок */
.actions-cell {
    display: flex;
    gap: 6px;
    white-space: nowrap;
}

/* Кнопка "добавить строку" (пунктирная) */
.btn-add-row {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 14px;
    border: 1px dashed var(--md-primary);
    border-radius: 6px;
    background: transparent;
    color: var(--md-primary);
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    transition: all 0.2s;
    margin-top: 12px;
}

.btn-add-row:hover {
    background: var(--md-primary-container);
}

/* ============================================
   2. БЕЙДЖИ / МЕТКИ (Badges / Labels)
   ============================================ */

.badge,
.label {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
}

.badge-success,
.label-current {
    background: #e8f5e9;
    color: #2e7d32;
}

.badge-secondary,
.label-archived {
    background: var(--md-surface-variant);
    color: var(--md-on-surface-variant);
}

.badge-danger,
.label-expired {
    background: #ffebee;
    color: #c62828;
}

.badge-primary,
.label-assign {
    background: #d4c8f0;
    color: #4a2d8a;
}

.badge-info,
.label-confirm {
    background: #c3f0e5;
    color: #0d6b4e;
}

.badge-warning,
.label-warning {
    background: #fff3e0;
    color: #e65100;
}

.badge-success,
.label-success {
    background: #e8f5e9;
    color: #2e7d32;
}

/* Статус-бейдж для документов */
.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
}

.status-badge.active {
    background: #e8f5e9;
    color: #2e7d32;
}

.status-badge.draft {
    background: #fff3e0;
    color: #e65100;
}

.status-badge.archived {
    background: #f5f5f5;
    color: #9e9e9e;
}

.status-badge.progress {
    background: #fef7e0;
    color: #ea8600;
}

.status-badge.passed {
    background: #e6f4ea;
    color: #1e8e3e;
}

.status-badge.failed {
    background: #fce8e6;
    color: #d93025;
}

/* ============================================
   3. АЛЕРТЫ / УВЕДОМЛЕНИЯ (Alerts)
   ============================================ */

.alert {
    padding: 12px 16px;
    border-radius: 8px;
    margin-bottom: 16px;
    font-size: 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.alert-success {
    background: #e8f5e9;
    color: #2e7d32;
    border: 1px solid #c8e6c9;
}

.alert-danger {
    background: #ffebee;
    color: #c62828;
    border: 1px solid #ffcdd2;
}

.alert-warning {
    background: #fff3e0;
    color: #e65100;
    border: 1px solid #ffe0b2;
}

.alert-info {
    background: #e3f2fd;
    color: #1565c0;
    border: 1px solid #bbdefb;
}

.alert .btn-close {
    background: none;
    border: none;
    font-size: 18px;
    cursor: pointer;
    color: inherit;
    opacity: 0.7;
    padding: 0;
    line-height: 1;
}

.alert .btn-close:hover {
    opacity: 1;
}

/* ============================================
   4. ТАБЛИЦЫ (Tables)
   ============================================ */

.table-card {
    background: var(--md-surface);
    border: 1px solid var(--md-outline-variant);
    border-radius: 12px;
    overflow: hidden;
}

.table-responsive {
    overflow-x: auto;
}

.table-card table {
    width: 100%;
    border-collapse: collapse;
}

.table-card table th {
    background: var(--md-surface-variant);
    color: var(--md-on-surface-variant);
    font-weight: 500;
    font-size: 13px;
    padding: 10px 16px;
    text-align: center;
    border-bottom: 1px solid var(--md-outline-variant);
    white-space: nowrap;
}

.table-card table td {
    padding: 10px 16px;
    border-bottom: 1px solid var(--md-outline-variant);
    font-size: 14px;
    color: var(--md-on-surface);
}

.table-card table tr:last-child td {
    border-bottom: none;
}

.table-card table tr:hover td {
    background: var(--md-surface-variant-hover, rgba(0, 0, 0, 0.02));
}

/* Выравнивание в таблицах:
   - th по центру по умолчанию
   - td слева по умолчанию
   - .text-end / .text-center переопределяют для конкретных колонок */
.table-card table th.text-start,
.table-card table td.text-start {
    text-align: left;
}

.table-card table th.text-center,
.table-card table td.text-center {
    text-align: center;
}

.table-card table th.text-end,
.table-card table td.text-end {
    text-align: right;
}

.table-card table .text-muted {
    color: var(--md-on-surface-variant);
}

.table-card table .fw-medium {
    font-weight: 500;
}

/* Пустое состояние таблицы */
.empty-state {
    text-align: center;
    padding: 40px 20px;
    color: var(--md-on-surface-variant);
}

/* ============================================
   5. ФОРМЫ (Forms)
   ============================================ */

.form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.form-group label {
    font-size: 13px;
    font-weight: 500;
    color: var(--md-on-surface-variant);
}

.form-group input,
.form-group select,
.form-group textarea {
    padding: 10px 12px;
    border: 1px solid var(--md-input-border);
    border-radius: 8px;
    font-size: 14px;
    background: var(--md-surface);
    color: var(--md-on-surface);
    transition:
        border-color 0.2s,
        box-shadow 0.2s;
    width: 100%;
    box-sizing: border-box;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--md-primary);
    box-shadow: 0 0 0 3px rgba(103, 80, 164, 0.15);
}

.form-group textarea {
    resize: vertical;
    min-height: 60px;
}

.form-group .form-hint {
    font-size: 11px;
    color: var(--md-on-surface-variant);
    opacity: 0.7;
}

/* Сетка формы */
.form-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 16px;
}

.form-row .col-full {
    grid-column: 1 / -1;
}

/* Чекбокс / радио */
.form-check {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
}

.form-check input[type='checkbox'],
.form-check input[type='radio'] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    flex-shrink: 0;
}

.form-check label {
    font-size: 14px;
    color: var(--md-on-surface);
    cursor: pointer;
    margin: 0;
}

/* Действия формы */
.form-actions {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--md-outline-variant);
}

/* Вспомогательные текстовые классы */
.text-danger {
    color: #dc3545;
}

.text-muted {
    color: var(--md-on-surface-variant);
}

.text-center {
    text-align: center;
}

.text-end {
    text-align: right;
}

/* ============================================
   6. ПАГИНАЦИЯ (Pagination)
   ============================================ */

.pagination {
    display: flex;
    justify-content: center;
    gap: 4px;
    padding: 12px;
    list-style: none;
    flex-wrap: wrap;
}

.page-item a,
.page-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    padding: 0 8px;
    border-radius: 6px;
    font-size: 13px;
    text-decoration: none;
    color: var(--md-on-surface);
    transition: background 0.2s;
    border: 1px solid transparent;
    cursor: pointer;
}

.page-item a:hover,
.page-btn:hover:not(:disabled):not(.active) {
    background: var(--md-surface-variant);
}

.page-item.active a,
.page-btn.active {
    background: var(--md-primary);
    color: var(--md-on-primary);
    border-color: var(--md-primary);
}

.page-btn:disabled {
    opacity: 0.4;
    cursor: default;
}

/* ============================================
   7. СПИСКИ (Lists)
   ============================================ */

.list-group {
    display: flex;
    flex-direction: column;
    border-radius: 8px;
    overflow: hidden;
}

.list-group-flush .list-group-item {
    border-left: none;
    border-right: none;
}

.list-group-flush .list-group-item:first-child {
    border-top: none;
}

.list-group-flush .list-group-item:last-child {
    border-bottom: none;
}

.list-group-item {
    padding: 14px 16px;
    border: 1px solid var(--md-outline-variant);
    background: var(--md-surface);
    color: var(--md-on-surface);
    transition: background 0.15s;
}

.list-group-item:hover {
    background: var(--md-surface-variant);
}

/* ============================================
   8. КАРТОЧКИ (Cards)
   ============================================ */

.card {
    background: var(--md-surface);
    border: 1px solid var(--md-outline-variant);
    border-radius: 12px;
    margin-bottom: 20px;
    overflow: hidden;
}

.card-header {
    padding: 14px 20px;
    background: var(--md-surface-variant);
    border-bottom: 1px solid var(--md-outline-variant);
}

.card-header h5 {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--md-on-surface);
}

.card-body {
    padding: 20px;
}

.card-footer {
    padding: 14px 20px;
    border-top: 1px solid var(--md-outline-variant);
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

/* ============================================
   9. СПИННЕР (Spinner / Loading)
   ============================================ */

.spinner {
    display: inline-block;
    width: 24px;
    height: 24px;
    border: 3px solid var(--md-outline-variant);
    border-top-color: var(--md-primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    vertical-align: middle;
}

.spinner-lg {
    width: 40px;
    height: 40px;
    border-width: 4px;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.loading-state {
    text-align: center;
    padding: 40px 20px;
    color: var(--md-on-surface-variant);
}

.loading-state .spinner {
    margin: 0 auto 12px;
}

/* ============================================
   10. ПОИСК (Search field)
   ============================================ */

.search-field {
    position: relative;
    min-width: 260px;
}

.search-field input {
    width: 100%;
    padding: 10px 16px 10px 40px;
    border: 1px solid var(--md-input-border);
    border-radius: 8px;
    font-size: 14px;
    background: var(--md-surface);
    color: var(--md-on-surface);
    transition:
        border-color 0.2s,
        box-shadow 0.2s;
    box-sizing: border-box;
}

.search-field input:focus {
    outline: none;
    border-color: var(--md-primary);
    box-shadow: 0 0 0 3px rgba(103, 80, 164, 0.15);
}

.search-field .search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--md-on-surface-variant);
    font-size: 18px;
    pointer-events: none;
}

.search-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--md-surface);
    border: 1px solid var(--md-input-border);
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    max-height: 250px;
    overflow-y: auto;
    z-index: 100;
    display: none;
}

.search-results.active {
    display: block;
}

.search-result-item {
    padding: 10px 14px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--md-outline-variant);
    transition: background 0.15s;
}

.search-result-item:last-child {
    border-bottom: none;
}

.search-result-item:hover {
    background: var(--md-surface-variant);
}

.search-result-item .name {
    font-weight: 500;
    color: var(--md-on-surface);
}

.search-result-item .meta {
    font-size: 12px;
    color: var(--md-on-surface-variant);
}

/* ============================================
   11. ЗАГОЛОВКИ СТРАНИЦ (Page headers)
   ============================================ */

.page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    flex-wrap: wrap;
    gap: 12px;
}

.page-header h1 {
    margin: 0;
    font-size: 24px;
    font-weight: 500;
    color: var(--md-on-surface);
}

/* Контролы в заголовке (поиск + кнопка на одной строке) */
.page-controls {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
}

/* ============================================
   12. СЕКЦИЯ ЗАПИСЕЙ (Records section)

   Используется в document_edit.php (судейские и разряды)
   ============================================ */

.records-section {
    background: var(--md-surface);
    border: 1px solid var(--md-outline-variant);
    border-radius: 12px;
    overflow: hidden;
}

.records-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    border-bottom: 1px solid var(--md-outline-variant);
    background: var(--md-surface-variant);
}

.records-header h2 {
    margin: 0;
    font-size: 18px;
    font-weight: 500;
    color: var(--md-on-surface);
}

.records-table {
    width: 100%;
    border-collapse: collapse;
}

.records-table th {
    background: var(--md-surface-variant);
    color: var(--md-on-surface-variant);
    font-weight: 500;
    font-size: 13px;
    padding: 10px 16px;
    text-align: center;
    border-bottom: 1px solid var(--md-outline-variant);
}

.records-table td {
    padding: 10px 16px;
    border-bottom: 1px solid var(--md-outline-variant);
    font-size: 14px;
    color: var(--md-on-surface);
}

.records-table tr:last-child td {
    border-bottom: none;
}

.records-table tr:hover td {
    background: var(--md-surface-variant-hover, rgba(0, 0, 0, 0.02));
}

.records-table .actions {
    display: flex;
    gap: 6px;
    white-space: nowrap;
}

.records-empty {
    text-align: center;
    padding: 40px 20px;
    color: var(--md-on-surface-variant);
}

.records-loading {
    text-align: center;
    padding: 40px 20px;
    color: var(--md-on-surface-variant);
}

.records-loading .spinner {
    width: 32px;
    height: 32px;
    border: 3px solid var(--md-outline-variant);
    border-top-color: var(--md-primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin: 0 auto 12px;
}

/* ============================================
   13. ФОРМЫ В МОДАЛЬНЫХ ОКНАХ ЗАПИСЕЙ (Record modal forms)
   Используется в document_edit.php
   ============================================ */

.record-modal .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 12px;
}

.record-modal .form-row.full {
    grid-template-columns: 1fr;
}

.record-modal .form-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.record-modal .form-group label {
    font-size: 13px;
    font-weight: 500;
    color: var(--md-on-surface-variant);
}

.record-modal .form-group input,
.record-modal .form-group select {
    padding: 8px 12px;
    border: 1px solid var(--md-input-border);
    border-radius: 6px;
    font-size: 14px;
    background: var(--md-surface);
    color: var(--md-on-surface);
}

.record-modal .form-group input:focus,
.record-modal .form-group select:focus {
    outline: none;
    border-color: var(--md-primary);
    box-shadow: 0 0 0 3px rgba(103, 80, 164, 0.15);
}

.record-modal .checkbox-group {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
}

.record-modal .checkbox-group input[type='checkbox'] {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.record-modal .checkbox-group label {
    font-size: 14px;
    color: var(--md-on-surface);
    cursor: pointer;
}

/* ============================================
   14. КОНТЕЙНЕР СТРАНИЦЫ (Page container)
   ============================================ */

.page-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

.page-container-sm {
    max-width: 900px;
}

@media (max-width: 768px) {
    .page-container {
        padding: 12px;
    }

    .form-row {
        grid-template-columns: 1fr;
    }

    .table-card table th,
    .table-card table td {
        padding: 8px 10px;
        font-size: 13px;
    }

    .page-header {
        flex-direction: column;
        align-items: stretch;
    }
}

/* ============================================
   15. DATA TABLE (data-table component)
   ============================================ */

.data-table {
    background: var(--md-surface);
    border: 1px solid var(--md-outline-variant);
    border-radius: 12px;
    overflow: hidden;
}

.data-table__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    border-bottom: 1px solid var(--md-outline-variant);
    background: var(--md-surface-variant);
}

.data-table__title {
    margin: 0;
    font-size: 18px;
    font-weight: 500;
    color: var(--md-on-surface);
}

.data-table__wrapper {
    overflow-x: auto;
}

.data-table__table {
    width: 100%;
    border-collapse: collapse;
}

.data-table__table th {
    background: var(--md-surface-variant);
    color: var(--md-on-surface-variant);
    font-weight: 500;
    font-size: 13px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--md-outline-variant);
    white-space: nowrap;
}

.data-table__table td {
    padding: 10px 16px;
    border-bottom: 1px solid var(--md-outline-variant);
    font-size: 14px;
    color: var(--md-on-surface);
}

.data-table__table tr:last-child td {
    border-bottom: none;
}

.data-table__table tr:hover td {
    background: var(--md-surface-variant-hover, rgba(0, 0, 0, 0.02));
}

.data-table__actions {
    display: flex;
    gap: 6px;
    white-space: nowrap;
    justify-content: center;
}

/* Кнопка "Добавить" в шапке таблицы */
.btn-add {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 20px;
    background: var(--md-primary);
    color: var(--md-on-primary);
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s;
    line-height: 1.4;
    white-space: nowrap;
}

.btn-add:hover {
    opacity: 0.9;
    box-shadow: 0 2px 8px rgba(103, 80, 164, 0.3);
}

.btn-add .material-icons {
    font-size: 18px;
}

/* Иконка-кнопка для действий в таблице */
.btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 1px solid var(--md-outline-variant);
    border-radius: 8px;
    background: transparent;
    cursor: pointer;
    color: var(--md-on-surface-variant);
    transition: all 0.2s;
    text-decoration: none;
}

.btn-icon:hover {
    background: var(--md-surface-variant);
}

.btn-icon.view:hover {
    color: var(--md-primary);
    border-color: var(--md-primary);
}

.btn-icon.edit:hover {
    color: var(--md-primary);
    border-color: var(--md-primary);
}

.btn-icon.delete:hover {
    color: #dc3545;
    border-color: #dc3545;
}

.btn-icon .material-icons {
    font-size: 18px;
}

/* ============================================
   16. ПОИСК И ФИЛЬТРЫ (Search & Filters)
   ============================================ */

.search-filters {
    background: var(--md-surface);
    border: 1px solid var(--md-outline-variant);
    border-radius: 12px;
    padding: 10px;
    margin-bottom: 24px;
}

.search-form {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    padding: 16px 20px;
}

.filters-group {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: center;
}

.filter-select {
    padding: 10px 12px;
    border: 1px solid var(--md-input-border);
    border-radius: 8px;
    font-size: 14px;
    background: var(--md-surface);
    color: var(--md-on-surface);
    cursor: pointer;
    min-width: 160px;
    transition:
        border-color 0.2s,
        box-shadow 0.2s;
}

.filter-select:focus {
    outline: none;
    border-color: var(--md-primary);
    box-shadow: 0 0 0 3px rgba(103, 80, 164, 0.15);
}

.search-input {
    padding: 10px 12px;
    border: 1px solid var(--md-input-border);
    border-radius: 8px;
    font-size: 14px;
    background: var(--md-surface);
    color: var(--md-on-surface);
    min-width: 220px;
    transition:
        border-color 0.2s,
        box-shadow 0.2s;
}

.search-input:focus {
    outline: none;
    border-color: var(--md-primary);
    box-shadow: 0 0 0 3px rgba(103, 80, 164, 0.15);
}

.btn-search {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 10px 16px;
    background: var(--md-primary);
    color: var(--md-on-primary);
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-search:hover {
    opacity: 0.9;
}

.btn-search .material-icons {
    font-size: 18px;
}

.btn-reset {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 10px 16px;
    background: transparent;
    color: var(--md-on-surface-variant);
    border: 1px solid var(--md-outline-variant);
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s;
}

.btn-reset:hover {
    border-color: var(--md-primary);
    color: var(--md-primary);
}

.btn-reset .material-icons {
    font-size: 18px;
}

/* ============================================
   17. БЕЙДЖ ТИПА ОРГАНИЗАЦИИ (Type badge)
   ============================================ */

.type-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
    background: var(--md-surface-variant);
    color: var(--md-on-surface-variant);
    white-space: nowrap;
}

/* Статус-бейдж для организаций */
.status-badge.status-active {
    background: #e8f5e9;
    color: #2e7d32;
}

.status-badge.status-inactive {
    background: #ffebee;
    color: #c62828;
}

/* ============================================
   18. SELECT С ПОИСКОМ (SelectSearch)
   ============================================ */

.ss-wrapper {
    position: relative;
    width: 100%;
}

.ss-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--md-input-border);
    border-radius: 8px;
    font-size: 14px;
    background: var(--md-surface);
    color: var(--md-on-surface);
    cursor: pointer;
    transition:
        border-color 0.2s,
        box-shadow 0.2s;
    text-align: left;
    gap: 8px;
    box-sizing: border-box;
}

.ss-trigger:hover {
    border-color: var(--md-primary);
}

.ss-trigger:focus,
.ss-trigger[aria-expanded='true'] {
    outline: none;
    border-color: var(--md-primary);
    box-shadow: 0 0 0 3px rgba(103, 80, 164, 0.15);
}

.ss-trigger-text {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ss-arrow {
    font-size: 10px;
    color: var(--md-on-surface-variant);
    transition: transform 0.2s;
    flex-shrink: 0;
}

.ss-trigger[aria-expanded='true'] .ss-arrow {
    transform: rotate(180deg);
}

.ss-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: var(--md-surface);
    border: 1px solid var(--md-input-border);
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    z-index: 200;
    max-height: 300px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.ss-search {
    width: 100%;
    padding: 10px 12px;
    border: none;
    border-bottom: 1px solid var(--md-outline-variant);
    font-size: 14px;
    background: var(--md-surface);
    color: var(--md-on-surface);
    outline: none;
    box-sizing: border-box;
}

.ss-search:focus {
    border-bottom-color: var(--md-primary);
}

.ss-options {
    overflow-y: auto;
    max-height: 220px;
}

.ss-option {
    padding: 10px 14px;
    cursor: pointer;
    font-size: 14px;
    color: var(--md-on-surface);
    transition: background 0.15s;
    border-bottom: 1px solid var(--md-outline-variant);
}

.ss-option:last-child {
    border-bottom: none;
}

.ss-option:hover {
    background: var(--md-surface-variant);
}

.ss-option--selected {
    background: var(--md-primary-container, rgba(103, 80, 164, 0.08));
    font-weight: 500;
}

.ss-option--placeholder {
    color: var(--md-on-surface-variant);
    font-style: italic;
}

.ss-option--empty {
    color: var(--md-on-surface-variant);
    cursor: default;
    text-align: center;
    padding: 20px 14px;
    font-style: italic;
}

/* Тёмная тема */
[data-theme='dark'] .ss-dropdown {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

[data-theme='dark'] .ss-option--selected {
    background: rgba(187, 134, 252, 0.15);
}