/* ============================================================================
   Табель — компоненты: карточки, кнопки, формы, таблицы, бейджи, диалоги.
   ========================================================================== */

/* ===== КАРТОЧКА ===== */
.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow);
    overflow: hidden;
}
.card + .card { margin-top: 16px; }
.card-body { padding: 18px; }
.card-header {
    padding: 16px 18px;
    border-bottom: 1px solid var(--border);
    font-weight: 600;
    font-size: 0.9375rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

@media (min-width: 1024px) {
    .card-body { padding: 24px; }
    .card-header { padding: 18px 24px; }
}

/* ===== КНОПКИ ===== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    font: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    padding: 10px 18px;
    min-height: 42px;
    border-radius: var(--radius-md);
    border: 1px solid transparent;
    cursor: pointer;
    transition: background 0.15s, transform 0.1s, border-color 0.15s;
    white-space: nowrap;
}
.btn .ic { width: 16px; height: 16px; }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-primary { background: var(--accent); color: #fff; border-color: var(--accent); }
.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }

.btn-ghost { background: transparent; color: var(--text-muted); border-color: var(--border); }
.btn-ghost:hover { background: var(--surface-2); color: var(--text); }

.btn-danger { background: var(--s-error-bg); color: var(--s-error-text); border-color: var(--s-error-text); }
.btn-danger:hover { background: var(--s-error-text); color: #fff; }

.btn-sm { padding: 6px 12px; min-height: 34px; font-size: 0.8125rem; border-radius: var(--radius-sm); }
.btn-sm .ic { width: 15px; height: 15px; }

.btn-block { width: 100%; }

.btn-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

/* ===== ФОРМЫ ===== */
label {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: 5px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

input, select, textarea {
    font: inherit;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    padding: 10px 13px;
    min-height: 44px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    background: var(--surface-2);
    color: var(--text);
    font-size: 0.9375rem;
    transition: border-color 0.15s, box-shadow 0.15s;
    outline: none;
}
input[type="checkbox"], input[type="radio"] { width: auto; min-height: 0; }

/* Поля даты и времени в Safari на iOS не сжимаются под контейнер и распирают вёрстку:
   у них своя внутренняя ширина, которую снимает только сброс appearance. */
input[type="date"], input[type="time"], input[type="datetime-local"] {
    -webkit-appearance: none;
    appearance: none;
    display: block;
    text-align: left;
}
input[type="date"]::-webkit-date-and-time-value,
input[type="time"]::-webkit-date-and-time-value,
input[type="datetime-local"]::-webkit-date-and-time-value {
    text-align: left;
    min-width: 0;
    margin: 0;
}
input::-webkit-datetime-edit { padding: 0; }
input::-webkit-datetime-edit-fields-wrapper { padding: 0; }
input::-webkit-calendar-picker-indicator { margin-left: auto; flex-shrink: 0; }

select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 36px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    cursor: pointer;
}

input:focus, select:focus, textarea:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}

textarea { min-height: 96px; resize: vertical; }

.form-row {
    display: grid;
    gap: 14px;
    grid-template-columns: 1fr;
    align-items: end;
}
.form-group { display: flex; flex-direction: column; min-width: 0; }
.form-row > * { min-width: 0; }
.form-hint { font-size: 0.78rem; color: var(--text-muted); margin-top: 5px; }

.check-row {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 0.9rem;
}
label.check-row, .check-row label {
    margin: 0;
    text-transform: none;
    letter-spacing: 0;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text);
}

@media (min-width: 640px) {
    .form-row { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
}

/* ===== ТАБЛИЦЫ ===== */
.table-wrap { overflow-x: auto; }

table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }

thead { background: var(--surface-2); border-bottom: 1px solid var(--border); }

th {
    padding: 11px 16px;
    text-align: left;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    white-space: nowrap;
}

td { padding: 12px 16px; border-bottom: 1px solid var(--border-soft); vertical-align: middle; }
tr:last-child td { border-bottom: none; }
tbody tr { transition: background 0.1s; }
tbody tr:hover { background: var(--surface-2); }

.mono, .td-id {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}
.td-id a { color: var(--accent); font-weight: 500; }
.td-id a:hover { text-decoration: underline; }
.num { font-variant-numeric: tabular-nums; }

/* ===== БЕЙДЖИ И ЧИПЫ ===== */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border-radius: 999px;
    padding: 3px 10px;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
}
.badge .ic { width: 0.92em; height: 0.92em; stroke-width: 2.4; }
.badge:not(.has-icon)::before {
    content: '';
    width: 6px; height: 6px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}
.badge.planned   { background: var(--s-planned-bg);   color: var(--s-planned-text); }
.badge.confirmed { background: var(--s-confirmed-bg); color: var(--s-confirmed-text); }
.badge.cancelled { background: var(--s-cancelled-bg); color: var(--s-cancelled-text); }
.badge.warn      { background: var(--s-warn-bg);      color: var(--s-warn-text); }
.badge.error     { background: var(--s-error-bg);     color: var(--s-error-text); }
.badge.unknown   { background: var(--s-cancelled-bg); color: var(--s-cancelled-text); }

.chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 11px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    background: var(--surface-2);
    border: 1px solid var(--border);
    color: var(--text-muted);
}
.chip .ic { width: 0.95em; height: 0.95em; color: var(--accent); }
.chip .dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }

/* ===== ПАГИНАЦИЯ ===== */
.pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 18px;
    border-top: 1px solid var(--border);
    flex-wrap: wrap;
}
.pagination-info { font-size: 0.85rem; color: var(--text-muted); }
.pagination-controls { display: flex; align-items: center; gap: 4px; }

.page-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 38px;
    padding: 0 10px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    font: inherit;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s;
}
.page-btn .ic { width: 16px; height: 16px; }
.page-btn:hover:not(:disabled):not(.active) { background: var(--surface-2); border-color: var(--accent); color: var(--accent); }
.page-btn.active { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 700; }
.page-btn:disabled, .page-btn.disabled { opacity: 0.4; cursor: not-allowed; pointer-events: none; }

/* ===== ПУСТОЕ СОСТОЯНИЕ ===== */
.empty-state { text-align: center; padding: 48px 20px; color: var(--text-muted); }
.empty-state-icon { display: inline-flex; color: var(--text-muted); opacity: 0.55; margin-bottom: 14px; }
.empty-state-icon .ic { width: 42px; height: 42px; stroke-width: 1.5; }
.empty-state-title { font-size: 1rem; font-weight: 600; color: var(--text); margin: 0 0 6px; }
.empty-state-desc { font-size: 0.875rem; margin: 0 0 16px; }

/* ===== ПАРЫ КЛЮЧ–ЗНАЧЕНИЕ ===== */
.kv-grid { display: grid; gap: 10px; }
.kv-item {
    padding: 12px 16px;
    border-radius: var(--radius-md);
    background: var(--surface-2);
    border: 1px solid var(--border);
}
.kv-label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--text-muted);
    margin-bottom: 4px;
}
.kv-value { font-size: 0.9375rem; word-break: break-word; }

/* ===== КОД ===== */
pre {
    margin: 0;
    white-space: pre-wrap;
    word-break: break-word;
    background: var(--surface-2);
    padding: 14px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    font-family: var(--font-mono);
    font-size: 0.82rem;
    color: var(--text);
}
code { font-family: var(--font-mono); }

/* ===== СООБЩЕНИЯ ===== */
.alert {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 16px;
    border-radius: var(--radius-md);
    font-size: 0.9rem;
    border-left: 4px solid;
}
.alert .ic { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; }
.alert-error   { background: var(--s-error-bg);   color: var(--s-error-text);   border-color: var(--s-error-text); }
.alert-success { background: var(--s-confirmed-bg); color: var(--s-confirmed-text); border-color: var(--s-confirmed-text); }
.alert-warn    { background: var(--s-warn-bg);    color: var(--s-warn-text);    border-color: var(--s-warn-text); }
.alert-info    { background: var(--accent-soft);  color: var(--accent-text);    border-color: var(--accent); }

/* ===== ПРОЧЕЕ ===== */
.section-title { font-size: 0.9375rem; font-weight: 700; margin: 0 0 14px; }
.divider { height: 1px; background: var(--border); margin: 20px 0; }
.two-col { display: grid; grid-template-columns: 1fr; gap: 16px; }
.muted { color: var(--text-muted); }
.text-right { text-align: right; }

@media (min-width: 900px) {
    .two-col { grid-template-columns: 1fr 1fr; gap: 20px; }
}

/* ===== ПАНЕЛЬ ФИЛЬТРОВ ===== */
.filters-bar {
    padding: 16px 18px;
    border-bottom: 1px solid var(--border);
    background: var(--surface);
}
.filters-title {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    margin: 0 0 12px;
}

/* ===== QR-КОД =====
   Модули QR перекрашиваются под тему: CSS сильнее presentation-атрибута fill. */
.qr { display: inline-block; max-width: 220px; color: var(--text); }
.qr svg { width: 100%; height: auto; }
.qr svg path, .qr svg rect { fill: currentColor; }

/* ===== ДИАЛОГ ===== */
dialog {
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    background: var(--surface);
    color: var(--text);
    padding: 0;
    width: min(520px, calc(100vw - 24px));
    box-shadow: var(--shadow-lg);
}
dialog::backdrop { background: rgba(8,10,16,0.55); }
.dialog-header {
    padding: 16px 18px;
    border-bottom: 1px solid var(--border);
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.dialog-body { padding: 18px; display: grid; gap: 14px; }
.dialog-footer {
    padding: 14px 18px;
    border-top: 1px solid var(--border);
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    flex-wrap: wrap;
}