/* Tailwind's preflight makes every replaced element `display: block`, which
   drops SVGs out of the inline flow: an icon inside a `text-align: center`
   parent renders flush-left instead of centered. Restore the inline box for
   SVG only — `img` stays block, because centering an image with `margin: auto`
   (the pattern our logos use) only works on a block box. The `vertical-align`
   matches what FontAwesome already sets on its own icons, so both families sit
   on the text baseline identically. Deliberately NOT `flex-shrink: 0`: that
   would stop a responsive inline chart from shrinking in a flex row.
   This file is imported after tailwind.css in every app, so the equal-specificity
   `svg` selector wins the cascade; the same rule in an app's style.scss (which
   loads *before* tailwind.css) would silently lose it. */
svg {
  display: inline-block;
  vertical-align: -0.125em;
}

html:root
  body
  :where(a[href], button, [role='button'], input, select, textarea, [tabindex]:not([tabindex='-1'])):not(
    .el-input__inner,
    .el-select__input,
    .el-select__wrapper,
    .el-textarea__inner
  ):focus-visible,
.el-button:focus-visible {
  outline: var(--adc-focus-outline-width) solid var(--adc-focus-outline-color);
  outline-offset: var(--adc-focus-outline-offset);
}

.el-button {
  border-radius: var(--adc-radius-round);
  transition: color var(--adc-motion-duration-normal) var(--adc-motion-easing-standard),
    background-color var(--adc-motion-duration-normal) var(--adc-motion-easing-standard),
    border-color var(--adc-motion-duration-normal) var(--adc-motion-easing-standard),
    box-shadow var(--adc-motion-duration-normal) var(--adc-motion-easing-standard);
}

.el-button.is-text:not(.is-disabled):focus-visible {
  outline: var(--adc-focus-outline-width) solid var(--adc-focus-outline-color);
  outline-offset: var(--adc-focus-outline-offset);
}

.el-input {
  --el-input-border-radius: var(--adc-radius-control);
}

.el-select .el-select__wrapper,
.el-textarea .el-textarea__inner {
  border-radius: var(--adc-radius-control);
  transition: box-shadow var(--adc-motion-duration-normal) var(--adc-motion-easing-standard);
}

.el-input .el-input__wrapper.is-focus,
.el-select .el-select__wrapper.is-focused,
.el-textarea .el-textarea__inner:focus {
  box-shadow: 0 0 0 var(--adc-border-width) var(--adc-color-primary) inset,
    0 0 0 var(--adc-focus-ring-width) var(--adc-focus-ring-color);
}

.el-input.is-exceed .el-input__wrapper.is-focus,
.el-textarea.is-exceed .el-textarea__inner:focus {
  box-shadow: 0 0 0 var(--adc-border-width) var(--adc-color-danger) inset,
    0 0 0 var(--adc-focus-ring-width) var(--adc-focus-ring-color);
}

.el-form-item.is-error .el-form-item__content .el-input__wrapper.is-focus,
.el-form-item.is-error .el-form-item__content .el-select__wrapper.is-focused,
.el-form-item.is-error .el-form-item__content .el-textarea__inner:focus {
  box-shadow: 0 0 0 var(--adc-border-width) var(--adc-color-danger) inset,
    0 0 0 var(--adc-focus-ring-width) var(--adc-focus-ring-color);
}

.el-card {
  overflow-wrap: break-word;
  border: var(
    --adc-control-card-border,
    var(--adc-border-width) var(--adc-border-style) var(--adc-color-border-light)
  );
  border-radius: var(--adc-radius-card);
  box-shadow: none;
  transition: box-shadow var(--adc-motion-duration-normal) var(--adc-motion-easing-standard);
}

.el-card.is-always-shadow,
.el-card.is-hover-shadow:hover,
.el-card.is-hover-shadow:focus {
  box-shadow: var(--adc-control-card-shadow, var(--adc-shadow-xs));
}

.el-card.is-hover-shadow:hover {
  box-shadow: var(--adc-control-card-shadow-hover, var(--adc-control-card-shadow, var(--adc-shadow-xs)));
}

.el-dialog {
  --el-dialog-border-radius: var(--adc-radius-dialog);
  box-shadow: var(--adc-control-dialog-shadow, var(--adc-shadow-lg));
}

.el-message-box {
  --el-messagebox-border-radius: var(--adc-radius-dialog);
  --el-messagebox-box-shadow: var(--adc-control-dialog-shadow, var(--adc-shadow-lg));
}