/* ---------------------------------------------------------------------------
   Fivalive admin extras: clickable filter-links, reset button, status badges,
   and the confirmation-modal styling. Loaded globally via UNFOLD["STYLES"].
   Works in Unfold light + dark (dark = `.dark` class on <html>).
--------------------------------------------------------------------------- */

/* ---- Profile change page: header card + "User information" form
   (matches the approved reference design) ---- */

/* Unfold's breadcrumb wrapper ships `lg:mb-12` (48px) below it — far too much
   air above the header card. Pull it in tight. */
body.app-profiles.change-form .container.-my-3 {
  margin-bottom: 14px !important;
}

/* Flat header card: identity on the left, Cancel/Save on the right. */
body.app-profiles.change-form .pf-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  padding: 18px 22px;
  margin: 0 0 20px;
  box-shadow: 0 1px 3px rgba(16, 24, 40, 0.05);
}
.pf-head__id {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
}
.pf-head__avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #7c3aed, #a855f7);
  color: #fff;
  font-size: 24px;
  font-weight: 700;
}
/* A real photo can be clicked to view it full-size. */
img.pf-head__avatar {
  cursor: zoom-in;
}
/* Full-size photo lightbox. */
.pf-lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(0, 0, 0, 0.8);
  cursor: zoom-out;
}
.pf-lightbox[hidden] {
  display: none;
}
.pf-lightbox img {
  max-width: 90vw;
  max-height: 90vh;
  border-radius: 12px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55);
}
.pf-head__meta {
  min-width: 0;
}
.pf-head__top {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.pf-head__name {
  font-size: 20px;
  font-weight: 700;
  color: #111827;
  line-height: 1.2;
}
.pf-head__email {
  color: #6b7280;
  font-size: 13px;
  margin: 3px 0 8px;
  word-break: break-all;
}
.pf-head__metrics {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #4b5563;
  font-size: 13px;
  flex-wrap: wrap;
}
.pf-head__metrics b {
  color: #111827;
  font-weight: 700;
}
.pf-head__dot {
  color: #d1d5db;
}
.pf-head__star {
  color: #f59e0b;
  font-size: 17px;
  line-height: 1;
}
.pf-head__actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
  flex: 0 0 auto;
}
/* Subtle text links (Account, History) sit above the Cancel/Save buttons —
   same treatment as Profile/History on the user page. */
.pf-head__links {
  display: flex;
  align-items: center;
  gap: 10px;
}
.pf-head__btns {
  display: flex;
  align-items: center;
  gap: 10px;
}
.pf-head__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: #6b7280;
  text-decoration: none;
  padding: 5px 11px;
  border-radius: 8px;
  transition: background 0.12s ease, color 0.12s ease;
}
.pf-head__link .material-symbols-outlined {
  font-size: 18px;
}
.pf-head__link:hover {
  background: rgba(124, 58, 237, 0.1);
  color: #6d28d9;
}
.dark .pf-head__link {
  color: #9ca3af;
}
.dark .pf-head__link:hover {
  background: rgba(139, 92, 246, 0.18);
  color: #c4b5fd;
}
.pf-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 38px;
  padding: 0 18px;
  border-radius: 9px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
  text-decoration: none;
  transition: background-color 0.12s ease, border-color 0.12s ease;
}
.pf-btn .material-symbols-outlined {
  font-size: 18px;
}
.pf-btn--ghost {
  background: #fff;
  color: #374151;
  border-color: #d1d5db;
}
.pf-btn--ghost:hover {
  background: #f3f4f6;
}
.pf-btn--primary {
  background: #7c3aed !important;
  color: #fff !important;
}
/* Delete, beside Cancel and Save in a hero. Outlined rather than filled: it
   sits next to the primary action and must not compete with it. */
.pf-btn--danger {
  background: #fff;
  color: #b91c1c;
  border-color: #fca5a5;
}
.pf-btn--danger:hover {
  background: #fef2f2;
}
.dark .pf-btn--danger {
  background: transparent;
  color: #fca5a5;
  border-color: #7f1d1d;
}
.dark .pf-btn--danger:hover {
  background: #1f1113;
}
.pf-btn--primary:hover {
  background: #6d28d9 !important;
}

.pf-btn--verify {
  background: #16a34a !important;
  color: #fff !important;
}
.pf-btn--verify:hover {
  background: #15803d !important;
}
.pf-btn--unverify {
  background: #fff !important;
  color: #b91c1c !important;
  border-color: #fca5a5;
}
.pf-btn--unverify:hover {
  background: #fef2f2 !important;
  border-color: #ef4444;
}
.dark .pf-btn--unverify {
  background: transparent !important;
  color: #fca5a5 !important;
  border-color: #7f1d1d;
}
.dark .pf-btn--unverify:hover {
  background: rgba(239, 68, 68, 0.12) !important;
  border-color: #ef4444;
}


/* The form fieldset = ONE clean card with a "User information" header (icon +
   title) and the fields in TWO columns inside it (Bio spans full width). */
body.app-profiles.change-form fieldset.module {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  padding: 22px 26px;
  margin: 0;
  box-shadow: 0 1px 3px rgba(16, 24, 40, 0.05);
}
body.app-profiles.change-form fieldset.module > h2 {
  background: transparent !important;
  border: none !important;
  padding: 0 0 18px !important;
  margin: 0 !important;
  font-size: 15px;
  font-weight: 700;
  color: #111827;
  display: flex;
  align-items: center;
  gap: 8px;
}
body.app-profiles.change-form fieldset.module > h2::before {
  content: "person";
  font-family: "Material Symbols Outlined";
  font-size: 20px;
  color: #7c3aed;
  font-weight: 400;
}
body.app-profiles.change-form fieldset.module > .aligned {
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
}
body.app-profiles.change-form fieldset.module .form-row {
  margin-bottom: 10px !important;
}
/* Unfold wraps each field in an inner `.flex.group.mb-6` — that mb-6 (24px)
   stacks on top of the row margin. Zero it so only the row gap above counts. */
body.app-profiles.change-form fieldset.module .form-row > div.flex-col {
  margin-bottom: 0 !important;
}
body.app-profiles.change-form fieldset.module .form-row label {
  margin-bottom: 6px !important;
}
body.app-profiles.change-form fieldset.module .form-row input,
body.app-profiles.change-form fieldset.module .form-row select,
body.app-profiles.change-form fieldset.module .form-row textarea {
  width: 100%;
  box-sizing: border-box;
}
@media (min-width: 1024px) {
  body.app-profiles.change-form fieldset.module > .aligned {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 30px;
    row-gap: 4px;
  }
  body.app-profiles.change-form .aligned .form-row.field-bio {
    grid-column: 1 / -1;
  }
}

/* Focus ring + hover on inputs. */
body.app-profiles.change-form .form-row input[type="text"]:hover,
body.app-profiles.change-form .form-row textarea:hover {
  border-color: #cbb0f2 !important;
}
body.app-profiles.change-form .form-row input[type="text"]:focus,
body.app-profiles.change-form .form-row textarea:focus {
  border-color: #a855f7 !important;
  box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.18) !important;
  outline: none !important;
}
/* Timezone is a select2 autocomplete: the visible border lives on the
   .select2-container, so give IT the same hover + focus/open reaction the
   text inputs get (select2 adds .select2-container--open while the dropdown is
   showing). */
body.app-profiles.change-form .field-timezone .select2-container:hover {
  border-color: #cbb0f2 !important;
}
body.app-profiles.change-form
  .field-timezone
  .select2-container--open {
  border-color: #a855f7 !important;
  box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.18) !important;
}
/* select2 dropdown scrollbar: theme it so it matches the dropdown instead of
   the bright native bar. (The dropdown is appended to <body>, so this is not
   scoped to .field-timezone.) */
.select2-results__options {
  scrollbar-width: thin;
  scrollbar-color: #cbd5e1 transparent;
}
.select2-results__options::-webkit-scrollbar {
  width: 10px;
}
.select2-results__options::-webkit-scrollbar-track {
  background: transparent;
}
.select2-results__options::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border: 2px solid transparent;
  border-radius: 9999px;
  background-clip: content-box;
}
.select2-results__options::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
  border: 2px solid transparent;
  border-radius: 9999px;
  background-clip: content-box;
}
html.dark .select2-results__options {
  scrollbar-color: #4b5563 transparent;
}
html.dark .select2-results__options::-webkit-scrollbar-thumb {
  background: #4b5563;
  border: 2px solid transparent;
  border-radius: 9999px;
  background-clip: content-box;
}
html.dark .select2-results__options::-webkit-scrollbar-thumb:hover {
  background: #6b7280;
  border: 2px solid transparent;
  border-radius: 9999px;
  background-clip: content-box;
}

/* Date of birth: drop the tz-warning + shortcuts, add a calendar icon. */
body.app-profiles.change-form .field-date_of_birth .timezonewarning,
body.app-profiles.change-form .field-date_of_birth .datetimeshortcuts {
  display: none !important;
}
body.app-profiles.change-form .field-date_of_birth input.vDateField {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='none' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'><rect x='3' y='4' width='18' height='18' rx='2'/><path d='M16 2v4M8 2v4M3 10h18'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 40px;
  /* Clicking opens the calendar, so show a pointer, not a text caret (typing
     still works). */
  cursor: pointer;
}

/* Custom date-of-birth calendar (opens under the field, same design). The
   field stays a normal text input so a date can also be typed manually. */
body.app-profiles.change-form .field-date_of_birth .flex-grow {
  position: relative;
}
/* While the calendar is open the field sits above the backdrop so the input
   and the popup stay interactive; the backdrop swallows every outside click so
   it can't fall through to the Avatar "Choose file" pill underneath. */
body.app-profiles.change-form .field-date_of_birth .flex-grow.pf-cal-open {
  z-index: 41;
}
.pf-cal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 39;
  background: transparent;
}
.pf-cal-backdrop[hidden] {
  display: none;
}
.pf-cal {
  position: absolute;
  z-index: 40;
  top: calc(100% + 6px);
  left: 0;
  width: 268px;
  padding: 12px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(17, 24, 39, 0.16);
  user-select: none;
}
.pf-cal[hidden] {
  display: none;
}
.pf-cal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.pf-cal__title {
  font-weight: 600;
  font-size: 0.9rem;
  color: #111827;
}
.pf-cal__nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: #6b7280;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.pf-cal__nav:hover {
  background: #f3e8ff;
  color: #7c3aed;
}
.pf-cal__navs {
  display: flex;
  gap: 2px;
}
.pf-cal__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}
.pf-cal__dow span {
  text-align: center;
  font-size: 0.68rem;
  font-weight: 600;
  color: #9ca3af;
  padding: 4px 0;
}
.pf-cal__day {
  border: none;
  background: transparent;
  border-radius: 8px;
  aspect-ratio: 1 / 1;
  font-size: 0.8rem;
  color: #374151;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.pf-cal__day:hover {
  background: #f3e8ff;
  color: #7c3aed;
}
.pf-cal__day.is-empty {
  visibility: hidden;
  cursor: default;
}
.pf-cal__day.is-today {
  box-shadow: inset 0 0 0 1px #c4b5fd;
}
.pf-cal__day.is-selected,
.pf-cal__day.is-selected:hover {
  background: #7c3aed;
  color: #fff;
}
/* Dark mode. */
.dark .pf-cal {
  background: #111827;
  border-color: #374151;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
}
.dark .pf-cal__title {
  color: #f9fafb;
}
.dark .pf-cal__nav {
  color: #9ca3af;
}
.dark .pf-cal__nav:hover {
  background: #3b2a63;
  color: #d8b4fe;
}
.dark .pf-cal__day {
  color: #d1d5db;
}
.dark .pf-cal__day:hover {
  background: #3b2a63;
  color: #d8b4fe;
}
.dark .pf-cal__day.is-today {
  box-shadow: inset 0 0 0 1px #6d28d9;
}
.dark .pf-cal__day.is-selected,
.dark .pf-cal__day.is-selected:hover {
  background: #7c3aed;
  color: #fff;
}

/* Read-only email: a plain, muted value. */
body.app-profiles.change-form .field-email .readonly {
  color: #6b7280;
}

/* Avatar "Choose file to upload": the WHOLE pill behaves like a button — the
   whole pill is clickable (Unfold only wires the tiny icon by default) and the
   fill STAYS DARK; only the border + icon react on hover/press. The disabled
   text input has pointer-events:none so a real click passes through it to the
   clickable container underneath. */
/* When an avatar already exists, Unfold clutters the field with a big image
   preview, a "Clear" checkbox block and a download icon. The image belongs in
   the HEADER only — keep the field as the clean pill: hide all three. */
body.app-profiles.change-form .field-avatar .flex-grow > div.mb-4 {
  display: none !important;
}
body.app-profiles.change-form
  .field-avatar
  .flex-grow
  > div.border
  > div.bg-gray-50 {
  display: none !important;
}
body.app-profiles.change-form .field-avatar .flex-grow > div.border a {
  display: none !important;
}
body.app-profiles.change-form .field-avatar .flex-grow > div.border {
  cursor: pointer;
  transition: border-color 0.15s ease;
}
body.app-profiles.change-form .field-avatar .flex-grow > div.border input[type="text"] {
  pointer-events: none;
  cursor: pointer;
}
body.app-profiles.change-form .field-avatar .flex-grow > div.border:hover {
  border-color: #cbb0f2 !important;
}
body.app-profiles.change-form .field-avatar .flex-grow > div.border:hover
  .material-symbols-outlined {
  color: #7c3aed;
}
body.app-profiles.change-form .field-avatar .flex-grow > div.border:active {
  border-color: #a855f7 !important;
}
.dark body.app-profiles.change-form .field-avatar .flex-grow > div.border:hover {
  border-color: #6d28d9 !important;
}
.dark body.app-profiles.change-form .field-avatar .flex-grow > div.border:hover
  .material-symbols-outlined {
  color: #d8b4fe;
}
.dark body.app-profiles.change-form .field-avatar .flex-grow > div.border:active {
  border-color: #a855f7 !important;
}

/* Bio: sensible height, resizable, with a live 0/500 counter. */
body.app-profiles.change-form .field-bio > .flex-grow,
body.app-profiles.change-form .field-bio > .flex-grow > div {
  position: relative;
}
body.app-profiles.change-form .field-bio textarea {
  min-height: 120px;
  height: 120px;
  resize: none;
  padding-bottom: 26px;
  max-width: none;
}
body.app-profiles.change-form .field-bio .flex-col {
  max-width: none;
}
body.app-profiles.change-form .pf-bio-count {
  position: absolute;
  right: 12px;
  bottom: 10px;
  font-size: 12px;
  color: #9ca3af;
  pointer-events: none;
}

/* Hide the default sticky submit row — Cancel/Save live in the header. */
body.app-profiles.change-form .relative.mt-16 {
  display: none !important;
}

/* Dark variants. */
.dark body.app-profiles.change-form .pf-head,
.dark body.app-profiles.change-form fieldset.module {
  background: #1f2937;
  border-color: #374151;
}
.dark .pf-head__name,
.dark body.app-profiles.change-form fieldset.module > h2 {
  color: #f3f4f6;
}
.dark .pf-head__email,
.dark .pf-head__metrics {
  color: #9ca3af;
}
.dark .pf-head__metrics b {
  color: #f3f4f6;
}
.dark .pf-btn--ghost {
  background: transparent;
  color: #d1d5db;
  border-color: #4b5563;
}
.dark .pf-btn--ghost:hover {
  background: rgba(255, 255, 255, 0.06);
}
.dark body.app-profiles.change-form .field-email .readonly {
  color: #9ca3af;
}
/* Sidebar section headings ("Accounts", "References") — render each group
   title as an uppercase accent band so the menu structure reads clearly at a
   glance (matches the dealerdrive admin). Each title is an <h2> wrapping a link
   inside `ol.px-6`; bleed the band ±1.5rem past that padding to reach the
   sidebar edges, then re-pad the text so it stays aligned. */
.simplebar-content h2 {
  background: rgb(var(--color-primary-50));
  margin: 0.6rem -1.5rem 0.4rem !important;
  padding: 0.4rem 1.5rem;
  border-radius: 0;
}
.simplebar-content h2 > a {
  display: block;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.72rem;
  font-weight: 700;
  color: rgb(var(--color-primary-700)) !important;
  margin: 0 !important;
  padding: 0;
}
.dark .simplebar-content h2 {
  background: rgb(255 255 255 / 0.06);
}
.dark .simplebar-content h2 > a {
  color: rgb(var(--color-primary-300)) !important;
}
/* Active menu link ("Users", "Categories", …) — drop the gray highlight box;
   the bold purple text alone marks the current page (matches dealerdrive). The
   active link carries `bg-gray-100` (light) / `dark:bg-white/[.06]` (dark). */
.simplebar-content a.bg-gray-100 {
  background-color: transparent !important;
}

/* Hide the responsive per-cell column labels on wide screens. Unfold gives
   each table cell a ::before label (data-label) for the mobile card view,
   meant to be hidden at the lg breakpoint via `lg:before:hidden` — but the
   object_history template has a typo (`first:border-t-0lg:before:hidden`,
   missing a space), so the labels stay visible on desktop and duplicate the
   column header in every row. Hiding them at lg is the intended behaviour. */
@media (min-width: 1024px) {
  table th[data-label]::before,
  table td[data-label]::before {
    display: none !important;
  }
}

/* Clickable rows react on hover (they open the change page on click). */
#result_list tbody tr {
  transition: background-color 0.1s ease;
}
#result_list tbody tr:hover {
  background-color: rgba(124, 58, 237, 0.11) !important;
}
.dark #result_list tbody tr:hover {
  background-color: rgba(139, 92, 246, 0.14) !important;
}

/* Clickable cell value that applies a column filter. */
.dd-filter-link {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dashed transparent;
  transition: color 0.12s ease, border-color 0.12s ease;
}
.dd-filter-link:hover {
  color: var(--color-primary-600, #7c3aed);
  border-bottom-color: currentColor;
}

/* A status rendered as a coloured badge on a read-only change form (feature
   006 bookings) must not sit inside Unfold's grey read-only box — strip the
   box chrome so the badge reads clean, matching the References/Profiles
   badge treatment. */
.readonly:has(.dd-badge) {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Coloured status pill (also used as a filter-link). */
.dd-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 10px;
  border-radius: 9999px;
  font-size: 12px;
  font-weight: 600;
  line-height: 18px;
  white-space: nowrap;
  border: 1px solid transparent;
}
.dd-badge--green {
  background: #dcfce7;
  color: #166534;
  border-color: #bbf7d0;
}
.dd-badge--amber {
  background: #fef3c7;
  color: #92400e;
  border-color: #fde68a;
}
.dd-badge--red {
  background: #fee2e2;
  color: #991b1b;
  border-color: #fecaca;
}
.dd-badge--violet {
  background: #ede9fe;
  color: #5b21b6;
  border-color: #ddd6fe;
}
/* Orange, taken from the "Declined." banner so a declined badge and that
   banner are the same colour rather than merely similar. The amber badge is
   #fef3c7, which reads as a different state beside the banner's #ffedd5. */
.dd-badge--orange {
  background: #ffedd5;
  color: #c2410c;
  border-color: #fed7aa;
}
.dd-badge--blue {
  background: #dbeafe;
  color: #1e40af;
  border-color: #bfdbfe;
}
.dd-badge--gray {
  background: #f3f4f6;
  color: #374151;
  border-color: #e5e7eb;
}
.dark .dd-badge--green {
  background: rgba(22, 101, 52, 0.25);
  color: #86efac;
  border-color: rgba(34, 197, 94, 0.3);
}
.dark .dd-badge--orange {
  background: rgba(249, 115, 22, 0.2);
  color: #fb923c;
  border-color: rgba(249, 115, 22, 0.3);
}
.dark .dd-badge--amber {
  background: rgba(146, 64, 14, 0.25);
  color: #fcd34d;
  border-color: rgba(245, 158, 11, 0.3);
}
.dark .dd-badge--red {
  background: rgba(153, 27, 27, 0.25);
  color: #fca5a5;
  border-color: rgba(239, 68, 68, 0.3);
}
.dark .dd-badge--violet {
  background: rgba(91, 33, 182, 0.3);
  color: #c4b5fd;
  border-color: rgba(139, 92, 246, 0.3);
}
.dark .dd-badge--blue {
  background: rgba(30, 64, 175, 0.3);
  color: #93c5fd;
  border-color: rgba(59, 130, 246, 0.3);
}
.dark .dd-badge--gray {
  background: rgba(55, 65, 81, 0.4);
  color: #d1d5db;
  border-color: rgba(107, 114, 128, 0.3);
}
a.dd-badge {
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.12s ease, color 0.12s ease,
    border-color 0.12s ease;
}
/* Hover = a clear COLOR change: the soft pill fills with its solid colour. */
a.dd-badge--green:hover {
  background: #16a34a;
  border-color: #16a34a;
  color: #fff;
}
a.dd-badge--amber:hover {
  background: #d97706;
  border-color: #d97706;
  color: #fff;
}
a.dd-badge--red:hover {
  background: #dc2626;
  border-color: #dc2626;
  color: #fff;
}
a.dd-badge--violet:hover {
  background: #7c3aed;
  border-color: #7c3aed;
  color: #fff;
}
a.dd-badge--blue:hover {
  background: #2563eb;
  border-color: #2563eb;
  color: #fff;
}
a.dd-badge--gray:hover {
  background: #4b5563;
  border-color: #4b5563;
  color: #fff;
}

/* "Reset filters" button on the changelist. */
.dd-reset-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  color: #b91c1c;
  background: #fef2f2;
  border: 1px solid #fecaca;
  text-decoration: none;
  transition: background 0.12s ease;
}
.dd-reset-btn:hover {
  background: #fee2e2;
}
.dark .dd-reset-btn {
  color: #fca5a5;
  background: rgba(153, 27, 27, 0.18);
  border-color: rgba(239, 68, 68, 0.35);
}

