html {
    font-size: 14px;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

/* One focus ring, as in the app (app.css "ONE FOCUS RING"): a 2px accent outline 2px clear of
   the edge. Fields and checkboxes on :focus, buttons and links on :focus-visible. */
.btn:focus-visible,
.btn-link.nav-link:focus-visible,
a:focus-visible,
.form-check-input:focus-visible {
    outline: var(--app-focus-ring);
    outline-offset: var(--app-focus-offset);
    box-shadow: none;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--app-accent);
    box-shadow: none;
    outline: var(--app-focus-ring);
    outline-offset: var(--app-focus-offset);
}

.form-check-input:focus {
    border-color: var(--app-accent);
    box-shadow: none;
}

.form-check-input:checked {
    background-color: var(--app-accent-fill);
    border-color: var(--app-accent-fill);
}

html {
    position: relative;
    min-height: 100%;
}

body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    color: var(--bs-body-color);
    background-color: var(--bs-body-bg);
}

/* Floating labels rely on Bootstrap's default transparent placeholder —
   the label itself acts as the placeholder while the input is empty.
   Do not make ::placeholder visible here or it renders on top of the label. */

/* Centered auth card (login/register). Fills small screens edge to edge and
   grows up to a comfortable reading width on desktop. */
.login-card {
    width: 100%;
    max-width: 32rem;
}

/* =========================================================================
   TOKENS - a hand-kept copy of the frontend's (DoohCrm.Frontend wwwroot/css/app.css, direction C
   "On Air", PR 2). Change them there first, then here. Light and dark: the theme is the app's
   theme cookie when this host can read it, otherwise the device (_Layout.cshtml sets data-bs-theme).
   ========================================================================= */
:root {
    --app-font-display: "Barlow Semi Condensed", "Arial Narrow", "Inter", system-ui, sans-serif;
    --app-font-number: "Barlow", "Inter", system-ui, sans-serif;
    --app-bg: #F5F7F8;
    --app-surface: #FFFFFF;
    --app-surface-2: #EEF2F4;
    --app-border: #DAE2E6;
    --app-border-strong: #C3CED4;
    --app-text: #13222B;
    --app-text-muted: #4D5E68;
    --app-text-subtle: #56666F;
    --app-accent: #0B5EA6;
    --app-accent-strong: #094D89;
    --app-accent-soft: #E2EEF9;
    --app-accent-fg: #fff;
    --app-accent-fill: var(--app-accent);
    --app-accent-fill-hover: var(--app-accent-strong);
    --app-negative: oklch(0.54 0.2 25);
    /* The edge of an unchecked checkbox (WCAG 1.4.11): 3.51:1 on surface, 3.27 on bg. */
    --app-checkbox-edge: #7C8B94;
    /* Form fields, as in the app: the Mist fill with the strong border (1.3:1 on the page for the edge alone). */
    --app-input-bg: var(--app-surface-2);
    --app-input-border: var(--app-border-strong);
    --app-focus-ring: 2px solid var(--app-accent);
    --app-focus-offset: 2px;
    /* Brand: loud surfaces only - here the login's Night screen. Lamp lights the CRM's two slots. */
    --app-brand-panel: #0B1A24;
    --app-brand-panel-edge: #0B1A24;
    --app-brand-panel-safe: #1C3140;
    --app-brand-on-panel: #E8F0F3;
    --app-brand-on-panel-muted: #93A9B4;
    --app-brand-unlit: #566975;
    --app-brand-signal: #F2E6C9;
    --app-shadow: 0 1px 2px rgba(11, 26, 36, .05), 0 1px 3px rgba(11, 26, 36, .05);
    /* The light plate a tenant's light-theme logo sits on in dark theme when it has no dark-theme logo: Fog, the
       same in both themes (declared in both so the dark block cannot drift). */
    --app-logo-plate: #E3E9EC;
}

