/*
  The ASP.NET Identity pages under Components/Account are generated with Bootstrap
  class names. Bootstrap itself is not loaded, so this file maps the handful of
  classes those pages use onto the SurveyAxis design tokens. Nothing outside the
  account pages should rely on these names.
*/

.form-floating {
    position: relative;
    margin-bottom: var(--sa-space-4);
}

.form-floating > .form-control {
    height: 3.5rem;
    padding: 1.4rem .75rem .5rem;
}

.form-floating > label {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    padding: 1rem .8rem;
    pointer-events: none;
    color: var(--sa-ink-subtle);
    transform-origin: 0 0;
    transition: opacity .1s ease-in-out, transform .1s ease-in-out;
}

.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label {
    transform: scale(.8) translateY(-.55rem) translateX(.15rem);
    color: var(--sa-ink-muted);
}

.form-floating > .form-control::placeholder {
    color: transparent;
}

.form-control,
.form-select {
    display: block;
    width: 100%;
    min-height: var(--sa-control-height);
    padding: .5rem .75rem;
    border: 1px solid var(--sa-line-control);
    border-radius: var(--sa-radius-sm);
    font: inherit;
    color: var(--sa-ink);
    background: var(--sa-surface);
    transition: border-color .12s ease, box-shadow .12s ease;
}

.form-control:focus,
.form-select:focus {
    /* Transparent rather than none: forced colours drop the shadow and paint the outline. */
    outline: 2px solid transparent;
    outline-offset: 1px;
    border-color: var(--sa-brand);
    box-shadow: var(--sa-focus);
}

.form-label {
    display: block;
    font-weight: 600;
    font-size: .9rem;
    margin-bottom: var(--sa-space-1);
}

.form-check,
.checkbox {
    display: flex;
    align-items: center;
    gap: var(--sa-space-2);
}

.checkbox .form-label {
    display: flex;
    align-items: center;
    gap: var(--sa-space-2);
    font-weight: 500;
    margin: 0;
}

.form-check-input {
    accent-color: var(--sa-brand);
    width: 1.05rem;
    height: 1.05rem;
    margin: 0;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sa-space-2);
    height: var(--sa-control-height);
    padding: 0 var(--sa-space-4);
    border-radius: var(--sa-radius-sm);
    border: 1px solid var(--sa-line-strong);
    background: var(--sa-surface);
    color: var(--sa-ink);
    font: inherit;
    font-size: .95rem;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    text-decoration: none;
}

.btn:hover {
    background: var(--sa-surface-sunken);
    text-decoration: none;
}

.btn-primary {
    background: var(--sa-brand);
    border-color: var(--sa-brand);
    color: #fff;
}

.btn-primary:hover {
    background: var(--sa-brand-dark);
    border-color: var(--sa-brand-dark);
    color: #fff;
}

.btn-danger {
    background: var(--sa-danger);
    border-color: var(--sa-danger);
    color: #fff;
}

.btn-danger:hover {
    background: #a51f1f;
    color: #fff;
}

.btn-link {
    border-color: transparent;
    background: transparent;
    color: var(--sa-link);
}

.btn-link:hover {
    background: transparent;
    color: var(--sa-link-hover);
    text-decoration: underline;
}

.btn-lg {
    height: 3rem;
    font-size: 1.05rem;
}

.w-100 { width: 100%; }
.mb-3 { margin-bottom: var(--sa-space-4); }
.mt-2 { margin-top: var(--sa-space-2); }
.mx-auto { margin-left: auto; margin-right: auto; }
.d-flex { display: flex; }
.flex-column { flex-direction: column; }
.text-secondary { color: var(--sa-ink-subtle); }
.text-danger { color: var(--sa-danger); }

.alert {
    padding: var(--sa-space-3) var(--sa-space-4);
    border-radius: var(--sa-radius);
    border: 1px solid var(--sa-line);
    margin-bottom: var(--sa-space-4);
}

.alert-danger { background: var(--sa-danger-bg); border-color: var(--sa-danger-line); color: var(--sa-danger); }
.alert-success { background: var(--sa-success-bg); border-color: var(--sa-success-line); color: var(--sa-success); }
.alert-warning { background: var(--sa-warning-bg); border-color: var(--sa-warning-line); color: var(--sa-warning); }
.alert-info { background: var(--sa-info-bg); border-color: var(--sa-info-line); color: var(--sa-info); }

.validation-summary-errors ul,
ul.validation-errors {
    margin: 0 0 var(--sa-space-4);
    padding-left: 1.2rem;
    color: var(--sa-danger);
}