/* ---- Dedicated "Export to CSV" button (replaces the one-item bulk-action
   dropdown on the users changelist) ---- */
.ff-export-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  color: #ffffff;
  background: #7c3aed !important;
  border: 1px solid #7c3aed;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(124, 58, 237, 0.25);
  transition: background 0.12s ease, transform 0.12s ease;
}
.ff-export-btn:hover {
  background: #6d28d9 !important;
  transform: translateY(-1px);
}
/* Hide Django/Unfold's standard bulk-action bar (dropdown + Run + counter)
   on the users changelist ONLY — the dedicated button above replaces it. The
   row checkboxes stay so rows are still selectable. Scoped by the admin body
   classes so every other changelist keeps its normal actions bar. */
body.app-accounts.model-user.change-list .actions {
  display: none !important;
}

/* ---- Availability change form: same polish as the profiles/references forms
   (themed fieldset cards + icon titles, compact spacing, focus rings, readonly
   as plain text, trimmed breadcrumb gap). ---- */
body.app-availability.change-form .container.-my-3 {
  margin-top: 0 !important;
  margin-bottom: 14px !important;
}
/* Error banner (moved above the hero): match the 14px breadcrumb rhythm instead
   of its default 32px bottom margin. */
body.app-availability.change-form .errornote {
  margin-bottom: 14px !important;
}
body.app-availability.change-form fieldset.module {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  padding: 14px 20px 16px;
  margin: 0 0 18px;
  box-shadow: 0 1px 3px rgba(16, 24, 40, 0.05);
}
.dark body.app-availability.change-form fieldset.module {
  background: #1f2937;
  border-color: #374151;
}
body.app-availability.change-form fieldset.module > h2 {
  background: transparent !important;
  border: none !important;
  padding: 0 0 12px !important;
  margin: 0 !important;
  font-size: 14px;
  font-weight: 700;
  color: #111827;
  display: flex;
  align-items: center;
  gap: 8px;
}
.dark body.app-availability.change-form fieldset.module > h2 {
  color: #f3f4f6;
}
body.app-availability.change-form fieldset.module > h2::before {
  content: "tune";
  font-family: "Material Symbols Outlined";
  font-size: 20px;
  color: #7c3aed;
  font-weight: 400;
}
/* The inline "Availability rules" card gets a schedule icon instead. */
body.app-availability.change-form .inline-group h2::before {
  content: "event_available";
}
body.app-availability.change-form fieldset.module > .aligned {
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
}
body.app-availability.change-form .form-row {
  margin-bottom: 4px !important;
  padding: 0 !important;
}
body.app-availability.change-form .form-row > div.flex-col {
  margin-bottom: 0 !important;
}
body.app-availability.change-form .form-row label {
  margin-bottom: 6px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
}
html.dark body.app-availability.change-form .form-row label {
  color: #e5e7eb !important;
}
body.app-availability.change-form .form-row input,
body.app-availability.change-form .form-row select {
  width: 100%;
  box-sizing: border-box;
}
/* Readonly values as plain text, not gray disabled-looking boxes. */
body.app-availability.change-form .form-row .readonly {
  background: transparent !important;
  border: 0 !important;
  padding: 2px 0 !important;
  color: #6b7280 !important;
}
.dark body.app-availability.change-form .form-row .readonly {
  color: #9ca3af !important;
}
/* Focus ring + hover on the editable controls. */
body.app-availability.change-form .form-row input[type="text"]:hover,
body.app-availability.change-form .form-row input[type="number"]:hover,
body.app-availability.change-form .form-row select:hover {
  border-color: #cbb0f2 !important;
}
body.app-availability.change-form .form-row input[type="text"]:focus,
body.app-availability.change-form .form-row input[type="number"]:focus,
body.app-availability.change-form .form-row select:focus,
body.app-availability.change-form .inline-group input:focus,
body.app-availability.change-form .inline-group select:focus {
  border-color: #a855f7 !important;
  box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.18) !important;
  outline: none !important;
}
/* Rules inline: drop Unfold's redundant per-row object caption ("wd0 …"), so
   each row is just its editable cells. */
body.app-availability.change-form .inline-group td.original p {
  display: none !important;
}
/* Drop the header help-tooltip icons (they crowd the compact table and push a
   tiny horizontal scroll); the field help still shows on the add form. */
body.app-availability.change-form
  .inline-group
  thead
  .material-symbols-outlined {
  display: none !important;
}
/* Drop the time-input clutter (the "Now"/clock shortcut + the red timezone
   warning triangle) — same tidy-up as the date field; it was the horizontal
   scroll + the stray red icons in each time cell. */
body.app-availability.change-form .datetimeshortcuts,
body.app-availability.change-form .timezonewarning {
  display: none !important;
}
/* A daily call limit is a 1–2 digit number — it should not be a full-width
   box the size of the whole card. Hide the browser's native number spinner
   (its up/down arrows clash with the page design); it stays a plain box. */
body.app-availability.change-form #id_daily_call_limit {
  max-width: 140px;
  appearance: textfield;
  -moz-appearance: textfield;
}
body.app-availability.change-form
  #id_daily_call_limit::-webkit-inner-spin-button,
body.app-availability.change-form
  #id_daily_call_limit::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
/* Custom number stepper (replaces the un-themeable native spinner) — matches
   the dark input design with a purple hover. */
.av-stepper {
  position: relative;
  display: inline-flex;
  width: 140px;
  vertical-align: middle;
}
.av-stepper input {
  width: 100% !important;
  max-width: none !important;
  padding-right: 34px !important;
}
.av-stepper__btns {
  position: absolute;
  top: 1px;
  right: 1px;
  bottom: 1px;
  width: 28px;
  display: flex;
  flex-direction: column;
  border-left: 1px solid #d1d5db;
  border-radius: 0 7px 7px 0;
  overflow: hidden;
}
.dark .av-stepper__btns {
  border-left-color: #374151;
}
.av-stepper__btn {
  flex: 1;
  border: none;
  background: transparent;
  color: #6b7280;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background 0.12s ease, color 0.12s ease;
}
.dark .av-stepper__btn {
  color: #9ca3af;
}
.av-stepper__up {
  border-bottom: 1px solid #d1d5db;
}
.dark .av-stepper__up {
  border-bottom-color: #374151;
}
.av-stepper__btn:hover {
  background: rgba(124, 58, 237, 0.12);
  color: #7c3aed;
}
.dark .av-stepper__btn:hover {
  color: #c4b5fd;
}
.av-stepper__btn .material-symbols-outlined {
  font-size: 17px;
  line-height: 1;
}

/* --- Settings card: 2-column form that hugs its content (no 70% empty). --- */
@media (min-width: 820px) {
  body.app-availability.change-form fieldset.module > .aligned {
    display: grid;
    grid-template-columns: minmax(0, 280px) minmax(0, 280px);
    column-gap: 48px;
    row-gap: 14px;
    max-width: 760px;
    justify-content: start;
    align-items: start;
  }
}
/* Read-only "Paused until" reads as a muted control (not loose text). */
body.app-availability.change-form .field-paused_until .readonly {
  display: inline-block;
  min-width: 150px;
  padding: 8px 12px !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 6px !important;
  background: #f9fafb !important;
  color: #6b7280 !important;
}
.dark body.app-availability.change-form .field-paused_until .readonly {
  border-color: #374151 !important;
  background: rgba(255, 255, 255, 0.03) !important;
  color: #9ca3af !important;
}
/* "Updated at" reads as metadata, not an editable field. */
body.app-availability.change-form .field-updated_at .readonly {
  font-size: 12px;
  color: #9ca3af !important;
}

/* --- Availability rules: header action, empty state, toggle, icon delete. --- */
body.app-availability.change-form .inline-group h2 {
  display: flex;
  align-items: center;
}
.av-addbtn {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 32px;
  padding: 0 13px;
  border: none;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  color: #fff !important;
  background: #7c3aed !important;
  cursor: pointer;
  transition: background 0.12s ease;
}
.av-addbtn:hover {
  background: #6d28d9 !important;
}
.av-addbtn .material-symbols-outlined {
  font-size: 18px;
}
/* Hide Django's floating "Add another" row — the header button replaces it. */
body.app-availability.change-form .inline-group .add-row {
  display: none !important;
}
.av-empty {
  padding: 18px 4px 6px;
}
.av-empty__title {
  font-weight: 600;
  font-size: 13.5px;
  color: #374151;
}
.dark .av-empty__title {
  color: #e5e7eb;
}
.av-empty__sub {
  font-size: 12.5px;
  color: #6b7280;
  margin: 3px 0 0;
}
.dark .av-empty__sub {
  color: #9ca3af;
}
/* Compact rule controls: the table hugs its columns instead of stretching the
   selects/time inputs across the whole card width. */
body.app-availability.change-form .inline-group table {
  width: auto;
}
body.app-availability.change-form .inline-group td,
body.app-availability.change-form .inline-group th {
  padding-right: 28px !important;
}
body.app-availability.change-form
  .inline-group
  select[name$="-weekday"] {
  width: 168px !important;
}
body.app-availability.change-form
  .inline-group
  input[name$="-start_time"],
body.app-availability.change-form
  .inline-group
  input[name$="-end_time"] {
  width: 132px !important;
  /* Unfold ships these time inputs with a min-w-52 (208px) utility that would
     otherwise override the width above. */
  min-width: 132px !important;
}
/* Active = a toggle switch, not a bare checkbox. */
body.app-availability.change-form
  .inline-group
  input[type="checkbox"][name$="-is_active"] {
  appearance: none;
  -webkit-appearance: none;
  width: 38px;
  height: 22px;
  border-radius: 9999px;
  background: #9ca3af;
  position: relative;
  cursor: pointer;
  transition: background 0.15s ease;
  border: none !important;
}
.dark body.app-availability.change-form
  .inline-group
  input[type="checkbox"][name$="-is_active"] {
  background: #4b5563;
}
body.app-availability.change-form
  .inline-group
  input[type="checkbox"][name$="-is_active"]:checked {
  background: #7c3aed;
}
body.app-availability.change-form
  .inline-group
  input[type="checkbox"][name$="-is_active"]::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.15s ease;
}
body.app-availability.change-form
  .inline-group
  input[type="checkbox"][name$="-is_active"]:checked::after {
  transform: translateX(16px);
}
/* Delete = a compact trash icon (checked = marked for deletion, red). */
body.app-availability.change-form
  .inline-group
  input[type="checkbox"][name$="-DELETE"] {
  appearance: none;
  -webkit-appearance: none;
  width: 32px;
  height: 32px;
  border: none !important;
  border-radius: 7px;
  background: transparent;
  position: relative;
  cursor: pointer;
  vertical-align: middle !important;
}
body.app-availability.change-form
  .inline-group
  input[type="checkbox"][name$="-DELETE"]::after {
  content: "delete";
  font-family: "Material Symbols Outlined";
  font-size: 18px;
  color: #9ca3af;
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
body.app-availability.change-form
  .inline-group
  input[type="checkbox"][name$="-DELETE"]:hover::after {
  color: #ef4444;
}
body.app-availability.change-form
  .inline-group
  input[type="checkbox"][name$="-DELETE"]:checked {
  background: rgba(239, 68, 68, 0.15);
}
body.app-availability.change-form
  .inline-group
  input[type="checkbox"][name$="-DELETE"]:checked::after {
  color: #ef4444;
}

/* --- Action bar: Save primary, Save-and-continue secondary/outlined. --- */
body.app-availability.change-form [name="_continue"] {
  background: transparent !important;
  border: 1px solid #d1d5db !important;
  color: #374151 !important;
}
.dark body.app-availability.change-form [name="_continue"] {
  border-color: #4b5563 !important;
  color: #e5e7eb !important;
}
.dark body.app-availability.change-form [name="_continue"]:hover {
  background: rgba(255, 255, 255, 0.04) !important;
}

/* ---- Change-page identity hero card ---- */
.ff-hero {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  padding: 13px 20px;
  /* Pull up under the breadcrumb bar (Unfold gives it a 48px lg:mb-12
     bottom margin), trimming the empty band above this section. */
  margin: -28px 0 16px 0;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  /* Flat card, matching the profile page header (pf-head). */
  background: #fff;
  box-shadow: 0 1px 3px rgba(16, 24, 40, 0.05);
}
.dark .ff-hero {
  border-color: #374151;
  background: #1f2937;
}
.ff-hero__id {
  display: flex;
  align-items: center;
  gap: 13px;
  min-width: 0;
}
.ff-hero__avatar {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, #8b5cf6, #6d28d9);
  box-shadow: 0 4px 10px rgba(109, 40, 217, 0.35);
}
/* When the linked profile has an avatar, the hero circle is an <img> — let the
   photo fill the circle without stretching, and let it be clicked to view
   full-size (see the .pf-lightbox overlay, shared with the profile page). */
img.ff-hero__avatar {
  object-fit: cover;
  cursor: zoom-in;
}
.ff-hero__meta {
  min-width: 0;
}
.ff-hero__email {
  display: inline-block;
  font-size: 16.5px;
  font-weight: 700;
  color: #111827;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  word-break: break-all;
  line-height: 1.2;
  transition: color 0.12s ease, border-color 0.12s ease;
}
.ff-hero__email:hover {
  color: #6d28d9;
  border-bottom-color: #a78bfa;
}
.dark .ff-hero__email {
  color: #f9fafb;
}
.dark .ff-hero__email:hover {
  color: #c4b5fd;
  border-bottom-color: #8b5cf6;
}
.ff-hero__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 5px;
}
.ff-hero__side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
}
.ff-hero__links {
  display: flex;
  align-items: center;
  gap: 10px;
}
.ff-hero__history {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: #6b7280;
  text-decoration: none;
  padding: 6px 11px;
  border-radius: 8px;
  transition: background 0.12s ease, color 0.12s ease;
}
.ff-hero__history .material-symbols-outlined {
  font-size: 18px;
}
.ff-hero__history:hover {
  background: rgba(124, 58, 237, 0.1);
  color: #6d28d9;
}
.dark .ff-hero__history {
  color: #9ca3af;
}
.dark .ff-hero__history:hover {
  background: rgba(139, 92, 246, 0.18);
  color: #c4b5fd;
}

.ff-deleted-note {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  color: #991b1b;
  background: #fef2f2;
  border: 1px solid #fecaca;
  max-width: 320px;
}
.ff-deleted-note .material-symbols-outlined {
  font-size: 18px;
}
.dark .ff-deleted-note {
  color: #fca5a5;
  background: rgba(153, 27, 27, 0.18);
  border-color: rgba(239, 68, 68, 0.35);
}

/* ---- Change-page action buttons ---- */
.ff-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
}
.ff-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
  text-decoration: none;
}
.ff-action-btn .material-symbols-outlined {
  font-size: 18px;
}
.ff-action-btn--danger {
  color: #fff;
  background: #dc2626;
}
.ff-action-btn--danger:hover {
  background: #b91c1c;
}
.ff-action-btn--warn {
  color: #fff;
  background: #d97706;
}
.ff-action-btn--warn:hover {
  background: #b45309;
}
.ff-action-btn--ok {
  color: #fff;
  background: #16a34a;
}
.ff-action-btn--ok:hover {
  background: #15803d;
}

/* ---- Confirmation modal (<dialog>) ---- */
.ff-modal {
  border: none;
  border-radius: 14px;
  padding: 0;
  width: min(440px, calc(100vw - 32px));
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.25);
  color: #111827;
  background: #fff;
}
.ff-modal::backdrop {
  background: rgba(17, 24, 39, 0.55);
}
.dark .ff-modal {
  background: #1f2937;
  color: #f3f4f6;
}
.ff-modal__head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 18px 20px;
  border-bottom: 1px solid #e5e7eb;
  font-size: 16px;
  font-weight: 700;
}
.dark .ff-modal__head {
  border-color: #374151;
}
.ff-modal__body {
  padding: 18px 20px;
  font-size: 14px;
  line-height: 1.55;
}
.ff-modal__body label {
  display: block;
  font-weight: 600;
  margin: 12px 0 6px;
  font-size: 13px;
}
.ff-modal__body input[type="text"],
.ff-modal__body input[type="number"],
.ff-modal__body input[type="datetime-local"],
.ff-modal__body textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid #d1d5db;
  background: #fff;
  color: #111827;
  font-size: 14px;
}
/* Amount is a number field — drop the browser's native spinner (it clashes with
   the design); a themed +/- stepper is added in its place (see .av-stepper). */
.ff-modal__body input[type="number"] {
  appearance: textfield;
  -moz-appearance: textfield;
}
.ff-modal__body input[type="number"]::-webkit-inner-spin-button,
.ff-modal__body input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
/* Amount field + quick-preset chips on one row (the stepper on the left, the
   5 / 10 / 15 / 20 chips filling the free space to its right). */
.lc-amount-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.lc-presets {
  display: flex;
  gap: 6px;
  flex: 1 1 auto;
}
.lc-presets .ff-chip {
  flex: 1 1 0;
  min-width: 0;
  padding: 6px 10px;
  text-align: center;
}
.lc-presets .ff-chip--disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.lc-presets .ff-chip--disabled:hover {
  border-color: #d1d5db;
  background: #fff !important;
  color: #374151;
}
.dark .lc-presets .ff-chip--disabled:hover {
  border-color: #4b5563;
  background: #111827 !important;
  color: #d1d5db;
}

/* The Add/Deduct error banner sits at the TOP of the modal body — the shared
   av-modal__err style has a top margin (it's meant for bottom placement), which
   leaves a stray gap above and none below. Line it up with the fields instead:
   no gap above (the body's own padding handles that), one field-gap (16px)
   below, and the same left/right padding as the inputs. */
.lc-adjust-form [data-lc-err] {
  margin: 0 0 16px;
  padding: 8px 10px;
}
.dark .ff-modal__body input,
.dark .ff-modal__body textarea {
  background: #111827;
  color: #f3f4f6;
  border-color: #4b5563;
}
.ff-modal__note {
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  background: #fef2f2;
  color: #991b1b;
  font-size: 13px;
}
.dark .ff-modal__note {
  background: rgba(153, 27, 27, 0.2);
  color: #fca5a5;
}
.ff-modal__foot {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 20px;
  border-top: 1px solid #e5e7eb;
}
.dark .ff-modal__foot {
  border-color: #374151;
}
.ff-btn {
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background-color 0.12s ease, border-color 0.12s ease,
    color 0.12s ease;
}
.ff-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.ff-btn--ghost {
  background: transparent;
  color: #374151;
  border-color: #d1d5db;
}
.ff-btn--ghost:hover {
  background: #f3f4f6;
  border-color: #9ca3af;
}
.dark .ff-btn--ghost {
  color: #d1d5db;
  border-color: #4b5563;
}
.dark .ff-btn--ghost:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: #6b7280;
}
.ff-btn--danger {
  background: #dc2626 !important;
  color: #fff;
}
.ff-btn--danger:hover {
  background: #b91c1c !important;
}
.ff-btn--warn {
  background: #d97706 !important;
  color: #fff;
}
.ff-btn--warn:hover {
  background: #b45309 !important;
}
.ff-btn--ok {
  background: #16a34a !important;
  color: #fff;
}
.ff-btn--ok:hover {
  background: #15803d !important;
}

/* ---- Add-availability-rule modal fields ---- */
/* Every field is a <select>; use one custom chevron (appearance:none removes
   the browser's native arrow so there's no double arrow). */
