/*
 * The back office's own base stylesheet.
 *
 * Built on tokens.css and nothing else: the admin used to borrow the public
 * site's global.css, forms.css and header.css, which meant a change to the
 * marketing site could restyle the back office by accident. Every page —
 * signed in or not — loads tokens.css, fonts.css and this file, in that order.
 *
 * No colour literal, raw px font size or :root block is allowed in here;
 * tests/test_css_tokens.py enforces it. Breakpoints are min-width and one of
 * 480, 768, 1024, 1280.
 *
 * Contents: reset · typography · links · buttons · form fields · toast ·
 * panel · page header · toolbar · table · pagination · status chips ·
 * stat cards · notices · utilities
 */

/* --- reset ---------------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--text);
  background-color: var(--surface-section);
}

img {
  max-width: 100%;
  display: block;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

ul[class],
ol[class] {
  list-style: none;
}

:focus {
  outline: none;
}

:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-sm);
}

/* --- typography ----------------------------------------------------------- */

h1,
h2,
h3,
h4 {
  color: var(--text-strong);
  line-height: var(--leading-tight);
  font-weight: 600;
}

/* Admin scale: a page title is a label for a working screen, not a hero. */
h1 {
  font-size: var(--text-lg);
}

h2 {
  font-size: var(--text-md);
}

h3,
h4 {
  font-size: var(--text-base);
}

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

.text-danger {
  color: var(--color-danger);
}

.text-sm {
  font-size: var(--text-sm);
}

/* --- links ---------------------------------------------------------------- */

a {
  color: inherit;
  text-decoration: none;
}

.link {
  color: var(--color-blue-strong);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-color: transparent;
  transition: text-decoration-color var(--transition);
}

.link:hover,
.link:focus-visible {
  text-decoration-color: currentColor;
}

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

/* Rectangles with a 6px radius. The public site's pills stay on the public
   site: in a dense table a pill reads as a tag, not as something to press. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background-color: transparent;
  font-size: var(--text-sm);
  font-weight: 500;
  line-height: var(--leading-tight);
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--transition), color var(--transition),
    border-color var(--transition);
}

.btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.btn--primary {
  background-color: var(--color-blue);
  border-color: var(--color-blue);
  color: var(--color-white);
}

.btn--primary:hover {
  background-color: var(--color-blue-strong);
  border-color: var(--color-blue-strong);
}

.btn--secondary {
  background-color: var(--surface);
  border-color: var(--color-blue-strong);
  color: var(--color-blue-strong);
}

.btn--secondary:hover {
  background-color: var(--color-blue-lighter);
}

.btn--danger {
  background-color: var(--surface);
  border-color: var(--color-danger);
  color: var(--color-danger);
}

.btn--danger:hover {
  background-color: var(--color-danger-surface);
}

.btn--sm {
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-xs);
}

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

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--space-6);
  height: var(--space-6);
  border: none;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--text);
  font-size: var(--text-md);
  cursor: pointer;
}

.icon-btn:hover {
  background-color: var(--color-blue-lighter);
  color: var(--color-blue-strong);
}

.icon-btn--danger {
  color: var(--color-danger);
}

.icon-btn--danger:hover {
  background-color: var(--color-danger-surface);
  color: var(--color-danger);
}

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

.form-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}

.form-field label,
.form-field__label {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-strong);
}

.form-field__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.form-field input:not([type="checkbox"]):not([type="file"]),
.form-field select,
.form-field textarea,
.toolbar__filters input,
.toolbar__filters select {
  width: 100%;
  padding: var(--space-3);
  border: 1px solid var(--color-gray);
  border-radius: var(--radius-sm);
  background-color: var(--surface);
  color: var(--text-strong);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  transition: border-color var(--transition), box-shadow var(--transition);
}

.form-field textarea {
  resize: vertical;
}

.form-field input::placeholder,
.form-field textarea::placeholder,
.toolbar__filters input::placeholder {
  color: var(--text-muted);
}

.form-field input:focus-visible,
.form-field select:focus-visible,
.form-field textarea:focus-visible,
.toolbar__filters input:focus-visible,
.toolbar__filters select:focus-visible {
  border-color: var(--color-blue);
  box-shadow: var(--focus-ring);
}

.form-field .is-invalid {
  border-color: var(--color-danger);
}

.form-field .hint {
  font-size: var(--text-xs);
  color: var(--text-muted);
}

.invalid-feedback {
  display: block;
  font-size: var(--text-xs);
  color: var(--color-danger);
}

.checkbox-field label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: 400;
}

.checkbox-field input {
  width: var(--space-4);
  height: var(--space-4);
  accent-color: var(--color-blue);
}

/* Two unrelated single fields side by side (duration + category). */
.field-row {
  display: grid;
  gap: var(--space-4);
}

