/* backoffice/_form_fragment.html (+ backoffice/_field.html,
   backoffice/_missing_languages.html, users/_password_rules.html) — the
   add/edit dialog: error summary, "languages left empty" warning,
   per-language tabs for translated fields, the live password checklist,
   and a responsive grid (divintech.es lays its user form out in 3 columns). */

.form-hint {
  margin: 0 0 var(--space-2);
  color: var(--color-muted);
  font-size: 0.9rem;
}

.error-summary:focus {
  outline: 3px solid var(--color-danger);
  outline-offset: 2px;
}

.error-summary__title {
  margin: 0;
  font-weight: 700;
}

.error-summary__list {
  margin: 0.25rem 0 0;
}

.lang-warning:focus {
  outline: 3px solid var(--color-main);
  outline-offset: 2px;
}

.lang-warning__title {
  margin: 0;
  font-weight: 700;
}

.lang-warning__list {
  margin: 0.25rem 0 0;
}

.lang-warning__text {
  margin: 0.5rem 0 0;
  color: var(--color-text);
}

.lang-warning__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 0.75rem;
}

/* The outline link shares the alert's text colour; keep it a button. */
.lang-warning__actions .button--outline {
  color: var(--color-text);
  text-decoration: none;
}

/* Live password checklist: only the requirements still unmet are listed. */
.password-rules__list {
  margin: 0.25rem 0 0;
  padding-left: 1.25rem;
}

.password-rules__ok {
  display: flex;
  align-items: center;
  gap: 0.15rem;
  margin: 0.25rem 0 0;
  color: var(--color-success);
  font-weight: 600;
}

.lang-fields {
  min-width: 0;
  margin: 0 0 var(--space-2);
  padding: var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}

.lang-fields__legend {
  padding: 0 0.4rem;
  color: var(--color-main);
  font-weight: 700;
}

.lang-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin: var(--space-1) 0 var(--space-2);
  border-bottom: 2px solid var(--color-border);
}

.lang-tabs__tab {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  min-height: var(--tap-size);
  margin-bottom: -2px;
  padding: 0.5rem 1rem;
  border: 0;
  border-bottom: 3px solid transparent;
  border-radius: var(--radius) var(--radius) 0 0;
  background: transparent;
  color: var(--color-text);
  font: inherit;
  cursor: pointer;
}

.lang-tabs__tab:hover {
  background: var(--color-main-soft);
}

/* Selected: underline + weight + tint, not colour alone. */
.lang-tabs__tab[aria-selected="true"] {
  border-bottom-color: var(--color-main);
  background: var(--color-main-soft);
  color: var(--color-main);
  font-weight: 700;
}

.lang-tabs__error {
  color: var(--color-danger);
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: 0 var(--space-2);
}

.form-grid .field--wide,
.form-grid .field--checkbox {
  grid-column: 1 / -1;
}

/* Phones (the dialog is full screen): less nesting padding so the fields
   keep their width, and the language tabs split the row equally. */
@media (max-width: 39.99rem) {
  .lang-fields {
    padding: var(--space-1);
  }

  .lang-tabs__tab {
    flex: 1 1 auto;
    justify-content: center;
    padding-inline: 0.5rem;
  }
}