.ff-modal__body select {
  width: 100%;
  box-sizing: border-box;
  padding: 8px 34px 8px 10px;
  border-radius: 8px;
  border: 1px solid #d1d5db;
  background-color: #fff;
  color: #111827;
  font-size: 14px;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 16px;
}
.dark .ff-modal__body select {
  background-color: #111827;
  color: #f3f4f6;
  border-color: #4b5563;
}
.av-modal__row {
  display: flex;
  gap: 14px;
}
.av-modal__row > div {
  flex: 1;
  min-width: 0;
}
.av-modal__check {
  display: flex !important;
  align-items: center;
  gap: 10px;
  margin-top: 18px !important;
  font-weight: 600;
  font-size: 13px;
}
/* Active = the same toggle switch used in the rules table. */
.av-modal__check input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  flex: 0 0 auto;
  width: 38px;
  height: 22px;
  margin: 0;
  border: none;
  border-radius: 9999px;
  background: #d1d5db;
  position: relative;
  cursor: pointer;
  transition: background 0.15s ease;
}
.dark .av-modal__check input[type="checkbox"] {
  background: #4b5563;
}
.av-modal__check input[type="checkbox"]:checked {
  background: #7c3aed;
}
.av-modal__check input[type="checkbox"]::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.15s ease;
}
.av-modal__check input[type="checkbox"]:checked::after {
  transform: translateX(16px);
}
.av-modal__err {
  margin-top: 12px;
  padding: 8px 12px;
  border-radius: 8px;
  background: #fef2f2;
  color: #991b1b;
  font-size: 13px;
}
.dark .av-modal__err {
  background: rgba(153, 27, 27, 0.2);
  color: #fca5a5;
}
.av-modal__add {
  background: #7c3aed !important;
  color: #fff !important;
}
.av-modal__add:hover {
  background: #6d28d9 !important;
}
/* Caution modal header icon (amber). */
.ff-modal__head.av-caution .material-symbols-outlined {
  color: #d97706;
}

/* ---- Native "Add giver availability" modal (changelist) ---- */
.av-giver-add {
  width: min(440px, calc(100vw - 32px));
}
.av-giver-add .ff-modal__body {
  padding: 18px 20px 20px;
}
.av-field {
  margin-bottom: 16px;
}
.av-field:last-child {
  margin-bottom: 0;
}
.av-field > label {
  display: block;
  font-weight: 600;
  font-size: 13px;
  margin: 0 0 6px;
}
.av-field__help {
  margin: 8px 0 0;
  font-size: 12.5px;
  line-height: 1.35;
  color: #6b7280;
}
.dark .av-field__help {
  color: #9ca3af;
}
#avg-limit {
  max-width: 120px;
}
.av-giver-add__empty {
  margin: 0;
  font-size: 14px;
  color: #6b7280;
}
.dark .av-giver-add__empty {
  color: #9ca3af;
}
/* Start/End time side by side in the "Add rule" modal. */
.av-field--pair {
  display: flex;
  gap: 14px;
}
.av-field--pair > div {
  flex: 1;
}
.av-field--pair label {
  display: block;
  font-weight: 600;
  font-size: 13px;
  margin: 0 0 6px;
}
/* ---- Ban-date preset chips ---- */
.ff-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 4px 0 10px;
}
.ff-chip {
  padding: 6px 12px;
  border-radius: 9999px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid #d1d5db;
  background: #fff !important;
  color: #374151;
  transition: all 0.12s ease;
}
.ff-chip:hover {
  border-color: #a78bfa;
  background: #f5f3ff !important;
  color: #6d28d9;
}
.dark .ff-chip:hover {
  border-color: #8b5cf6;
  background: rgba(139, 92, 246, 0.18) !important;
  color: #c4b5fd;
}
.ff-chip--active,
.ff-chip--active:hover {
  background: #7c3aed !important;
  border-color: #7c3aed;
  color: #fff;
}
.dark .ff-chip {
  background: #111827 !important;
  border-color: #4b5563;
  color: #d1d5db;
}
.dark .ff-chip--active {
  background: #7c3aed !important;
  border-color: #7c3aed;
  color: #fff;
}
.ff-hint {
  font-size: 12px;
  color: #6b7280;
  margin-top: 6px;
}
.dark .ff-hint {
  color: #9ca3af;
}

/* Modal text inputs react on hover + focus. */
.ff-modal__body input[type="text"]:hover,
.ff-modal__body input[type="number"]:hover,
.ff-modal__body textarea:hover {
  border-color: #a78bfa;
}
.ff-modal__body input[type="text"]:focus,
.ff-modal__body input[type="number"]:focus,
.ff-modal__body textarea:focus {
  outline: none;
  border-color: #7c3aed;
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.15);
}

/* ---- Custom "banned for" end-date calendar (click-only, no typing) ---- */
.ff-cal-wrap {
  position: relative;
  margin: 4px 0 6px;
}
.ff-datefield {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  box-sizing: border-box;
  padding: 9px 12px;
  border-radius: 8px;
  border: 1px solid #d1d5db;
  background: #fff;
  color: #111827;
  font-size: 14px;
  cursor: pointer;
  text-align: left;
  transition: border-color 0.12s ease, background 0.12s ease;
}
.ff-datefield:hover {
  border-color: #a78bfa;
  background: #faf5ff;
}
.ff-datefield__val {
  flex: 1;
}
.ff-datefield .material-symbols-outlined {
  font-size: 18px;
  color: #6b7280;
}
.ff-datefield__chev {
  margin-left: auto;
  transition: transform 0.25s ease;
}
.ff-cal-wrap:has(.ff-cal.is-open) .ff-datefield__chev {
  transform: rotate(180deg);
}
.dark .ff-datefield {
  background: #111827;
  color: #f3f4f6;
  border-color: #4b5563;
}
.dark .ff-datefield:hover {
  border-color: #8b5cf6;
  background: rgba(139, 92, 246, 0.12);
}
.ff-cal {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transform: translateY(-6px);
  margin-top: 0;
  padding: 0 10px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: #fff;
  box-shadow: none;
  transition: max-height 0.28s ease, opacity 0.2s ease,
    transform 0.28s ease, padding 0.28s ease, margin-top 0.28s ease,
    border-color 0.28s ease, box-shadow 0.28s ease;
}
.ff-cal.is-open {
  max-height: 480px;
  opacity: 1;
  transform: translateY(0);
  margin-top: 6px;
  padding: 10px;
  border-color: #e5e7eb;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.14);
}
.dark .ff-cal {
  background: #1f2937;
}
.dark .ff-cal.is-open {
  border-color: #374151;
}
.ff-cal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.ff-cal__title {
  font-weight: 700;
  font-size: 14px;
}
.ff-cal__nav {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
  background: #fff;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  color: #374151;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.ff-cal__nav:hover {
  background: #f5f3ff;
  border-color: #a78bfa;
  color: #6d28d9;
}
.dark .ff-cal__nav {
  background: #111827;
  border-color: #4b5563;
  color: #d1d5db;
}
.dark .ff-cal__nav:hover {
  background: rgba(139, 92, 246, 0.18);
}
.ff-cal__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}
.ff-cal__dow {
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  color: #9ca3af;
  padding: 4px 0;
}
.ff-cal__day {
  aspect-ratio: 1 / 1;
  border: 0;
  background: transparent;
  border-radius: 8px;
  font-size: 13px;
  color: #111827;
  cursor: pointer;
  transition: background 0.1s ease, color 0.1s ease;
}
.dark .ff-cal__day {
  color: #e5e7eb;
}
.ff-cal__day:hover:not(:disabled) {
  background: rgba(124, 58, 237, 0.12);
  color: #6d28d9;
}
.dark .ff-cal__day:hover:not(:disabled) {
  background: rgba(139, 92, 246, 0.22);
  color: #c4b5fd;
}
.ff-cal__day.is-sel {
  background: #7c3aed;
  color: #fff;
  font-weight: 700;
}
.ff-cal__day:disabled {
  color: #d1d5db;
  cursor: default;
}
.dark .ff-cal__day:disabled {
  color: #4b5563;
}

/* ---- Change page: balanced two-column card layout ----
   Two INDEPENDENT columns (each stacks its own cards, so there are no ragged
   shared-row gaps). The section split is chosen so the two columns come out
   close to the same height — symmetric. Collapses to one column on narrow
   screens. */
.ff-cols {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
@media (min-width: 1024px) {
  .ff-cols {
    grid-template-columns: 1fr 1fr;
    /* default align-items:stretch → both cards in a row share one height */
  }
  .ff-col--wide {
    grid-column: 1 / -1;
  }
  /* Full-width card: lay its fields two-across so it doesn't sit half-empty. */
  .ff-col--wide fieldset.module .form-row {
    display: inline-block;
    width: 49%;
    box-sizing: border-box;
    vertical-align: top;
    padding-right: 24px !important;
  }
}
.ff-col {
  display: flex;
  min-width: 0;
}

/* Each section becomes ONE clean white card with a light title (no heavy gray
   header bar), read-only values shown as plain text, tighter spacing. */
.ff-col > fieldset.module {
  flex: 1 1 auto;
  margin: 0 !important;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  padding: 18px 20px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.dark .ff-col > fieldset.module {
  background: #1f2937;
  border-color: #374151;
}
/* Section title = the profile page treatment: a leading purple icon + bold
   title, no gray bar and no underline. */
.ff-col > fieldset.module > h2 {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  margin: 0 0 12px 0 !important;
  padding: 0 !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #111827 !important;
  display: flex !important;
  align-items: center;
  gap: 8px;
}
.dark .ff-col > fieldset.module > h2 {
  color: #f3f4f6 !important;
}
.ff-col > fieldset.module > h2::before {
  content: "info";
  font-family: "Material Symbols Outlined";
  font-size: 20px;
  font-weight: 400;
  color: #7c3aed;
}
/* Per-section icons (DOM order of .ff-cols children: Identity, Lifecycle, Ban,
   Advanced access, Onboarding). */
.ff-cols > .ff-col:nth-child(1) > fieldset.module > h2::before {
  content: "person";
}
.ff-cols > .ff-col:nth-child(2) > fieldset.module > h2::before {
  content: "schedule";
}
.ff-cols > .ff-col:nth-child(3) > fieldset.module > h2::before {
  content: "gavel";
}
.ff-cols > .ff-col:nth-child(4) > fieldset.module > h2::before {
  content: "tune";
}
.ff-cols > .ff-col:nth-child(5) > fieldset.module > h2::before {
  content: "task_alt";
}
/* Description = muted subtitle, tight (normal readable size). */
.ff-col > fieldset.module .description {
  font-size: 13px;
  color: #6b7280;
  margin: -4px 0 14px 0;
}
.dark .ff-col > fieldset.module .description {
  color: #9ca3af;
}
/* Read-only values as plain text, not gray disabled-looking boxes. */
.ff-col .readonly {
  background: transparent !important;
  border: 0 !important;
  padding: 2px 0 !important;
  color: #111827 !important;
  font-weight: 600 !important;
}
.dark .ff-col .readonly {
  color: #f3f4f6 !important;
}
/* Tighten the field rows + drop the inner white card border (avoid double
   cards — the fieldset IS the card now). */
.ff-col fieldset.module .form-row {
  padding: 3px 0 !important;
  border: 0 !important;
}
.ff-col fieldset.module > div {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}
/* Compact each field: smaller label gap, smaller help text, tighter rows. */
.ff-col fieldset.module label {
  margin-bottom: 3px !important;
}
.ff-col fieldset.module .help,
.ff-col fieldset.module .form-row .text-sm:last-child,
.ff-col fieldset.module .form-row > .flex-grow > .text-sm {
  margin-top: 3px !important;
  line-height: 1.4 !important;
}
/* Purple hover + focus ring on the editable controls, matching the profile
   page (email input, Role / Access-status selects). */
.ff-col fieldset.module input[type="text"]:hover,
.ff-col fieldset.module input[type="email"]:hover,
.ff-col fieldset.module input[type="url"]:hover,
.ff-col fieldset.module select:hover,
.ff-col fieldset.module textarea:hover {
  border-color: #cbb0f2 !important;
}
.ff-col fieldset.module input[type="text"]:focus,
.ff-col fieldset.module input[type="email"]:focus,
.ff-col fieldset.module input[type="url"]:focus,
.ff-col fieldset.module select:focus,
.ff-col fieldset.module textarea:focus {
  border-color: #a855f7 !important;
  box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.18) !important;
  outline: none !important;
}

/* ---- References change/add forms: Option 2 — single "settings-list" card ----
   One centred card; every field is a row (label on the left, control on the
   right) separated by hairline dividers, so short fields, the icon upload and
   the Hidden toggle all sit on aligned rows. Covers add + change. */
/* Change page: form on the left, an info/summary panel on the right, so the
   short form fills the page instead of a lone small card. */
body.change-form .ref-layout {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  max-width: 1040px;
  margin: -20px auto 0 0;
}
/* Success/error message banner: match the form+panel block (1040px, left-
   aligned, same left edge as the form card) and pull it up under the
   breadcrumb instead of leaving a 48px empty band above it. */
/* Unfold gives the breadcrumb row a 48px bottom margin (lg:mb-12), leaving a
   big empty band above the search/filters toolbar on every changelist. Pull it
   in to a modest gap so the table sits closer to its breadcrumb. */
body.change-list .container.-my-3 {
  margin-bottom: 16px !important;
}
/* ---- Message banners (the green "done" strip / the red "problem" strip) ----
   Unfold gives the banner list a flat 32px bottom margin (mb-8), so a banner
   drops a big empty band between itself and the page below it while the gap
   ABOVE it is only 14-16px — it reads as belonging to nothing. Match the gap
   below to the gap above, per page type, so the banner sits evenly between the
   breadcrumb and the content. Set once here for every app; the base value also
   covers pages that are neither a list nor a form (dashboard, login, the
   delete-confirmation page). */
ul.flex.flex-col.gap-4.mb-8 {
  margin-bottom: 16px;
}
body.change-form ul.flex.flex-col.gap-4.mb-8 {
  margin-bottom: 14px;
}
/* ---- "Add" modal: the model's own add form loaded in an iframe (?_popup=1) ----
   A wider dialog with a title bar, a close (x), and an auto-sized iframe. */
.ff-addmodal {
  width: min(600px, calc(100vw - 32px));
  overflow: hidden;
}
.ff-addmodal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 20px;
  border-bottom: 1px solid #e5e7eb;
  font-size: 16px;
  font-weight: 700;
}
.dark .ff-addmodal__head {
  border-color: #374151;
}
.ff-addmodal__x {
  border: none;
  background: transparent;
  font-size: 26px;
  line-height: 1;
  color: #6b7280;
  cursor: pointer;
  padding: 0 4px;
  border-radius: 6px;
}
.ff-addmodal__x:hover {
  background: #f3f4f6;
  color: #111827;
}
.ff-addmodal__x:focus:not(:focus-visible) {
  outline: none;
}
.ff-addmodal__x:focus-visible {
  outline: 2px solid #7c3aed;
  outline-offset: 1px;
}
.dark .ff-addmodal__x:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #f3f4f6;
}
.ff-addmodal__frame {
  display: block;
  width: 100%;
  height: 360px;
  border: 0;
  background: #fff;
}
.dark .ff-addmodal__frame {
  background: #1f2937;
}
/* Compact the popup add form shown inside that iframe so it reads as ONE clean
   modal form, not a box-in-a-box with dead space:
   - strip Unfold's bordered/rounded `.aligned` card (the modal is the frame),
   - drop the 64px `mt-16` gap + 32px card margin that pushed Save far down,
   - kill the tall page min-height. */
body.popup.app-references .aligned {
  border: none !important;
  border-radius: 0 !important;
  margin-bottom: 0 !important;
}
body.popup.app-references .relative.mt-16 {
  margin-top: 26px !important;
}
/* Neutralise the change-form -26px pull inside the popup and give the content
   a small, even top/bottom breathing gap in the modal. */
body.popup.app-references form {
  margin-top: 0 !important;
}
body.popup.app-references .px-4.pb-8 {
  padding-top: 12px !important;
  padding-bottom: 16px !important;
}
body.popup.app-references #content,
body.popup.app-references main {
  min-height: 0 !important;
}
/* The popup Save button ships with no hover state — darken it on hover. */
body.popup.app-references button.bg-primary-600:hover {
  background-color: #7e22ce !important; /* purple-700 */
}
/* The "correct the errors" banner has a 32px bottom margin (mb-8) — too much
   space above the fields inside the compact modal. */
/* The "correct the errors" banner: line it up with the fields it is talking
   about. It spanned the full modal, 22px wider on each side than the inputs,
   and left a 34px gap before the first label. The 22px inset is the card's
   own horizontal padding, so the banner and the field share an edge. */
/* The popup body also carries "change-form", so the page rule below would
   otherwise add its 14px back here — hence the extra class. */
body.popup.app-references.change-form .errornote {
  margin: 0 22px 0 !important;
}
/* Chrome autofill overlays a white background + dark text on inputs, ignoring
   the dark theme — so a dark field turns white the moment it is autofilled /
   typed with a remembered value. Repaint the autofill state to match dark mode.
   (getComputedStyle never reports this overlay, so it's invisible in probes —
   only real Chrome shows it.) The inset box-shadow trick is the only way to
   override the UA autofill background. */
/* Light theme (base): keep the field white with dark text while autofilled /
   while a remembered value is being picked from the dropdown. Covers both the
   legacy -webkit- pseudo and the standard :autofill. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
input:autofill,
input:autofill:hover,
input:autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:focus,
textarea:autofill,
select:-webkit-autofill,
select:autofill {
  -webkit-text-fill-color: #374151 !important;
  -webkit-box-shadow: 0 0 0 1000px #fff inset !important;
  box-shadow: 0 0 0 1000px #fff inset !important;
  caret-color: #374151 !important;
}
.dark input:-webkit-autofill,
.dark input:-webkit-autofill:hover,
.dark input:-webkit-autofill:focus,
.dark input:-webkit-autofill:active,
.dark input:autofill,
.dark input:autofill:hover,
.dark input:autofill:focus,
.dark textarea:-webkit-autofill,
.dark textarea:-webkit-autofill:focus,
.dark textarea:autofill,
.dark select:-webkit-autofill,
.dark select:autofill {
  -webkit-text-fill-color: #e5e7eb !important;
  -webkit-box-shadow: 0 0 0 1000px #111827 inset !important;
  box-shadow: 0 0 0 1000px #111827 inset !important;
  caret-color: #e5e7eb !important;
}

/* While you HOVER / PREVIEW a proposed value in the browser dropdown (before
   committing it), Chrome paints the field with its internal preview/selected
   pseudo-classes — which the :autofill selectors above do NOT match, so the
   field flashes white with invisible text until blur. Repaint those states
   too. Kept in isolated rules: an engine that doesn't know the pseudo drops
   only its own rule, never the rules above. */
input:-internal-autofill-previewed,
input:-internal-autofill-selected {
  -webkit-text-fill-color: #374151 !important;
  -webkit-box-shadow: 0 0 0 1000px #fff inset !important;
  box-shadow: 0 0 0 1000px #fff inset !important;
  caret-color: #374151 !important;
  transition: background-color 600000s 0s, color 600000s 0s !important;
}
.dark input:-internal-autofill-previewed,
.dark input:-internal-autofill-selected {
  -webkit-text-fill-color: #e5e7eb !important;
  -webkit-box-shadow: 0 0 0 1000px #111827 inset !important;
  box-shadow: 0 0 0 1000px #111827 inset !important;
  caret-color: #e5e7eb !important;
  transition: background-color 600000s 0s, color 600000s 0s !important;
}

/* The submit-row Delete link ships with no hover state — give it the same
   darken-on-hover feedback as the Save buttons. */
body.app-references.change-form a.bg-red-600 {
  transition: background-color 0.15s ease;
}
body.app-references.change-form a.bg-red-600:hover {
  background-color: #b91c1c !important; /* red-700 */
}
.dark body.app-references.change-form a.bg-red-600:hover {
  background-color: rgba(239, 68, 68, 0.32) !important;
}
body.change-form .ref-layout__form {
  flex: 1 1 auto;
  min-width: 0;
}
/* neutralise the add-form pull-up when the form sits inside the layout, so the
   form card and the panel top-align. */
body.change-form .ref-layout__form form:first-child {
  margin-top: 0;
}
/* inside the layout the form card fills its column, flush-left (Unfold adds an
   8px !important side margin we must override so its left edge matches the
   banner and the panel's right edge). */