.row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sa-space-6);
}

.row > [class*="col-"] {
    flex: 1 1 18rem;
    min-width: 0;
}

.nav.nav-pills {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.nav-pills .nav-link {
    display: block;
    padding: .55rem .8rem;
    border-radius: var(--sa-radius-sm);
    color: var(--sa-ink-muted);
    font-weight: 500;
}

.nav-pills .nav-link:hover {
    background: var(--sa-surface-sunken);
    color: var(--sa-ink);
    text-decoration: none;
}

.nav-pills .nav-link.active {
    background: var(--sa-brand-light);
    color: var(--sa-brand-dark);
    font-weight: 600;

    /* A bar as well as the tint, which alone was 1.09 : 1 against the page. */
    box-shadow: inset 3px 0 0 var(--sa-brand);
}

/* The account section's current page is a tint, which forced colours paint over. */
@media (forced-colors: active) {
    .nav-pills .nav-link.active {
        outline: 2px solid Highlight;
        outline-offset: -2px;
    }
}

/* A recovery-code list and similar preformatted blocks. */
.account-pre {
    background: var(--sa-surface-sunken);
    border: 1px solid var(--sa-line);
    border-radius: var(--sa-radius);
    padding: var(--sa-space-4);
    font-family: ui-monospace, Consolas, monospace;
}

/*
  The rest of the vocabulary those pages use. Everything above was written when the
  account screens were first restyled; these were missed, and being missed does not
  show -- an undefined class is not an error, it is a page that quietly renders as
  plain HTML inside a styled application. The sessions table was the worst of it:
  no rules, no padding, and the "this browser" badge run together with the browser
  name into one unreadable line, on the page somebody opens to find out whether
  another person is in their account.

  IdentityStyleTests fails the build if an account page starts using a class this
  file has no answer for.
*/

.table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: var(--sa-space-4);
}

.table th,
.table td {
    padding: .6rem .75rem;
    border-bottom: 1px solid var(--sa-line);
    text-align: left;
    vertical-align: middle;
}

.table th {
    font-size: .8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--sa-ink-muted);
}

.table-responsive {
    overflow-x: auto;
}

.badge {
    display: inline-block;
    padding: .15rem .5rem;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 700;
    line-height: 1.4;
    white-space: nowrap;
}

.bg-success {
    background: var(--sa-brand);
    color: #fff;
}

.btn-sm {
    padding: .3rem .6rem;
    font-size: .85rem;
}

.btn-outline-danger {
    background: transparent;
    border-color: var(--sa-danger);
    color: var(--sa-danger);
}

.btn-outline-danger:hover:not(:disabled) {
    background: var(--sa-danger);
    color: #fff;
}

.text-muted {
    color: var(--sa-ink-muted);
}

.text-info {
    color: var(--sa-ink-muted);
}

.text-success {
    color: var(--sa-brand);
}

.font-weight-bold {
    font-weight: 700;
}

.form-text {
    display: block;
    margin-top: .25rem;
    font-size: .85rem;
    color: var(--sa-ink-muted);
}

.form-check-label {
    display: inline-block;
    margin-inline-start: .4rem;
}

.control-label {
    display: block;
    font-weight: 600;
    margin-bottom: .35rem;
}

/* Bootstrap laid a form out in rows; here it is simply a block, which is what the
   account forms want anyway now that the fields are full width. */
.form-horizontal {
    display: block;
}

/* An address with a mark beside it. Without these the mark dropped below the field
   and read as a stray character on its own line. */
.input-group {
    display: flex;
    align-items: stretch;
}

.input-group > .form-control {
    flex: 1 1 auto;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.input-group-append {
    display: flex;
}

.input-group-text {
    display: flex;
    align-items: center;
    padding: 0 .75rem;
    border: 1px solid var(--sa-line);
    border-left: 0;
    border-radius: 0 var(--sa-radius) var(--sa-radius) 0;
    background: var(--sa-surface-sunken);
}

.h-100 {
    height: 100%;
}

.ms-2 {
    margin-inline-start: .5rem;
}

.list {
    padding-inline-start: 1.25rem;
    margin-bottom: var(--sa-space-3);
}

.list > li {
    margin-bottom: .35rem;
}

/* A recovery code is read out character by character and typed in somewhere else,
   so it is set in a monospace face where nothing is ambiguous. */
.recovery-code {
    display: inline-block;
    padding: .2rem .45rem;
    border: 1px solid var(--sa-line);
    border-radius: var(--sa-radius);
    background: var(--sa-surface-sunken);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    letter-spacing: .04em;
}