/* admin screens. Base styles live in ../style.css */
.tabs { display: flex; gap: 8px; margin-bottom: 14px; }
.tabs .tab {
  flex: 1; background: var(--card); color: var(--text); border: 1px solid var(--border);
  padding: 12px 8px; font-size: 16px;
}
.tabs .tab.on { background: var(--accent); color: #fff; border-color: var(--accent); }
.tabs .count { font-weight: 400; opacity: .8; font-size: 13px; }

.admin-list { padding: 4px 16px; }
.arow { display: flex; gap: 10px; align-items: center; padding: 12px 0; border-top: 1px solid var(--border); }
.arow:first-child { border-top: none; }
.arow .info { flex: 1; min-width: 0; }
.arow .title { font-weight: 700; font-size: 16px; }
.arow .actions { display: flex; flex-direction: column; gap: 6px; align-items: stretch; flex: none; }
.arow .actions select { padding: 8px; font-size: 14px; width: auto; max-width: 150px; }
.arow .picker { margin-top: 10px; padding: 10px; background: var(--bg); border-radius: 10px; }
.arow .picker label { margin-bottom: 8px; }

.party-admin .members { display: flex; flex-direction: column; gap: 6px; margin: 10px 0; }
.party-admin .member { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-top: 1px solid var(--border); }
.party-admin .member .mname { flex: 1; font-weight: 600; }
.party-admin .tools { flex-wrap: nowrap; margin-top: 8px; }
.party-admin .tools input, .party-admin .tools select { flex: 1; min-width: 0; padding: 8px; }
.party-admin .tools button { flex: none; }

/* Five tabs must fit a phone: shrink a little and scroll sideways if they still do not fit. */
.tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tabs .tab { flex: 1 0 auto; padding: 12px 6px; white-space: nowrap; }
@media (max-width: 440px) { .tabs { gap: 5px; } .tabs .tab { font-size: 14px; padding: 11px 5px; } .tabs .count { font-size: 12px; } }
.tabs .tab.alert:not(.on) { border-color: #d32f2f; color: #b71c1c; }
.tabs .tab.alert .count { background: #d32f2f; color: #fff; opacity: 1; font-weight: 700; border-radius: 999px; padding: 0 6px; }

/* Admin → Help */
.help-row .title { font-size: 17px; }
.help-row .help-msg { margin: 4px 0; font-size: 15px; overflow-wrap: anywhere; }
.help-row .actions button { min-width: 84px; min-height: 44px; }
.help-row.help-done { opacity: .55; }
.help-row.help-done .title { font-weight: 600; }

/* Help banner (events.js) – admin phones only */
.event-banner.help { background: #ffcdd2; border-color: #d32f2f; color: #4a0d0d; animation: help-pulse 1.4s ease-in-out infinite; }
@keyframes help-pulse { 0%, 100% { background: #ffcdd2; } 50% { background: #ffe5e7; } }
@media (prefers-reduced-motion: reduce) { .event-banner.help { animation: none; } }

/* #/codes – printable location codes */
.codes-tools .row { flex-wrap: wrap; gap: 8px; }
.code-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.code-card {
  background: #fff; color: #1f2430; border: 2px solid var(--border); border-radius: 14px;
  padding: 14px 12px; text-align: center; break-inside: avoid; page-break-inside: avoid;
}
.code-head { display: flex; align-items: center; justify-content: center; gap: 8px; }
.code-dot { width: 16px; height: 16px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.35); flex: none; }
.code-name { font-weight: 800; font-size: 18px; }
.code-kind { color: #5b6270; margin: 2px 0 8px; text-transform: uppercase; letter-spacing: .05em; }
.code-qr { display: block; width: 180px; height: 180px; margin: 0 auto 8px; image-rendering: pixelated; background: #fff; }
.code-link { font-size: 11px; color: #5b6270; overflow-wrap: anywhere; font-family: ui-monospace, Menlo, Consolas, monospace; }

@media print {
  body.codes-page header.sticky,
  body.codes-page .no-print,
  body.codes-page .toast,
  body.codes-page .modal-backdrop { display: none !important; }
  body.codes-page, body.codes-page main { background: #fff !important; padding: 0 !important; margin: 0 !important; }
  body.codes-page .code-grid { grid-template-columns: repeat(3, 1fr); gap: 10px; }
  body.codes-page .code-card { border-color: #999; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}