/* Admin page (admin.html). Builds on styles.css; the main app's shell locks page scrolling,
   so this page turns normal scrolling back on. */
html, body.admin-body { height: auto; min-height: 100%; overflow: auto; overscroll-behavior: auto; }

.admin-top {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 24px; background: var(--sidebar); color: #fff;
}
.admin-brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 19px; }
.admin-brand img { width: 26px; height: auto; }
.admin-badge {
  font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  background: var(--primary); color: #fff; border-radius: 999px; padding: 2px 9px;
}
.admin-top .btn { background: rgba(255, 255, 255, 0.1); border-color: transparent; color: #fff; text-decoration: none; }
.admin-top .btn:hover { background: rgba(255, 255, 255, 0.18); }

.admin-main { max-width: 1000px; margin: 0 auto; padding: 28px 24px 60px; }
.admin-card { max-width: 380px; margin: 40px auto; }
.admin-login { display: flex; flex-direction: column; gap: 14px; padding: 26px; }
.admin-login h1 { margin: 0 0 4px; font-size: 21px; }

.admin-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 14px; flex-wrap: wrap; }
.admin-head h1 { margin: 0; font-size: 26px; }
.admin-head p { margin: 4px 0 0; font-size: 14px; }
#admin-search { max-width: 280px; }

.admin-table-wrap { overflow-x: auto; }
.admin-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.admin-table th {
  text-align: left; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--muted); padding: 10px 14px; border-bottom: 1px solid var(--border); white-space: nowrap;
}
.admin-table td { padding: 10px 14px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.admin-table tbody tr:last-child td { border-bottom: 0; }
.admin-table tbody tr:hover { background: var(--bg); }
.phone-last, .phone-only { display: none; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; }
.you-tag { font-family: system-ui, sans-serif; font-size: 11px; font-weight: 600; color: var(--primary); margin-left: 4px; }
.admin-none { padding: 18px; margin: 0; text-align: center; }

.role-cell { display: flex; align-items: center; gap: 10px; white-space: nowrap; }
.role-select { width: auto; min-width: 118px; padding: 5px 8px; font-weight: 600; font-size: 13px; }
.role-select.role-admin { color: var(--primary); }
.role-select.role-plus { color: #8b5cf6; }
.role-select:disabled { opacity: 0.7; cursor: not-allowed; }
.role-status { font-size: 12px; color: var(--muted); }
.role-status.ok { color: #2fa36b; }
.role-status.bad { color: var(--danger); white-space: normal; }

@media (max-width: 640px) {
  .admin-top { padding: 12px 16px; }
  .admin-main { padding: 20px 16px 48px; }
  #admin-search { max-width: none; width: 100%; }
  /* Phones: one "Name" column (first + last) and no Joined, so Role fits. */
  .admin-table th:nth-child(3), .admin-table td:nth-child(3),
  .admin-table th:nth-child(4), .admin-table td:nth-child(4) { display: none; }
  .phone-last, .phone-only { display: inline; }
  .desk-only { display: none; }
  .role-select { min-width: 0; }
  .admin-table td, .admin-table th { padding: 9px 10px; }
}