body.change-form .ref-layout__form fieldset.module {
  max-width: none;
  margin: 0 !important;
}
.ref-panel {
  flex: 0 0 320px;
  display: flex;
  flex-direction: column;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  padding: 20px;
  background: #fff;
  box-shadow: 0 2px 12px rgba(17, 24, 39, 0.05);
}
.ref-panel__head {
  display: flex;
  align-items: center;
  gap: 12px;
}
.ref-panel__icon {
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(135deg, #7c3aed 0%, #a855f7 100%);
  box-shadow: 0 6px 16px rgba(124, 58, 237, 0.3);
}
.ref-panel__kind {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #7c3aed;
}
.ref-panel__title {
  font-size: 16px;
  font-weight: 700;
  color: #111827;
  line-height: 1.25;
  word-break: break-word;
}
.ref-panel__badges {
  margin-top: 14px;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.ref-panel__facts {
  margin: 16px 0 0;
  border-top: 1px solid #f0f0f3;
}
.ref-fact {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  font-size: 13px;
  border-bottom: 1px solid #f6f6f8;
}
.ref-fact dt {
  color: #6b7280;
}
.ref-fact dd {
  margin: 0;
  color: #111827;
  font-weight: 600;
  text-align: right;
  word-break: break-word;
}
.ref-panel__tip {
  margin-top: 16px;
  font-size: 12px;
  line-height: 1.5;
  color: #9ca3af;
}
html.dark .ref-panel {
  background: #111827;
  border-color: #374151;
}
html.dark .ref-panel__title {
  color: #f3f4f6;
}
html.dark .ref-fact dd {
  color: #e5e7eb;
}
html.dark .ref-fact,
html.dark .ref-panel__facts {
  border-color: #1f2937;
}
/* Add form (no panel): keep the single card tight under the breadcrumb. */
/* ===== Availability change page: pixel-exact match to the reference design.
   Values below were measured off the reference and applied 1:1. Content area
   only (never the menu/chrome). ===== */
/* Hero badges: bolder weight + a hair more vertical padding. */
.ff-hero__badges .dd-badge {
  font-weight: 700;
  padding: 3px 10px;
}
/* Editable controls: 8px radius + a bluish input fill in dark (reference
   #131b2b). Checkboxes are excluded — they render as the toggle / trash icon. */
body.app-availability.change-form #id_daily_call_limit,
body.app-availability.change-form .inline-group input:not([type="checkbox"]),
body.app-availability.change-form .inline-group select {
  border-radius: 8px !important;
}
html.dark body.app-availability.change-form #id_daily_call_limit,
html.dark
  body.app-availability.change-form
  .inline-group
  input:not([type="checkbox"]),
html.dark body.app-availability.change-form .inline-group select {
  background: #131b2b !important;
}
/* Read-only "Paused until" box: 8px radius, matching the inputs. */
body.app-availability.change-form .field-paused_until .readonly {
  border-radius: 8px !important;
}
/* Help text: smaller, muted grey, capped width (reference). */
html.dark body.app-availability.change-form .aligned .form-row .text-xs {
  font-size: 12.5px !important;
  color: #6b7280 !important;
  max-width: 260px;
}
/* Rules table headers: 13px, muted slate, reference padding; cells left-align
   under their header (left padding 0). */
body.app-availability.change-form .inline-group thead th {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #cbd5e1 !important;
  padding: 4px 28px 12px 0 !important;
}
body.app-availability.change-form .inline-group tbody td {
  padding: 6px 28px 6px 0 !important;
}
/* Page canvas: deep navy-black with a soft purple glow (reference), replacing
   the flat grey. Dark theme only. */
html.dark body.app-availability {
  background:
    radial-gradient(1100px 520px at 78% -6%, rgba(124, 58, 237, 0.10), transparent 62%),
    #0a0f1c !important;
}

/* ===== Match the no-menu reference (content only — the menu is left alone). ===== */
/* Weekday select: down-chevron on the right, keeping the bluish fill. */
html.dark
  body.app-availability.change-form
  .inline-group
  select[name$="-weekday"] {
  background-color: #131b2b !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 10px center !important;
  background-size: 16px !important;
}
/* "Add rule": text only, no plus icon; slightly larger + bolder. */
.av-addbtn .material-symbols-outlined {
  display: none;
}
.av-addbtn {
  height: 34px;
  padding: 0 16px;
  font-weight: 700;
}
/* Availability-rules card header: calendar-check icon (not the sliders glyph). */
body.app-availability.change-form .inline-group h2::before {
  content: "event_available" !important;
}
/* Time inputs: collapse the min-w-48 wrapper so Start/End columns hug the input. */
body.app-availability.change-form .inline-group .min-w-48 {
  min-width: 0 !important;
}
/* Tighter rule rows + hug the card bottom; centre every cell so the toggle and
   trash icon line up with the selects / time inputs. */
body.app-availability.change-form .inline-group tbody td {
  padding: 2px 28px 2px 0 !important;
  vertical-align: middle !important;
}
/* The delete cell wraps its checkbox in a div with a lg:mt-3 (12px) top margin
   that drops the trash icon below the row — remove it. Centre the content so
   the trash lands under the "Delete" header, and a saved row's trash (ml-auto
   checkbox) and a new row's trash (plain link) share the same vertical line. */
body.app-availability.change-form .inline-group td.delete {
  text-align: center !important;
  vertical-align: middle !important;
}
/* Flatten the flex/ml-auto wrappers to plain centred blocks so the trash
   lands dead-centre under the "Delete" header (text-align does the centring;
   the input becomes an inline-block that the centred text flow lays out). */
body.app-availability.change-form .inline-group td.delete > div,
body.app-availability.change-form .inline-group td.delete > div > div {
  display: inline-block !important;
  width: auto !important;
  margin: 0 !important;
}
body.app-availability.change-form .inline-group td.delete input {
  display: inline-block !important;
  float: none !important;
  margin: 0 !important;
}
/* Centre the "Delete" header over the now-centred trash. */
body.app-availability.change-form .inline-group th.column-delete,
body.app-availability.change-form .inline-group thead th:last-child {
  text-align: center !important;
}
/* New (unsaved) rows show a "Remove" text link instead of the DELETE checkbox —
   render it as the same plain-outline trash icon. */
body.app-availability.change-form
  .inline-group
  td.delete
  a.inline-deletelink {
  display: inline-block;
  width: 34px;
  height: 34px;
  font-size: 0;
  /* Unfold gives the link a top margin that drops it below the row — clear it
     so a new row's trash sits on the same line as the saved rows'. */
  margin: 0 !important;
  vertical-align: middle;
  border-radius: 7px;
  text-decoration: none;
  background-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23aab2bf' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18M8 6V4h8v2M6 6l1 14h10l1-14'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 21px;
}
body.app-availability.change-form
  .inline-group
  td.delete
  a.inline-deletelink:hover {
  background-color: rgba(239, 68, 68, 0.15);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23ef4444' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18M8 6V4h8v2M6 6l1 14h10l1-14'/%3E%3C/svg%3E");
}
body.app-availability.change-form fieldset.module:has(.inline-group) {
  padding-bottom: 6px !important;
}
/* "Paused until" fills its column (wide box, reference). */
body.app-availability.change-form .field-paused_until .readonly {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}
/* Hero badges: solid tinted fills, no border. */
.ff-hero__badges .dd-badge {
  border: 0 !important;
}
/* Hero badges are links to the filtered giver-availability list — give them a
   pointer + a brighten-on-hover cue. */
.ff-hero__badges a.dd-badge {
  cursor: pointer;
  text-decoration: none;
  transition: filter 0.12s ease, box-shadow 0.12s ease;
}
/* Keep the hover subtle: the SAME muted base hue, just a touch more opaque +
   a faint neutral ring — NOT the global solid fill / a bright saturated colour,
   which reads too bright in the hero. Text colour is unchanged. */
.ff-hero__badges a.dd-badge:hover,
.lc-detail a.dd-badge:hover {
  filter: none;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08) inset;
}
.ff-hero__badges a.dd-badge--green:hover,
.lc-detail a.dd-badge--green:hover {
  background: rgba(22, 101, 52, 0.45) !important;
  color: #86efac !important;
}
.ff-hero__badges a.dd-badge--amber:hover,
.lc-detail a.dd-badge--amber:hover {
  background: rgba(146, 64, 14, 0.45) !important;
  color: #fcd34d !important;
}
.ff-hero__badges a.dd-badge--red:hover,
.lc-detail a.dd-badge--red:hover {
  background: rgba(153, 27, 27, 0.45) !important;
  color: #fca5a5 !important;
}
.ff-hero__badges a.dd-badge--violet:hover,
.lc-detail a.dd-badge--violet:hover {
  background: rgba(91, 33, 182, 0.5) !important;
  color: #c4b5fd !important;
}
.ff-hero__badges a.dd-badge--blue:hover,
.lc-detail a.dd-badge--blue:hover {
  background: rgba(30, 64, 175, 0.5) !important;
  color: #93c5fd !important;
}
.ff-hero__badges a.dd-badge--gray:hover,
.lc-detail a.dd-badge--gray:hover {
  background: rgba(55, 65, 81, 0.55) !important;
  color: #d1d5db !important;
}
.ff-hero__badges .dd-badge--green {
  background: rgba(34, 197, 94, 0.16) !important;
  color: #4ade80 !important;
}
.ff-hero__badges .dd-badge--blue {
  background: rgba(59, 130, 246, 0.16) !important;
  color: #60a5fa !important;
}
/* Email carries no hover-underline border in the design file (which also keeps
   the hero the same height). */
body.app-availability .ff-hero__email {
  border-bottom: 0 !important;
}
/* Hero (top section) uses the same fill as the Settings / rules cards — no
   purple gradient — so all sections share one colour. */
body.app-availability .ff-hero {
  background: #fff !important;
}
html.dark body.app-availability .ff-hero {
  background: #1f2937 !important;
}
/* Required-field asterisk: pink/magenta. */
body.app-availability.change-form .form-row label .text-red-600 {
  color: #f472b6 !important;
}
/* Hero spacing to match the design file: 14px below the breadcrumb, 18px above
   the Settings card. */
.ff-hero {
  margin: 0 0 18px 0 !important;
}
/* Save actions live in the hero header (Cancel + Save), same as the user
   profile page — hide the default sticky footer submit row. */
body.app-availability.change-form:not(.popup) .relative.mt-16 {
  display: none !important;
}

/* "01:30" is narrower than the old "01:30:00", so the time columns shrank —
   give the dropdowns the original ~132px width back. */
body.app-availability.change-form .inline-group td.field-start_time select,
body.app-availability.change-form .inline-group td.field-end_time select {
  width: 100% !important;
  min-width: 132px !important;
}

/* Inline "Open" link: jump from a rule row to that rule's own page. */
body.app-availability.change-form .av-open-rule {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #9ca3af;
  transition: color 0.12s ease;
  /* The material glyph sits ~3px high in its line box — drop the icon so its
     centre lands on the same row line as the fields, switch and trash. */
  position: relative;
  top: 3px;
}
body.app-availability.change-form .av-open-rule:hover {
  color: #a78bfa;
}
/* Unsaved rule: the icon is present (for column consistency) but muted and
   inert until the row is saved. */
body.app-availability.change-form .av-open-rule--muted {
  color: #4b5563;
  cursor: default;
}
body.app-availability.change-form .av-open-rule--muted:hover {
  color: #4b5563;
}
body.app-availability.change-form .av-open-rule .material-symbols-outlined {
  font-size: 20px;
  line-height: 1;
}
/* Centre the icon under its "Open" header and middle-align it with the row's
   fields; strip the default read-only box around it. */
body.app-availability.change-form th.column-open_link,
body.app-availability.change-form td.field-open_link {
  text-align: center !important;
  vertical-align: middle !important;
}
body.app-availability.change-form td.field-open_link > div,
body.app-availability.change-form td.field-open_link .readonly {
  display: inline-block !important;
  width: auto !important;
  margin: 0 !important;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
}

/* ===== Availability rule "Schedule" card =====
   Only four controls, so keep them on ONE line — Weekday · Start · End ·
   Active — spread evenly across the full card width. */
body.model-availabilityrule.change-form fieldset.module > .aligned {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  column-gap: 32px !important;
  max-width: none !important;
}
body.model-availabilityrule.change-form .aligned .form-row select {
  width: 100% !important;
}
/* Unfold renders a boolean as [toggle · (label / help)] — the label and help
   are bundled beside the switch, leaving this column out of step with the
   other three (label on top, control below). Flatten the wrappers and reorder
   into label → switch → help so it reads exactly like Weekday/Start/End. */
body.model-availabilityrule.change-form .field-is_active .flex.group {
  display: flex !important;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}
body.model-availabilityrule.change-form .field-is_active .flex.flex-row,
body.model-availabilityrule.change-form
  .field-is_active .flex.flex-row > .flex.flex-col {
  display: contents;
}
body.model-availabilityrule.change-form
  .field-is_active .flex.flex-row > .flex.flex-col > label {
  order: 1;
  margin: 0 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
}
/* Restore the switch's natural size (the generic ".form-row input" rule
   stretches it) and give it a slot the same height as the 38px selects with
   the switch centred — so it reads on the same line as Weekday/Start/End AND
   the help below lands on the End-time help's line. */
body.model-availabilityrule.change-form
  .field-is_active input[type="checkbox"] {
  order: 2;
  width: 2rem !important;
  min-width: 2rem;
  flex: 0 0 auto;
  /* 38px select height − 20px switch = 18px, split top/bottom to centre the
     switch AND make its slot as tall as a select so the help lines up. */
  margin: 9px 0;
}
body.model-availabilityrule.change-form
  .field-is_active .flex.flex-row > .flex.flex-col > *:not(label) {
  order: 3;
  margin-left: 0 !important;
  margin-top: -6px !important;
}

/* ===== The "+" add form shown inside the reference modal (?_popup=1) =====
   The modal is already a white panel with its own title, so the page inside
   it must not draw a second bordered card with a second heading. Fields sit
   flush on the modal's own surface and the submit row becomes a right-aligned
   Cancel + Add pair, matching the "Add availability rule" modal. */
html:has(body.popup.app-references),
body.popup.app-references {
  overflow: hidden !important;
  scrollbar-width: none;
}
html:has(body.popup.app-references)::-webkit-scrollbar,
body.popup.app-references::-webkit-scrollbar {
  width: 0;
  height: 0;
}
body.popup.app-references {
  padding: 0 !important;
}
html.dark body.popup.app-references {
  background: #1f2937 !important;
}
/* No card inside the card. */
body.popup.app-references.change-form fieldset.module {
  border: 0 !important;
  box-shadow: none !important;
  margin: 0 !important;
  padding: 20px 22px 6px !important;
  background: transparent !important;
}
/* The modal's own title already says what this form adds. */
body.popup.app-references.change-form fieldset.module > h2 {
  display: none !important;
}
/* The modal is narrower than the page, so the long text fields take a whole
   row each — but a position and a switch are both small, so they share the
   last line instead of leaving half the modal empty beside them. */
body.popup.app-references.change-form fieldset.module > .aligned {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 22px;
}
body.popup.app-references .form-row.field-name,
body.popup.app-references .form-row.field-slug,
body.popup.app-references .form-row.field-tz_name,
body.popup.app-references .form-row.field-text {
  grid-column: 1 / -1;
}
/* On the full page the banner spans the card, which is right — but it kept
   Unfold's 32px bottom margin, twice the 14px rhythm the rest of the page
   uses between the breadcrumb, the banner and the hero. */
body.app-references.change-form .errornote {
  margin-bottom: 14px !important;
}

/* The submit row: a plain right-aligned bar, not the sticky page footer. */
body.popup.app-references .relative.mt-16 {
  margin-top: 0 !important;
}
body.popup.app-references .lg\:fixed {
  position: static !important;
}
body.popup.app-references .relative.mt-16 > div > div {
  background: transparent !important;
  border-top: 1px solid #e5e7eb !important;
  padding: 14px 22px !important;
}
html.dark body.popup.app-references .relative.mt-16 > div > div {
  border-top-color: #374151 !important;
}
body.popup.app-references .relative.mt-16 .container {
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  flex-direction: row !important;
  justify-content: flex-end !important;
  gap: 10px !important;
}
body.popup.app-references [name="_save"] {
  background: #7c3aed !important;
  border-radius: 8px !important;
  display: inline-flex !important;
  width: auto !important;
  padding: 9px 22px !important;
}
body.popup.app-references [name="_save"]:hover {
  background: #6d28d9 !important;
}
/* The compact modal offers one action, not three. */
body.popup.app-references [name="_addanother"],
body.popup.app-references [name="_continue"] {
  display: none !important;
}
/* The Cancel that sits beside it (added by the popup template). */
.ref-popup-cancel {
  display: inline-flex;
  align-items: center;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  background: #fff;
  color: #374151;
  font-size: 14px;
  font-weight: 500;
  padding: 9px 18px;
  cursor: pointer;
  transition: background 0.12s ease;
}
.ref-popup-cancel:hover {
  background: #f3f4f6;
}
html.dark .ref-popup-cancel {
  background: transparent;
  border-color: #4b5563;
  color: #e5e7eb;
}
html.dark .ref-popup-cancel:hover {
  background: rgba(255, 255, 255, 0.06);
}

/* ===== "Add availability" shown inside the "+" modal (Django ?_popup=1):
   one clean flush form on the modal's own surface, with a visible Save row. ===== */
html:has(body.popup.app-availability),
body.popup.app-availability {
  overflow: hidden !important;
  scrollbar-width: none;
}
html:has(body.popup.app-availability)::-webkit-scrollbar,
body.popup.app-availability::-webkit-scrollbar {
  width: 0;
  height: 0;
}
body.popup.app-availability {
  padding: 0 !important;
}
html.dark body.popup.app-availability {
  background: #1f2937 !important;
}
body.popup.app-availability.change-form fieldset.module {
  border: 0 !important;
  box-shadow: none !important;
  margin: 0 !important;
  padding: 20px 22px 6px !important;
  background: transparent !important;
}
/* The submit row: a plain right-aligned bar (not the sticky footer). */
body.popup.app-availability .relative.mt-16 {
  margin-top: 0 !important;
}
body.popup.app-availability .lg\:fixed {
  position: static !important;
}
body.popup.app-availability .scrollable-top {
  background: transparent !important;
  border-top: 1px solid #374151 !important;
  padding: 14px 22px !important;
}
body.popup.app-availability .scrollable-top > .container {
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  justify-content: flex-end !important;
}
body.popup.app-availability [name="_save"] {
  background: #7c3aed !important;
  border-radius: 8px !important;
  display: inline-flex !important;
  width: auto !important;
  padding: 9px 22px !important;
}
/* Hide the extra "Save and add another" / "continue" in the compact modal. */
body.popup.app-availability [name="_addanother"],
body.popup.app-availability [name="_continue"] {
  display: none !important;
}
/* Delete: plain-outline trash can (grey; red on hover / when checked). */
body.app-availability.change-form
  .inline-group
  input[type="checkbox"][name$="-DELETE"] {
  width: 34px !important;
  height: 34px !important;
  background-color: transparent !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23aab2bf' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18M8 6V4h8v2M6 6l1 14h10l1-14'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 21px !important;
}
body.app-availability.change-form
  .inline-group
  input[type="checkbox"][name$="-DELETE"]::after {
  content: none !important;
}
body.app-availability.change-form
  .inline-group
  input[type="checkbox"][name$="-DELETE"]:hover,
body.app-availability.change-form
  .inline-group
  input[type="checkbox"][name$="-DELETE"]:checked {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23ef4444' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18M8 6V4h8v2M6 6l1 14h10l1-14'/%3E%3C/svg%3E") !important;
}

/* ---------------------------------------------------------------------------
   Feature 008 — Lifecoin wallet admin: hero spacing, plain-text readonly
   values, and hiding the no-op footer save row (the wallet has no editable
   fields — the balance moves only through the Add/Deduct modals).

   The body card matches the user-profile / giver-availability pages EXACTLY
   (same fieldset card, icon+title header, two-column grid, muted readonly
   values) so the wallet page reads as a member of the same family.
--------------------------------------------------------------------------- */
body.app-lifecoin.change-form .container.-my-3 {
  margin-bottom: 14px !important;
}

/* The wallet body is REPLACED by a "Transactions" table card (rendered in the
   change_form template); hide the default readonly fieldset entirely. Balance /
   reserved / available already live in the hero badges above. */
body.app-lifecoin.model-wallet.change-form fieldset.module {
  display: none !important;
}

/* Transactions table card — same family shell as the profile / availability /
   transaction cards (icon + title header, rounded card, subtle border). */
.lc-txns-card, .ff-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  padding: 14px 20px 16px;
  margin: 0 0 18px;
  box-shadow: 0 1px 3px rgba(16, 24, 40, 0.05);
}
.dark .lc-txns-card, .dark .ff-card {
  background: #1f2937;
  border-color: #374151;
}
.lc-txns-card__head, .ff-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 12px;
}
.lc-txns-card__title, .ff-card__title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
  color: #111827;
}
.dark .lc-txns-card__title, .dark .ff-card__title {
  color: #f3f4f6;
}
.lc-txns-card__title .material-symbols-outlined, .ff-card__title .material-symbols-outlined {
  font-size: 20px;
  color: #7c3aed;
}
.lc-txns-card__all, .ff-card__all {
  font-size: 13px;
  font-weight: 600;
  color: #7c3aed;
  white-space: nowrap;
}
.lc-txns-card__all:hover, .ff-card__all:hover {
  text-decoration: underline;
}
.lc-txns-wrap, .ff-table-wrap {
  overflow-x: auto;
}
.lc-txns, .ff-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.lc-txns thead th, .ff-table thead th {
  text-align: left;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #6b7280;
  padding: 0 14px 10px 0;
  border-bottom: 1px solid #e5e7eb;
  white-space: nowrap;
}
.dark .lc-txns thead th, .dark .ff-table thead th {
  color: #9ca3af;
  border-bottom-color: #374151;
}
.lc-txns th.lc-txns__amount,
.lc-txns td.lc-txns__amount, .lc-txns td.ff-table__num {
  text-align: right;
  padding-right: 0;
  white-space: nowrap;
}
/* The same, for a table that is NOT inside the transactions card: the
   class reads as a shared one, so it has to behave like one wherever it
   is used — otherwise a right-hand column quietly sits left. */
