/* ===========================================================================
   Identity pages

   The sign-in and account pages are ASP.NET Core Identity's scaffolded markup,
   which is written against Bootstrap. Bootstrap is not loaded here and adding it
   would mean a second design system fighting MudBlazor over every page.

   So this file implements the handful of Bootstrap class names that markup
   actually uses, in the Vault's own language. It is deliberately not a Bootstrap
   subset for general use: it covers what /Account/* renders and nothing else.

   MudBlazor already defines d-flex, flex-column, mx-auto, mb-3 and mt-2 as its
   own utilities. Those are left alone -- redefining them would change every
   component in the application to fix one form.
   =========================================================================== */


/* --- Grid ---------------------------------------------------------------- */

.row {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
}

.col-lg-3,
.col-lg-6,
.col-lg-9,
.col-xl-6,
.col-md-4,
.col-md-12 {
    flex: 1 1 100%;
    min-width: 0;
}

/* A form on its own centres rather than hugging the left edge. Every Identity
   page except the account manager is a single column, so this is most of them. */
.row > *:only-child {
    margin-inline: auto;
    max-width: 34rem;
}

/* Inside the account manager the content already sits in its own column beside
   the navigation, so centring it again would leave it adrift in that panel. The
   width limit stays -- it is there for line length, not for position. */
.identity-panel .row > *:only-child {
    margin-inline: 0;
}

@media (min-width: 900px) {
    .col-md-4 { flex: 1 1 calc(33.333% - 1rem); }
    .col-lg-3 { flex: 0 0 15rem; }
    .col-lg-9 { flex: 1 1 0; }
    .col-lg-6,
    .col-xl-6 { flex: 1 1 calc(50% - 0.75rem); }
}


/* --- The sign-in card ---------------------------------------------------- */

.identity-card {
    display: block;
    /* Centres itself, so it works both inside a .row column and on the pages that
       are nothing but a message and have no grid at all. */
    max-width: 34rem;
    margin-inline: auto;
    padding: 2rem;
    border: 1px solid var(--border-subtle);
    border-radius: 14px;
    background: var(--bg-surface-solid);
    box-shadow: var(--vault-shadow);
}

.identity-card > :first-child {
    margin-top: 0;
}

.identity-card > :last-child {
    margin-bottom: 0;
}

/* The account manager's content column. Same material as the card, but it holds a
   whole section rather than a single form, so it is not width-limited. */
.identity-panel {
    /* Bounded. The account column stretches to whatever the window gives it, which
       left forms sitting in the left third of a very wide empty panel and set the
       authenticator walkthrough at about 1100px a line. */
    max-width: 60rem;
    padding: 1.75rem 2rem;
    border: 1px solid var(--border-subtle);
    border-radius: 14px;
    background: var(--bg-surface-solid);
}

.identity-panel > :first-child,
.identity-panel > :first-child > :first-child {
    margin-top: 0;
}

/* Pages that are only a message. An alert already carries its own surface, so it
   is centred and width-limited rather than dropped inside a card, which would put
   one panel inside another to say one sentence. */
.identity-notice {
    max-width: 34rem;
    margin-inline: auto;
}

/* Secondary text under a form -- "don't have your authenticator?" and the like. */
.identity-footnote {
    margin-bottom: 0;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

/* Sits over the card rather than off at the left margin, where it read as though
   it belonged to a different page. */
.identity-heading {
    max-width: 34rem;
    margin-inline: auto;
    text-align: center;
}

.identity-card h2 {
    margin: 0 0 0.25rem;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text-secondary);
}


/* --- Headings and rules -------------------------------------------------- */

/* margin-block, not the margin shorthand: the shorthand would also set the inline
   margins to zero, and being the more specific selector it would quietly cancel
   the auto-centring on .identity-heading below. */
.mud-main-content h1 {
    margin-block: 0 1.5rem;
    font-size: 2rem;
}

.mud-main-content h2 {
    font-size: 1.25rem;
}

/* Identity's account pages are a flat run of headings and bare divs of buttons,
   with no spacing of their own. Without this the sections run together. */
.mud-main-content h3,
.mud-main-content h4,
.mud-main-content h5 {
    margin-block: 1.75rem 0.75rem;
    font-size: 1.1rem;
    font-weight: 600;
}

.mud-main-content h4,
.mud-main-content h5 {
    font-size: 0.95rem;
    color: var(--text-secondary);
}

.btn + .btn {
    margin-left: 0.5rem;
}

.mud-main-content hr {
    height: 1px;
    margin: 1.25rem 0;
    border: 0;
    background: var(--border-subtle);
}


/* --- Form controls ------------------------------------------------------- */

.form-control {
    display: block;
    width: 100%;
    padding: 0.75rem 0.9rem;
    color: var(--text-primary);
    font: inherit;
    background: var(--vault-field);
    border: 1px solid var(--border-subtle);
    border-radius: 10px;
    transition: border-color 120ms ease, box-shadow 120ms ease;
}

.form-control:hover {
    border-color: var(--vault-field-border);
}

