/*
 * 1. Keep every fieldset the same width.
 *
 * Browsers give <fieldset> `min-inline-size: min-content`, so a section whose
 * content is intrinsically wide (a date + time pair, a long help sentence)
 * pushes past the column and renders wider than its neighbours — the form looks
 * ragged even though every fieldset carries identical classes. `min-width: 0`
 * opts out of that legacy sizing.
 */
#content-main fieldset.module {
  /* min-width:0 drops the legacy min-content floor so a wide section can't push
     past its neighbours; width:100% is what makes it FILL the column, which the
     floor used to do by accident. Without both, the card shrinks to its content
     and leaves the column half empty. */
  min-width: 0;
  width: 100%;
  max-width: 100%;
}

/*
 * 2. ...but narrower must not mean clipped.
 *
 * Django's date/time pair is a flex row of two halves, each carrying a hard
 * `min-w-52` / `min-w-56`. Once the column is narrow — the banner form gives up
 * 360px to the live preview — the pair no longer fits and the time input was
 * simply cut off at the edge. Let it wrap onto a second line instead: the fields
 * stay whole and reachable, they just stack.
 */
#content-main fieldset.module .datetime {
  flex-wrap: wrap;
}

/* Same idea for any other row that lays its widgets out side by side. */
#content-main fieldset.module .form-row .grow > .flex {
  flex-wrap: wrap;
}

/* …except a switch (owner, 24 Oct 2026: "every switch like 'Limit & budget for all apps together'"): label on the
 * left, switch + its help on the right in one line, the help wrapping inside its own column. With the wrap above, a
 * long help text pushed the switch and help under the label. Phones (below lg) still stack, as Unfold lays out. */
@media (min-width: 1024px) {
  #content-main fieldset.module .form-row .field-line > .flex:has(> .grow > .flex > input[type="checkbox"]),
  #content-main fieldset.module .form-row .grow > .flex:has(> input[type="checkbox"]) {
    flex-wrap: nowrap;
  }
  #content-main fieldset.module .form-row .field-line > .flex:has(> .grow > .flex > input[type="checkbox"]) > .grow,
  #content-main fieldset.module .form-row .grow > .flex:has(> input[type="checkbox"]) > :not(input) {
    min-width: 0;
    flex: 1 1 0;
  }
}

/*
 * 3. Let the fields use the width that is actually there.
 *
 * Unfold caps every field's input wrapper at max-w-2xl (42rem). On a change form
 * that is fine, but the banner and modal forms hand 360px to the live preview and
 * still had a wide gap between the inputs and the phone — the inputs were stopping
 * short of the space available, not running out of it.
 *
 * Raised rather than removed: a text input stretched across a 2000px monitor is
 * its own kind of unusable.
 */
#content-main .form-row .max-w-2xl,
#content-main fieldset.module .max-w-2xl {
  max-width: 56rem;
}

/* On the preview pages the column itself is now full width, so let the inputs
   follow it rather than stopping at a fixed cap. */
#cj-bn-fixed ~ * .max-w-2xl,
body:has(#cj-bn-fixed) #content-main .max-w-2xl {
  max-width: none;
}

/*
 * 4. Let long values break instead of claiming a column.
 *
 * A URL is one unbroken "word", and with the default overflow-wrap the browser
 * reserves the whole word's width for its column. One Google Forms link was
 * taking ~700px of a 1200px table, squeezing "Open an in-app screen (deep link)"
 * next to it into three lines and pushing Order off to the edge.
 *
 * `anywhere` lets the URL break mid-string, so the column asks for a fair share
 * and every other column gets its own text back on one or two lines. The cap
 * keeps a single long value from taking a third of the table even so.
 */
/* Changelists use #result_list; the inline tables on a change form are
   table.formset. Both hold the same kind of long values (URLs, dedup ids,
   tokens), so both get the same treatment. */
#result_list td,
#result_list th,
table.formset td,
table.formset th {
  overflow-wrap: anywhere;
  word-break: break-word;
}