td.ff-table__num {
  text-align: right;
  padding-right: 0;
  white-space: nowrap;
}
.lc-txns tbody td, .ff-table tbody td {
  padding: 10px 14px 10px 0;
  border-bottom: 1px solid #f0f1f3;
  color: #374151;
  vertical-align: middle;
}
.dark .lc-txns tbody td, .dark .ff-table tbody td {
  border-bottom-color: #2b3543;
  color: #d1d5db;
}
.lc-txns tbody tr:last-child td, .ff-table tbody tr:last-child td {
  border-bottom: 0;
}
.lc-txns tbody tr[data-href], .ff-table tbody tr[data-href] {
  cursor: pointer;
}
.lc-txns tbody tr[data-href]:hover td, .ff-table tbody tr[data-href]:hover td {
  background: #faf7ff;
}
.dark .lc-txns tbody tr[data-href]:hover td, .dark .ff-table tbody tr[data-href]:hover td {
  background: rgba(124, 58, 237, 0.08);
}
.lc-txns__date, .ff-table__muted {
  color: #6b7280;
  white-space: nowrap;
}
.dark .lc-txns__date, .dark .ff-table__muted {
  color: #9ca3af;
}
.lc-txns__reason,
.lc-txns__by, .ff-table__by {
  color: #6b7280;
}
.dark .lc-txns__reason,
.dark .lc-txns__by, .dark .ff-table__by {
  color: #9ca3af;
}
.lc-txns__by, .ff-table__by {
  white-space: nowrap;
}
.lc-txns-empty, .ff-table-empty {
  padding: 22px 0 10px;
  text-align: center;
  color: #6b7280;
  font-size: 14px;
}
.dark .lc-txns-empty, .dark .ff-table-empty {
  color: #9ca3af;
}

/* Readonly values as plain text, not gray disabled-looking boxes. */
body.app-lifecoin.change-form .form-row .readonly {
  background: transparent !important;
  border: 0 !important;
  padding: 2px 0 !important;
  color: #6b7280 !important;
}
.dark body.app-lifecoin.change-form .form-row .readonly {
  color: #9ca3af !important;
}
body.app-lifecoin.change-form .form-row {
  margin-bottom: 4px !important;
  padding: 0 !important;
}
body.app-lifecoin.change-form .form-row > div.flex-col {
  margin-bottom: 0 !important;
}
/* The Wallet change form has only readonly fields, so the sticky footer Save
   row is a no-op — hide it (the money actions live in the hero). */
body.app-lifecoin.model-wallet.change-form .relative.mt-16 {
  display: none !important;
}

/* --- Lifecoin transaction change form: the raw readonly fieldset (DB jargon,
   PKs, idempotency hash) is REPLACED by a plain-language "Transaction" detail
   card rendered in the template — hide the default fieldset. The immutable
   ledger row is view-only, so the footer Save row is hidden too. --- */
body.app-lifecoin.model-lifecointransaction.change-form fieldset.module {
  display: none !important;
}
body.app-lifecoin.model-lifecointransaction.change-form .relative.mt-16 {
  display: none !important;
}

/* Transaction detail grid — friendly label/value pairs in the SAME two-column
   layout as the family cards; a long "Reference ID" spans the full row. */
.lc-detail {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px 30px;
}
@media (min-width: 1024px) {
  .lc-detail {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .lc-detail__full {
    grid-column: 1 / -1;
  }
}
.lc-detail__item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.lc-detail__label {
  font-size: 13px;
  font-weight: 600;
  color: #374151;
}
.dark .lc-detail__label {
  color: #e5e7eb;
}
.lc-detail__value {
  font-size: 14px;
  color: #6b7280;
}
.dark .lc-detail__value {
  color: #9ca3af;
}
.lc-detail__link {
  color: #7c3aed;
  text-decoration: none;
}
.lc-detail__link:hover {
  text-decoration: underline;
}
.dark .lc-detail__link {
  color: #a78bfa;
}
/* The reference id (idempotency hash) — a subtle, technical footnote. */
.lc-detail__ref {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12.5px;
  color: #9ca3af;
  word-break: break-all;
}
.dark .lc-detail__ref {
  color: #6b7280;
}

/* Add / Change user page: the "Please correct the errors below" banner floats
   with too much air — the breadcrumb container leaves 48px above it and the
   banner itself carries a 32px bottom margin. Trim both to the page rhythm. */
body.app-accounts.change-form .container.-my-3 {
  margin-bottom: 14px !important;
}
body.app-accounts.change-form .errornote {
  margin-bottom: 14px !important;
}

/* Hide the stock bulk-action bar on the bookings changelist too — the
   dedicated "Export to CSV" button replaces it there, exactly as on users.
   Row checkboxes stay so rows are still selectable for the export. */
body.app-bookings.model-callbooking.change-list .actions {
  display: none !important;
}

/* ===========================================================================
   Feature 006 — bookings / talk-now screens.
   The header card, data cards and tables are the shared ff-* treatments used
   by the wallet and profile pages; only the few shapes unique to a session
   live here.
   =========================================================================== */

/* Unfold leaves 48px under the breadcrumb; pull the header card up to the
   same 14px rhythm the profile and availability pages use. */
body.app-bookings.change-form .container.-my-3 {
  margin-bottom: 14px !important;
}

/* An icon stands in for the avatar: a session is not a person. */
.ff-hero__avatar--icon {
  background: linear-gradient(135deg, #7c3aed, #a855f7);
}
.ff-hero__avatar--icon .material-symbols-outlined {
  font-size: 28px;
  color: #fff;
}

.bk-hero__title {
  font-size: 20px;
  font-weight: 700;
  color: #111827;
  line-height: 1.2;
  margin-bottom: 8px;
}
.dark .bk-hero__title {
  color: #f9fafb;
}
.bk-hero__people {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
  margin-top: 9px;
  font-size: 13px;
}
.bk-hero__role {
  color: #6b7280;
}
.dark .bk-hero__role {
  color: #9ca3af;
}
/* The participants read as plain text until hovered — the same restraint the
   changelist email links use, not a second row of loud links. */
.bk-hero__person {
  font-size: 13px;
  font-weight: 600;
}

/* One sentence under the header saying what state the session is in. */
.bk-note {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  background: #f5f3ff;
  border: 1px solid #ddd6fe;
  border-radius: 12px;
  padding: 11px 14px;
  margin: 0 0 18px;
  font-size: 13.5px;
  line-height: 1.5;
  color: #4c1d95;
}
.bk-note .material-symbols-outlined {
  font-size: 19px;
  line-height: 1.3;
  color: #7c3aed;
  flex: 0 0 auto;
}
.dark .bk-note {
  background: rgba(124, 58, 237, 0.12);
  border-color: rgba(139, 92, 246, 0.3);
  color: #ddd6fe;
}
.dark .bk-note .material-symbols-outlined {
  color: #c4b5fd;
}

/* Two cards side by side on a wide screen, stacked on a narrow one. */
.bk-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 18px;
}
.bk-grid > .ff-card {
  margin-bottom: 18px;
}

/* Label / value rows inside a card. */
.bk-facts {
  margin: 0;
}
.bk-facts__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 9px 0;
  border-bottom: 1px solid #f0f1f3;
}
.bk-facts__row:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}
.dark .bk-facts__row {
  border-bottom-color: #2b3543;
}
.bk-facts dt {
  color: #6b7280;
  font-size: 13px;
  margin: 0;
}
.dark .bk-facts dt {
  color: #9ca3af;
}
.bk-facts dd {
  margin: 0;
  color: #111827;
  font-size: 13.5px;
  font-weight: 600;
  text-align: right;
}
.dark .bk-facts dd {
  color: #e5e7eb;
}

.bk-agenda__topic {
  margin-bottom: 10px;
}
.bk-agenda {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: #374151;
}
.dark .bk-agenda {
  color: #d1d5db;
}
.bk-empty {
  margin: 0;
  font-size: 13.5px;
  color: #9ca3af;
}

/* A timestamp in a list cell reads quieter than the value beside it. */
.bk-when {
  white-space: nowrap;
}

/* Before / after times on a move request. */
.bk-move {
  display: flex;
  align-items: stretch;
  gap: 14px;
}
/* The "change being asked for" card and its two date blocks. */
.bk-card--center {
  display: flex;
  flex-direction: column;
}
.bk-card--center .bk-move {
  flex: 1 1 auto;
  align-items: center;
}
@media (min-width: 1024px) {
  /* Side by side, this card is stretched to match the taller one next to it.
     Centring the blocks in the space UNDER the title left them sitting below
     the card's real middle, because the title itself takes the top of the
     card. Lift them out of the flow and centre them on the card instead, so
     the middle of the blocks is the middle of the section. The min-height
     keeps the card taller than its own content, so nothing can overlap the
     title if the card beside it is ever the shorter one. Narrower than this
     the cards stack and the blocks stay in normal flow. */
  .bk-card--center {
    position: relative;
    min-height: 9.5rem;
  }
  .bk-card--center .bk-move {
    position: absolute;
    left: 20px;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
  }
}
.bk-move__side {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 12px 14px;
  min-width: 0;
}
.bk-move__side--new {
  background: #f5f3ff;
  border-color: #ddd6fe;
}
.dark .bk-move__side {
  background: rgba(17, 24, 39, 0.45);
  border-color: #374151;
}
.dark .bk-move__side--new {
  background: rgba(124, 58, 237, 0.13);
  border-color: rgba(139, 92, 246, 0.32);
}
.bk-move__label {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #6b7280;
}
.dark .bk-move__label {
  color: #9ca3af;
}
.bk-move__value {
  font-size: 14.5px;
  font-weight: 700;
  color: #111827;
}
.dark .bk-move__value {
  color: #f3f4f6;
}
.bk-move__arrow {
  align-self: center;
  font-size: 22px;
  color: #9ca3af;
  flex: 0 0 auto;
}
/* A status inside a "was -> became" block doubles as a filter link. It reads
   as plain text until hovered, the same restraint the participant links use,
   so the block still reads as a value and not as a row of loud links. */
.bk-move__link {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.12s ease, color 0.12s ease;
}
.bk-move__link:hover {
  color: #6d28d9;
  border-bottom-color: #c4b5fd;
}
.dark .bk-move__link:hover {
  color: #c4b5fd;
  border-bottom-color: #7c3aed;
}
/* The reason sits where the status badges used to, right under the title. */
.bk-hero__reason {
  display: flex;
  align-items: baseline;
  gap: 7px;
  flex-wrap: wrap;
  margin-top: 8px;
  font-size: 13px;
}
.bk-hero__why {
  font-weight: 600;
  color: #111827;
}
.dark .bk-hero__why {
  color: #f3f4f6;
}
.bk-hero__why--none {
  font-weight: 400;
  font-style: italic;
  color: #6b7280;
}
.dark .bk-hero__why--none {
  color: #9ca3af;
}
.dark .bk-move__arrow {
  color: #6b7280;
}

/* ---- Reference change pages (topic / time zone / suggestion) -----------
   Built to the same pattern as the user-profile and availability-rule pages:
   an identity hero, then one titled card whose fields sit in two columns.
   This replaced an older layout that boxed the fields in an inner panel with
   the label to the left of each control. */
body.app-references.change-form .container.-my-3 {
  margin-bottom: 14px !important;
}
/* The hero replaces the panel, so drop the add-form pull-up that used to
   align the old two-column layout under the breadcrumb. */
body.app-references.change-form form:first-child {
  margin-top: 0;
}
/* The card: same paper, radius, padding and shadow as the profile card. */
body.app-references.change-form form:first-child fieldset.module,
body.app-references.change-form fieldset.module {
  max-width: none;
  margin: 0 !important;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  padding: 22px 26px;
  box-shadow: 0 1px 3px rgba(16, 24, 40, 0.05);
}
/* Match the light rule's shape exactly, or it outranks this one and the card
   stays white in dark mode. */
.dark
  body.app-references.change-form
  form:first-child
  fieldset.module,
.dark body.app-references.change-form fieldset.module {
  background: #1f2937;
  border-color: #374151;
}
/* The card title, with the same violet leading icon the other cards use. */
body.app-references.change-form fieldset.module > h2 {
  display: flex !important;
  background: transparent !important;
  border: none !important;
  padding: 0 0 18px !important;
  margin: 0 !important;
  font-size: 15px;
  font-weight: 700;
  color: #111827;
  align-items: center;
  gap: 8px;
}
.dark body.app-references.change-form fieldset.module > h2 {
  color: #f3f4f6;
}
body.app-references.change-form fieldset.module > h2::before {
  content: "sell";
  font-family: "Material Symbols Outlined";
  font-size: 20px;
  color: #7c3aed;
  font-weight: 400;
}
/* Undo the shared reference styling that made each field a divided row with
   its label to the left; here the label sits above its input. */
body.app-references.change-form fieldset.module .aligned {
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
  box-shadow: none;
}
body.app-references.change-form fieldset.module .form-row {
  margin-bottom: 10px !important;
  padding: 0 !important;
  border: none !important;
  display: block !important;
}
body.app-references.change-form
  fieldset.module
  .form-row
  > div.flex-col {
  margin-bottom: 0 !important;
}
body.app-references.change-form fieldset.module .form-row label {
  display: block !important;
  width: auto !important;
  margin-bottom: 6px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #111827 !important;
}
.dark
  body.app-references.change-form
  fieldset.module
  .form-row
  label {
  color: #e5e7eb !important;
}
/* Text-ish controls fill their column; a toggle must stay its own size. */
body.app-references.change-form
  fieldset.module
  .form-row
  input:not([type="checkbox"]),
body.app-references.change-form fieldset.module .form-row select {
  width: 100%;
  box-sizing: border-box;
}
@media (min-width: 1024px) {
  body.app-references.change-form fieldset.module > .aligned {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 30px;
    row-gap: 4px;
  }
}
/* A position is a 1-2 digit number; a full-width box for it looked like a
   mistake next to the text fields. Same treatment as the daily call limit. */
body.app-references.change-form #id_sort_order {
  max-width: 140px;
  appearance: textfield;
  -moz-appearance: textfield;
}
body.app-references.change-form
  #id_sort_order::-webkit-inner-spin-button,
body.app-references.change-form
  #id_sort_order::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
/* The shared reference page paints this inner wrapper as its own dark panel
   (that layout draws a bordered box around the fields). The topic card has no
   inner box — the card IS the surface — so a painted wrapper showed up as a
   black rectangle inside the card in dark mode. Keep it transparent in both
   themes, exactly as the user-profile card does. */
html.dark body.app-references.change-form fieldset.module .aligned,
body.app-references.change-form fieldset.module .aligned {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
html.dark
  body.app-references.change-form
  .aligned
  .form-row {
  border-bottom-color: transparent !important;
}
/* Unfold renders a boolean as [switch · (label / help)], which bundles the
   hint into a narrow column beside the switch and leaves this field out of
   step with the other three. Flatten the wrappers and reorder into
   label -> switch -> help, exactly as the availability page does. */
body.app-references.change-form .field-is_hidden .flex.group {
  display: flex !important;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}
body.app-references.change-form .field-is_hidden .flex.flex-row,
body.model-topic.change-form
  .field-is_hidden
  .flex.flex-row
  > .flex.flex-col {
  display: contents;
}
body.model-topic.change-form
  .field-is_hidden
  .flex.flex-row
  > .flex.flex-col
  > label {
  order: 1;
  margin: 0 !important;
}
body.app-references.change-form .field-is_hidden input[type="checkbox"] {
  order: 2;
  width: 2rem !important;
  min-width: 2rem;
  flex: 0 0 auto;
  /* 38px input height − 20px switch = 18px, split so the switch sits on the
     same line as the text inputs and its hint lands on their hint line. */
  margin: 9px 0;
}
body.model-topic.change-form
  .field-is_hidden
  .flex.flex-row
  > .flex.flex-col
  > *:not(label) {
  order: 3;
  margin-left: 0 !important;
  /* No pull-up here: the switch already sits in a 38px slot, so the hint
     lands on the same line as the hint of the field beside it. */
  margin-top: 0 !important;
}
/* A readonly value is a fact, not a disabled control — show it as plain text
   instead of a greyed-out box, the same way the availability page does. */
body.app-references.change-form .form-row .readonly {
  background: transparent !important;
  border: 0 !important;
  padding: 2px 0 !important;
  color: #6b7280 !important;
}
.dark body.app-references.change-form .form-row .readonly {
  color: #9ca3af !important;
}
/* A lone message field reads better across the whole card than in a half
   column with empty space beside it. */
body.app-references.model-topicsuggestion.change-form
  fieldset.module
  .form-row.field-text {
  grid-column: 1 / -1;
}
/* A suggestion is one free-text field. Its row stretched the full width of
   the card while the box inside stayed 672px, so the row carried a 549px
   void on its right. Size the column to the box instead. */
@media (min-width: 1024px) {
  body.app-references.model-topicsuggestion.change-form
    fieldset.module
    > .aligned {
    grid-template-columns: minmax(0, 672px);
    justify-content: start;
  }
}
/* A topic has three fields — a name, a position and a switch — and they sit
   on one line. Stretched across the whole card they left 30px after the name
   but 174px after the position and a 278px void past the switch: three
   islands rather than a row. Each column is sized to what it holds and the
   group hugs the left, the same way the availability settings card does. */
@media (min-width: 1024px) {
  body.app-references.model-topic.change-form fieldset.module > .aligned {
    grid-template-columns: minmax(0, 360px) 150px auto;
    column-gap: 40px;
    justify-content: start;
  }
}
/* Hover + focus on the editable controls, same violet as everywhere else. */
body.app-references.change-form .form-row input[type="text"]:hover,
body.app-references.change-form
  .form-row
  input[type="number"]:hover {
  border-color: #cbb0f2 !important;
}
body.app-references.change-form .form-row input[type="text"]:focus,
body.app-references.change-form
  .form-row
  input[type="number"]:focus {
  border-color: #a855f7 !important;
  box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.18) !important;
  outline: none !important;
}
/* Cancel + Save live in the hero, so the stock sticky footer goes — except
   in the add-modal popup, where the hero is not rendered. */
body.app-references.change-form:not(.popup) .relative.mt-16 {
  display: none !important;
}
/* The name in the hero is a link to its own filtered list. It must still
   read as the page title, so it stays the same size and weight and only
   answers the pointer on hover — the restraint the row values use. */