[data-bs-theme="dark"] {
    --app-bg: #091117;
    --app-surface: #111C24;
    --app-surface-2: #172530;
    --app-border: #253846;
    --app-border-strong: #3A5060;
    --app-text: #E8F0F3;
    --app-text-muted: #9CAFB9;
    --app-text-subtle: #8A9EA9;
    --app-accent: #6DB9F0;
    --app-accent-strong: #8FCBF5;
    --app-accent-soft: #17507F;
    --app-accent-fill: #1263AB;
    --app-accent-fill-hover: #0E5494;
    --app-negative: oklch(0.72 0.2 25);
    --app-checkbox-edge: #627580;
    --app-input-bg: #0C161D;
    --app-input-border: #3A5060;
    --app-brand-panel-edge: #2A4254;
    --app-shadow: 0 1px 2px rgba(0, 0, 0, .5);
    --app-logo-plate: #E3E9EC;
}

/* Bootstrap reads the tokens (declared for both so this outranks the compile's dark block). */
:root,
[data-bs-theme="dark"] {
    --bs-body-bg: var(--app-bg);
    --bs-body-color: var(--app-text);
    --bs-emphasis-color: var(--app-text);
    --bs-secondary-color: var(--app-text-muted);
    --bs-border-color: var(--app-border);
    --bs-primary: var(--app-accent);
    --bs-link-color: var(--app-accent);
    --bs-link-hover-color: var(--app-accent-strong);
}

a {
    color: var(--bs-link-color);
}

a:hover {
    --bs-link-color: var(--bs-link-hover-color);
}

.text-danger {
    color: var(--app-negative) !important;
}

.form-check-input {
    border-color: var(--app-checkbox-edge);
}

/* Two-pane split - fixed so it fills the viewport regardless of the layout's .container wrapper:
   the Night screen | the form. Under 900px the screen becomes a short band above the form. */
.login-split {
    position: fixed;
    inset: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: var(--app-bg);
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

/* ---- The Night screen (DESIGN.md "Brand", The One Screen Rule) ----
   A display, not a hero band: Night with a 1px safe-area line inset 10px, the product word, the page's line and the
   loop with its timecodes composed on it. The only bright colour is Lamp on the loop's two lit slots; no gradient, no
   glow, no control sits on it (the accent focus ring is 2.7:1 on Night). Text on it is brand-on-panel (15.3:1) and
   brand-on-panel-muted (7.2:1). Night in both themes; in dark the edge keeps it off the page. */
.login-screen {
    display: flex;
    min-height: 0;
    padding: 10px;
    overflow: hidden;
    background: var(--app-brand-panel);
    border-right: 1px solid var(--app-brand-panel-edge);
    color: var(--app-brand-on-panel);
}

.login-screen-safe {
    container: login-screen / inline-size;
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    justify-content: space-between;
    gap: 2rem;
    min-width: 0;
    padding: 2.25rem 2.75rem;
    border: 1px solid var(--app-brand-panel-safe);
    border-radius: 8px;
}

/* "ADOMNIO CRM", outlined (no font), in Paper on Night. The loop below is the mark, so the word stands alone here. */
.login-screen-word {
    display: block;
    flex: none;
    width: 8.1rem;
    height: 2.25rem;
    fill: var(--app-brand-on-panel);
}

.login-screen-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 2rem;
}

.login-screen h1 {
    margin: 0;
    font: 600 clamp(2rem, 6cqi, 2.75rem)/1.05 var(--app-font-display);
    letter-spacing: 0;
    text-wrap: balance;
    overflow-wrap: break-word;
    color: var(--app-brand-on-panel);
}

.login-screen .lead-copy {
    max-width: 30rem;
    margin: 1rem 0 0;
    font-size: .95rem;
    line-height: 1.6;
    color: var(--app-brand-on-panel-muted);
}

.login-screen-loop {
    display: block;
    width: clamp(11rem, 36cqi, 15rem);
    height: auto;
    aspect-ratio: 1;
}

.ls-unlit {
    fill: var(--app-brand-unlit);
}

.ls-lit {
    fill: var(--app-brand-signal);
}

/* The timecodes: 14 units in the loop's 240-unit box, never under 11rem wide, so 10px or more. */
.ls-tc {
    fill: var(--app-brand-on-panel-muted);
    font: 600 14px var(--app-font-number);
    font-variant-numeric: tabular-nums;
    text-anchor: middle;
    dominant-baseline: central;
}

