/* /opt/skynet-portal/app/static/css/admin-users.css */
/* v0.3.2 — модалка формы 980px + сетка 3 колонки; textarea комментария ниже */
/* 30.07.2026: v0.3.1 модалка пароля 520px; v0.3.0 форм-кит из эталона stock_form */

/* ===== Фильтры ===== */
.bl-filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--sp-3); margin-bottom: var(--sp-5); }
.filter-field { display: flex; flex-direction: column; gap: var(--sp-1); }
.filter-field.grow { flex: 1 1 220px; }
.filter-label { font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.04em; }
.filter-actions { display: flex; gap: var(--sp-2); }

/* ===== Бейджи ролей ===== */
.role-badge { font-size: var(--fs-xs); padding: 2px var(--sp-2); border-radius: var(--radius-sm); background: var(--bg-surface-2); color: var(--text-secondary); white-space: nowrap; }
.role-superadmin, .role-admin { background: rgba(168,85,247,0.14); color: #a855f7; }
.role-director, .role-head_manager { background: rgba(59,130,246,0.12); color: #3b82f6; }
.role-manager, .role-operator { background: rgba(14,165,183,0.12); color: var(--accent); }
.role-technician, .role-technician_assistant { background: rgba(234,179,8,0.14); color: #d97706; }
.role-inspector { background: rgba(34,197,94,0.12); color: var(--success-text); }
.role-accountant { background: rgba(236,72,153,0.12); color: #ec4899; }

/* ===== Ячейки ===== */
.uname { font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--text-secondary); }
.uid-link { font-family: var(--font-mono); font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--accent); }
.uid-link:hover { text-decoration: underline; }
.uid-portal { font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--text-muted); }
.ll-d { color: var(--text-secondary); font-family: var(--font-mono); font-size: var(--fs-sm); }
.ll-t { color: var(--text-muted); font-family: var(--font-mono); font-size: var(--fs-xs); margin-left: 4px; }

/* ===== Заголовки-сортировки ===== */
.th-sort { display: inline-flex; align-items: center; gap: 4px; color: inherit; white-space: nowrap; cursor: pointer; }
.th-sort:hover { color: var(--text-primary); }
.th-sort svg { width: 12px; height: 12px; flex: 0 0 auto; }
.th-sort .sort-dim { opacity: 0.25; transition: opacity var(--transition-fast); }
.th-sort:hover .sort-dim { opacity: 0.7; }
.th-sort .sort-on { color: var(--accent); }

/* ===== Таблица: sticky-шапка + зебра ===== */
.au-table thead th { position: sticky; top: 0; z-index: 2; background: color-mix(in srgb, var(--bg-surface) 94%, transparent); backdrop-filter: blur(8px); }
.bl-table-wrap tbody tr:nth-child(even) { background: color-mix(in srgb, var(--bg-surface-2) 45%, transparent); }

/* ===== Кнопки-иконки действий ===== */
.icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: var(--radius-md); border: var(--border-thin) solid var(--border-default); background: var(--bg-surface); color: var(--text-secondary); transition: all var(--transition-fast); cursor: pointer; }
.icon-btn:hover { border-color: var(--border-accent); color: var(--accent); }
.icon-btn.act-danger:hover { border-color: rgba(239,68,68,0.5); color: var(--danger-text); }
.icon-btn.act-success:hover { border-color: rgba(34,197,94,0.5); color: var(--success-text); }
.icon-btn.full { width: 100%; }
.icon-btn svg { width: 16px; height: 16px; }
.act-row { display: flex; gap: var(--sp-2); }
.inline-form { display: inline; }

/* ===== Пустое состояние ===== */
.empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: var(--sp-16) var(--sp-6); text-align: center; }
.empty-state-icon { display: flex; align-items: center; justify-content: center; width: 72px; height: 72px; border-radius: var(--radius-2xl); background: var(--bg-surface-2); color: var(--text-muted); margin-bottom: var(--sp-5); }
.empty-state-icon svg { width: 36px; height: 36px; }
.empty-state-title { font-size: var(--fs-lg); font-weight: var(--fw-semibold); color: var(--text-secondary); }

