/* Club registration portal (prijave.skjavornik.si). Tokens and components come from tokens.css;
   only the portal's own layout lives here. */

#main { padding-top: 24px; padding-bottom: 32px; }
.topbar-status #account-name { color: var(--on-blue); }
/* tokens.css gives buttons and the bar a display, which would beat the hidden attribute. */
[hidden] { display: none !important; }

/* Sign-in */
.login { max-width: 420px; margin: 32px auto; }
.login .card-body { padding: 24px; display: grid; gap: 14px; }
.login .btn.primary { width: 100%; }
.login-note { color: var(--muted); font-size: .9rem; margin: 0; }

/* Competition list */
.comp-row { display: flex; align-items: center; gap: 16px; padding: 14px 24px; border-bottom: 1px solid var(--surface-2); color: var(--text); text-decoration: none; flex-wrap: wrap; }
.comp-row:last-child { border-bottom: 0; }
.comp-row:hover { background: var(--row-hover); }
.comp-main { flex: 1 1 260px; min-width: 0; }
.comp-name { font-weight: 600; font-size: 1.05rem; }
.comp-meta { color: var(--muted); font-size: .88rem; margin-top: 2px; }
.comp-count { color: var(--muted); font-size: .88rem; white-space: nowrap; }

/* One competition: the form beside the club's entries (form on top on a phone) */
.portal-grid { display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: 24px; align-items: start; }
.portal-grid > * { min-width: 0; }
.card-body { padding: 20px 24px; }
.entry-form { display: grid; gap: 12px; }
.entry-form .two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.entry-form .actions { display: flex; gap: 8px; flex-wrap: wrap; }
.entry-form .actions .btn.primary { flex: 1 1 auto; }
.field .hint.pick { color: var(--blue-dark); font-weight: 500; }
.segmented.gender button { min-height: 42px; flex: 1; }
.segmented.gender { display: flex; }
.form-error { color: var(--red); font-size: .9rem; margin: 0; }
.club-note { margin: 0; font-size: .9rem; }
/* tokens.css styles text/number/password inputs; the address field looks the same. */
input[type="email"] { width: 100%; min-height: 42px; padding: 8px 12px; background: var(--surface); border: 1px solid var(--line-input); border-radius: 8px; color: var(--text); font: inherit; }
input[type="email"]:disabled { background: var(--bg); color: var(--muted); }
.mail-note { margin: 0 4px; font-size: .88rem; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.mail-note p { flex: 1 1 260px; }
.closed-note { margin: 0 0 16px; }
.earlier { max-height: 360px; overflow-y: auto; }
.earlier-row { display: flex; align-items: center; gap: 10px; padding: 8px 24px; border-bottom: 1px solid var(--surface-2); }
.earlier-row:last-child { border-bottom: 0; }
.earlier-row .who { flex: 1; min-width: 0; }
.earlier-row .who small { display: block; color: var(--faint); font-size: .78rem; }
td.name .club { white-space: normal; }
tr.editing > td { background: var(--current); }
.count { color: var(--muted); font-weight: 400; font-size: .95rem; }

@media (max-width: 900px) {
  .portal-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  #main { padding-top: 16px; }
  .comp-row { padding: 12px 16px; }
  .card-body { padding: 16px; }
  .earlier-row { padding: 8px 16px; }
  .entries th.hide-sm, .entries td.hide-sm { display: none; }
  /* No sideways scrolling on a phone: text wraps, the two buttons stack. */
  .entries th, .entries td { white-space: normal; padding-left: 6px; padding-right: 6px; }
  .entries td.actions .btn { display: flex; width: 100%; padding: 4px 8px; }
  .entries td.actions .btn + .btn { margin: 6px 0 0; }
  .table-wrap:has(.entries) { overflow-x: clip; }
  .topbar-status { justify-content: flex-end; }
}