.login-features {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.login-features li {
    display: flex;
    align-items: center;
    gap: .7rem;
    font-size: .9rem;
    color: var(--app-brand-on-panel);
}

.login-features svg {
    flex: none;
    color: var(--app-brand-on-panel-muted);
}

.login-brand-foot {
    font-size: .75rem;
    color: var(--app-brand-on-panel-muted);
}

/* A narrow pane (a small laptop): the loop above the line. */
@container login-screen (max-width: 34rem) {
    .login-screen-body {
        grid-template-columns: minmax(0, 1fr);
        gap: 1.5rem;
    }

    .login-screen-loop {
        grid-row: 1;
        width: 9rem;
    }
}

/* A short window: the feature rows go first, so the line and the loop keep their room. */
@media (max-height: 700px) {
    .login-features {
        display: none;
    }
}

/* Right form pane */
.login-form-pane {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2.5rem;
    overflow-y: auto;
}
.login-form-inner { width: 100%; max-width: 25rem; }
/* Title medium in the display face: the login is a loud page (h2 beside the Night screen's h1, h1 on the plain pages). */
.login-form-inner h1,
.login-form-inner h2 {
    margin: 0;
    font: 600 1.75rem/1.15 var(--app-font-display);
    letter-spacing: 0;
    color: var(--app-text);
}
/* The tenant's logo above the title, once the tenant is known (LoginTenantBranding). A wide logo is fitted by height,
   40px, up to 240px wide; a square one is 48px. One image per theme when there is a dark-theme logo; without one, dark
   theme puts the light logo on the logo plate so dark ink stays visible on the dark canvas. */
.login-tenant {
    display: flex;
    margin-bottom: 1.5rem;
}
.login-tenant-mark {
    display: inline-flex;
    align-items: center;
}
.login-tenant-mark img {
    display: block;
    object-fit: contain;
    object-position: left center;
}
.login-tenant-mark.is-wide img {
    height: 40px;
    width: auto;
    max-width: 240px;
}
.login-tenant-mark.is-square img {
    width: 48px;
    height: 48px;
}
.login-tenant-mark-dark {
    display: none;
}
[data-bs-theme="dark"] .login-tenant-mark.has-dark {
    display: none;
}
[data-bs-theme="dark"] .login-tenant-mark-dark {
    display: inline-flex;
}
[data-bs-theme="dark"] .login-tenant-mark.is-plated {
    padding: 6px 10px;
    border-radius: 9px;
    background: var(--app-logo-plate);
}
[data-bs-theme="dark"] .login-tenant-mark.is-plated.is-wide img {
    height: 32px;
    max-width: 220px;
}
.login-sub {
    margin: .45rem 0 1.75rem;
    font-size: .9rem;
    color: var(--app-text-muted);
}
.login-form-pane .form-label,
.auth-pane .form-label {
    font-size: .8rem;
    font-weight: 600;
    color: var(--app-text-muted);
    margin-bottom: .4rem;
}
.login-form-pane .form-control,
.auth-pane .form-control {
    height: 2.75rem;
    border-radius: 11px;
    border: 1px solid var(--app-input-border);
    background: var(--app-input-bg);
    color: var(--app-text);
    font-size: .9rem;
}
/* An example, not a label: Pewter, 4.9:1 or more on the field in both themes. */
.login-form-pane .form-control::placeholder,
.auth-pane .form-control::placeholder {
    color: var(--app-text-subtle);
    opacity: 1;
}
.login-form-pane .btn-primary,
.auth-pane .btn-primary {
    height: 2.85rem;
    border-radius: 11px;
    font-weight: 600;
    font-size: .95rem;
    color: var(--app-accent-fg);
    background: var(--app-accent-fill);
    border-color: var(--app-accent-fill);
    box-shadow: var(--app-shadow);
}
.login-form-pane .btn-primary:hover,
.auth-pane .btn-primary:hover {
    background: var(--app-accent-fill-hover);
    border-color: var(--app-accent-fill-hover);
}
.login-form-pane .btn-outline-secondary,
.auth-pane .btn-outline-secondary {
    height: 2.75rem;
    border-radius: 11px;
    font-weight: 600;
    font-size: .85rem;
    border-color: var(--app-border);
    color: var(--app-text);
    background: var(--app-surface);
}
.login-form-pane .btn-outline-secondary:hover,
.auth-pane .btn-outline-secondary:hover {
    border-color: var(--app-border-strong);
    background: var(--app-surface-2);
    color: var(--app-text);
}
.login-divider {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin: 1.5rem 0;
}
.login-divider::before,
.login-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--app-border-strong);
}
.login-divider span {
    font-size: .75rem;
    color: var(--app-text-subtle);
}
/* The single-sign-on view's folded password form, for accounts outside the tenant's Microsoft directory. */
.login-other {
    border-top: 1px solid var(--app-border-strong);
    padding-top: 1rem;
}
.login-other summary {
    font-size: .875rem;
    color: var(--app-text-subtle);
    cursor: pointer;
}
.login-other summary:hover,
.login-other[open] summary {
    color: var(--app-text);
}

