/* Settings Round 2 (Odoo 20): Custom fields, API keys, Security (public/js/admin/modules/settings/{custom-fields,api-keys,security}.js) and the "Extra fields" box
   on record pages (public/js/admin/custom-fields.js). Tokens from admin.css only, logical properties (RTL-safe), light + dark through the tokens, phone first at 375 px. */

/* ------------------------------------------------------------ the pages */
.sr-page .sr-list { min-inline-size: 0; }
.sr-page .form-bar { margin-block-start: 0; }
.sr-name { min-inline-size: 0; overflow-wrap: anywhere; }
.sr-hint { unicode-bidi: isolate; }
.sr-scopes { display: inline-block; max-inline-size: 360px; overflow-wrap: anywhere; font-size: 13px; line-height: 1.45; }
.sr-c-act { white-space: nowrap; text-align: end; }
.sr-note { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--panel-3); color: var(--muted); font-weight: 650; }
.sr-card { padding: 16px; display: grid; gap: 12px; }
.sr-card > h3 { margin: 0; }

/* ------------------------------------------------------------ custom fields: the choices editor */
.cf-opts { display: grid; gap: 8px; min-inline-size: 0; }
.cf-opt { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.cf-opt input { inline-size: 100%; min-block-size: 40px; padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--panel); outline: 0; }
.cf-opt input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.cf-opt-add { display: flex; }
@media (max-width: 520px) {
  .cf-opt { grid-template-columns: minmax(0, 1fr) auto; padding-block-end: 8px; border-block-end: 1px dashed var(--line); }
  .cf-opt input:nth-child(2) { grid-column: 1; grid-row: 2; }
  .cf-opt .icon-btn { grid-column: 2; grid-row: 1 / span 2; }
}

/* ------------------------------------------------------------ API keys: the per-app grid */
.sr-grid-wrap { display: grid; gap: 8px; min-inline-size: 0; }
.sr-grid-tools { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.sr-grid { display: grid; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--panel); overflow: hidden; }
.sr-grid-row { display: flex; align-items: center; justify-content: space-between; gap: 10px 14px; flex-wrap: wrap; padding: 8px 12px; border-block-start: 1px solid var(--line-2); }
.sr-grid-row:first-child { border-block-start: 0; }
.sr-grid-row.off .sr-grid-app { color: var(--muted); }
.sr-grid-app { font-weight: 650; min-inline-size: 0; overflow-wrap: anywhere; }
.sr-seg { max-inline-size: 100%; }
.sr-seg .seg { padding: 0 12px; min-block-size: 36px; font-size: 13px; white-space: nowrap; }
.sr-seg .seg:disabled { opacity: .4; cursor: not-allowed; }
.sr-seg .seg:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.sr-seg .seg + .seg { border-inline-start: 1px solid var(--line); }
@media (max-width: 720px) {
  .sr-grid-row { display: grid; gap: 6px; }
  .sr-seg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); inline-size: 100%; }
  .sr-seg .seg { min-block-size: 44px; padding-inline: 6px; white-space: normal; line-height: 1.2; }
}

/* ------------------------------------------------------------ API keys: the key shown once */
.sr-token-box { display: grid; gap: 12px; min-inline-size: 0; }
.sr-warn { margin: 0; }
.sr-token { inline-size: 100%; min-block-size: 44px; padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--panel-2); color: var(--ink); font: 13px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; direction: ltr; text-align: start; unicode-bidi: plaintext; }
.sr-token:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); outline: 0; }
.sr-how { display: grid; gap: 4px; }
.sr-code { display: block; padding: 8px 12px; border-radius: var(--r-sm); background: var(--panel-3); font: 12.5px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; overflow-wrap: anywhere; direction: ltr; text-align: start; unicode-bidi: isolate; }

/* ------------------------------------------------------------ Security: the link card to API keys */
.sr-link { display: flex; align-items: center; gap: 12px; padding: 14px 16px; color: inherit; text-decoration: none; transition: border-color .15s ease, background .15s ease; }
@media (hover: hover) { .sr-link:hover { border-color: var(--accent); background: var(--panel-2); } }
.sr-link:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.sr-link-ico { display: inline-grid; place-items: center; flex: none; inline-size: 38px; block-size: 38px; border-radius: 10px; background: var(--accent-soft); color: var(--accent-d); }
.sr-link-txt { display: grid; gap: 2px; flex: 1 1 auto; min-inline-size: 0; }
.sr-link-go { flex: none; color: var(--muted); }

/* ------------------------------------------------------------ the "Extra fields" box on a record page (public/js/admin/custom-fields.js) */
.cf-box { margin-block-start: 6px; padding: 16px; min-inline-size: 0; }
.cf-head { display: flex; align-items: center; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; margin-block-end: 12px; }
.cf-head h3 { font-size: 15.5px; margin: 0; }
.cf-manage { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 12.5px; font-weight: 600; text-decoration: none; }
.cf-manage:hover { color: var(--accent-d); text-decoration: underline; }
.cf-manage:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
.cf-body { min-inline-size: 0; }
.cf-body .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 720px) { .cf-body .form-grid { grid-template-columns: minmax(0, 1fr); } }
/* a list column of a custom field: long text wraps inside the cell instead of widening the table */
.cf-col { max-inline-size: 240px; overflow-wrap: anywhere; white-space: normal; }

/* ------------------------------------------------------------ Settings > Alert rules (SYS-08): one card per rule, the daily run */
.al-card.off > .al-head h3, .al-card.off > .al-help { opacity: .6; }
.al-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 12px; }
.al-head h3 { margin: 0; min-inline-size: 0; overflow-wrap: anywhere; }
.al-open { text-decoration: none; }
.al-open:hover { filter: brightness(.95); }
.al-help { margin: 0; }
.al-note { display: flex; align-items: flex-start; gap: 8px; margin: 0; padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--panel-3); color: var(--muted); font-size: 13px; line-height: 1.5; }
.al-note > svg { flex: none; margin-block-start: 3px; }
.al-note a { color: var(--accent-d); font-weight: 650; }
.al-rolebox { display: grid; gap: 8px; min-inline-size: 0; }
.al-roles { display: flex; flex-wrap: wrap; gap: 8px; }
.al-role { cursor: pointer; min-block-size: 36px; padding-inline: 12px; font-size: 13.5px; color: var(--muted); }
.al-role:hover { border-color: var(--accent); }
.al-role.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-d); }
.al-role:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.al-none { display: flex; align-items: center; gap: 6px; margin: 0; color: var(--warn-ink); font-size: 13px; font-weight: 600; }
.al-runbar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; }
.al-run { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.al-run li { display: flex; flex-wrap: wrap; gap: 4px 10px; padding: 8px 12px; border: 1px solid var(--line-2); border-radius: var(--r-sm); background: var(--panel-2); font-size: 13.5px; }
.al-run li.bad { border-color: var(--danger-ink); }
.al-title { overflow-wrap: anywhere; }
@media (max-width: 520px) {
  .al-role { min-block-size: 44px; }
  .al-runbar .btn { flex: 1 1 100%; min-block-size: 44px; }
}