/* Sign-in, access request, password reset, and the admin panel.
 *
 * Standalone rather than an addition to map.css, which sets
 * `html, body { overflow: hidden }` for the map shell - correct there, and
 * wrong for every page here, all of which scroll. Colours and type come from
 * tokens.css. */

* { box-sizing: border-box; }

html, body {
  margin: 0;
  min-height: 100%;
  background: var(--bg);
  color: var(--text);
  font: var(--fs-body)/1.5 var(--font-ui);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

.muted { color: var(--muted); }
.small { font-size: 12px; }

/* ------------------------------------------------------------ centred pages */

.auth-shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px 16px 48px;
}

.auth-shell {
  background:
    radial-gradient(900px 520px at 50% -10%, rgba(51, 79, 102, .28), transparent 65%),
    radial-gradient(600px 300px at 50% 110%, rgba(155, 230, 0, .05), transparent 70%);
}

.auth-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-panel);
  padding: 28px 28px 22px;
  width: 100%;
  max-width: 430px;
  box-shadow: var(--inset-hi), 0 24px 70px rgba(0, 0, 0, .55);
}

/* The access-request form has nine fields and reads better in two columns on
   anything wider than a phone. */
.auth-card.wide { max-width: 620px; }

.brand {
  text-align: center;
  margin-bottom: 22px;
}

.brand .mark {
  display: inline-block;
  color: var(--text);
}
.brand .mark .pfb { --pfb-h: 26px; margin: 0 auto; }
.brand .mark:hover { text-decoration: none; }

.brand .sub {
  color: var(--muted);
  font-size: var(--fs-micro);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-micro);
  margin-top: 10px;
}

.auth-card h1 {
  font-size: 17px;
  margin: 0 0 6px;
}

.auth-card .lede {
  color: var(--muted);
  font-size: 12.5px;
  margin: 0 0 18px;
}

/* ------------------------------------------------------------------- fields */

.field { margin-bottom: 13px; }

.field label {
  display: block;
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 5px;
}

.field label .req { color: var(--warn); }

/* A tick box and its explanation on one line. Overrides the block label and the
   full-width input above, both of which are for text fields and turn a checkbox
   into a stretched grey bar. */
.field label.check {
  display: flex;
  gap: 8px;
  align-items: baseline;
  margin: 0 0 7px;
  color: var(--text);
  cursor: pointer;
}

.field label.check input[type="checkbox"] {
  width: auto;
  flex: none;
  margin: 0;
}

.field input,
.field textarea,
.field select {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-ctl);
  color: var(--text);
  padding: 9px 11px;
  font: inherit;
  transition: border-color var(--t-fast) ease, box-shadow var(--t-fast) ease;
}

.field input:hover,
.field textarea:hover,
.field select:hover { border-color: var(--slate); }

.field textarea { resize: vertical; min-height: 74px; }

.field input:focus,
.field textarea:focus,
.field select:focus {
  outline: none;
  border-color: var(--lime-line);
  box-shadow: 0 0 0 3px var(--lime-wash);
}

.field .hint {
  color: var(--muted);
  font-size: 11.5px;
  margin-top: 5px;
}

.field-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 14px;
}

