/* The web app's one stylesheet, written by hand (no CSS framework). Light and dark follow the
   computer's setting through color-scheme and light-dark(). */

:root {
  color-scheme: light dark;
  --text: light-dark(#1d1d1f, #ececec);
  --muted: light-dark(#5f6368, #a0a4a8);
  --background: light-dark(#ffffff, #18191b);
  --surface: light-dark(#f4f5f7, #232528);
  --border: light-dark(#d5d8dc, #3a3d42);
  --accent: light-dark(#1f5fbf, #7aa7f0);
  --accent-text: light-dark(#ffffff, #0d1420);
  --strip: light-dark(#7a3e00, #ffcf8a);
  --strip-background: light-dark(#ffe9c7, #4a2a00);
  --danger: light-dark(#b3261e, #f2b8b5);
  --danger-background: light-dark(#fde7e6, #4a1512);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: system-ui, sans-serif;
  line-height: 1.5;
  color: var(--text);
  background: var(--background);
}

.development-copy-strip {
  padding: 0.25rem 1rem;
  font-size: 0.875rem;
  font-weight: 600;
  text-align: center;
  color: var(--strip);
  background: var(--strip-background);
}

.site-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}

.site-name {
  font-weight: 700;
  color: inherit;
  text-decoration: none;
}

/* The menu under the top bar (src/web/shell.tsx). */
.site-menu {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  padding: 0 1rem;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}

.site-menu a {
  padding: 0.625rem 0.75rem;
  border-bottom: 2px solid transparent;
  color: var(--muted);
  text-decoration: none;
}

.site-menu a:hover {
  color: inherit;
}

.site-menu a[aria-current="page"] {
  border-bottom-color: var(--accent);
  color: inherit;
  font-weight: 600;
}

.viewer {
  color: var(--muted);
}

#alert-banner:empty {
  display: none;
}

#alert-banner {
  padding: 0.5rem 1rem;
  color: var(--danger);
  background: var(--danger-background);
}

main {
  max-width: 72rem;
  margin: 0 auto;
  padding: 1rem;
}

button {
  font: inherit;
  padding: 0.375rem 0.875rem;
  border: 1px solid var(--accent);
  border-radius: 0.375rem;
  color: var(--accent-text);
  background: var(--accent);
  cursor: pointer;
}

button.secondary {
  color: var(--accent);
  background: transparent;
}

/* A link that looks like a button, such as "Sign in again". */
a.button {
  display: inline-block;
  padding: 0.375rem 0.875rem;
  border-radius: 0.375rem;
  color: var(--accent-text);
  background: var(--accent);
  text-decoration: none;
}

.viewer-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.viewer-actions form {
  margin: 0;
}

.refusal {
  font-weight: 600;
  color: var(--danger);
}

button:disabled {
  border-color: var(--border);
  color: var(--muted);
  background: var(--surface);
  cursor: not-allowed;
}

.manager-only {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.managers-only-note {
  font-size: 0.875rem;
  color: var(--muted);
}

.muted {
  color: var(--muted);
}

/* Logs and lists: a plain table that scrolls sideways on a phone instead of the page. */
table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
  font-size: 0.9375rem;
}

th,
td {
  padding: 0.375rem 0.75rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--border);
}

th {
  font-weight: 600;
  background: var(--surface);
}

/* Lists of records, such as the Staff phones. */
.records {
  width: 100%;
  border-collapse: collapse;
}

.records th,
.records td {
  padding: 0.5rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--border);
}

.records .actions {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
}

/* Who last changed a record and when (<ChangedBy>). */
.changed,
.empty {
  font-size: 0.875rem;
  color: var(--muted);
}

/* A record's form: labelled fields, each with its refusal under it. */
.record-form {
  margin-top: 2rem;
}

.record-form fieldset {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin: 0 0 0.75rem;
  padding: 0;
  border: 0;
}

.record-form label {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

input {
  font: inherit;
  padding: 0.375rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: 0.375rem;
  color: var(--text);
  background: var(--background);
}

input:disabled {
  color: var(--muted);
  background: var(--surface);
}

input[aria-invalid="true"] {
  border-color: var(--danger);
}

.refused {
  font-size: 0.875rem;
  color: var(--danger);
}

/* A form's refusals, listed above its fields (the Texting page). */
.refusals {
  margin: 0 0 0.75rem;
  padding: 0;
  list-style: none;
}

/* The message log's filters, side by side. */
.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: end;
  margin-bottom: 1rem;
}

button.secondary {
  color: var(--accent);
  background: transparent;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Automation settings: a generated form, one setting per row. */
.settings-form fieldset {
  flex-direction: column;
}

.settings-form .setting {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: min(100%, 36rem);
}

.settings-form .list-setting,
.settings-form .list-item,
.settings-form .yes-no {
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 0.375rem;
}

.settings-form .yes-no {
  flex-direction: row;
  align-items: center;
}

.duration {
  display: flex;
  gap: 0.5rem;
}

textarea,
select {
  font: inherit;
  padding: 0.375rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: 0.375rem;
  color: var(--text);
  background: var(--background);
}

textarea {
  width: 100%;
}

textarea[aria-invalid="true"],
select[aria-invalid="true"] {
  border-color: var(--danger);
}

.help,
.warning {
  font-size: 0.875rem;
  color: var(--muted);
}

.warning {
  color: var(--strip);
}

.changes {
  margin: 0;
  padding-left: 1rem;
}

/* The sign-in screens: one short column, one thing at a time. */
.sign-in {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: 24rem;
}

.sign-in label {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.sign-in label.checkbox {
  flex-direction: row;
  align-items: flex-start;
  gap: 0.5rem;
}

.sign-in button {
  align-self: flex-start;
}

.note {
  font-size: 0.875rem;
  color: var(--muted);
}

/* The offer to restore an unsaved settings edit kept in the browser (keep-settings-edits.js). */
.kept-edit {
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--strip);
  border-radius: 0.375rem;
  background: var(--strip-background);
}

.kept-edit[hidden] {
  display: none;
}

.kept-edit p {
  margin: 0 0 0.5rem;
}

/* The Alert banner (src/alerts/alerts-pages.tsx): one line per open Alert or Warning. */
.alert-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.alert-list a {
  color: inherit;
  font-weight: 600;
}

.alert-list .level-warning {
  color: var(--strip);
}

.emails {
  margin: 0;
  padding-left: 1rem;
}

/* The Outbox of a Development copy. */
.outbox {
  padding-left: 1.25rem;
}

.outbox li {
  margin-bottom: 1.5rem;
}

.outbox p {
  margin: 0;
}

.outbox .subject {
  font-weight: 600;
}

.outbox .body {
  white-space: pre-wrap;
  padding: 0.5rem;
  border: 1px solid var(--border);
  border-radius: 0.375rem;
  background: var(--surface);
}

/* Sync status page (ticket #34). */
.held-sync-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.syncs-stopped {
  color: var(--danger);
}

/* A setup link just made, on the Staff users page: shown once, to pass on by hand. */
.setup-link {
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 0.375rem;
  background: var(--surface);
  overflow-wrap: anywhere;
}

/* The authenticator QR code on a setup link's page: dark on light, whatever the theme. */
.qr-code svg {
  width: 12rem;
  height: 12rem;
  background: #fff;
}

/* The texting pause (src/texting/pause-routes.tsx): a dark banner on every screen while it's
   in force, dark in both light and dark mode. */
.texting-paused {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem 1rem;
  padding: 0.75rem 1rem;
  color: #ffffff;
  background: #111214;
  border-bottom: 2px solid var(--danger);
}

.texting-paused p {
  margin: 0;
}

.texting-paused .managers-only-note {
  color: #c9ccd1;
}

/* The restore banner (src/restore/restore-routes.tsx), under the pause banner. */
.restored-from-backup {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem 1rem;
  padding: 0.75rem 1rem;
  background: var(--strip-background);
  border-bottom: 2px solid var(--danger);
}

.restored-from-backup p {
  margin: 0;
}

.site-header .pause-texting {
  color: #ffffff;
  background: #111214;
  border-color: #111214;
}

/* An Automation's tabs: its settings, and its Sequences (src/sequences/sequence-pages.tsx). */
.tabs {
  display: flex;
  gap: 0.25rem;
  margin: 0 0 1rem;
  border-bottom: 1px solid var(--border);
}

.tabs a {
  padding: 0.5rem 0.75rem;
  color: var(--accent);
  text-decoration: none;
  border-bottom: 2px solid transparent;
}

.tabs a[aria-current="page"] {
  color: var(--text);
  border-bottom-color: var(--accent);
}

/* Each Sequence with every text. */
.sequence {
  margin: 0 0 1.5rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--border);
  border-radius: 0.375rem;
}

.sequence h3 {
  margin: 0 0 0.25rem;
}

.sequence .end-reason {
  font-weight: 600;
}

.sequence .stop-sequence {
  margin: 0 0 0.75rem;
}