#result_list td,
table.formset td {
  /* Upper bound so one long value cannot take a third of the table; lower bound
     so `anywhere` does not let a column collapse far enough to snap ordinary
     words in half. */
  min-width: 7rem;
  max-width: 22rem;
}

/* The row's first column is the link to the object — Django renders it as a
   <th>, which the rule above missed: with `anywhere` it collapsed until names
   broke letter by letter ("Follo / w our / What / sApp"). The tick-box column
   is the opposite: the 7rem floor made it a wide empty strip (owner, 14 Oct 2026). */
#result_list tbody th {
  min-width: 10rem;
  max-width: 22rem;
}
#result_list td.action-checkbox,
#result_list th.action-checkbox-column {
  min-width: 0;
  width: 1%;
}

/*
 * 5. The config listing rows — styled here, not in Tailwind classes.
 *
 * unfold ships a PRE-BUILT Tailwind stylesheet: it contains only the utilities
 * unfold itself uses. A class we invent in our own template is simply absent, and
 * absent classes fail silently — the markup looks right and the rule never lands.
 *
 * That is what broke dark mode on this page. The row carried
 * `hover:bg-base-50 dark:hover:bg-white/[.03]`; the light half exists in unfold's
 * build, the dark override does NOT. So hovering a row in dark mode painted it
 * base-50 — near-white — under text that was still light grey. The row went
 * unreadable exactly while you were pointing at it.
 *
 * Same story for lg:items-start / lg:shrink-0 / lg:text-right / lg:w-36 / py-0.5,
 * which is why the date column never right-aligned.
 *
 * So the component owns its CSS here, where nothing depends on which utilities
 * happen to have been compiled. Hover uses plain black/white alpha rather than a
 * palette token: it reads correctly against any theme colour and cannot invert.
 */
.cj-cfg-row {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  width: 100%;
  padding: 1rem 1.25rem;
}

.cj-cfg-row:hover {
  background: rgb(0 0 0 / 0.04);
}

html.dark .cj-cfg-row:hover {
  background: rgb(255 255 255 / 0.04);
}

.cj-cfg-pill {
  display: inline-block;
  margin-top: 0.25rem;
  padding: 0.125rem 0.5rem;
  border-radius: 9999px;
}

/* Side-by-side only when there is room; below this the three blocks stack, which
   is the flex-direction: column above. */
@media (min-width: 1024px) {
  .cj-cfg-row {
    flex-direction: row;
    align-items: flex-start;
    gap: 1.5rem;
  }

  .cj-cfg-title {
    width: 14rem;
    flex-shrink: 0;
  }

  .cj-cfg-date {
    width: 9rem;
    flex-shrink: 0;
    text-align: right;
  }
}

/*
 * 6. Polyfill the utilities unfold's build leaves out.
 *
 * Same root cause as section 5: unfold's stylesheet is pre-built and carries only
 * the utilities unfold itself uses, so anything else we write in a template is
 * silently inert. On the Integration economics page that meant every cross-link
 * (`text-orange-600`) rendered in plain body colour, the "mirror differs" warning
 * lost its orange, the profit-share figures lost their green, and the AdMob and
 * gift-card tables lost their row rules (`divide-y`) entirely.
 *
 * These are defined under their normal Tailwind names rather than bespoke ones, so
 * the templates stay idiomatic and any later use of them just works. Nothing here
 * overrides unfold -- every selector below is a name its build does not define.
 *
 * NOTE on the colour variables: unfold's `--color-*` already hold a COMPLETE
 * colour (`rgb(234, 88, 12)`, `oklch(21% .034 264.665)`), not the bare channel
 * triplet Tailwind v3 used. So they go in bare -- wrapping them as
 * `rgb(var(--color-primary-600))` produces `rgb(rgb(234, 88, 12))`, which is
 * invalid, and the browser drops the whole declaration without a word.
 *
 * Neutral alpha is used for rules and hovers instead of a palette token: it reads
 * correctly on either theme and cannot invert the way base-50 did.
 */