.form-control:focus {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px var(--vault-accent-quiet);
}

.form-control::placeholder {
    color: var(--text-secondary);
    opacity: 0.55;
}

.form-control:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.form-label,
.control-label {
    display: block;
    margin-bottom: 0.35rem;
    color: var(--text-secondary);
    font-size: 0.875rem;
}


/* Floating labels.
   Identity's markup puts the input first and the label after it, which is what
   makes the sibling selectors below work. The placeholder is hidden until the
   field is focused so it does not sit behind the resting label. */

.form-floating {
    position: relative;
}

.form-floating > .form-control {
    height: 3.6rem;
    padding: 1.55rem 0.9rem 0.45rem;
}

.form-floating > .form-label {
    position: absolute;
    top: 0;
    left: 0;
    margin: 0;
    padding: 1.05rem 0.95rem;
    color: var(--text-secondary);
    pointer-events: none;
    transform-origin: 0 0;
    transition: transform 120ms ease, color 120ms ease;
}

.form-floating > .form-control:focus ~ .form-label,
.form-floating > .form-control:not(:placeholder-shown) ~ .form-label {
    transform: scale(0.78) translateY(-0.72rem);
}

.form-floating > .form-control:focus ~ .form-label {
    color: var(--accent-primary);
}

.form-floating > .form-control:not(:focus)::placeholder {
    color: transparent;
}


/* Checkboxes. The label wraps the input, so it must not inherit the block
   display the standalone .form-label above gives it. */

.checkbox .form-label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    color: var(--text-primary);
    font-size: 0.95rem;
    cursor: pointer;
}

/* By element as well as by class: the two-factor page renders its checkbox with
   no class at all, and a stray default-blue control next to a styled one is more
   noticeable than either would be alone. */
.form-check-input,
.darker-border-checkbox,
.checkbox input[type="checkbox"] {
    width: 1.05rem;
    height: 1.05rem;
    margin: 0;
    accent-color: var(--accent-primary);
    cursor: pointer;
}

.input-group {
    display: flex;
    align-items: stretch;
}

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

/* Wraps the adornment on the email page. Needs to be a flex item that stretches,
   or the tick beside a confirmed address sits at the top of a full-height field. */
.input-group-append {
    display: flex;
}

.input-group-text {
    display: flex;
    align-items: center;
    padding: 0 0.9rem;
    color: var(--text-secondary);
    background: var(--vault-overlay-weak);
    border: 1px solid var(--border-subtle);
    border-left: 0;
    border-radius: 0 10px 10px 0;
}


/* --- Buttons ------------------------------------------------------------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.6rem 1.1rem;
    color: var(--text-primary);
    font: inherit;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-decoration: none;
    background: var(--vault-overlay);
    border: 1px solid var(--border-subtle);
    border-radius: 10px;
    cursor: pointer;
    transition: background-color 120ms ease, box-shadow 120ms ease, opacity 120ms ease;
}

.btn:hover {
    background: var(--vault-overlay-strong);
}

.btn:focus-visible {
    outline: 2px solid var(--accent-primary);
    outline-offset: 2px;
}

.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-lg {
    padding: 0.85rem 1.25rem;
    font-size: 1rem;
}

.btn-primary {
    color: var(--vault-on-accent);
    background: var(--accent-primary);
    border-color: transparent;
}

.btn-primary:hover {
    background: var(--vault-accent);
    box-shadow: var(--glow-primary);
}

.btn-danger {
    color: var(--vault-on-danger);
    background: var(--vault-danger-solid);
    border-color: transparent;
}

.btn-danger:hover {
    background: var(--vault-danger-solid);
    box-shadow: var(--glow-danger);
}

.btn-link {
    color: var(--accent-secondary);
    background: none;
    border-color: transparent;
    font-weight: 500;
}

.btn-link:hover {
    background: none;
    color: var(--accent-primary);
    text-decoration: underline;
}

.w-100 { width: 100%; }
.h-100 { height: 100%; }
.font-weight-bold { font-weight: 600; }


/* --- Messages ------------------------------------------------------------ */

.alert {
    padding: 0.85rem 1rem;
    margin-bottom: 1.25rem;
    border: 1px solid transparent;
    border-radius: 10px;
    border-left-width: 3px;
}

.alert-danger {
    color: var(--vault-danger);
    background: var(--vault-danger-wash);
    border-color: var(--vault-danger-line);
}

.alert-warning {
    color: var(--vault-warning);
    background: var(--vault-warning-wash);
    border-color: var(--vault-warning-line);
}

.alert-success {
    color: var(--vault-success);
    background: var(--vault-success-wash);
    border-color: var(--vault-success-line);
}

.alert-info {
    color: var(--vault-info);
    background: var(--vault-info-wash);
    border-color: var(--vault-info-line);
}

.alert p {
    margin: 0 0 0.6rem;
}

.alert > :last-child {
    margin-bottom: 0;
}

/* Prose links inside an alert, not buttons. A .btn in an alert is still a button:
   this selector outranks .btn, so unqualified it underlined the label and pulled
   the alert's own colour through it. */
