/*
 * SPDX-License-Identifier: LicenseRef-FluxTuner-Web-NC
 */

/*
 * Authentication and initial setup layouts.
 *
 * This stylesheet is loaded after forms.css and dialogs.css, and before
 * public.css. Shared form controls remain in forms.css.
 */

.auth-panel,
.setup-panel {
  width: min(100%, 48rem);
  max-width: 58rem;
  margin-inline: auto;
}

.auth-panel .panel-heading,
.setup-panel .panel-heading {
  align-items: start;
}

.auth-form,
.setup-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(12rem, 1fr)) auto;
  gap: 0.85rem;
  align-items: end;
}

.setup-form {
  grid-template-columns: repeat(2, minmax(12rem, 1fr));
  grid-template-areas:
    "username token"
    "password confirm"
    "actions actions";
  align-items: start;
}

.setup-form > label {
  align-self: start;
}

.setup-form > label:nth-of-type(1) {
  grid-area: username;
}

.setup-form > label:nth-of-type(2) {
  grid-area: password;
}

.setup-form > label:nth-of-type(3) {
  grid-area: confirm;
}

.setup-form > label:nth-of-type(4) {
  grid-area: token;
}

.setup-form button {
  grid-area: actions;
  width: fit-content;
  margin-top: 0.15rem;
}

.auth-panel[data-authenticated="true"] .auth-form {
  display: none;
}

.auth-message,
.setup-message {
  margin: 1rem 0 0;
  color: var(--muted);
}

@media (max-width: 58rem) {
  .auth-form,
  .setup-form {
    grid-template-columns: 1fr;
  }

  .setup-form {
    grid-template-areas:
      "username"
      "token"
      "password"
      "confirm"
      "actions";
  }

  .auth-form button,
  .setup-form button {
    width: fit-content;
  }
}

@media (max-width: 42rem) {
  .auth-panel,
  .setup-panel {
    width: 100%;
  }
}

/* Light theme primary actions */

html[data-theme="light"] .auth-form button,
html[data-theme="light"] .setup-form button {
  color: #04111f;
  border-color: var(--action-fill);
  background: var(--action-fill);
}

html[data-theme="light"] .auth-form button:not(:disabled):hover,
html[data-theme="light"] .setup-form button:not(:disabled):hover {
  color: #ffffff;
  border-color: var(--action-fill-hover);
  background: var(--action-fill-hover);
}

/* Completed authentication ownership */

.auth-form button,
.setup-form button {
  color: #04111f;
  border-color: var(--action-fill);
  background: var(--action-fill);
}

.auth-form button:not(:disabled):hover,
.setup-form button:not(:disabled):hover {
  color: #ffffff;
  border-color: var(--action-fill-hover);
  background: var(--action-fill-hover);
}

html[data-theme="light"] .auth-note {
  color: #334155 !important;
}

.auth-secondary-actions {
  margin-top: 1rem;
}

.auth-secondary-actions button {
  width: 100%;
}

.auth-note {
  margin: 0.8rem 0 0;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.55;
}

.auth-panel[hidden],
.setup-panel[hidden] {
  display: none !important;
}