/* Orange is the brand primary, so these map onto the primary ramp rather than a
   second, slightly different orange. */
.text-orange-600,
.text-orange-500 {
  color: var(--color-primary-600);
}

html.dark .text-orange-600,
html.dark .text-orange-500 {
  color: var(--color-primary-500);
}

.border-orange-400 {
  border-color: var(--color-primary-400);
}

/* "Our share", "cheaper by" -- a positive number, readable on both themes. */
.text-green-600 {
  color: #15803d;
}

html.dark .text-green-600 {
  color: #4ade80;
}

/* Row rules for the economics tables. */
.divide-y > * + * {
  border-top-width: 1px;
  border-top-style: solid;
}

.divide-base-100 > * + * {
  border-top-color: rgb(0 0 0 / 0.08);
}

html.dark .dark\:divide-base-800 > * + * {
  border-top-color: rgb(255 255 255 / 0.08);
}

.hover\:text-base-900:hover {
  color: var(--color-base-900);
}

html.dark .dark\:hover\:text-base-100:hover {
  color: var(--color-base-100);
}

.items-baseline { align-items: baseline; }
.items-end      { align-items: flex-end; }
.leading-snug   { line-height: 1.375; }
.tracking-wide  { letter-spacing: 0.025em; }
.gap-px         { gap: 1px; }
.gap-x-6        { column-gap: 1.5rem; }

/*
 * Upper bound deliberate. Tailwind's own sheet is wrapped in `@layer utilities`,
 * and unlayered CSS beats layered CSS no matter what order it loads in -- so an
 * unbounded `sm:grid-cols-2` here would outrank the `lg:grid-cols-4` sitting
 * beside it in the markup and pin those grids to two columns on every screen.
 * Stopping at the lg breakpoint hands the wide layout back.
 */
@media (min-width: 640px) and (max-width: 1023.98px) {
  .sm\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ---------------------------------------------------------------------------
 * 9. Phone + tablet
 *
 * The admin is worked from a phone (paying UPI requests on the move), and
 * Unfold's responsive changelist stacks every column into a label/value card.
 * Two things broke there: labels and buttons were free to break mid-word — the
 * Copy button rendered as "Co / py" and "User" as "Us / er" — and long ids ran
 * under the value column. These rules keep words whole, let ids wrap on
 * character boundaries instead, and stop any panel forcing a sideways scroll.
 * ------------------------------------------------------------------------ */
@media (max-width: 1024px) {
  /* Never split a word inside a label, a button or a status pill. Unfold's
   * stacked changelist renders the column header as the row label, and a thin
   * grid column was breaking "User" into "Us / er". */
  .cj-copy,
  th, thead th, td > strong, .whitespace-nowrap {
    white-space: nowrap;
  }
  /* On phones Unfold turns each cell into a flex row and renders the column
   * name as a td::before label. That pseudo-element was free to wrap, which is
   * what split "User" into "Us / er" and "UPI id" into "UPI / id". */
  td[class*="field-"]::before {
    white-space: nowrap;
    flex: 0 0 auto;
    margin-right: 10px;
  }
  /* …and the value takes the rest of the row, wrapping on characters. */
  td[class*="field-"] {
    gap: 8px;
  }
  /* The copy button sits with the value, not wedged between wrapped lines. */
  .cj-copy {
    display: inline-block;
    margin-top: 4px;
  }
  /* Ids, emails and UPI handles wrap anywhere rather than overflowing. */
  td code, td small, .field-upi_id_display, .field-user_display {
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  /* Read-only panels (QR + pay details, risk rows, fraud clearance) stack. */
  .field-pay_panel > div,
  .field-risk_panel > div,
  .field-clearance_panel > div {
    flex-direction: column;
    align-items: flex-start !important;
    gap: 14px !important;
  }
  .field-pay_panel table,
  .field-risk_panel table,
  .field-clearance_panel table {
    width: 100%;
  }
  /* A QR never wider than the screen. */
  .field-pay_panel svg {
    max-width: min(100%, 260px);
    height: auto;
  }
  /* Screenshots and uploaded proof scale down instead of pushing the page. */
  .field-proof_preview img,
  .field-preview img {
    max-width: 100%;
    height: auto;
  }
  /* Nothing may force horizontal scroll on the page itself. */
  #content, .dashboard-card, form {
    max-width: 100%;
    overflow-x: auto;
  }
}

/* Every list on a phone (owner, 22 Oct 2026): the row checkbox kept Unfold's "Select record" label, squeezed
   into a sliver it ran down the card one letter per line (a 256px-tall cell on Users). No label, a real-size
   box, tighter rows, and each record a separated card. */
@media (max-width: 1023.98px) {
  #result_list tbody td.action-checkbox::before { display: none !important; }
  #result_list tbody td.action-checkbox { display: flex !important; height: auto !important;
                                          padding: 8px 12px !important; justify-content: flex-start; }
  #result_list tbody td.action-checkbox > input { flex: 0 0 20px !important; width: 20px !important;
                                                   min-width: 20px !important; height: 20px !important; }
  #result_list tbody tr { margin: 0 0 12px; border-radius: 14px; overflow: hidden; }
  #result_list tbody td[class*="field-"] { padding-top: 6px !important; padding-bottom: 6px !important;
                                           min-height: 0 !important; }
}