@media (max-width: 560px) {
  .field-pair { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------------ buttons */

/* Three tiers, as in the application: .btn is secondary, .btn-primary solid
   white, .btn-danger red text. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-radius: var(--r-ctl);
  padding: 9px 15px;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid var(--line);
  background: var(--panel-2);
  color: var(--text);
  box-shadow: var(--inset-hi);
  transition: background var(--t-fast) ease, border-color var(--t-fast) ease, color var(--t-fast) ease;
}
.btn .pfi { color: var(--text-2); }

.btn:hover:not(:disabled) { border-color: var(--slate-hi); background: var(--slate-wash); text-decoration: none; }
.btn:disabled { opacity: .55; cursor: default; }

.btn-primary {
  background: var(--btn);
  border-color: var(--btn);
  color: var(--btn-ink);
  font-weight: 600;
  box-shadow: var(--btn-shadow);
}

.btn-primary:hover:not(:disabled) { background: var(--btn-hi); border-color: var(--btn-hi); color: var(--btn-ink); }

.btn-danger { color: var(--error); }
.btn-danger:hover:not(:disabled) { border-color: var(--error); background: var(--error-wash); }

.btn-sm { padding: 4px 9px; font-size: 11.5px; }

.btn-block { width: 100%; display: flex; }

.actions {
  display: flex;
  gap: 9px;
  align-items: center;
  margin-top: 18px;
}

.actions.end { justify-content: flex-end; }

/* ------------------------------------------------------------------ notices */

.notice {
  border-radius: var(--r-ctl);
  padding: 10px 12px;
  font-size: 12.5px;
  margin-bottom: 15px;
  border: 1px solid var(--line);
  background: var(--panel-2);
}

.notice.err   { border-color: rgba(255,107,94,.5); color: var(--error); background: var(--error-wash); }
.notice.ok    { border-color: var(--lime-line); color: var(--lime); background: var(--lime-wash); }
.notice.warn  { border-color: rgba(242,184,75,.5); color: var(--warn); background: var(--warn-wash); }
.notice[hidden] { display: none; }

.auth-links {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-size: 12.5px;
  color: var(--muted);
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

/* ------------------------------------------------------------- admin layout */

body.admin { overflow-y: auto; }

.admin-shell {
  max-width: 1240px;
  margin: 0 auto;
  padding: 22px 20px 60px;
}

.admin-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--line);
  padding-bottom: 14px;
  margin-bottom: 20px;
}

.admin-head h1 { font-size: var(--fs-h2); margin: 0; display: flex; align-items: center; gap: 12px; }
.admin-head h1 .pfb { --pfb-h: 20px; color: var(--text); }
.admin-head h1 .sep { width: 1px; height: 18px; background: var(--line); }
.admin-head .who { color: var(--muted); font-size: 12.5px; }

/* The same underlined strip as the application's tabs. */
.admin-tabs {
  display: flex;
  gap: 2px;
  flex-wrap: wrap;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--line);
}

.admin-tabs button {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: none;
  border: 0;
  color: var(--muted);
  border-radius: var(--r-ctl) var(--r-ctl) 0 0;
  padding: 8px 11px 9px;
  font: inherit;
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
}
.admin-tabs button:hover { color: var(--text); background: var(--highlight); }

.admin-tabs button.active { color: var(--text); }
.admin-tabs button.active::after {
  content: "";
  position: absolute;
  left: 9px;
  right: 9px;
  bottom: -1px;
  height: 2px;
  border-radius: 2px;
  background: var(--lime);
  box-shadow: 0 0 8px var(--lime-glow);
}

.admin-tabs .count {
  display: inline-block;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 0 5px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  line-height: 16px;
  color: var(--muted);
}

.admin-tabs button.active .count { color: var(--lime); border-color: var(--lime-line); }

.toolbar {
  display: flex;
  gap: 9px;
  align-items: center;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

/* An author `display` rule beats the user-agent rule the hidden attribute
   relies on, so hiding a .toolbar in script did nothing: the account search
   box has been sitting above the activity log all along. Spelled out here for
   the same reason .notice[hidden] and .modal-backdrop[hidden] already are. */
.toolbar[hidden] { display: none; }

.toolbar input[type=search] {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-ctl);
  color: var(--text);
  padding: 7px 11px;
  font: inherit;
  font-size: 13px;
  min-width: 240px;
}

/* ------------------------------------------------------------- queue cards */

.section-title {
  font-size: var(--fs-micro);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-micro);
  color: var(--text-2);
  margin: 26px 0 12px;
}

.queue { display: grid; gap: 12px; }

.queue-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: 2px solid var(--warn);
  border-radius: var(--r-panel);
  box-shadow: var(--inset-hi);
  padding: 15px 17px;
}

