/* ═══════════════════════════════════════════════════════════
   admin.css — Spezifisch für admin.html
   ═══════════════════════════════════════════════════════════ */

.admin-grid { display:grid; grid-template-columns:320px 1fr; gap:16px; align-items:start; }
@media(max-width:700px) { .admin-grid { grid-template-columns:1fr; } }

.user-list { display:flex; flex-direction:column; gap:6px; }
.user-item {
  background:#fff; border:1px solid #e8e8e8; border-radius:10px;
  padding:11px 14px; cursor:pointer; transition:border-color 0.15s, box-shadow 0.15s;
  display:flex; align-items:center; gap:10px;
}
.user-item:hover { border-color:#1e3a5f; box-shadow:0 1px 6px rgba(30,58,95,0.08); }
.user-item.selected { border-color:#1e3a5f; background:#f0f5ff; box-shadow:0 0 0 2px rgba(30,58,95,0.12); }

.user-avatar { width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:700; flex-shrink:0; text-transform:uppercase; }
.avatar-admin   { background:#dbeafe; color:#1e40af; }
.avatar-trainer { background:#d1fae5; color:#065f46; }
.avatar-viewer  { background:#f3f4f6; color:#374151; }
.user-info { flex:1; min-width:0; }
.user-name { font-size:13px; font-weight:600; color:#111; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.user-meta { font-size:11px; color:#888; }
.user-badges { display:flex; gap:5px; margin-top:3px; flex-wrap:wrap; }

.role-pill { display:inline-flex; align-items:center; gap:3px; padding:2px 8px; border-radius:20px; font-size:10px; font-weight:600; }
.pill-admin   { background:#dbeafe; color:#1e40af; }
.pill-trainer { background:#d1fae5; color:#065f46; }
.pill-viewer  { background:#f3f4f6; color:#374151; }
.pill-warn    { background:#fef3c7; color:#92400e; }
.pill-page    { background:#ede9fe; color:#5b21b6; }

.panel-card { background:#fff; border:1px solid #e8e8e8; border-radius:12px; overflow:hidden; }
.panel-header { background:#1e3a5f; color:#fff; padding:14px 18px; font-size:14px; font-weight:600; display:flex; align-items:center; gap:8px; }
.panel-body { padding:18px; }

.field-group { margin-bottom:14px; }
.field-label { display:block; font-size:10px; color:#888; font-weight:600; text-transform:uppercase; letter-spacing:0.5px; margin-bottom:5px; }
.field-input { width:100%; padding:9px 12px; border:1px solid #ddd; border-radius:8px; font-size:13px; background:#fff; color:#111; transition:border-color 0.15s; }
.field-input:focus { outline:none; border-color:#1e3a5f; box-shadow:0 0 0 3px rgba(30,58,95,0.08); }
.field-input:disabled { background:#f9f9f9; color:#aaa; }

.role-select-group { display:flex; gap:8px; flex-wrap:wrap; }
.role-card { flex:1; min-width:80px; border:2px solid #e8e8e8; border-radius:10px; padding:10px 8px; text-align:center; cursor:pointer; transition:all 0.15s; background:#fff; }
.role-card:hover { border-color:#aaa; }
.role-card.selected-admin   { border-color:#3b82f6; background:#eff6ff; }
.role-card.selected-trainer { border-color:#10b981; background:#f0fdf4; }
.role-card.selected-viewer  { border-color:#6b7280; background:#f9fafb; }
.role-card-icon  { font-size:22px; margin-bottom:4px; }
.role-card-label { font-size:11px; font-weight:600; color:#333; }
.role-card-desc  { font-size:10px; color:#888; margin-top:2px; line-height:1.3; }

.pages-grid { display:flex; gap:8px; flex-wrap:wrap; margin-top:4px; }
.page-toggle { display:flex; align-items:center; gap:6px; padding:7px 12px; border:1px solid #ddd; border-radius:8px; cursor:pointer; font-size:12px; background:#fff; transition:all 0.15s; user-select:none; }
.page-toggle.on { border-color:#1e3a5f; background:#eff6ff; color:#1e3a5f; font-weight:600; }
.page-toggle input { display:none; }

.info-box { background:#f0f5ff; border:1px solid #c7d9f5; border-radius:8px; padding:10px 12px; font-size:11px; color:#334155; line-height:1.6; margin-bottom:14px; }
.warn-box { background:#fffbeb; border:1px solid #fcd34d; border-radius:8px; padding:10px 12px; font-size:11px; color:#78350f; line-height:1.6; margin-bottom:14px; }

.form-actions { display:flex; gap:8px; justify-content:flex-end; flex-wrap:wrap; margin-top:16px; }
.btn-danger  { background:#fee2e2; color:#991b1b; border-color:#fca5a5; }
.btn-danger:hover { background:#fecaca; }
.btn-success { background:#1e3a5f; color:#fff; border-color:#1e3a5f; }
.btn-success:hover { background:#16304f; }

.toast { position:fixed; bottom:20px; right:20px; z-index:9999; padding:12px 18px; border-radius:10px; font-size:13px; font-weight:500; box-shadow:0 4px 16px rgba(0,0,0,0.15); animation:toastIn 0.25s ease; display:flex; align-items:center; gap:8px; }
.toast-ok  { background:#1D9E75; color:#fff; }
.toast-err { background:#D85A30; color:#fff; }
@keyframes toastIn { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:translateY(0); } }

.section-divider { border:none; border-top:1px solid #f0f0f0; margin:14px 0; }
.empty-state { text-align:center; padding:40px 20px; color:#aaa; }
.empty-state-icon { font-size:36px; margin-bottom:8px; }
.empty-state p { font-size:13px; }

.pw-field-wrap { position:relative; }
.pw-field-wrap .field-input { padding-right:40px; }
.pw-toggle { position:absolute; right:10px; top:50%; transform:translateY(-50%); background:none; border:none; cursor:pointer; font-size:15px; color:#888; padding:4px; }
.pw-toggle:hover { color:#333; }

.list-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.list-title { font-size:13px; font-weight:600; color:#1e3a5f; }
.btn-add { display:flex; align-items:center; gap:5px; padding:6px 12px; background:#1e3a5f; color:#fff; border:none; border-radius:8px; font-size:12px; font-weight:500; cursor:pointer; transition:background 0.15s; }
.btn-add:hover { background:#16304f; }