/* "Jump to where you act" on phones (show_when.js, _Base.phone_jump). */
.cj-jump-decision { position: fixed; right: 14px; bottom: 132px; z-index: 40; padding: 10px 16px; border-radius: 999px;
                    background: #ea580c; color: #fff !important; font-weight: 800; font-size: 14px;
                    text-decoration: none; box-shadow: 0 6px 18px rgba(0,0,0,.35); }
@media (min-width: 1024px) { .cj-jump-decision { display: none; } }

/* User page on a phone (owner, 22 Oct 2026): name first, the twelve stat cards three to a row, no captions. */
.cj-snap-name { display: none; }
@media (max-width: 639.98px) {
  .cj-snap-name { display: block; font-size: 15px; line-height: 1.4; margin: 2px 0 8px; overflow-wrap: anywhere; }
  .cj-snap-name span { font-size: 12.5px; opacity: .7; }
  .cj-snap-grid { gap: 8px !important; }
  .cj-snap-grid > div { flex: 1 1 30% !important; min-width: 0 !important; max-width: none !important;
                        padding: 7px 9px !important; }
  .cj-snap-grid > div > div:nth-child(1) { font-size: 10px !important; }
  .cj-snap-grid > div > div:nth-child(2) { font-size: 16px !important; }
  .cj-snap-grid > div > div:nth-child(3) { display: none; }
}