.queue-card h3 {
  margin: 0 0 3px;
  font-size: 14.5px;
}

.queue-card .meta {
  color: var(--muted);
  font-size: 12.5px;
  margin-bottom: 10px;
}

.queue-card .said {
  background: var(--panel-2);
  border-radius: 6px;
  padding: 9px 11px;
  font-size: 12.5px;
  margin: 10px 0;
  white-space: pre-wrap;
  border: 1px solid var(--line);
}

.queue-card .row-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 12px;
}

.kv {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 3px 14px;
  font-size: 12.5px;
}

.kv dt { color: var(--muted); }
.kv dd { margin: 0; word-break: break-word; }

/* -------------------------------------------------------------- user table */

.table-wrap {
  border: 1px solid var(--line);
  border-radius: var(--r-panel);
  overflow: hidden;
  background: var(--panel);
}

table.users {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}

table.users th {
  text-align: left;
  padding: 9px 12px;
  background: var(--panel-2);
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-micro);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-micro);
  color: var(--muted);
  white-space: nowrap;
}

table.users td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}

table.users tr:last-child td { border-bottom: none; }
table.users tr:hover td { background: var(--highlight); }

table.users .name { font-weight: 550; }
table.users .sub { color: var(--muted); font-size: 11.5px; }
table.users .nowrap { white-space: nowrap; }

table.users select {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  color: var(--text);
  padding: 3px 6px;
  font: inherit;
  font-size: 11.5px;
}

.cell-actions { display: flex; gap: 6px; flex-wrap: wrap; }

/* ------------------------------------------------------------------ badges */

.badge {
  display: inline-block;
  border-radius: var(--r-sm);
  padding: 0 7px;
  font-size: 10.5px;
  font-weight: 600;
  line-height: 18px;
  text-transform: uppercase;
  letter-spacing: .06em;
  border: 1px solid var(--line);
  white-space: nowrap;
}

.badge.approved  { color: var(--lime);   border-color: var(--lime-line); }
.badge.pending   { color: var(--warn);   border-color: rgba(242,184,75,.45); }
.badge.rejected  { color: var(--error);  border-color: rgba(255,107,94,.4); }
.badge.suspended { color: var(--error);  border-color: rgba(255,107,94,.4); }
.badge.locked    { color: var(--warn);   border-color: rgba(242,184,75,.45); }
.badge.admin     { color: var(--accent); border-color: rgba(127,178,220,.45); }

/* ------------------------------------------------------------------ events */

table.events { width: 100%; border-collapse: collapse; font-size: 12px; }
table.events th, table.events td {
  text-align: left;
  padding: 7px 12px;
  border-bottom: 1px solid var(--line);
}
table.events th { background: var(--panel-2); color: var(--muted); font-size: var(--fs-micro); font-weight: 600; text-transform: uppercase; letter-spacing: var(--tracking-micro); }
table.events .detail {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 11px;
  word-break: break-word;
}

/* ------------------------------------------------------------------- modal */

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(6, 9, 14, .72);
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.modal-backdrop[hidden] { display: none; }

.modal {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-panel);
  padding: 21px;
  width: 520px;
  max-width: 100%;
  max-height: calc(100vh - 60px);
  overflow-y: auto;
  box-shadow: var(--inset-hi), 0 22px 64px rgba(0, 0, 0, .6);
}

.modal h2 { margin: 0 0 6px; font-size: 15.5px; }
.modal .lede { color: var(--muted); font-size: 12.5px; margin: 0 0 15px; }

/* A generated reset link, shown so it can be copied when mail is not
   configured or is not arriving. Selectable and wrapped, because the whole
   point is that somebody reads it off the screen. */
.copy-box {
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 10px 11px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  word-break: break-all;
  user-select: all;
}

.empty {
  color: var(--muted);
  font-size: 13px;
  padding: 26px 12px;
  text-align: center;
}

.spinner { color: var(--muted); font-size: 12.5px; padding: 14px 0; }