/* The plain auth pages (log out, error): the login's form pane alone on the canvas, the wordmark in the text
   colour above the title (no Night screen: The One Screen Rule keeps it for the login). */
.auth-pane {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 2.5rem 1.25rem;
    overflow-y: auto;
    background: var(--app-bg);
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
}
/* Centred by its margins, not by align-items: a pane taller than the window (the two-factor Manage page, a phone)
   then starts at the top and scrolls, instead of overflowing upwards out of reach. */
.auth-pane > .login-form-inner {
    margin-block: auto;
}
.auth-pane .btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.auth-wordmark {
    display: block;
    width: 8.1rem;
    height: 2.25rem;
    margin-bottom: 1.5rem;
    fill: var(--app-text);
}
.auth-request-id {
    margin: 1.25rem 0 0;
    font-size: .75rem;
    color: var(--app-text-subtle);
    overflow-wrap: anywhere;
}
.auth-request-id code {
    color: var(--app-text-muted);
}

/* The two-factor pages (LoginWith2fa, LoginWithRecoveryCode, EnableTwoFactor, Manage/TwoFactor): the same pane, with
   a code field, a short notice line, the method choice, the QR code and key, the recovery codes and the Manage page's
   sections. */
.auth-pane .btn-outline-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.tf-code {
    font-family: var(--app-font-number);
    font-variant-numeric: tabular-nums;
    font-size: 1.09375rem;
    letter-spacing: .12em;
}
.tf-code::placeholder {
    letter-spacing: .06em;
}
.tf-help {
    font-size: .8rem;
    color: var(--app-text-subtle);
}
/* One line of news (a code was sent, a change was made): the accent's soft fill, never a toast. */
.tf-notice {
    margin: 0 0 1.25rem;
    padding: .65rem .85rem;
    border-radius: 9px;
    background: var(--app-accent-soft);
    color: var(--app-text);
    font-size: .875rem;
}
/* Few recovery codes left: the same line with the negative colour's edge, so it reads as a warning in both themes. */
/* The validation summary of the plain pages: one line, not a bulleted list. */
.auth-pane .validation-summary-errors ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
.login-form-inner h1 + .tf-notice {
    margin-top: 1rem;
}
.tf-notice-warn {
    background: var(--app-surface);
    border: 1px solid var(--app-negative);
}
.tf-choices {
    display: grid;
    gap: .75rem;
}
/* A method to choose: the whole card is the link. */
.tf-choice {
    display: grid;
    gap: .25rem;
    padding: .9rem 1rem;
    border: 1px solid var(--app-border-strong);
    border-radius: 11px;
    background: var(--app-surface);
    color: var(--app-text);
    text-decoration: none;
}
.tf-choice:hover {
    border-color: var(--app-accent);
    background: var(--app-surface-2);
    color: var(--app-text);
}
.tf-choice-title {
    font-weight: 600;
    font-size: .95rem;
}
.tf-choice-text {
    font-size: .85rem;
    color: var(--app-text-muted);
}
/* The QR code is black on white in both themes (what a camera reads), on the logo plate's padding in dark theme. */
.tf-qr {
    width: 12rem;
    max-width: 100%;
    margin: 0 0 1rem;
    padding: .5rem;
    border: 1px solid var(--app-border);
    border-radius: 11px;
    background: var(--app-surface);
}
[data-bs-theme="dark"] .tf-qr {
    background: var(--app-logo-plate);
}
.tf-qr svg {
    display: block;
    width: 100%;
    height: auto;
}
.tf-key-label {
    margin: 0 0 .35rem;
    font-size: .8rem;
    font-weight: 600;
    color: var(--app-text-muted);
}
.tf-key {
    margin: 0 0 1.5rem;
}
.tf-key code,
.tf-codes code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .95rem;
    color: var(--app-text);
    overflow-wrap: anywhere;
}
/* The recovery codes: two columns of monospace on the field's fill, numbered for "I used the third one". */
.tf-codes {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .5rem 1.5rem;
    margin: 0 0 1.25rem;
    padding: .9rem 1rem .9rem 2.25rem;
    border: 1px solid var(--app-border);
    border-radius: 11px;
    background: var(--app-input-bg);
    color: var(--app-text-subtle);
    font-size: .8rem;
}
.tf-codes-left {
    display: block;
    margin-top: .35rem;
}
/* The Manage page's parts below the primary action: a rule, a small heading, a sentence, the form. */
.tf-section {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--app-border-strong);
}
.login-form-inner .tf-section h2 {
    font: 600 1.09375rem/1.2 var(--app-font-display);
}
.tf-section-text {
    margin: .35rem 0 1rem;
    font-size: .85rem;
    color: var(--app-text-muted);
}
.tf-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem;
}

