/* ─────────────────────────────────────────────────────────────────────────────
   Operations — the settings page's cards. The dev-* rules are the Development
   page's (still inline in Development.cshtml, identical), so the two settings
   pages read as one. Rules for Operations alone are scoped to .ops-settings,
   the page's wrapper, so they can't reach the Development page.
   ───────────────────────────────────────────────────────────────────────────── */
.dev-card { margin-bottom: var(--spacing-6); scroll-margin-top: var(--spacing-6); }
.dev-card__title { display: flex; align-items: center; gap: var(--spacing-2); }
/* Accordion card: the summary is the card head; the chevron turns when it's open. */
.dev-accordion__summary { cursor: pointer; list-style: none; user-select: none; display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-3); }
.dev-accordion__summary::-webkit-details-marker { display: none; }
.dev-accordion:not([open]) > .dev-accordion__summary { padding-bottom: var(--spacing-5); }
.dev-accordion__summary:focus-visible { outline: 2px solid var(--color-primary); outline-offset: -2px; border-radius: var(--radius-lg); }
.dev-accordion__meta { display: flex; align-items: center; gap: var(--spacing-3); }
.dev-accordion__chevron { transition: transform 0.15s ease; color: var(--color-text-secondary); }
.dev-accordion[open] .dev-accordion__chevron { transform: rotate(180deg); }
.dev-muted { color: var(--color-text-secondary); font-size: var(--font-size-sm); }
.dev-status { color: var(--color-text-secondary); font-size: var(--font-size-sm); margin: 0 0 var(--spacing-4); }
.dev-card .form-grid + .form-grid { margin-top: var(--spacing-4); }
.dev-card .form-grid + .field__hint { margin: var(--spacing-3) 0 var(--spacing-4); }
.dev-check { display: flex; align-items: center; gap: var(--spacing-2); font-weight: normal; }

/* ── Operations only ─────────────────────────────────────────────────────────── */
/* The current financial year line, spaced off the form under it. */
.ops-settings .ops-note { margin: 0 0 var(--spacing-4); }

/* The settings tables, spaced off the add form under them; the working-week one a little less. */
.ops-settings .ops-table { margin-bottom: var(--spacing-4); }
.ops-settings .ops-table--tight { margin-bottom: var(--spacing-3); }
/* Inputs in a table row shrink to their cell; the code and type names below keep a sensible width. */
.ops-settings .data-table .input { min-width: 0; }
.ops-settings .data-table .ops-code { font-weight: 600; min-width: 9rem; }
.ops-settings .data-table .ops-type-name { min-width: 14rem; }
.ops-settings .ops-rate { max-width: 7rem; }
/* Timesheet codes are upper case, in the table and on the add form alike. */
.ops-settings .ops-code { text-transform: uppercase; }

/* A row's Save and Remove stay side by side; Remove's form sits inline next to Save. */
.ops-settings .ops-row-actions { white-space: nowrap; }
.ops-settings .ops-inline { display: inline; }
/* The add form's Billable tick, beside its label text. */
.ops-settings .ops-check-label { display: flex; align-items: center; gap: var(--spacing-2); }

/* Expense types: the cost per mile only shows while Mileage is ticked — on a type's row, and on the add form. */
#expense-types tr:has([data-mileage-toggle]:not(:checked)) [data-mileage-rate],
.expense-type-add:has([data-mileage-toggle]:not(:checked)) .field:has([data-mileage-rate]) { visibility: hidden; }

/* Wording accordion: the row of {placeholder} chips the editor can insert. */
.placeholder-chips { display: flex; flex-wrap: wrap; gap: var(--spacing-2); margin: 0 0 var(--spacing-3); }
/* Checkbox group for the roles / people a rule applies to. */
.option-list { display: flex; flex-wrap: wrap; gap: var(--spacing-2) var(--spacing-4); }