a.bk-hero__title {
  display: inline-block;
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dashed transparent;
  transition: color 0.12s ease, border-color 0.12s ease;
}
a.bk-hero__title:hover {
  color: var(--color-primary-600, #7c3aed);
  border-bottom-color: currentColor;
}
.dark a.bk-hero__title:hover {
  color: #c4b5fd;
}
/* The hero tile carries the topic's initial rather than a photo. */
.ff-hero__avatar--topic {
  background: linear-gradient(135deg, #7c3aed, #a855f7);
  color: #fff;
  font-size: 18px;
  font-weight: 700;
}
/* The shared reference form lays each field out as a row with a fixed 170px
   label column beside its control. The topic card stacks them instead — label
   above input, two fields per line — exactly like the profile card. */
body.app-references.change-form
  .aligned
  .form-row
  > .flex.group {
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 0 !important;
  padding: 0 !important;
}
body.app-references.change-form
  .aligned
  .form-row
  > .flex.group
  > div:first-child {
  flex: 0 0 auto !important;
  width: 100% !important;
}
body.app-references.change-form
  .aligned
  .form-row
  .flex.group
  label {
  width: auto !important;
  margin: 0 0 6px !important;
}
/* The row divider belongs to the old list-style layout, not to a grid. */
body.app-references.change-form .aligned .form-row {
  border-bottom: none !important;
}
/* The column that opens the record is a bare anchor with no styling, so it
   was the one value on the row that did not answer the pointer. Give it the
   same quiet-until-hovered treatment as every other value, a shade bolder
   because it is the primary column. */
body.app-references.change-list #result_list th a {
  color: inherit;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px dashed transparent;
  transition: color 0.12s ease, border-color 0.12s ease;
}
body.app-references.change-list #result_list th a:hover {
  color: var(--color-primary-600, #7c3aed);
  border-bottom-color: currentColor;
}
/* ---- Topic list cells --------------------------------------------------
   Same vocabulary as the booking list: values are links that set a filter,
   quiet until hovered. */
.tp-slug {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12.5px;
}
.tp-count {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
.tp-count--none {
  color: #9ca3af;
  font-weight: 400;
}
.dark .tp-count--none {
  color: #6b7280;
}
/* The slug is an id, so it reads in the same mono face as the slug field. */
.tp-hero__slug {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12.5px;
  font-weight: 600;
  color: #4b5563;
}
.dark .tp-hero__slug {
  color: #d1d5db;
}

/* The accept/decline row inside the suggestion card. It shares the line with
   the text it is a decision about, sitting to its right, and its label lines
   up with the field's own label so the two read as one row. */
/* Only once there is room for both: on a narrow screen the buttons keep the
   line under the box rather than running off the card. */
@media (min-width: 1024px) {
  body.app-references.change-form fieldset.module .form-row.sg-row {
    align-items: flex-end;
    display: flex !important;
    gap: 32px;
  }
  /* The box stretches up to the buttons, so no empty strip is left between
     them. */
  body.app-references.change-form
    fieldset.module
    .form-row.sg-row
    > div.flex-col {
    flex: 1 1 auto;
    min-width: 0;
  }
  /* Unfold caps the box at 672px; here it should run all the way to the
     buttons instead of leaving a strip of nothing. */
  body.app-references.change-form
    fieldset.module
    .form-row.sg-row
    input[type="text"] {
    max-width: none;
    width: 100%;
  }
  /* The buttons keep their natural width and stay on one line; the box gives
     up width first when the window is narrow. */
  body.app-references.change-form
    fieldset.module
    .form-row.sg-row
    > .sg-decide {
    flex: 0 0 auto;
  }
  .sg-decide .ff-actions {
    flex-wrap: nowrap;
  }
}
/* Stacked (narrow), the row needs the gap a card row normally has. */
.sg-decide {
  margin-top: 12px;
}
@media (min-width: 1024px) {
  .sg-decide {
    margin-top: 0;
  }
}
/* Match the text box exactly: same height, same baseline, so the buttons sit
   on its level rather than 3px above it. */
.sg-decide .ff-action-btn {
  height: 38px;
}
/* Lines up with the field's own label, so "Text" and "Your decision" read as
   one row of labels. */
.sg-decide__label {
  color: #111827;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 6px;
}
.dark .sg-decide__label {
  color: #e5e7eb;
}
@media (min-width: 1024px) {
  body.app-references.model-topicsuggestion.change-form
    fieldset.module
    > .aligned.sg-wide {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* --- The person's chosen topics, on their profile page ------------------
   Reuses the card shell the wallet/transactions panels use; the two roles
   sit side by side because they are read together ("can talk about" vs
   "wants to talk about"), and each topic is the same violet pill the rest
   of the admin uses for a subject. */
.pf-topics {
  /* Unfold's field card above ends flush; give this one the same rhythm the
     rest of the page has between blocks. */
  margin-top: 32px;
}
.pf-topics__body {
  display: grid;
  gap: 28px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: 18px 20px 20px;
}
@media (max-width: 900px) {
  .pf-topics__body {
    grid-template-columns: minmax(0, 1fr);
  }
}
.pf-topics__label {
  align-items: center;
  color: #374151;
  display: flex;
  font-size: 13px;
  font-weight: 600;
  gap: 6px;
  margin-bottom: 10px;
}
.pf-topics__label .material-symbols-outlined {
  color: #8b5cf6;
  font-size: 18px;
}
.pf-topics__count {
  color: #6b7280;
  font-weight: 500;
}
.pf-topics__list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.pf-topics__none {
  color: #9ca3af;
  font-size: 13px;
}
.dark .pf-topics__label {
  color: #e5e7eb;
}
.dark .pf-topics__count {
  color: #9ca3af;
}
.dark .pf-topics__none {
  color: #6b7280;
}

/* --- Picking them ------------------------------------------------------
   A topic is a pill everywhere else in this admin, so it is a pill here
   too: click to add, click to drop. A search box narrows two hundred of
   them, and the role's own counter turns violet once the ten are used. */
.pf-topics-modal {
  max-width: 780px;
  width: 94vw;
}
.pf-pick + .pf-pick {
  border-top: 1px solid #f3f4f6;
  margin-top: 20px;
  padding-top: 20px;
}
.pf-pick__head {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}
.pf-pick__head > label {
  align-items: center;
  display: flex;
  font-size: 14px;
  font-weight: 600;
  gap: 7px;
  margin: 0;
}
.pf-pick__head .material-symbols-outlined {
  color: #8b5cf6;
  font-size: 19px;
}
.pf-pick__count {
  cursor: default;
  font-variant-numeric: tabular-nums;
  padding: 3px 10px;
}
.pf-pick__count:hover {
  background: #fff !important;
  border-color: #d1d5db;
  color: #374151;
}
.pf-pick__count--full {
  background: #ede9fe !important;
  border-color: #ddd6fe;
  color: #5b21b6;
}
.pf-pick__count--full:hover {
  background: #ede9fe !important;
  border-color: #ddd6fe;
  color: #5b21b6;
}
/* The search box matches the list pages' "Type to search" field. */
.pf-pick__search {
  align-items: center;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
  padding: 0 10px;
}
.pf-pick__search:focus-within {
  border-color: #8b5cf6;
}
.pf-pick__search .material-symbols-outlined {
  color: #9ca3af;
  font-size: 19px;
}
.pf-pick__search input {
  background: transparent;
  border: 0 !important;
  flex: 1 1 auto;
  font-size: 13.5px;
  outline: none;
  padding: 9px 0;
}
/* A bounded box, so a long list reads as "scroll me" rather than as chips
   that happen to be sliced off where the modal ran out of room. */
.pf-pick__chips {
  background: #fafafa;
  border: 1px solid #f3f4f6;
  border-radius: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  /* Exactly three rows of chips (12 + 3x38 + 2x8), so the list rests on a
     whole row instead of a sliced one; the scrollbar says there is more.
     The bottom breathing room is a spacer below the last row instead of
     padding, which a scrolling box would let the next row show through. */
  max-height: 142px;
  overflow-y: auto;
  padding: 12px 12px 0;
}
.pf-pick__chips::after {
  content: "";
  flex: 0 0 100%;
  height: 4px;
}
.pf-pick__chips::-webkit-scrollbar {
  width: 10px;
}
.pf-pick__chips::-webkit-scrollbar-thumb {
  background: #e5e7eb;
  border: 3px solid #fafafa;
  border-radius: 999px;
}
.pf-pick__chips::-webkit-scrollbar-thumb:hover {
  background: #d1d5db;
}
/* A chip is a <label> so the whole pill is clickable; the modal's generic
   label rule would otherwise add 18px of stray margin around each one. */
.pf-chip {
  align-items: center;
  display: inline-flex;
  gap: 4px;
  margin: 0 !important;
  user-select: none;
}
/* An author `display` beats the browser's own [hidden] rule, so the search
   could set the attribute and nothing would disappear. */
.pf-chip[hidden] {
  display: none !important;
}
.pf-chip input {
  height: 0;
  opacity: 0;
  position: absolute;
  width: 0;
}
.pf-chip__tick {
  font-size: 15px;
  margin-left: -2px;
  opacity: 0;
  transition: opacity 0.12s ease, width 0.12s ease;
  width: 0;
}
.pf-chip--on {
  background: #ede9fe !important;
  border-color: #ddd6fe;
  color: #5b21b6;
}
.pf-chip--on .pf-chip__tick {
  opacity: 1;
  width: 15px;
}
.pf-chip--on:hover {
  background: #ddd6fe !important;
  border-color: #c4b5fd;
  color: #4c1d95;
}
/* At the cap the rest stop responding, instead of letting a save fail. */
.pf-chip--locked {
  cursor: not-allowed;
  opacity: 0.4;
}
.pf-chip--locked:hover {
  background: #fff !important;
  border-color: #d1d5db;
  color: #374151;
}
.pf-pick__empty {
  color: #9ca3af;
  font-size: 13px;
  margin: 4px 2px;
}
.dark .pf-pick + .pf-pick {
  border-top-color: #1f2937;
}
.dark .pf-pick__search {
  background: #111827;
  border-color: #1f2937;
}
.dark .pf-pick__search input {
  color: #e5e7eb;
}
.dark .pf-pick__chips {
  background: rgba(17, 24, 39, 0.6);
  border-color: #1f2937;
}
.dark .pf-pick__chips::-webkit-scrollbar-thumb {
  background: #374151;
  border-color: #111827;
}
.dark .pf-pick__count:hover {
  background: #111827 !important;
  border-color: #4b5563;
  color: #d1d5db;
}
.dark .pf-pick__count--full,
.dark .pf-pick__count--full:hover {
  background: rgba(91, 33, 182, 0.3) !important;
  border-color: rgba(139, 92, 246, 0.3);
  color: #c4b5fd;
}
.dark .pf-chip--on {
  background: rgba(91, 33, 182, 0.3) !important;
  border-color: rgba(139, 92, 246, 0.3);
  color: #c4b5fd;
}
.dark .pf-chip--on:hover {
  background: rgba(91, 33, 182, 0.45) !important;
  color: #ddd6fe;
}
.dark .pf-chip--locked:hover {
  background: #111827 !important;
  border-color: #4b5563;
  color: #d1d5db;
}

/* ===========================================================================
   Feature 007 — the call pages.
   A call is a record of something that happened, not a form: every field is
   read-only, so the three pages render themselves (hero + cards, like the
   booking and wallet pages) and Django's form is never drawn. Only the bits
   these pages add on top of the shared card vocabulary live here.
   =========================================================================== */
body.app-calls.change-form .container.-my-3 {
  margin-bottom: 14px !important;
}

/* The technical card sits below the plain-language ones and is deliberately
   quieter: a support tool, not something a moderator has to read. */
.cl-tech__lead {
  color: #6b7280;
  font-size: 13px;
  margin: 0 0 16px;
}
.dark .cl-tech__lead {
  color: #9ca3af;
}

/* The provider's message, exactly as it arrived. Scrolls on its own rather
   than stretching the page. */
.cl-json {
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  color: #374151;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12.5px;
  line-height: 1.6;
  margin: 0;
  max-height: 340px;
  overflow: auto;
  padding: 14px 16px;
  white-space: pre;
}
.dark .cl-json {
  background: #111827;
  border-color: #374151;
  color: #d1d5db;
}

/* A modal that opens with a sentence of explanation before its first field.
   The shared `.av-field` carries no top margin (its label sits flush), so the
   lead paragraph has to leave the gap itself — the same 16px the fields use
   between themselves on the wallet modals. */
.ff-modal__lead {
  margin: 0 0 16px;
}

/* ===========================================================================
   Feature 009 — the review pages.
   A review is a record of what somebody said, so the page is styled to be
   READ: the same hero and cards as the call and wallet pages, and no Django
   form at all (nothing here is editable; a review is hidden, never edited).
   =========================================================================== */
body.app-reviews.change-form .container.-my-3 {
  margin-bottom: 14px !important;
}

/* The stars in the hero title: big enough to read at a glance, and warm
   rather than the page's purple, because they are a rating and not a link. */
body.app-reviews.change-form .bk-hero__title {
  color: #b45309;
  font-size: 22px;
  letter-spacing: 2px;
  /* Star glyphs read smaller than letters, so they are set two pixels up —
     but the line box stays the reference 24px so this hero is exactly as
     tall as every other hero on the site. */
  line-height: 24px;
}
.dark body.app-reviews.change-form .bk-hero__title {
  color: #fbbf24;
}

/* The stars in the list line up in one column, so a row of ★★☆☆☆ is
   scannable against the rows above and below it. */
body.app-reviews.change-list .dd-badge {
  font-variant-numeric: tabular-nums;
}

/* ===========================================================================
   FEATURE 010 — badges and the verified mark.
   The badge form is the only page here anything is typed into, so it gets
   the same treatment the profile form already has: card sections with a
   light title, compact rows, and a file field that stays a clean pill.
   =========================================================================== */
body.app-badges.change-form .container.-my-3 {
  margin-bottom: 14px !important;
}

/* Sections as cards, not Django's heavy gray bar. */
body.app-badges.change-form fieldset.module {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  padding: 22px 26px;
  margin: 0 0 18px;
  box-shadow: 0 1px 3px rgba(16, 24, 40, 0.05);
}
.dark body.app-badges.change-form fieldset.module {
  background: #1f2937;
  border-color: #374151;
}
body.app-badges.change-form fieldset.module > h2 {
  background: transparent !important;
  border: none !important;
  padding: 0 0 18px !important;
  margin: 0 !important;
  font-size: 15px;
  font-weight: 700;
  color: #111827;
  display: flex;
  align-items: center;
  gap: 8px;
}
.dark body.app-badges.change-form fieldset.module > h2 {
  color: #f9fafb;
}
body.app-badges.change-form fieldset.module > h2::before {
  content: "image";
  font-family: "Material Symbols Outlined";
  font-size: 20px;
  color: #7c3aed;
  font-weight: 400;
}
body.app-badges.change-form fieldset.module > .aligned {
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
}

/* Compact rows: Unfold's inner wrapper carries its own mb-6, which stacks on
   top of the row margin and doubles the gap. Zero it. */
body.app-badges.change-form fieldset.module .form-row {
  margin-bottom: 10px !important;
}
body.app-badges.change-form fieldset.module .form-row > div.flex-col {
  margin-bottom: 0 !important;
}
body.app-badges.change-form fieldset.module .form-row label {
  margin-bottom: 6px !important;
}
/* Text boxes fill their column; a switch is a switch and must keep its own
   size, so the checkbox is left out of this. */
body.app-badges.change-form fieldset.module .form-row input[type="text"],
body.app-badges.change-form fieldset.module .form-row textarea {
  width: 100%;
  box-sizing: border-box;
}

/* Hover + focus, the same reaction every other form gives. */
body.app-badges.change-form .form-row input[type="text"]:hover,
body.app-badges.change-form .form-row textarea:hover {
  border-color: #cbb0f2 !important;
}
body.app-badges.change-form .form-row input[type="text"]:focus,
body.app-badges.change-form .form-row textarea:focus {
  border-color: #a855f7 !important;
  box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.18) !important;
  outline: none !important;
}

/* The description box: a fixed, sensible height that cannot be dragged out
   of shape. */
body.app-badges.change-form .field-description textarea {
  min-height: 110px;
  height: 110px;
  resize: none;
}
/* Unfold lets a textarea run wider than the inputs above it, which leaves
   the card's right edge ragged. Same width as the rest of the column. */
body.app-badges.change-form .field-description .flex-col {
  max-width: 42rem;
}

/* The picture field. Unfold clutters it once a file exists with a preview, a
   "Clear" block and a download icon; the picture belongs in the hero only,
   so the field stays the same clean pill it is when empty. */
body.app-badges.change-form .field-icon .flex-grow > div.mb-4 {
  display: none !important;
}
body.app-badges.change-form
  .field-icon
  .flex-grow
  > div.border
  > div.bg-gray-50 {
  display: none !important;
}
body.app-badges.change-form .field-icon .flex-grow > div.border a {
  display: none !important;
}
body.app-badges.change-form .field-icon .flex-grow > div.border {
  cursor: pointer;
  transition: border-color 0.15s ease;
}
/* The visible label is a disabled input that swallows clicks — let them
   through so the whole pill opens the file chooser. */
body.app-badges.change-form
  .field-icon
  .flex-grow
  > div.border
  input[type="text"] {
  pointer-events: none;
  cursor: pointer;
}
body.app-badges.change-form .field-icon .flex-grow > div.border:hover {
  border-color: #cbb0f2 !important;
}
body.app-badges.change-form .field-icon .flex-grow > div.border:hover
  .material-symbols-outlined {
  color: #7c3aed;
}
body.app-badges.change-form .field-icon .flex-grow > div.border:active {
  border-color: #a855f7 !important;
}
.dark body.app-badges.change-form .field-icon .flex-grow > div.border:hover {
  border-color: #6d28d9 !important;
}
.dark body.app-badges.change-form .field-icon .flex-grow > div.border:hover
  .material-symbols-outlined {
  color: #d8b4fe;
}

/* The picture in the hero and in the list. Prefixed ``bd-`` rather than the
   obvious ``bg-``: every ``bg-`` class in this file is one of Tailwind's
   BACKGROUND utilities, so a badge class sharing that prefix would read as
   one and could one day collide with one. */
.bd-hero__icon {
  object-fit: cover;
  background: #fff;
}
.dark .bd-hero__icon {
  background: #111827;
}
.bd-icon {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  object-fit: cover;
  border: 1px solid #e5e7eb;
  background: #fff;
  /* Click it to see the picture full-size, like a user's photo. */
  cursor: zoom-in;
}
.dark .bd-icon {
  border-color: #374151;
  background: #111827;
}

/* ===========================================================================
   FEATURE 010 — the "+" add form shown inside the modal (?_popup=1).
   The references admin already solved this; those rules name their own app,
   so the same treatment is stated here for badges rather than edited into
   theirs. Without it the modal draws a card inside a card with a stretch of
   dead space above Save.
   =========================================================================== */
html:has(body.popup.app-badges),
body.popup.app-badges {
  overflow: hidden !important;
  scrollbar-width: none;
}
html:has(body.popup.app-badges)::-webkit-scrollbar,
body.popup.app-badges::-webkit-scrollbar {
  width: 0;
  height: 0;
}
body.popup.app-badges {
  padding: 0 !important;
}
html.dark body.popup.app-badges {
  background: #1f2937 !important;
}
/* No card inside the card, and no second heading. */
body.popup.app-badges.change-form fieldset.module {
  border: 0 !important;
  box-shadow: none !important;
  margin: 0 !important;
  padding: 20px 22px 6px !important;
  background: transparent !important;
}
body.popup.app-badges.change-form fieldset.module > h2 {
  display: none !important;
}
body.popup.app-badges .aligned {
  border: none !important;
  border-radius: 0 !important;
  margin-bottom: 0 !important;
}
/* Drop the 64px gap that pushed Save far down the modal. */
body.popup.app-badges .relative.mt-16 {
  margin-top: 26px !important;
}
body.popup.app-badges form {
  margin-top: 0 !important;
}
body.popup.app-badges .px-4.pb-8 {
  padding-top: 12px !important;
  padding-bottom: 16px !important;
}
body.popup.app-badges #content,
body.popup.app-badges main {
  min-height: 0 !important;
}
/* The popup Save button ships with no hover state. */
body.popup.app-badges button.bg-primary-600:hover {
  background-color: #7e22ce !important; /* purple-700 */
}
/* The "correct the errors" banner shares an edge with the fields it is
   talking about, rather than spanning the whole modal. */
body.popup.app-badges.change-form .errornote {
  margin: 0 22px 0 !important;
}

/* The modal's own title already says what is being added. */
body.popup.app-badges.change-form fieldset.module > h2 {
  display: none !important;
}
/* One column, every control the same width and starting on the same line.
   Pairing them was worse here than on a wide page: a full-width picture
   pill beside a small switch left half a row empty, so the form read as
   lopsided rather than compact. */
body.popup.app-badges.change-form .form-row {
  width: 100% !important;
}
body.popup.app-badges.change-form .form-row > div,
body.popup.app-badges.change-form .form-row .flex-grow {
  max-width: none !important;
}
/* The description does not need to be tall inside a modal. */
body.popup.app-badges .field-description textarea {
  min-height: 72px !important;
  height: 72px !important;
}
/* A second section inside the modal sits under the first, not a screen
   away from it: the stacked paddings left a 53px band of nothing between
   the last field of one and the first line of the next. */
body.popup.app-badges.change-form fieldset.module + fieldset.module {
  padding-top: 4px !important;
}
/* A picker's list inside the modal: short enough to sit within the frame
   the modal grows to, and scrolling rather than spilling past it. */
body.popup.app-badges .select2-results__options {
  max-height: 210px !important;
}

/* The picture pill is as wide as every other control, not short of it. */
body.popup.app-badges .field-icon .flex-grow > div.border {
  width: 100% !important;
  max-width: none !important;
}

/* The submit row: a plain right-aligned bar with a divider, not the page's
   sticky footer and not one stretched purple button. */
body.popup.app-badges .relative.mt-16 {
  margin-top: 0 !important;
}
body.popup.app-badges .lg\:fixed {
  position: static !important;
}
body.popup.app-badges .relative.mt-16 > div > div {
  background: transparent !important;
  border-top: 1px solid #e5e7eb !important;
  padding: 14px 22px !important;
}
html.dark body.popup.app-badges .relative.mt-16 > div > div {
  border-top-color: #374151 !important;
}
body.popup.app-badges .relative.mt-16 .container {
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  flex-direction: row !important;
  justify-content: flex-end !important;
  gap: 10px !important;
}
body.popup.app-badges [name="_save"] {
  background: #7c3aed !important;
  border-radius: 8px !important;
  display: inline-flex !important;
  width: auto !important;
  padding: 9px 22px !important;
}
body.popup.app-badges [name="_save"]:hover {
  background: #6d28d9 !important;
}
/* The compact modal offers one action, not three. */
body.popup.app-badges [name="_addanother"],
body.popup.app-badges [name="_continue"] {
  display: none !important;
}

/* ===========================================================================
   FEATURE 010 — the badge form: the two sections side by side, and Save in
   the header.

   Stacked full-width, the two sections left most of the page empty and put
   Save far below the last field. Side by side they fill the row and the page
   ends where the form ends. Only the badge form has two sections worth
   pairing, so this names that model; the "+" modal keeps one column (it is
   440px wide) and the ADD page keeps the footer bar, since it has no header
   card to put Save in — hence the :has(.ff-hero) test.
   =========================================================================== */
@media (min-width: 1024px) {
  body.app-badges.model-badge.change-form:not(.popup) #badge_form > div {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    align-items: stretch;
  }
  /* The footer bar (when shown, i.e. on the add page) spans both columns. */
  body.app-badges.model-badge.change-form:not(.popup)
    #badge_form
    > div
    > .relative.mt-16 {
    grid-column: 1 / -1;
  }
  /* Side by side the gap does the spacing, so drop the stacked margin. */
  body.app-badges.model-badge.change-form:not(.popup)
    #badge_form
    fieldset.module {
    margin: 0;
  }
  /* In a half-width column the description fills it, like every other box;
     the 42rem cap was there to stop it sprawling across a full-width card. */
  body.app-badges.model-badge.change-form:not(.popup)
    .field-description
    .flex-col {
    max-width: none;
  }
}

/* A picture for one section and a label for the other, so the two headers
   are told apart at a glance rather than by reading them. */
body.app-badges.change-form fieldset.module:first-of-type > h2::before {
  content: "label";
}

/* Save and Cancel live in the header card — hide the sticky footer bar.
   Only where that header exists: the add page has none and still needs it. */
body.app-badges.model-badge.change-form:not(.popup):has(.ff-hero)
  #badge_form
  > div
  > .relative.mt-16 {
  display: none !important;
}

/* The Active switch lines up with the description BOX beside it, not with
   the word "Description" above it. The switch is the only field on this form
   with no label of its own, so without this it floats a label's height too
   high and the two columns read as being out of step. 20px label + its 6px
   gap = 26px. */
@media (min-width: 1024px) {
  body.app-badges.model-badge.change-form:not(.popup)
    .field-is_active
    > div.flex-col {
    padding-top: 26px;
  }
}

/* ---------------------------------------------------------------------------
   The badges a person holds, in their profile header.
   A count ("3 badges") says how many; these say WHICH — the thing a moderator
   is actually looking for. Built to the same measurements as every other pill
   in this admin (24px tall, 3px 10px, fully round, 12px/700) so the header
   does not gain a new kind of object.
--------------------------------------------------------------------------- */
.pf-head__badges {
  display: flex;
  /* One line, and what will not fit on it is dropped (in script) rather
     than wrapped: the header is a single band, not a growing list. */
  flex-wrap: nowrap;
  align-items: center;
  gap: 6px;
  min-width: 0;
  overflow: hidden;
}
.pf-badge {
  flex: 0 0 auto;
}
.pf-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding: 3px 10px;
  border-radius: 9999px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  color: #6d28d9;
  background: rgba(124, 58, 237, 0.1);
  border: 1px solid transparent;
  transition: background 0.12s ease, color 0.12s ease;
}
.pf-badge:hover {
  background: #7c3aed;
  color: #fff;
}
.pf-badge__icon {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  object-fit: cover;
  background: #fff;
}
.pf-badge__mark {
  font-size: 16px;
  line-height: 1;
}
.pf-badge--more {
  color: #6b7280;
  background: rgba(107, 114, 128, 0.12);
}
.pf-badge--more:hover {
  background: #4b5563;
  color: #fff;
}
.dark .pf-badge {
  color: #c4b5fd;
  background: rgba(139, 92, 246, 0.18);
}
.dark .pf-badge:hover {
  background: #7c3aed;
  color: #fff;
}
.dark .pf-badge--more {
  color: #9ca3af;
  background: rgba(156, 163, 175, 0.16);
}
.dark .pf-badge--more:hover {
  background: #6b7280;
  color: #fff;
}

/* The "correct the errors" banner on the badge form.

   It is a sibling of the two sections, so the two-column grid put it IN the
   left column and stretched it the full height of a card — a red slab beside
   the fields it was talking about. It belongs across the top, under the
   header, where every other page in this admin puts it. Unfold's own 32px
   bottom margin is replaced by the 18px the rest of this page is built on. */
body.app-badges.model-badge.change-form:not(.popup) .errornote {
  margin-bottom: 18px !important;
}
@media (min-width: 1024px) {
  body.app-badges.model-badge.change-form:not(.popup)
    #badge_form
    > div
    > .errornote {
    grid-column: 1 / -1;
    align-self: start;
    margin-bottom: 0 !important;
  }
}

/* The profile header holds more on the left than it used to — the badges sit
   beside the verified mark. On a real screen the two sides stay side by side
   and the NAME block gives way (its badges wrap within it); letting the row
   wrap instead dropped the whole Cancel/Save group onto a line of its own,
   left-aligned under the name. Below that width the header still stacks. */
@media (min-width: 1024px) {
  body.app-profiles.change-form .pf-head {
    flex-wrap: nowrap;
  }
}

/* When that row is tight, it is the LINKS that give way, not the name. The
   links are a list and wrap onto a second right-hand line without looking
   broken; the name block shrinking instead pushed the badges under the name
   and the email down with them, which read as a different layout entirely. */
@media (min-width: 1024px) {
  /* The buttons and their links keep their size: they are what the page is
     FOR. Everything that has to give way gives way on the name side, and
     there it is the badge strip that gives — which is why it is the only
     part allowed to shrink below its content. */
  body.app-profiles.change-form .pf-head__actions {
    flex: 0 0 auto;
  }
  body.app-profiles.change-form .pf-head__links {
    flex-wrap: wrap;
    justify-content: flex-end;
  }
  body.app-profiles.change-form .pf-head__id {
    flex: 1 1 auto;
    min-width: 0;
  }
  body.app-profiles.change-form .pf-head__meta {
    flex: 1 1 auto;
    min-width: 0;
  }
}

/* The verify / remove-verified modals say a missing reason twice, the way
   this admin says it everywhere else: a red banner across the top of the
   modal body, and a red line under the box itself.

   The banner needs the same correction the wallet's Add / Deduct modals
   needed — the shared av-modal__err has a TOP margin, meant for a banner at
   the foot, which at the top leaves a gap above it and none below. Zero
   above (the body's own padding is the gap), one field-gap below. */
.pf-mark-form [data-pf-err] {
  margin: 0 0 16px;
  padding: 8px 10px;
}
/* Under the box: the same red, size and 4px gap Django's own field errors
   use on every change form in this admin. */
.av-field__err {
  margin-top: 4px;
  font-size: 14px;
  color: #dc2626;
}
.dark .av-field__err {
  color: #f87171;
}
.av-field__input--wrong {
  border-color: #ef4444 !important;
}
.av-field__input--wrong:focus {
  border-color: #ef4444 !important;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.18) !important;
}

/* On a real screen the name band is one line: the badges give way (they are
   clipped, and the script drops the ones that do not fit) rather than the
   row wrapping and pushing the email and the numbers down. Below that width
   the header stacks as before and everything wraps. */
@media (min-width: 1024px) {
  body.app-profiles.change-form .pf-head__top {
    flex-wrap: nowrap;
  }
  body.app-profiles.change-form .pf-head__name {
    flex: 0 0 auto;
  }
  body.app-profiles.change-form .pf-head__top > .dd-badge {
    flex: 0 0 auto;
  }
}

/* ===========================================================================
   FEATURE 011 — the wording of what the platform sends.

   Two short records with the same shape, so they get the same treatment the
   badge form has: the two sections side by side rather than stacked down a
   half-empty page, Save in the header card, and the error banner above it
   all instead of under the thing it is warning about.
   =========================================================================== */
body.app-notifications.change-form .container.-my-3 {
  margin-bottom: 14px !important;
}

/* Sections as cards, not Django's heavy gray bar. */
body.app-notifications.change-form fieldset.module {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  padding: 22px 26px;
  margin: 0 0 18px;
  box-shadow: 0 1px 3px rgba(16, 24, 40, 0.05);
}
.dark body.app-notifications.change-form fieldset.module {
  background: #1f2937;
  border-color: #374151;
}
body.app-notifications.change-form fieldset.module > h2 {
  background: transparent !important;
  border: none !important;
  padding: 0 0 18px !important;
  margin: 0 !important;
  font-size: 15px;
  font-weight: 700;
  color: #111827;
  display: flex;
  align-items: center;
  gap: 8px;
}
.dark body.app-notifications.change-form fieldset.module > h2 {
  color: #f9fafb;
}
body.app-notifications.change-form fieldset.module > h2::before {
  content: "chat_bubble";
  font-family: "Material Symbols Outlined";
  font-size: 20px;
  color: #7c3aed;
  font-weight: 400;
}
body.app-notifications.change-form
  fieldset.module:first-of-type
  > h2::before {
  content: "label";
}
body.app-notifications.change-form fieldset.module > .aligned {
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
}

/* Compact rows: Unfold's inner wrapper carries its own mb-6, which stacks
   on top of the row margin and doubles the gap. Zero it. */
body.app-notifications.change-form fieldset.module .form-row {
  margin-bottom: 10px !important;
}
body.app-notifications.change-form fieldset.module .form-row > div.flex-col {
  margin-bottom: 0 !important;
}
body.app-notifications.change-form fieldset.module .form-row label {
  margin-bottom: 6px !important;
}
body.app-notifications.change-form fieldset.module .form-row input[type="text"],
body.app-notifications.change-form fieldset.module .form-row textarea {
  width: 100%;
  box-sizing: border-box;
}

/* The on/off switch is a different kind of control from the boxes above it,
   so it gets a wider gap — otherwise it reads as one more row of the same
   thing rather than the state of the whole piece of wording. */
body.app-notifications.change-form fieldset.module .form-row.field-is_active {
  margin-top: 26px !important;
}

/* Hover + focus, the same reaction every other form gives. */
body.app-notifications.change-form .form-row input[type="text"]:hover,
body.app-notifications.change-form .form-row textarea:hover {
  border-color: #cbb0f2 !important;
}
body.app-notifications.change-form .form-row input[type="text"]:focus,
body.app-notifications.change-form .form-row textarea:focus {
  border-color: #a855f7 !important;
  box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.18) !important;
  outline: none !important;
}