.alert a:not(.btn) {
    color: inherit;
    text-decoration: underline;
}

.alert hr {
    margin: 0.85rem 0;
    background: currentColor;
    opacity: 0.25;
}

/* Overrides the heading rhythm further down, which is meant for a page's own
   sections and would push an alert's title away from the alert. */
.alert .alert-heading {
    margin: 0 0 0.5rem;
    color: inherit;
    font-size: 1rem;
}

/* Colour only. The small size belongs to validation output, not to the class --
   these pages also put text-danger on ordinary paragraphs, and "Locked out" is
   not a footnote. */
.text-danger  { color: var(--vault-danger); }
.text-success { color: var(--vault-success); }
.text-info    { color: var(--accent-secondary); }
.text-secondary { color: var(--text-secondary); }

/* Blazor's ValidationMessage and ValidationSummary, which is where the small
   size was actually wanted: a note attached to a field, not a line of the form. */
.validation-message {
    display: block;
    margin-top: 0.35rem;
    font-size: 0.85rem;
}

.validation-errors {
    margin: 0 0 1rem;
    padding-left: 1.1rem;
    font-size: 0.85rem;
}


/* --- Account manager navigation ------------------------------------------ */

.nav {
    display: flex;
    margin: 0;
    padding: 0;
    list-style: none;
}

.nav-pills {
    flex-direction: column;
    gap: 0.25rem;
}

.nav-item {
    list-style: none;
}

.nav-link {
    display: block;
    padding: 0.55rem 0.85rem;
    color: var(--text-secondary);
    text-decoration: none;
    border-radius: 8px;
    border-left: 2px solid transparent;
    transition: background-color 120ms ease, color 120ms ease;
}

.nav-link:hover {
    color: var(--text-primary);
    background: var(--vault-overlay-weak);
}

.nav-link.active {
    color: var(--accent-primary);
    background: var(--vault-accent-quiet);
    border-left-color: var(--accent-primary);
}


/* --- Tables and recovery codes ------------------------------------------- */

.table {
    width: 100%;
    border-collapse: collapse;
}

.table th,
.table td {
    padding: 0.6rem 0.75rem;
    text-align: left;
    border-bottom: 1px solid var(--border-subtle);
}

.table th {
    color: var(--text-secondary);
    font-weight: 600;
    font-size: 0.85rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

/* Recovery codes are transcribed by hand, so they are set in a face where a
   zero cannot be mistaken for an O. */
/* All ten at once, in as few rows as the width allows. They are copied down in one
   sitting, so a single tall column is the wrong shape for them. */
.recovery-code-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
    gap: 0.45rem;
    max-width: 42rem;
}

.recovery-code {
    display: inline-block;
    padding: 0.35rem 0.55rem;
    text-align: center;
    color: var(--accent-primary);
    font-family: 'Cascadia Mono', Consolas, 'Courier New', monospace;
    font-size: 0.95rem;
    letter-spacing: 0.06em;
    background: var(--vault-accent-quiet);
    border: 1px solid var(--vault-accent);
    border-radius: 6px;
    user-select: all;
}

/* Inline literals. Also picked up by the Vault's own pages, which mention things
   like .cer and X-Mcp-Key in prose -- one treatment for both is the point. */
.mud-main-content kbd,
.mud-main-content code {
    padding: 0.2rem 0.45rem;
    color: var(--accent-primary);
    font-family: 'Cascadia Mono', Consolas, 'Courier New', monospace;
    font-size: 0.95rem;
    background: var(--vault-accent-quiet);
    border: 1px solid var(--vault-accent);
    border-radius: 6px;
}

/* The authenticator shared key is read off the screen and typed into a phone, so
   one click should take all of it. Prose code spans are left alone -- selecting
   the whole token is unhelpful when the token is the word ".cer". */
.mud-main-content kbd {
    letter-spacing: 0.06em;
    user-select: all;
}

/* The numbered walkthrough on the authenticator setup page. */
.mud-main-content ol.list,
.mud-main-content ol {
    margin: 0 0 1rem;
    padding-left: 1.35rem;
}

.mud-main-content ol > li {
    margin-bottom: 0.75rem;
    padding-left: 0.35rem;
}

.mud-main-content ol > li::marker {
    color: var(--accent-primary);
    font-weight: 600;
}

/* Plain prose links only, and the exclusions are load-bearing. This selector is
   more specific than .btn, .nav-link or MudBlazor's palette classes, all of which
   colour anchors -- unqualified it repainted every header button and turned the
   whole account-manager sidebar the same blue, active item included. */
.mud-main-content a:not([class*="mud-"]):not(.btn):not(.nav-link) {
    color: var(--accent-secondary);
}

.mud-main-content a:not([class*="mud-"]):not(.btn):not(.nav-link):hover {
    color: var(--accent-primary);
}

/* Identity uses Bootstrap 3 glyphicon markup in one place. There is no icon
   font behind it, so it would render as an empty box. */
.glyphicon {
    display: none;
}