/* "Log in with a passkey" on the login form: the provider buttons' outline, with a key in front. */
.login-passkey-icon {
    margin-right: .5rem;
    vertical-align: -.2em;
}

/* The Manage page's passkeys: one card a passkey (its name, the day it was added), "Rename or remove" folded
   under it, then the way to add one. */
.pk-list {
    display: grid;
    gap: .75rem;
    margin: 0 0 1.25rem;
    padding: 0;
    list-style: none;
}
.pk-item {
    padding: .75rem 1rem;
    border: 1px solid var(--app-border-strong);
    border-radius: 11px;
    background: var(--app-surface);
}
.pk-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: .25rem 1rem;
}
.pk-name {
    font-weight: 600;
    font-size: .95rem;
    color: var(--app-text);
    overflow-wrap: anywhere;
}
.pk-date {
    font-size: .8rem;
    color: var(--app-text-subtle);
}
.pk-change {
    margin-top: .5rem;
}
.pk-change summary {
    font-size: .85rem;
    color: var(--app-text-subtle);
    cursor: pointer;
}
.pk-change summary:hover,
.pk-change[open] summary {
    color: var(--app-text);
}
.pk-form {
    margin-top: .9rem;
}
.pk-form + .pk-form {
    padding-top: .9rem;
    border-top: 1px solid var(--app-border);
}
.pk-rename {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: .5rem;
}
.pk-empty {
    margin: 0 0 1rem;
    font-size: .85rem;
    color: var(--app-text-muted);
}

/* Under 900px: one column - the short screen (the loop beside the word and the line, no timecodes, no lead, no
   feature rows) above the form, which scrolls on its own. */
@media (max-width: 900px) {
    .login-split {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto minmax(0, 1fr);
    }

    .login-screen {
        padding: 8px;
        border-right: 0;
        border-bottom: 1px solid var(--app-brand-panel-edge);
    }

    .login-screen-safe {
        display: grid;
        grid-template-columns: 4.25rem minmax(0, 1fr);
        grid-template-areas:
            "loop word"
            "loop body";
        align-items: center;
        gap: .375rem 1rem;
        padding: .875rem 1rem;
    }

    .login-screen-word {
        grid-area: word;
        width: 5.4rem;
        height: 1.5rem;
    }

    .login-screen-body {
        display: contents;
    }

    .login-screen-text {
        grid-area: body;
        min-width: 0;
    }

    .login-screen-loop {
        grid-area: loop;
        width: 4.25rem;
    }

    .ls-tcs,
    .login-screen .lead-copy,
    .login-features,
    .login-brand-foot {
        display: none;
    }

    .login-screen h1 {
        font-size: 1.25rem;
        line-height: 1.1;
    }

    .login-form-pane {
        align-items: flex-start;
        padding: 1.75rem 1.25rem 2.5rem;
    }
}