/* ============================================================================
 * Carmeyan — Settings -> API Access (js/api-access.js).
 * The screen is built from the existing dashboard/theme classes. These few
 * rules cover only what those classes cannot express. Every selector is scoped
 * to the API Access module, its Settings entry panel or its dialogs, so no
 * existing screen changes.
 * ==========================================================================*/

/* Group controls with a real <fieldset>/<legend> (accessible grouping) without
   the browser's default fieldset frame. The legend matches the dashboard's
   field labels (".form-group label" in style.css). */
.iapi-fieldset { border: 0; margin: 0 0 var(--spacing-md, 16px); padding: 0; min-width: 0; }
#iapi-create-fields.iapi-fieldset { margin: 0; }
.iapi-fieldset > legend { padding: 0; margin-bottom: 8px; font-family: var(--font-heading); font-size: 0.8rem; font-weight: 700;
  letter-spacing: 1.5px; text-transform: uppercase; color: var(--color-white); opacity: 0.9; }

/* Radio/checkbox groups stacked one per line. */
.ac-checks.iapi-stack { flex-direction: column; gap: 8px; margin: 0 0 8px; }

/* The theme gives several classes used here an explicit display (.ack-field,
   .hist-controls), which would otherwise override the [hidden] attribute. */
#api-access [hidden],
#settings-api-access-panel [hidden],
.iapi-dialog [hidden] { display: none !important; }

/* Visible keyboard focus. The theme clips .btn-dash and .form-control with
   clip-path, which hides the browser's outline, so the ring is drawn inside.
   On orange buttons it uses the button's dark text colour (7:1); on the red
   danger button, white (4.5:1). */
#api-access :focus-visible,
#settings-api-access-panel :focus-visible,
.iapi-dialog :focus-visible { outline: 2px solid var(--orange-on-dark, #FF9A4D); outline-offset: 2px; }
#api-access .btn-dash:focus-visible,
#settings-api-access-panel .btn-dash:focus-visible,
.iapi-dialog .btn-dash:focus-visible { outline-color: #160d06; outline-offset: -5px; }
#api-access .btn-dash-danger:focus-visible,
.iapi-dialog .btn-dash-danger:focus-visible { outline-color: #fff; }
#api-access .form-control:focus-visible,
.iapi-dialog .ack-field input:focus-visible { outline-offset: -4px; }

/* Native date/time picker icon legible on the dark theme. */
#api-access input[type="datetime-local"],
.iapi-dialog input[type="datetime-local"] { color-scheme: dark; }

/* Dialogs may hold long device lists: scroll inside the viewport. */
.iapi-dialog { max-height: calc(100vh - 40px); overflow-y: auto; }

/* Separate lines inside the one-time dialog's context text. */
.iapi-dialog .iapi-block { display: block; margin-top: 4px; }

/* Label/value pairs in the details and confirmation dialogs. */
.iapi-dl { display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; margin: 12px 0; font-size: 0.82rem; }
.iapi-dl dt { color: var(--color-text-muted); }
.iapi-dl dd { margin: 0; color: var(--color-text-main); overflow-wrap: anywhere; }

/* Names may be one long unbroken word (svc_plant_historian_...): wrap them
   inside their message instead of running past its box on a phone. */
#iapi-secret-context,
#iapi-alert,
#iapi-list-msg,
#iapi-create-msg,
#iapi-confirm-msg,
#iapi-tenant-fixed,
#iapi-tenant-note { overflow-wrap: anywhere; }

/* The same for refinery and device names in the form: the row wraps and each
   name breaks inside its line instead of being cut off by the list's scroll box. */
#api-access .refinery-grant { flex-wrap: wrap; }
#api-access .refinery-grant > bdi,
#api-access .refinery-grant > .text-muted { min-width: 0; overflow-wrap: anywhere; }

/* Disabled controls look disabled (as .ack-modal-actions button:disabled does);
   the theme gives .btn-dash and .form-control no disabled style. */
#api-access .btn-dash:disabled,
#api-access .form-control:disabled,
#api-access fieldset:disabled .form-control,
#api-access fieldset:disabled input,
.iapi-dialog .ack-modal-close:disabled { opacity: 0.5; cursor: not-allowed; }

/* Placeholders carry meaning here ("Hidden. Choose Show credential…", the
   allowlist format): the muted text colour gives 7.3:1 on the field background
   (the browser default and the theme's faint colour give under 4.5:1). */
#api-access .form-control::placeholder,
.iapi-dialog input::placeholder { color: var(--color-text-muted); opacity: 1; }