/* form.css — the write forms: the unban reason form (src/shared/components/unban-form.php), the
 * unban pick form (unban-pick-form.php), the ban form (ban-form.php), the small inline POST
 * forms in a table cell (/admins, /settings). Radio groups, hints, the .field grid. Loaded on
 * every page after base.css. */

/* unban: the confirmation form (the page /unban and the unban dialog); the table button is
   .button.small above */
.reason-form { display: flex; align-items: center; flex-wrap: wrap; margin: 0 0 var(--s3); }
.reason-form label { margin-right: var(--s2); }
.reason-form input[type=text] { flex: 1 1 320px; margin-right: var(--s2); }
.reason-form .button { margin-right: var(--s2); }

/* the unban pick form (1.9.0, the unban-pick dialog and /unban?steamid64=): the active bans
   in two small tables, "Permanent" and "Temporary", one radio per row in the .radio column
   (28 px like the selection column, but never hidden — the choice IS the form), the picked
   row on --selected-bg (:has, where the engine knows it; the radio itself says it everywhere),
   then the reason line of the single-ban form */
.pick-head { font-size: var(--fs-12); line-height: var(--lh-12); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin: var(--s3) 0 var(--s1); }
.pick-form .table-wrap { margin: 0 0 var(--s2); }
.pick-form .empty { margin: 0 0 var(--s2); }
table.pick th.radio, table.pick td.radio { width: 28px; padding-left: 7px; padding-right: 7px; text-align: center; }
table.pick td.radio input { margin: 0; vertical-align: middle; cursor: pointer; }
table.pick tbody tr { cursor: pointer; }
table.pick td label { font-weight: 400; cursor: pointer; }
table.pick tbody tr:has(input[type=radio]:checked) td { background: var(--selected-bg); }
.pick-form .reason-form { margin-top: var(--s3); }

/* the ban form (1.7.0, /ban and the ban dialog of the player page): one .field per row — the
   label left in a 128 px column, the control full width beside it; on a narrow dialog or
   window the label moves above the control. Radio groups run inline. A .hint under a control
   is meta (12 px, muted). Fields with data-when are hidden by app.js while they do not apply
   (a permanent ban has no duration; the custom time only for "custom"; the server id only for
   scope=server) — [hidden] has to beat the grid display below, so it is said again here.
   Without scripts every field is visible and the page ignores what does not apply. */
.ban-form .field { margin: 0 0 var(--s3); }
.ban-form .field[hidden] { display: none; }
.ban-form .field > label, .ban-form .field > .label { display: block; font-weight: 600; margin: 0 0 var(--s1); }
.ban-form .field > div { min-width: 0; }
.ban-form input[type=text], .ban-form input[type=url], .ban-form input[type=datetime-local], .ban-form select, .ban-form textarea { width: 100%; }
.ban-form .radios label { font-weight: 400; margin-right: var(--s4); white-space: nowrap; }
.ban-form .radios input { margin: 0 var(--s1) 0 0; vertical-align: -1px; }
.ban-form .hint { display: block; font-size: var(--fs-12); line-height: var(--lh-12); color: var(--muted); margin-top: var(--s1); }
.ban-form .actions .button { margin: 0 var(--s2) var(--s1) 0; }
@supports (display: grid) {
  @media (min-width: 521px) {
    .ban-form .field { display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: 0 var(--s3); align-items: start; }
    .ban-form .field[hidden] { display: none; }
    .ban-form .field > label, .ban-form .field > .label { margin: 0; padding-top: 6px; }
    .ban-form .field > .radios { padding-top: 6px; }
  }
}

/* one small POST form per action in a table cell (/admins since 1.5.0, the "forget" buttons of /settings since 1.11.0) */
form.inline { display: inline-block; margin: 0 var(--s1) 0 0; }
form.inline button.small { padding: 1px var(--s2); font-size: var(--fs-12); line-height: var(--lh-12); }
table.data td.actions { white-space: nowrap; }