/*
 * Translatable fields render as a pair, always. The two halves sit side by
 * side so a missing French value is visible as an empty box next to a full
 * one, rather than something you have to go looking for behind a tab.
 */
.locale-pair {
  display: grid;
  gap: var(--space-4);
  align-items: start;
}

@media (min-width: 768px) {
  .field-row,
  .locale-pair {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* --- toast ---------------------------------------------------------------- */

/* toast.js appends .toast to <body>; living here means a flash is styled on
   every page, not only on the ones that happened to load forms.css. */
.toast {
  position: fixed;
  right: var(--space-4);
  bottom: var(--space-4);
  z-index: var(--z-toast);
  max-width: 22rem;
  overflow: hidden;
  border: 1px solid var(--color-info);
  border-radius: var(--radius-sm);
  background-color: var(--color-info-surface);
  color: var(--color-info);
  box-shadow: var(--shadow-lg);
  animation: toast-in 0.3s var(--ease) forwards;
}

.toast-content-wrapper {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
}

.toast-icon {
  font-size: var(--text-lg);
  line-height: 1;
}

.toast-message {
  flex: 1;
  font-size: var(--text-sm);
  color: var(--text-strong);
}

.toast-progress {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: var(--space-1);
  background-color: currentColor;
  animation: toast-progress 5s linear forwards;
}

.toast-success {
  border-color: var(--color-success);
  background-color: var(--color-success-surface);
  color: var(--color-success);
}

.toast-danger {
  border-color: var(--color-danger);
  background-color: var(--color-danger-surface);
  color: var(--color-danger);
}

/* An error does not dismiss itself, so it has nothing to count down to. */
.toast-danger .toast-progress {
  display: none;
}

.toast-warning {
  border-color: var(--color-warning);
  background-color: var(--color-warning-surface);
  color: var(--color-warning);
}

@keyframes toast-in {
  from {
    transform: translateX(110%);
  }

  to {
    transform: translateX(0);
  }
}

@keyframes toast-progress {
  from {
    width: 100%;
  }

  to {
    width: 0;
  }
}

/* --- panel ---------------------------------------------------------------- */

.panel {
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
}

.panel + .panel {
  margin-top: var(--space-5);
}

@media (min-width: 768px) {
  .panel {
    padding: var(--space-5);
  }
}

/* --- page header ---------------------------------------------------------- */

.page-header {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
}

.page-header__back {
  align-self: flex-start;
  font-size: var(--text-sm);
}

.page-header__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.page-header__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

/* --- toolbar -------------------------------------------------------------- */

.toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

.toolbar__count {
  color: var(--text-muted);
  font-weight: 400;
}

.toolbar__filters {
  display: flex;
  flex: 1 1 32rem;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
}

.toolbar__filters input,
.toolbar__filters select {
  width: auto;
  min-width: 0;
  flex: 1 1 10rem;
  padding: var(--space-2) var(--space-3);
}

.toolbar__filters .btn {
  padding: var(--space-2) var(--space-4);
}

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

/* Mobile first: each row is a card and each cell names itself from its
   data-label. From 768px it is a table again. */
.table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: var(--text-sm);
}

.table,
.table tbody,
.table tr,
.table td {
  display: block;
}

/* Off screen rather than display: none, so the headers stay available to
   assistive technology. */
.table thead {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

.table tr {
  padding: var(--space-3) 0;
  border-top: 1px solid var(--border);
}

.table td {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-2) 0;
  text-align: right;
}

.table td::before {
  content: attr(data-label);
  flex-shrink: 0;
  font-weight: 500;
  color: var(--text-strong);
  text-align: left;
}

.table .table__empty td {
  justify-content: center;
  padding: var(--space-6) 0;
  color: var(--text-muted);
  text-align: center;
}

.table .table__empty td::before {
  content: none;
}

.table__item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-3);
  color: var(--text-strong);
  font-weight: 500;
}