/* The message body: a fixed, sensible height that cannot be dragged out of
   shape. */
body.app-notifications.change-form .field-body textarea,
body.app-notifications.change-form .field-html_body textarea {
  min-height: 150px;
  height: 150px;
  resize: none;
}

@media (min-width: 1024px) {
  /* The wrapper holding the two section cards — named by what it CONTAINS,
     because a plain "form > div" also catches the head and body of every
     dialog on the page and lays those out in two columns too. */
  body.app-notifications.change-form:not(.popup)
    form
    > div:has(> fieldset.module) {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    align-items: stretch;
  }
  body.app-notifications.change-form:not(.popup)
    form
    > div
    > .relative.mt-16 {
    grid-column: 1 / -1;
  }
  body.app-notifications.change-form:not(.popup) form fieldset.module {
    margin: 0;
  }
  body.app-notifications.change-form:not(.popup) form > div > .errornote {
    grid-column: 1 / -1;
    align-self: start;
    margin-bottom: 0 !important;
  }
}
body.app-notifications.change-form:not(.popup) .errornote {
  margin-bottom: 18px !important;
}

/* Save and Cancel live in the header card — hide the sticky footer bar.
   Only where that header exists: the add page has none and still needs it. */
body.app-notifications.change-form:not(.popup):has(.ff-hero)
  form
  > div
  > .relative.mt-16 {
  display: none !important;
}

/* ===========================================================================
   FEATURE 011 — the "+" add form shown inside the modal (?_popup=1).
   The references and badges modals already solved this; those rules name
   their own app, so the same treatment is stated here rather than edited
   into theirs. Without it the modal draws a card inside a card, and the
   Add button stretches the whole width with Cancel stranded underneath.
   =========================================================================== */
html:has(body.popup.app-notifications),
body.popup.app-notifications {
  overflow: hidden !important;
  scrollbar-width: none;
}
html:has(body.popup.app-notifications)::-webkit-scrollbar,
body.popup.app-notifications::-webkit-scrollbar {
  width: 0;
  height: 0;
}
body.popup.app-notifications {
  padding: 0 !important;
}
html.dark body.popup.app-notifications {
  background: #1f2937 !important;
}
/* No card inside the card, and no second heading — the modal's own title
   already says what is being added. */
body.popup.app-notifications.change-form fieldset.module {
  border: 0 !important;
  box-shadow: none !important;
  margin: 0 !important;
  padding: 20px 22px 6px !important;
  background: transparent !important;
}
body.popup.app-notifications.change-form fieldset.module > h2 {
  display: none !important;
}
body.popup.app-notifications .aligned {
  border: none !important;
  border-radius: 0 !important;
  margin-bottom: 0 !important;
}
/* A second section sits under the first, not a screen away from it. */
body.popup.app-notifications.change-form
  fieldset.module
  + fieldset.module {
  padding-top: 4px !important;
}
/* One column: every control the same width, starting on the same line. */
body.popup.app-notifications.change-form .form-row {
  width: 100% !important;
}
body.popup.app-notifications.change-form .form-row > div,
body.popup.app-notifications.change-form .form-row .flex-grow {
  max-width: none !important;
}
/* The words do not need to be tall inside a modal. */
body.popup.app-notifications .field-body textarea,
body.popup.app-notifications .field-html_body textarea {
  min-height: 84px !important;
  height: 84px !important;
}
body.popup.app-notifications #content,
body.popup.app-notifications main {
  min-height: 0 !important;
}
body.popup.app-notifications form {
  margin-top: 0 !important;
}
body.popup.app-notifications .px-4.pb-8 {
  padding-top: 12px !important;
  padding-bottom: 16px !important;
}
/* The submit row: a plain right-aligned bar, not the sticky page footer —
   Cancel and Add side by side, the pair every other add modal shows. */
body.popup.app-notifications .relative.mt-16 {
  margin-top: 26px !important;
}
body.popup.app-notifications .lg\:fixed {
  position: static !important;
}
body.popup.app-notifications .relative.mt-16 > div > div {
  background: transparent !important;
  border-top: 1px solid #e5e7eb !important;
  padding: 14px 22px !important;
}
html.dark body.popup.app-notifications .relative.mt-16 > div > div {
  border-top-color: #374151 !important;
}
body.popup.app-notifications .relative.mt-16 .container {
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  flex-direction: row !important;
  justify-content: flex-end !important;
  gap: 10px !important;
}
body.popup.app-notifications [name="_save"] {
  background: #7c3aed !important;
  border-radius: 8px !important;
  display: inline-flex !important;
  width: auto !important;
  padding: 9px 22px !important;
}
body.popup.app-notifications [name="_save"]:hover {
  background: #6d28d9 !important;
}
/* The compact modal offers one action, not three. */
body.popup.app-notifications [name="_addanother"],
body.popup.app-notifications [name="_continue"] {
  display: none !important;
}
/* The "correct the errors" banner shares an edge with the fields it is
   talking about, rather than spanning the whole modal. */
body.popup.app-notifications.change-form .errornote {
  margin: 0 22px 0 !important;
}

/* ===========================================================================
   FEATURE 011 — the log of what actually went out.

   A read-only page, so it gets the same treatment the ledger has: the stock
   readonly fieldset (database jargon, primary keys, the reference hash) is
   hidden and replaced by two plain-language cards written in the template.
   =========================================================================== */
body.model-pushnotification.change-form fieldset.module,
body.model-emailnotification.change-form fieldset.module,
body.model-pushnotification.change-form .relative.mt-16,
body.model-emailnotification.change-form .relative.mt-16 {
  display: none !important;
}
body.app-notifications.change-form .container.-my-3 {
  margin-bottom: 14px !important;
}

/* The two cards side by side on a wide screen, stacked on a narrow one —
   the same rhythm as the wording page. */