@media (max-width: 640px) {
  /* Give the value column room: labels stay short, values take the rest. */
  table th[scope="row"], .field-label {
    max-width: 38%;
  }
  /* Full-width action buttons are easier to hit with a thumb. */
  .submit-row a.button, .submit-row input[type="submit"], .submit-row button {
    width: 100%;
    margin: 4px 0;
  }
  /* Wide data tables (daily stats, economics) scroll inside their own box. */
  .results, .dashboard-card table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* WhatsApp panel changelists: keep a two-word campaign name on one line
   instead of wrapping it over five rows. Message/error columns still wrap,
   they are the only ones with sentences in them. */
body.change-list[class*="model-whatsapp"] table#result_list td[class*="field-"],
body.change-list[class*="model-whatsapp"] table#result_list th[class*="field-"],
body.change-list[class*="model-whatsapp"] table#result_list thead th { white-space: nowrap; }
body.change-list[class*="model-whatsapp"] table#result_list td.field-short_body,
body.change-list[class*="model-whatsapp"] table#result_list td.field-error,
body.change-list[class*="model-whatsapp"] table#result_list td.field-short_error,
body.change-list[class*="model-whatsapp"] table#result_list td.field-preview { white-space: normal; min-width: 240px; }

/* Split date + time fields (Starts at / Ends at, Scheduled for, …).

   Unfold only puts the two boxes on one line at its `lg` breakpoint (1024px).
   Below that they stack, and the time box keeps the date box's left offset, so
   the pair reads as a staircase rather than one field. Pair them from 640px up —
   two 224px boxes and a gap fit comfortably — and below that stack them flush
   left at full width. */
.datetime { display: flex; gap: 8px; }
.datetime > div { min-width: 0; margin-left: 0; }
.datetime input { min-width: 0; }

@media (min-width: 640px) {
  .datetime { flex-direction: row; align-items: center; }
  .datetime > div { flex: 1 1 0; }
}

@media (max-width: 639px) {
  .datetime { flex-direction: column; }
  .datetime > div { width: 100%; }
}

/* Home screen engine: the Restore button on the releases list. (Colour fields
   are styled with the rest of the Home preview, in _preview_css.html.) */
.cj-restore {
  background: #FF6B00; color: #fff; border: 0; border-radius: 6px; padding: 4px 12px;
  font-size: 12px; font-weight: 700; cursor: pointer;
}

/* ── ⓘ tooltips (admin/_help_tip.html) ──────────────────────────────────
   Global so the Dashboard, Daily Stats and every analytics page share one
   look; hover or keyboard focus shows the body. .cj-tip-flip is added by JS
   when the body would run off the right edge. */
.cj-tip { position: relative; display: inline-flex; align-items: center; margin-left: 4px;
          vertical-align: middle; cursor: help; color: #94a3b8; outline: none; }
.cj-tip:hover, .cj-tip:focus { color: #64748b; }
.cj-tip .material-symbols-outlined { font-size: 15px; line-height: 1; }
.cj-tip-body { display: none; position: absolute; top: calc(100% + 6px); left: -8px; z-index: 60;
               width: 280px; max-width: 80vw; padding: 8px 10px; border-radius: 6px;
               background: #0f172a; color: #f1f5f9; box-shadow: 0 6px 20px rgba(0,0,0,.25);
               font-size: 12px; font-weight: 400; line-height: 1.45; text-align: left;
               text-transform: none; letter-spacing: normal; white-space: normal; }
.cj-tip.cj-tip-flip .cj-tip-body { left: auto; right: -8px; }
.cj-tip:hover .cj-tip-body, .cj-tip:focus .cj-tip-body { display: block; }
.dark .cj-tip-body { background: #f1f5f9; color: #0f172a; }

/* ── Analytics pages ────────────────────────────────────────────────────
   Unfold ships a PRECOMPILED Tailwind holding only the classes Unfold's own
   templates use. Layout utilities are all there, but the semantic palettes
   are not: amber and emerald resolve to grey, border-red-* to the default
   border, and — the one that actually broke — bg-red-50 exists while
   dark:bg-red-950 does not, so a red panel kept a pale pink background under
   near-white text and its title vanished. So the few colours these pages
   need are defined here instead of guessed from the palette. */

/* Attention: one quiet line that expands. Three stacked banners above every
   page drowned the numbers they were meant to guard. */
.cj-att-wrap { margin: -4px 0 -2px; }
.cj-att-summary {
  display: flex; align-items: center; gap: 8px; cursor: pointer; list-style: none;
  padding: 7px 12px; border: 1px solid; border-radius: 8px; font-size: 13px; line-height: 1.4;
}
.cj-att-summary::-webkit-details-marker { display: none; }
.cj-att-first { opacity: .75; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cj-att-caret { margin-left: auto; font-size: 18px; opacity: .6; flex: none; }
.cj-att-wrap[open] .cj-att-caret { transform: rotate(180deg); }
.cj-att-list { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.cj-att-row {
  display: flex; align-items: flex-start; gap: 10px; padding: 9px 12px;
  border: 1px solid; border-radius: 8px; font-size: 13px; line-height: 1.45;
}
.cj-att-icon { font-size: 18px; line-height: 1.3; flex: none; }
.cj-att-link { margin-left: 6px; font-size: 12px; text-decoration: underline; color: inherit; opacity: .8; }
.cj-att-summary b, .cj-att-row b { font-weight: 600; }
.cj-att--bad  { border-color: rgba(239, 68, 68, .5); background: rgba(239, 68, 68, .09); }
.cj-att--warn { border-color: rgba(245, 158, 11, .5); background: rgba(245, 158, 11, .09); }
.cj-att--ok   { border-color: rgba(16, 185, 129, .45); background: rgba(16, 185, 129, .08); }
.cj-att--bad  > .cj-att-icon { color: #dc2626; }
.cj-att--warn > .cj-att-icon { color: #d97706; }
.cj-att--ok   > .cj-att-icon { color: #059669; }
.dark .cj-att--bad  > .cj-att-icon { color: #fca5a5; }
.dark .cj-att--warn > .cj-att-icon { color: #fcd34d; }
.dark .cj-att--ok   > .cj-att-icon { color: #6ee7b7; }
/* Title and body inherit the page's text colour, so they stay legible on the
   tint in both themes — the failure above was a hard-coded pair that did not. */

/* A card whose figure is superuser-only. */
.cj-su { border-color: rgba(245, 158, 11, .6) !important; }
.cj-su-tag { font-size: 10px; letter-spacing: .04em; text-transform: uppercase; color: #b45309; }
.dark .cj-su-tag { color: #fcd34d; }

/* Change against the previous period. */
.cj-delta--good { color: #059669; font-weight: 500; }
.cj-delta--bad  { color: #dc2626; font-weight: 500; }
.dark .cj-delta--good { color: #34d399; }
.dark .cj-delta--bad  { color: #f87171; }

/* Numeric table cells line up column-wise. */
.cj-num { font-variant-numeric: tabular-nums; }

/* divide-y is not in Unfold's build either, so table rows get their rule here. */
.cj-analytics table tbody tr + tr { border-top: 1px solid rgba(128, 128, 128, .18); }

/* ── Range picker (templates/admin/analytics/_range_bar.html) ───────────
   One dropdown on the right instead of a row of preset pills: the range is
   set once and then read, so it should not outweigh the figures. */
.cj-rangebar { display: flex; align-items: center; justify-content: flex-end; gap: 12px; flex-wrap: wrap; }
.cj-range-showing { font-size: 12px; opacity: .65; }
.cj-range-showing b { font-weight: 600; opacity: .95; }
.cj-range-note { color: #d97706; }
.dark .cj-range-note { color: #fcd34d; }

.cj-range { position: relative; }
.cj-range > summary {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer; list-style: none;
  padding: 6px 10px; border: 1px solid rgba(128, 128, 128, .35); border-radius: 8px;
  font-size: 13px; font-weight: 500; white-space: nowrap; user-select: none;
}
.cj-range > summary::-webkit-details-marker { display: none; }
.cj-range > summary:hover { border-color: rgba(128, 128, 128, .6); }
.cj-range[open] > summary { border-color: #FF6B00; }
.cj-range-icon, .cj-range-caret { font-size: 17px; opacity: .7; }
.cj-range[open] .cj-range-caret { transform: rotate(180deg); }

.cj-range-menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 70; width: 240px;
  border: 1px solid rgba(128, 128, 128, .3); border-radius: 10px; overflow: hidden;
  background: #fff; box-shadow: 0 12px 34px rgba(0, 0, 0, .18);
}
.dark .cj-range-menu { background: #1a1d2b; box-shadow: 0 12px 34px rgba(0, 0, 0, .55); }
.cj-range-presets { display: flex; flex-direction: column; padding: 4px; }
.cj-range-item {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 7px 10px; border-radius: 6px; font-size: 13px; color: inherit; text-decoration: none;
}
.cj-range-item:hover { background: rgba(128, 128, 128, .12); }
.cj-range-item.on { color: #FF6B00; font-weight: 600; }
.cj-range-check { font-size: 16px; }
.cj-range-custom { border-top: 1px solid rgba(128, 128, 128, .2); padding: 10px; display: flex; flex-direction: column; gap: 7px; }
.cj-range-custom-title { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; opacity: .55; }
.cj-range-custom label { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12px; opacity: .8; }
.cj-range-custom input {
  width: 140px; padding: 5px 7px; font-size: 12px; color: inherit;
  background: transparent; border: 1px solid rgba(128, 128, 128, .35); border-radius: 6px;
}
.cj-range-custom button {
  margin-top: 2px; padding: 6px 10px; border: 0; border-radius: 6px; cursor: pointer;
  background: #FF6B00; color: #fff; font-size: 12px; font-weight: 600;
}

/* ── Spin & Win: the wedges as a table, not a wall of JSON ──────────────
   (templates read it from #id_sections; admin/js/spin_sections.js builds it) */
.cj-spin { margin-bottom: 8px; }
.cj-spin-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.cj-spin-table th {
  text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .04em;
  opacity: .55; padding: 4px 8px 6px; font-weight: 600;
}
.cj-spin-table td { padding: 4px 8px; border-top: 1px solid rgba(128, 128, 128, .18); vertical-align: top; }
.cj-spin-table input, .cj-spin-table select {
  width: 100%; padding: 6px 8px; font-size: 13px; color: inherit; background: transparent;
  border: 1px solid rgba(128, 128, 128, .35); border-radius: 7px;
}
.cj-spin-table td:nth-child(3) input, .cj-spin-table td:nth-child(4) input { width: 90px; }
.cj-spin-hint { font-size: 11px; opacity: .5; margin-top: 3px; }
.cj-spin-chance { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; padding-top: 12px !important; }
.cj-spin-del {
  background: transparent; border: 0; color: #dc2626; cursor: pointer; font-size: 15px;
  padding: 6px 8px; border-radius: 6px;
}
.cj-spin-del:hover { background: rgba(239, 68, 68, .12); }
.cj-spin-foot { margin-top: 8px; font-size: 12.5px; }
.cj-spin-ok { color: #059669; }
.cj-spin-warn { opacity: .7; }
.dark .cj-spin-ok { color: #34d399; }
.cj-spin-tools { display: flex; gap: 8px; margin-top: 10px; }
.cj-spin-add, .cj-spin-raw {
  padding: 6px 11px; font-size: 12px; font-weight: 600; cursor: pointer; border-radius: 7px;
  border: 1px solid rgba(128, 128, 128, .4); background: rgba(128, 128, 128, .1); color: inherit;
}
.cj-spin-add:hover, .cj-spin-raw:hover { border-color: rgba(128, 128, 128, .7); }

/* The multiplier-providers tick list (a comma field behind the scenes). */
.field-multiplier_providers ul { list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 2px 14px; }
.field-multiplier_providers li label { display: flex; align-items: center; gap: 7px; font-size: 13px; padding: 3px 0; }
.field-multiplier_providers input[type="checkbox"] { width: auto; margin: 0; }

/* Notifications (catalogue): short columns stay on one line; the two prose
   columns wrap by word with room to breathe instead of letter by letter. */
body.change-list.model-notificationtemplate table#result_list td[class*="field-"],
body.change-list.model-notificationtemplate table#result_list th[class*="field-"],
body.change-list.model-notificationtemplate table#result_list thead th { white-space: nowrap; }
/* The row's link column (Name) is a <th>, not a <td>: give it room to wrap by
   word for the long referral names instead of letter by letter. */
body.change-list.model-notificationtemplate table#result_list tbody th.field-name { white-space: normal; min-width: 190px; }
body.change-list.model-notificationtemplate table#result_list td.field-trigger { white-space: normal; min-width: 170px; }
body.change-list.model-notificationtemplate table#result_list td.field-title { white-space: normal; min-width: 200px; }

/* Dark mode: native dropdown lists, date pickers and scrollbars follow the
   theme (without this the open list of a <select> showed white-on-white). */
html.dark{color-scheme:dark}
html.dark select option,html.dark select optgroup{background:#1f2937;color:#e5e7eb}
html:not(.dark) select option{background:#fff;color:#111827}