/* system section: styles only this section uses. */

/* ---- Users panel ---- */
/* The balance card; the button names the direction the segmented control picks. */
.sys-bal { padding: 12px; border: 1px solid var(--line); border-radius: 4px; display: flex; flex-direction: column; gap: 10px; }
.sys-bal .seg > label { position: relative; }
.sys-bal .sys-db { display: none; }
.sys-bal:has(input[value="debit"]:checked) .sys-cr { display: none; }
.sys-bal:has(input[value="debit"]:checked) .sys-db { display: inline; }
/* The platform role saves only once another role is picked. */
.sys-role-save { display: none; }
.sys-role:has(option[data-init]:not(:checked)) .sys-role-save { display: inline-flex; }
.sys-role:has(option[data-init]:not(:checked)) .inp { border-color: var(--accent); }
.sys-perm { cursor: pointer; }
.sys-perm:hover { background: var(--hover); }

/* ---- Settings: group navigation left, cards of rows right ---- */
.sys-set { flex: 1 0 auto; display: grid; grid-template-columns: 220px minmax(0, 1fr); }
.sys-snav { padding: 14px 10px; border-right: 1px solid var(--line); --anchor-h: 30px; }
.sys-snav-in { position: sticky; top: 14px; display: flex; flex-direction: column; gap: 2px; }
.sys-dd { display: none; }
.sys-grp { font-size: 11px; font-weight: 500; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); padding: 12px 10px 4px; }
.sys-set-main { padding: 18px 26px 80px; display: flex; flex-direction: column; gap: 18px; background: var(--canvas); min-width: 0; }
.sys-card { display: flex; flex-direction: column; overflow: hidden; scroll-margin-top: 18px; }
.sys-card-h { display: flex; align-items: baseline; gap: 10px; padding: 13px 16px; border-bottom: 1px solid var(--line-2); }
.sys-row { display: grid; grid-template-columns: minmax(0, 1fr) 190px; gap: 16px; align-items: center; padding: 10px 16px; border-bottom: 1px solid var(--line-2); transition: background-color 80ms; }
.sys-row.wide { grid-template-columns: minmax(0, 1fr) 340px; }
.sys-was { display: none; }
.sys-row-save { visibility: hidden; }
.sys-rate-f { display: none; align-items: center; gap: 8px; padding: 10px 16px; }

/* A changed field no longer matches its own pattern, a switch leaves its data-on and
   an option its data-init: the row turns blue, shows what it was and counts. */
.sys-row:has(.inp:invalid, .sw:checked:not([data-on]), .sw[data-on]:not(:checked), option[data-init]:not(:checked)) { background: var(--sel-bg); }
.sys-row:has(.inp:invalid, .sw:checked:not([data-on]), .sw[data-on]:not(:checked), option[data-init]:not(:checked)) .sys-was { display: inline-flex; }
.sys-row:has(.inp:invalid, .sw:checked:not([data-on]), .sw[data-on]:not(:checked), option[data-init]:not(:checked)) .sys-row-save { visibility: visible; }
.sys-row .inp:invalid, .sys-row select:has(option[data-init]:not(:checked)) { border-color: var(--accent); }
#settings-form .sys-row:has(.inp:invalid, .sw:checked:not([data-on]), .sw[data-on]:not(:checked), option[data-init]:not(:checked)) { counter-increment: dirty; }
.sys-rate:has(.inp:invalid, .sw:checked:not([data-on]), .sw[data-on]:not(:checked)) .sys-rate-f { display: flex; }

/* The save bar counts the changed rows: "2 unsaved changes". */
@counter-style sys-plural { system: cyclic; symbols: "s"; range: 2 infinite; fallback: sys-none; }
@counter-style sys-none { system: cyclic; symbols: ""; }
.sys-count::before { content: counter(dirty) " unsaved change" counter(dirty, sys-plural); }

/* a narrow window: the groups in a row above the settings, then each setting above its value */
@container content (width < 720px) {
  .sys-set { grid-template-columns: minmax(0, 1fr); }
  .sys-snav { border-right: 0; border-bottom: 1px solid var(--line); padding: 6px 10px; overflow-x: auto; scrollbar-width: none; }
  .sys-snav-in { position: static; flex-direction: row; }
  .sys-grp { display: none; }
  .sys-set-main { padding: 12px 12px 80px; }
}
@container content (width < 560px) {
  .sys-row, .sys-row.wide { grid-template-columns: minmax(0, 1fr); gap: 8px; }
}