.table__thumb {
  width: 6.25rem;
  height: 4rem;
  border-radius: var(--radius-sm);
  object-fit: cover;
  background-color: var(--color-gray-lighter);
}

.table__clip {
  max-width: 28rem;
}

.table__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-3);
}

.table__actions form {
  display: inline-flex;
}

@media (min-width: 768px) {
  .table {
    display: table;
  }

  .table thead {
    position: static;
    display: table-header-group;
    width: auto;
    height: auto;
    overflow: visible;
    clip-path: none;
  }

  .table tbody {
    display: table-row-group;
  }

  .table tr {
    display: table-row;
    padding: 0;
    border-top: none;
  }

  .table th,
  .table td {
    display: table-cell;
    padding: var(--space-3) var(--space-3) var(--space-3) 0;
    border-bottom: 1px solid var(--border);
    text-align: left;
    vertical-align: middle;
  }

  .table th {
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--text-muted);
  }

  .table td::before {
    content: none;
  }

  .table tbody tr:hover {
    background-color: var(--surface-subtle);
  }

  .table .table__empty td {
    display: table-cell;
    text-align: center;
  }

  .table__item,
  .table__actions {
    justify-content: flex-start;
  }
}

/* --- pagination ----------------------------------------------------------- */

.pagination {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

.pagination__page {
  min-width: var(--space-6);
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  text-align: center;
  color: var(--text-strong);
}

a.pagination__page:hover {
  background-color: var(--color-blue-lighter);
}

.pagination__page.is-active {
  background-color: var(--color-blue);
  border-color: var(--color-blue);
  color: var(--color-white);
}

.pagination__page--ellipsis {
  border-color: transparent;
}

/* --- status chips --------------------------------------------------------- */

/* One vocabulary for every state label: enquiry status, the per-row
   "French not reviewed" badge and the dashboard counters. */
.status-chip {
  display: inline-block;
  padding: var(--space-1) var(--space-3);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background-color: var(--surface-section);
  color: var(--text-muted);
  font-size: var(--text-xs);
  font-weight: 500;
  line-height: var(--leading-normal);
  white-space: nowrap;
}

.status-chip--danger {
  background-color: var(--color-danger-surface);
  color: var(--color-danger);
}

.status-chip--success {
  background-color: var(--color-success-surface);
  color: var(--color-success);
}

.status-chip--info {
  background-color: var(--color-info-surface);
  color: var(--color-info);
}

.status-chip--warning {
  background-color: var(--color-warning-surface);
  border-color: var(--color-warning);
  color: var(--color-warning);
}

.status-chip--pill {
  padding: 0 var(--space-2);
  border-radius: var(--radius-pill);
}

/* --- stat cards ----------------------------------------------------------- */

.stats {
  display: grid;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}

.stat {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

.stat__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: var(--space-7);
  height: var(--space-7);
  border-radius: var(--radius-pill);
  background-color: var(--color-blue-lighter);
}

.stat__icon img {
  width: var(--space-5);
  height: var(--space-5);
}

.stat__number {
  font-size: var(--text-lg);
  font-weight: 600;
  line-height: var(--leading-tight);
  color: var(--text-strong);
}

.stat__label {
  font-size: var(--text-sm);
  color: var(--text-muted);
}

@media (min-width: 480px) {
  .stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

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

/* The dashboard's "needs French translation" panel. */
.needs-translation {
  padding: var(--space-4);
  border: 1px solid var(--color-warning);
  border-radius: var(--radius-md);
  background-color: var(--color-warning-surface);
}

.needs-translation ul {
  margin-top: var(--space-3);
  padding-left: var(--space-5);
}

.needs-translation li {
  margin-bottom: var(--space-1);
}

/* --- utilities ------------------------------------------------------------ */

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

.divider {
  height: 1px;
  margin: var(--space-6) 0;
  border: none;
  background-color: var(--border);
}