.nt-sent-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  /* Both cards the same height: two cards of different heights side by
     side read as one being unfinished. */
  align-items: stretch;
}
@media (min-width: 1024px) {
  .nt-sent-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Label/value pairs, as on the transaction page. */
.nt-detail {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px 30px;
}
@media (min-width: 1024px) {
  .nt-detail {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .nt-detail__full {
    grid-column: 1 / -1;
  }
}
.nt-detail__item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.nt-detail__label {
  font-size: 13px;
  font-weight: 600;
  color: #374151;
}
.dark .nt-detail__label {
  color: #e5e7eb;
}
.nt-detail__value {
  font-size: 14px;
  color: #6b7280;
  word-break: break-word;
}
.dark .nt-detail__value {
  color: #9ca3af;
}
.nt-detail__link {
  color: #7c3aed;
  text-decoration: none;
}
.nt-detail__link:hover {
  text-decoration: underline;
}
.dark .nt-detail__link {
  color: #a78bfa;
}

/* The words themselves: kept on their own lines, exactly as they were
   stored — a message is not a paragraph of prose to reflow. */
.nt-detail__words {
  font-size: 14px;
  color: #6b7280;
  white-space: pre-wrap;
  word-break: break-word;
  line-height: 1.55;
}
.dark .nt-detail__words {
  color: #9ca3af;
}
.nt-detail__ref {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12.5px;
  color: #9ca3af;
  word-break: break-all;
}
.dark .nt-detail__ref {
  color: #6b7280;
}

/* ===========================================================================
   FEATURE 012 — the report queue.

   A moderator reads a complaint and decides; the page is two cards, the
   person at the top, and the two decisions where the eye already is. The
   stock readonly fieldset is hidden — it prints database jargon where this
   page prints plain English.
   =========================================================================== */
body.model-report.change-form fieldset.module,
body.model-report.change-form .relative.mt-16 {
  display: none !important;
}
body.app-safety.change-form .container.-my-3 {
  margin-bottom: 14px !important;
}

.sf-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  /* Both cards the same height: two of different heights side by side read
     as one being unfinished. */
  align-items: stretch;
}
@media (min-width: 1024px) {
  .sf-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.sf-detail {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px 30px;
}
@media (min-width: 1024px) {
  .sf-detail {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .sf-detail__full {
    grid-column: 1 / -1;
  }
}
.sf-detail__item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.sf-detail__label {
  font-size: 13px;
  font-weight: 600;
  color: #374151;
}
.dark .sf-detail__label {
  color: #e5e7eb;
}
.sf-detail__value {
  font-size: 14px;
  color: #6b7280;
  word-break: break-word;
}
.dark .sf-detail__value {
  color: #9ca3af;
}

/* What the person actually wrote, kept on its own lines exactly as they
   typed it — somebody's account of what happened is not prose to reflow. */
.sf-detail__words {
  font-size: 14px;
  color: #6b7280;
  white-space: pre-wrap;
  word-break: break-word;
  line-height: 1.55;
}
.dark .sf-detail__words {
  color: #9ca3af;
}

/* ===========================================================================
   FEATURE 013 — the platform's own pages: its numbers, its legal text, and
   the trail of who changed what.

   All three are read far more often than they are written, so they are laid
   out as pages to read: a header card that says what this is, then cards.
   The one page with a box to type in keeps that box, and nothing else.
   =========================================================================== */
body.app-core.change-form .container.-my-3 {
  margin-bottom: 14px !important;
}

/* The legal and trail pages have nothing to edit: the stock readonly
   fieldset prints database jargon where these pages print plain English. */
body.model-legaldocument.change-form fieldset.module,
body.model-legaldocument.change-form .relative.mt-16,
body.model-adminactionlog.change-form fieldset.module,
body.model-adminactionlog.change-form .relative.mt-16 {
  display: none !important;
}

/* The one editable page: a setting's value, as a card like every other
   form on the platform, with Save up in the header card. */
body.model-appsetting.change-form fieldset.module {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  padding: 22px 26px;
  margin: 0 0 18px;
  box-shadow: 0 1px 3px rgba(16, 24, 40, 0.05);
}
.dark body.model-appsetting.change-form fieldset.module {
  background: #1f2937;
  border-color: #374151;
}
body.model-appsetting.change-form fieldset.module > h2 {
  background: transparent !important;
  border: none !important;
  padding: 0 0 18px !important;
  margin: 0 !important;
  font-size: 15px;
  font-weight: 700;
  color: #111827;
  display: flex;
  align-items: center;
  gap: 8px;
}
.dark body.model-appsetting.change-form fieldset.module > h2 {
  color: #f9fafb;
}
body.model-appsetting.change-form fieldset.module > h2::before {
  content: "tune";
  font-family: "Material Symbols Outlined";
  font-size: 20px;
  color: #7c3aed;
  font-weight: 400;
}
body.model-appsetting.change-form fieldset.module > .aligned {
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
}
body.model-appsetting.change-form .form-row input[type="text"] {
  width: 100%;
  box-sizing: border-box;
}
body.model-appsetting.change-form .form-row input[type="text"]:hover {
  border-color: #cbb0f2 !important;
}
body.model-appsetting.change-form .form-row input[type="text"]:focus {
  border-color: #a855f7 !important;
  box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.18) !important;
  outline: none !important;
}
/* Save and Cancel live in the header card — hide the sticky footer bar. */
body.model-appsetting.change-form:has(.ff-hero) form > div > .relative.mt-16 {
  display: none !important;
}

/* Cards, side by side where there is room. */
.cp-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  align-items: stretch;
}
@media (min-width: 1024px) {
  .cp-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .cp-grid__full {
    grid-column: 1 / -1;
  }
}

/* Label/value pairs, as on every other detail page. */
.cp-detail {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px 30px;
}
@media (min-width: 1024px) {
  .cp-detail {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .cp-detail__full {
    grid-column: 1 / -1;
  }
}
.cp-detail__item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.cp-detail__label {
  font-size: 13px;
  font-weight: 600;
  color: #374151;
}
.dark .cp-detail__label {
  color: #e5e7eb;
}
.cp-detail__value {
  font-size: 14px;
  color: #6b7280;
  word-break: break-word;
}
.dark .cp-detail__value {
  color: #9ca3af;
}

/* Legal text, and the before/after of a change: kept exactly as stored,
   because a document is not prose to reflow and a record is not a summary. */
.cp-detail__words {
  font-size: 14px;
  color: #6b7280;
  white-space: pre-wrap;
  word-break: break-word;
  line-height: 1.6;
}
.dark .cp-detail__words {
  color: #9ca3af;
}
.cp-detail__code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12.5px;
  color: #6b7280;
  white-space: pre-wrap;
  word-break: break-word;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 12px 14px;
  margin: 0;
}
.dark .cp-detail__code {
  color: #9ca3af;
  background: #111827;
  border-color: #374151;
}

/* The settings list: the name people read, with the name the code uses
   underneath it in small type. */
.cs-name {
  display: block;
  font-weight: 600;
  color: #111827;
}
.dark .cs-name {
  color: #f3f4f6;
}
.cs-name__key,
.cs-target__id {
  display: block;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11.5px;
  color: #9ca3af;
  word-break: break-all;
}
.cs-target {
  display: block;
  color: #374151;
}
.dark .cs-target {
  color: #e5e7eb;
}
.cs-value {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
  font-weight: 600;
  color: #111827;
}
.dark .cs-value {
  color: #f3f4f6;
}

/* The publish form inside its modal: the same field styling the other
   action modals use, with room for a document's worth of text. Fixed
   height, like every other text box in the admin — a box somebody can
   drag out of shape distorts the modal around it. */
.cp-modal__text {
  min-height: 220px;
  height: 220px;
  resize: none;
}

/* ---------------------------------------------------------------------------
   FEATURE 013 — the platform's numbers on the admin's front page.
   A row of plain cards above the list of sections: big number, short label,
   and three ranges to switch between. Nothing to read, only to glance at.
   --------------------------------------------------------------------------- */
.cd-board {
  margin-bottom: 26px;
}
.cd-board__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}
.cd-board__title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 700;
  color: #111827;
}
.dark .cd-board__title {
  color: #f9fafb;
}
.cd-board__title .material-symbols-outlined {
  font-size: 20px;
  color: #7c3aed;
}
.cd-board__said {
  margin-top: 4px;
  font-size: 13px;
  color: #6b7280;
}
.dark .cd-board__said {
  color: #9ca3af;
}
.cd-board__range {
  display: inline-flex;
  gap: 6px;
}
.cd-range {
  padding: 5px 11px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
  color: #6b7280;
  background: #f3f4f6;
  border: 1px solid #e5e7eb;
  text-decoration: none;
}
.cd-range:hover {
  background: #ede9fe;
  color: #6d28d9;
}
.cd-range--on {
  color: #ffffff;
  background: #7c3aed;
  border-color: #7c3aed;
}
.dark .cd-range {
  color: #9ca3af;
  background: #1f2937;
  border-color: #374151;
}
.dark .cd-range:hover {
  background: rgba(124, 58, 237, 0.2);
  color: #c4b5fd;
}
.dark .cd-range--on {
  color: #ffffff;
  background: #7c3aed;
  border-color: #7c3aed;
}

.cd-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 14px;
  margin-top: 14px;
}
.cd-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  padding: 18px 20px;
  box-shadow: 0 1px 3px rgba(16, 24, 40, 0.05);
}
.dark .cd-card {
  background: #1f2937;
  border-color: #374151;
}
.cd-card__value {
  font-size: 26px;
  font-weight: 700;
  color: #111827;
  line-height: 1.15;
}
.dark .cd-card__value {
  color: #f9fafb;
}
.cd-card__title {
  margin-top: 4px;
  font-size: 13px;
  color: #6b7280;
}
.dark .cd-card__title {
  color: #9ca3af;
}

/* ===========================================================================
   FEATURE 013 — the settings page, shaped like a game's options screen.

   The sections run across the TOP as tabs; the settings themselves fill
   the whole width underneath — the name on the left, the value on the
   right, a hairline between them. No descriptions, no keys, no ranges:
   a screen of values, not a screen of reading.
   =========================================================================== */
body.model-appsetting.change-list #changelist,
body.model-appsetting.change-list .container.-my-3 + div > .flex.gap-3 {
  display: none !important;
}
body.model-appsetting.change-list .container.-my-3 {
  margin-bottom: 10px !important;
}

#st-form {
  padding-bottom: 68px;
}

/* ---- what is waiting to be saved, said at the very top ---- */
.st-note {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 10px;
  padding: 9px 14px;
  border-radius: 10px;
  border: 1px solid #ddd6fe;
  background: #f5f3ff;
}
.dark .st-note {
  border-color: rgba(124, 58, 237, 0.45);
  background: rgba(124, 58, 237, 0.14);
}
.st-note__said {
  font-size: 13px;
  font-weight: 600;
  color: #6d28d9;
}
.dark .st-note__said {
  color: #c4b5fd;
}
.st-note__btns {
  display: flex;
  gap: 8px;
}

/* ---- find: a magnifier that opens into a box when it is wanted ----
   Kept shut it leaves the whole line to the sections; nine of them and a
   box side by side do not fit, and a section cut in half looks broken. */
.st-find {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
  height: 34px;
  padding: 0 6px;
  border-radius: 9px;
  border: 1px solid transparent;
  cursor: text;
}
.st-find:hover {
  border-color: #e5e7eb;
}
.dark .st-find:hover {
  border-color: #374151;
}
.st-find:focus-within,
.st-find--open {
  border-color: #a855f7;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.18);
}
.dark .st-find:focus-within,
.dark .st-find--open {
  background: #111827;
}
.st-find .material-symbols-outlined {
  font-size: 18px;
  color: #9ca3af;
}
.st-find input {
  border: 0 !important;
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
  padding: 0 !important;
  width: 0;
  font-size: 13px;
  color: #111827;
  transition: width 0.15s ease;
}
.dark .st-find input {
  color: #f3f4f6;
}
.st-find:focus-within input,
.st-find--open input {
  width: 150px;
}
.st-find__clear {
  display: inline-flex;
  background: transparent !important;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: #9ca3af;
}

/* ---- the open section sits straight on the page ---- */
.st-page {
  display: block;
}
.st-group--away {
  display: none;
}
.st-group__title {
  margin: 0;
  padding: 16px 0 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #9ca3af;
}
.dark .st-group__title {
  color: #7d8797;
}

/* ---- one setting, one wide row ---- */
.st-rows {
  display: flex;
  flex-direction: column;
}
.st-row {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 44px;
  padding: 3px 12px;
  margin: 0 -12px;
  border-radius: 8px;
  border-top: 1px solid #f1f2f4;
}
.dark .st-row {
  border-top-color: #232d3f;
}
.st-row:first-child {
  border-top: 0;
}
.st-row:hover {
  background: #f8f7fc;
}
.dark .st-row:hover {
  background: #202b3d;
}
.st-row__label {
  flex: 1 1 auto;
  min-width: 0;
}
.st-row__why {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  font-weight: 600;
  color: #b91c1c;
}
.dark .st-row__why {
  color: #fca5a5;
}
.st-row__name {
  display: block;
  min-width: 0;
  font-size: 13.5px;
  color: #6b7280;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dark .st-row__name {
  color: #9aa4b2;
}
.st-row:hover .st-row__name {
  color: #374151;
}
.dark .st-row:hover .st-row__name {
  color: #d5dbe4;
}
.st-row--touched .st-row__name,
.dark .st-row--touched .st-row__name,
.st-row--touched:hover .st-row__name {
  color: #7c3aed;
  font-weight: 600;
}
.dark .st-row--touched .st-row__name {
  color: #c4b5fd;
}
.st-row--wrong .st-row__name,
.st-row--wrong:hover .st-row__name {
  color: #b91c1c;
  font-weight: 600;
}
.dark .st-row--wrong .st-row__name {
  color: #fca5a5;
}
.st-row__back {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 7px;
  border: 0;
  background: transparent !important;
  color: #9ca3af;
  cursor: pointer;
  padding: 0;
}
.st-row__back:hover {
  background: rgba(124, 58, 237, 0.14) !important;
  color: #7c3aed;
}
.st-row__back .material-symbols-outlined {
  font-size: 16px;
}

/* The settings sit in cards, the way every other page in the admin lays
   its sections out — and two to a line where there is room, so a name and
   the value it belongs to stay close instead of facing each other across
   an empty card. */
.st-page {
  display: block;
}
.st-group {
  margin-bottom: 14px;
}
.st-group .ff-card__head {
  margin-bottom: 2px;
}
.st-rows {
  padding: 0 16px 10px;
}
@media (min-width: 1180px) {
  .st-rows:not(.st-rows--few) {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 26px;
  }
  .st-rows:not(.st-rows--few) > .st-row:nth-child(2) {
    border-top: 0;
  }
  /* A hairline down the middle, so the two read as two lists. */
  .st-rows:not(.st-rows--few) > .st-row:nth-child(odd) {
    border-right: 1px solid #f1f2f4;
    padding-right: 13px;
    margin-right: 0;
  }
  .dark .st-rows:not(.st-rows--few) > .st-row:nth-child(odd) {
    border-right-color: #232d3f;
  }
  /* Nothing beside it means nothing to divide it from. */
  .st-rows > .st-row:nth-child(odd):last-child {
    border-right: 0;
  }
  .st-rows:not(.st-rows--few) > .st-row:nth-child(even) {
    padding-left: 13px;
    margin-left: 0;
  }
}
.st-row__name {
  white-space: normal;
  overflow: visible;
  line-height: 1.35;
}
@media (min-width: 1180px) {
  /* A card of two or three settings uses exactly one column of the same
     grid the fuller cards use, so the gap between a name and its value
     is the same on every card of every settings page. Narrower than
     that, every card is one full-width column and they match anyway. */
  .st-rows--few {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 26px;
  }
  .st-rows--few > .st-row {
    grid-column: 1;
    padding-right: 13px;
    margin-right: 0;
  }
}

/* The value column lines up down the page, the way the game lines it up. */
.st-num,
.st-len,
.st-switch {
  flex: 0 0 auto;
  width: 140px;
  display: flex;
  justify-content: flex-end;
}

/* ---- a count: the value, and the arrows that change it ---- */
.st-num {
  position: relative;
}
.st-num input {
  width: 100%;
  height: 32px;
  padding: 0 28px 0 10px;
  border-radius: 8px;
  border: 1px solid transparent !important;
  background: transparent !important;
  color: #111827 !important;
  font-size: 13.5px;
  font-weight: 700;
  text-align: right;
}
.dark .st-num input {
  color: #f3f4f6 !important;
}
.st-row:hover .st-num input,
.st-num input:hover {
  border-color: #e0d7f5 !important;
  background: #fff !important;
}
.dark .st-row:hover .st-num input,
.dark .st-num input:hover {
  border-color: #3c4a63 !important;
  background: #111827 !important;
}
.st-num input:focus {
  border-color: #a855f7 !important;
  background: #fff !important;
  box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.18) !important;
  outline: none !important;
}
.dark .st-num input:focus {
  background: #111827 !important;
}
.st-num__btns {
  position: absolute;
  top: 3px;
  right: 4px;
  bottom: 3px;
  width: 20px;
  display: flex;
  flex-direction: column;
  opacity: 0;
  transition: opacity 0.12s ease;
}
.st-row:hover .st-num__btns,
.st-num input:focus + .st-num__btns,
.st-len__panel .st-num__btns {
  opacity: 1;
}
.st-num__btn {
  flex: 1;
  border: 0;
  background: transparent !important;
  color: #9ca3af;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.st-num__btn:hover {
  color: #7c3aed;
}
.st-num__btn .material-symbols-outlined {
  font-size: 15px;
  line-height: 1;
}

/* ---- a length: the value, and a chooser behind it ---- */
.st-len {
  position: relative;
}
.st-len__face {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 2px;
  width: 100%;
  height: 32px;
  padding: 0 4px 0 10px;
  border-radius: 8px;
  border: 1px solid transparent;
  background: transparent !important;
  color: #111827;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
}
.dark .st-len__face {
  color: #f3f4f6;
}
.st-row:hover .st-len__face {
  border-color: #e0d7f5;
  background: #fff !important;
}
.dark .st-row:hover .st-len__face {
  border-color: #3c4a63;
  background: #111827 !important;
}
.st-len--open .st-len__face,
.st-len--open .st-row:hover .st-len__face {
  border-color: #a855f7;
  background: #fff !important;
  box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.18);
}
.dark .st-len--open .st-len__face {
  background: #111827 !important;
}
.st-len__face .material-symbols-outlined {
  font-size: 18px;
  color: #9ca3af;
}
.st-len__panel {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 40;
  width: 268px;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  background: #fff;
  box-shadow: 0 12px 28px rgba(16, 24, 40, 0.16);
}
.dark .st-len__panel {
  border-color: #374151;
  background: #1f2937;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.5);
}
.st-len__chips {
  margin: 0 0 10px;
  gap: 6px;
}
.st-len__own {
  display: flex;
  align-items: center;
  gap: 8px;
}
.st-len__own .st-num {
  width: 92px;
}
.st-len__own .st-num input {
  border-color: #d1d5db !important;
  background: #fff !important;
  text-align: left;
  padding-right: 26px;
}
.dark .st-len__own .st-num input {
  border-color: #374151 !important;
  background: #111827 !important;
}
.st-input--unit {
  height: 32px;
  flex: 1 1 auto;
  padding: 0 8px;
  border-radius: 8px;
  border: 1px solid #d1d5db !important;
  background: #fff !important;
  color: #111827 !important;
  font-size: 13.5px;
}
.dark .st-input--unit {
  border-color: #374151 !important;
  background: #111827 !important;
  color: #f3f4f6 !important;
}

/* ---- yes or no ---- */
.st-switch {
  align-items: center;
  cursor: pointer;
}
.st-switch input {
  display: none;
}
.st-switch__slider {
  width: 38px;
  height: 22px;
  border-radius: 9999px;
  background: #9ca3af;
  position: relative;
  transition: background 0.15s ease;
}
.dark .st-switch__slider {
  background: #4b5563;
}
.st-switch input:checked + .st-switch__slider {
  background: #7c3aed;
}
.st-switch__slider::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.15s ease;
}
.st-switch input:checked + .st-switch__slider::after {
  transform: translateX(16px);
}

/* ---- nothing matched ---- */
.st-none {
  padding: 14px 0 0;
  color: #6b7280;
  font-size: 13px;
}
.dark .st-none {
  color: #9ca3af;
}

@media (max-width: 720px) {
  .st-tabs {
    flex-wrap: wrap;
    gap: 6px;
  }
  .st-find {
    order: -1;
    width: 100%;
  }
  .st-find input {
    width: 100%;
  }
  .st-num,
  .st-len,
  .st-switch {
    width: 132px;
  }
}


/* ===========================================================================
   FEATURE 013 — one line of the trail.

   Two half-empty cards used to say "kind of thing / which one" and print
   two blocks of JSON. What somebody reading the trail wants is the
   sentence those blocks hide: this field was this, and became that. So
   the target and the reason moved up into the header, and the change is
   a short table of what / was / became.
   =========================================================================== */
.au-hero__facts {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin-top: 6px;
}
.au-fact {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  color: #6b7280;
}
.dark .au-fact {
  color: #9aa4b2;
}
.au-fact .material-symbols-outlined {
  font-size: 16px;
  color: #9ca3af;
}
.au-fact__link,
.au-fact__strong {
  font-weight: 600;
  color: #6d28d9;
}
.dark .au-fact__link,
.dark .au-fact__strong {
  color: #c4b5fd;
}
.au-fact__link:hover {
  text-decoration: underline;
}

.au-card {
  /* The same width as the header above it: a narrower card floating under
     a full-width one reads as a leftover, not as a section. */
  margin-top: 14px;
}
/* The change, said as a sentence. A table of what / was / became made a
   reader do the joining up; "Value went from 5 to 9" does not. */
.au-said {
  list-style: none;
  margin: 0;
  padding: 2px 18px 6px;
}
.au-said__one {
  padding: 8px 0;
  border-top: 1px solid #f1f2f4;
  font-size: 14px;
  line-height: 1.6;
  color: #6b7280;
}
.dark .au-said__one {
  border-top-color: #232d3f;
  color: #9aa4b2;
}
.au-said__one:first-child {
  border-top: 0;
}
.au-said__name {
  font-weight: 600;
  color: #111827;
}
.dark .au-said__name {
  color: #f3f4f6;
}
.au-was,
.au-now {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 6px;
  font-weight: 600;
  overflow-wrap: anywhere;
}
.au-was {
  background: #f3f4f6;
  color: #6b7280;
  text-decoration: line-through;
  text-decoration-color: #cbd0d8;
}
.dark .au-was {
  background: #232d3f;
  color: #8b95a5;
  text-decoration-color: #4a566b;
}
.au-now {
  background: #f5f3ff;
  color: #6d28d9;
}
.dark .au-now {
  background: rgba(124, 58, 237, 0.2);
  color: #c4b5fd;
}
.au-kept {
  margin: 0;
  padding: 2px 18px 16px;
  font-size: 13px;
  color: #9ca3af;
}
.au-none {
  margin: 0;
  padding: 4px 16px 16px;
  font-size: 13.5px;
  color: #6b7280;
}
.dark .au-none {
  color: #9aa4b2;
}
.au-raw {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  padding: 4px 16px 16px;
}
.au-raw__label {
  display: block;
  margin-bottom: 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #9ca3af;
}

@media (max-width: 720px) {
  .au-raw {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* When the delete dialog refuses, the red note is the ONLY thing in the
   body: the "are you sure?" line above it is hidden. Its own top margin
   (meant to separate it from that line) then sat on top of the body's
   padding and the note hung 30px from the top and 18px from the bottom.
   No line above means no margin above. */
[data-ff-refdelete-ask][hidden] + [data-ff-refdelete-why] {
  margin-top: 0;
}

/* A topic people are using cannot be deleted. Said in the same red as every
   other refusal in this admin, above the hero where the error banner goes,
   so an admin looking for the delete button is told why it is not there
   instead of concluding the page is broken. */
.tp-no-delete {
  margin: 0 0 14px;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid #fecaca;
  background: #fef2f2;
  color: #991b1b;
  font-size: 0.8125rem;
  line-height: 1.5;
}

.tp-no-delete__what {
  font-weight: 600;
}

.dark .tp-no-delete {
  border-color: #7f1d1d;
  background: #1f1113;
  color: #fca5a5;
}