/* ===== Мобильные карточки ===== */
.bl-cards { display: none; }
.bl-card { background: var(--bg-surface); border: var(--border-thin) solid var(--border-default); border-radius: var(--radius-xl); box-shadow: var(--shadow-card); padding: var(--sp-4); margin-bottom: var(--sp-3); }
.bl-card-top { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-1); }
.bl-card-name { font-weight: var(--fw-semibold); color: var(--accent); font-size: var(--fs-md); }
.bl-card-row { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); padding: var(--sp-2) 0; border-top: var(--border-thin) solid var(--border-subtle); font-size: var(--fs-sm); }
.bl-card-row-first { margin-top: var(--sp-2); }
.bl-card-row .lbl { color: var(--text-tertiary); }
.bl-card-actions { display: flex; gap: var(--sp-2); padding-top: var(--sp-3); border-top: var(--border-thin) solid var(--border-subtle); }
.bl-card-actions .icon-btn { flex: 1; height: 42px; }
.bl-card-actions .inline-form.grow { flex: 1; display: flex; }
@media (max-width: 767px) {
  .bl-table-wrap { display: none; }
  .bl-cards { display: block; }
}

/* ===== Модалка «Նոր գաղտնաբառ» — компактная (одно поле, не 1080px) ===== */
#appModalWindow:has(.pwm2-row) { width: min(520px, 94vw); }
.pwm2-user { font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--accent); margin-bottom: var(--sp-4); }
.pwm2-row { display: flex; gap: var(--sp-2); }
.pwm2-row .input { flex: 1; font-family: var(--font-mono); font-size: var(--fs-lg); letter-spacing: 0.06em; text-align: center; }
.pwm2-row .icon-btn { width: 40px; height: 40px; flex: 0 0 auto; }
.pwm2-hint { font-size: var(--fs-xs); color: var(--text-muted); margin-top: var(--sp-2); }
.pwm2-foot { display: flex; justify-content: flex-end; gap: var(--sp-2); margin-top: var(--sp-5); }

/* ===== Форм-кит проекта (значения 1:1 с эталоном inventory/stock_form) ===== */
.form-wrap { max-width: 720px; }
.form-section { background: var(--bg-surface); border: var(--border-thin) solid var(--border-default); border-radius: var(--radius-xl); box-shadow: var(--shadow-card); margin-bottom: var(--sp-5); overflow: hidden; }
.form-section-head { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-4) var(--sp-6); border-bottom: var(--border-thin) solid var(--border-subtle); background: var(--bg-surface-2); }
.form-section-head svg { width: 18px; height: 18px; color: var(--accent); }
.form-section-title { font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--text-primary); text-transform: uppercase; letter-spacing: 0.04em; }
.form-section-body { padding: var(--sp-6); }
.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-5); }
.form-col-full { grid-column: 1 / -1; }
@media (max-width: 639px) { .form-grid { grid-template-columns: 1fr; } }
.form-field { display: flex; flex-direction: column; gap: var(--sp-2); }
.form-label { font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.04em; }
.form-label .req { color: var(--danger-text); margin-left: 2px; }
.form-hint { font-size: var(--fs-xs); color: var(--text-muted); }
.form-actions { display: flex; align-items: center; justify-content: flex-end; gap: var(--sp-3); padding: var(--sp-5) 0 var(--sp-10); }

/* ===== Спец-хвосты формы сотрудника ===== */
.uf-errors { margin-bottom: var(--sp-4); padding: var(--sp-3) var(--sp-4); border-radius: var(--radius-lg); border: var(--border-thin) solid var(--danger-text); background: rgba(239,68,68,0.10); }
.uf-errors ul { margin: 0; padding-left: var(--sp-5); }
.uf-errors li { color: var(--danger-text); font-size: var(--fs-sm); }
.form-field.uf-hidden { display: none; }
.form-section.uf-reset { border-left: 3px solid var(--warning-text); }

/* ===== Модалка формы сотрудника: ШИРОКАЯ 980px, сетка 3 колонки ===== */
#appModalWindow:has(.uf-form) { width: min(980px, 96vw); }
.modal-body .form-wrap { max-width: none; }
.modal-body .uf-form .form-grid { grid-template-columns: repeat(3, 1fr); }
.modal-body .uf-form .form-col-full { grid-column: 1 / -1; }
.modal-body .uf-form .textarea { min-height: 64px; }
.modal-body .form-actions { padding: var(--sp-2) 0 var(--sp-1); }
@media (max-width: 900px) { .modal-body .uf-form .form-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .modal-body .uf-form .form-grid { grid-template-columns: 1fr; } }