/* Login/2FA auth cards, phone input, auth methods list, API keys, integrations, tenant picker.
   Split out of stomn_theme.css (original lines 3559-4116) — 2026-08-18,
   CSS @layer restructuring step 2 (Basecamp "Fra Fizzy-gjennomgang:
   CSS-arkitektur"). Numeric filename prefix controls load order (see
   app/helpers/application_helper.rb#stomn_theme_stylesheet_link_tag) —
   files are concatenated in this exact original order, so no cascade
   tie-break changes. */
@layer overrides {
/* Login / 2FA / tenant-picker cards (layouts/middle.html.erb, sand_ui's centered_box) —
   .w-full otherwise stretches edge-to-edge on wide viewports since its flex container
   has no max-width of its own.
   vh-70 -> vh-full 2026-08-22 (Torleiv, "Login sentrert vertikalt"): the
   group (logo header + card + footer link) was only ever centered within
   the top 70% of the viewport, leaving a purely empty gap at the bottom —
   not actually centered on the page. */
body.striped-bg .flex-center.vh-full > .ui-box.elevation-1.w-full {
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
}

/* Login / 2FA cards (sessions#new, two_factor_authentications#new) */

.auth-card {
    padding: var(--space-6);
}

.auth-card h1 {
    margin-bottom: var(--space-2);
}

.auth-card__intro {
    text-align: center;
    color: rgba(28, 25, 20, 0.65);
    margin-bottom: var(--space-2);
}

/* shared/_flash.html.erb — application.html.erb and middle.html.erb's
   version of the above.
   Torleiv, 2026-08-19 ("Statusmeldinger... finn godt sted, og la den ligge
   oppå noen sekunder, og så forvinne"): was an in-flow banner at the top of
   .page-content, permanently pushing every page's content down until the
   next navigation replaced it. Floats over the page instead — bottom-
   center, clear of the header's own fixed controls (search/avatar/Sidefelt
   toggle all live at the top) — and flash_controller.js adds
   --dismissing after a few seconds, which this transition fades out;
   the element removes itself once the fade finishes (transitionend). */
.app-flash {
    position: fixed;
    left: 50%;
    bottom: var(--space-6);
    transform: translateX(-50%);
    z-index: 200;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    max-width: calc(100vw - var(--space-6) * 2);
    border-radius: var(--card-radius);
    padding: var(--space-2) var(--space-3);
    font-size: var(--text-size-base);
    box-shadow: var(--card-shadow);
    opacity: 1;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.app-flash--dismissing {
    opacity: 0;
    transform: translateX(-50%) translateY(var(--space-2));
}

.app-flash--alert {
    background: #fff;
    color: var(--danger-color);
    border: 1px solid rgba(178, 47, 47, 0.2);
}

.app-flash--notice {
    background: #fff;
    color: var(--signal-color);
    border: 1px solid var(--signal-color-tint);
}

.app-flash__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-1);
    color: inherit;
    opacity: 0.6;
    flex-shrink: 0;
}

.app-flash__close:hover {
    opacity: 1;
}

/* Torleiv, 2026-08-16 ("Legg til mer luft over/under knappen"): space-5
   (1.25rem) read as cramped right under the main auth button — bumped to
   space-8 (2rem) to match how much air the rest of this card already
   gives its other sections. */
.auth-card__switch {
    text-align: center;
    margin-top: var(--space-8);
    font-size: var(--text-size-base);
}

/* Torleiv, 2026-08-13, next round on the same 2FA screenshot: "ikke vis
   alle alternativene, nedtonet skrift om alternativer, og så vises disse
   hvis bruker klikker" — a single muted trigger revealing the actual list
   of alternatives on click, instead of always showing all of them. Its own
   class rather than reusing .text-dense directly on the button: .text-dense
   sets color, but .ui-link (needed for the same underline treatment as the
   links it reveals) sets color: inherit right after it in the same
   stylesheet, at equal specificity — same-specificity same-property
   collisions resolve by source order, so .ui-link's inherit silently won
   and this rendered in plain black instead of dimmed. Defined here, after
   sand_ui's own stylesheet, so it wins without needing !important. */
.auth-card__more-options-toggle {
    color: var(--text-300);
}

/* Torleiv, 2026-08-14: alternative-method buttons must be genuinely equal
   width regardless of label length ("Autentiseringsapp" vs "SMS"), not
   just equal EXTRA space — sand_ui's .grow only sets flex-grow, leaving
   flex-basis at its default (content size), so equal-grow items with
   different content still end up different final widths. flex-basis: 0
   here makes the row split evenly first, then grow fills it. */
.auth-card__alternative {
    flex: 1 1 0;
    min-width: 0;
}

/* Torleiv, 2026-08-14: the "Andre alternativer" trigger stayed visible
   above the list it had just revealed, so expanding looked like nothing
   happened. Hides the trigger once expanded — the matching "Skjul" button
   lives inside .auth-card__switch [data-disclosure-target="content"], so
   it already hides/shows for free via that element's own `hidden`
   attribute, no extra CSS needed for it. Scoped to .auth-card__switch so
   the shared disclosure controller's other uses (TOC, waiting-for-you)
   are untouched. */
.auth-card__switch [data-disclosure-target="toggle"][aria-expanded="true"] {
    display: none;
}

.code-input {
    display: flex;
    justify-content: center;
    gap: var(--space-2);
    margin-top: var(--space-4);
}

/* Kept raw, not a --text-size-* token: a large single-digit display,
   not body/UI text — same reasoning as .style-guide__digit-sample.
   Was Instrument Serif — a display face with only a Regular weight (see
   its @font-face above), so at this size its thin strokes and serifs
   made digits like 6/8/9 hard to tell apart at a glance, per Torleiv's
   own readability complaint. A single mistyped 2FA digit means a failed
   login, so this one spot favors maximum legibility over the serif
   accent used elsewhere — the app's own bold sans instead. */
.code-input__digit {
    width: 3rem;
    height: 3.5rem;
    text-align: center;
    font-size: 1.75rem;
    font-family: var(--font-sans);
    font-weight: 700;
    border-radius: var(--card-radius);
    border: var(--card-border);
    background: var(--card-bg);
}

.code-input__digit:focus {
    outline: none;
    border-color: var(--signal-color);
    box-shadow: 0 0 0 3px var(--signal-color-tint);
}

.auth-card__submit {
    margin-top: var(--space-5);
}

/* "eller" between the password form and Sign in with Microsoft
   (sessions/new.html.erb) — only ever rendered once MicrosoftEntra::Identity.configured?,
   so this has no real users yet, but the login card's own vertical rhythm
   (space-5 above/below, matching .auth-card__submit) still needed setting
   now rather than eyeballing it later once there's finally something to
   look at. */
.auth-card__divider {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin: var(--space-5) 0;
    color: rgba(28, 25, 20, 0.45);
    font-size: var(--text-size-sm);
}

.auth-card__divider::before,
.auth-card__divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: rgba(28, 25, 20, 0.12);
}

/* Totrinnsbekreftelse (authentication_methods#index and friends) */

.auth-onboarding-banner {
    padding: var(--space-4);
    background: var(--signal-color-tint);
}

.auth-onboarding-banner p {
    margin-bottom: var(--space-2);
}

/* Norway-only prefix shown alongside the phone number field — not a real
   country picker (Sveve only sends to Norwegian numbers today), just visual
   grouping so people don't have to type "+47" themselves. The actual input
   only carries the national number; the model prepends +47 server-side. */
.phone-input {
    display: flex;
    align-items: stretch;
}

.phone-input__prefix {
    display: flex;
    align-items: center;
    padding: 0 var(--space-3);
    border: 1px solid var(--border-color);
    border-right: none;
    border-radius: var(--radius-lg) 0 0 var(--radius-lg);
    background: rgba(28, 25, 20, 0.03);
    color: rgba(28, 25, 20, 0.65);
    white-space: nowrap;
}

.phone-input__number {
    border-radius: 0 var(--radius-lg) var(--radius-lg) 0 !important;
    flex: 1;
    min-width: 0;
}

.auth-page {
    max-width: 560px;
    margin: 0 auto;
    width: 100%;
}

.auth-page > * + * {
    margin-top: var(--space-6);
}

.auth-methods-list {
    padding: var(--space-2);
}

/* A real label|status|detail|action grid — Torleiv, 2026-08-11: the
   previous flex row let each cell's width follow its own content, so
   "where does the action column start" drifted from row to row depending
   on how much label/detail text came before it. Fixed (not content-
   sized) column widths instead, so — even though each row is its own
   independent grid, not one shared grid for the whole list — every row
   produces the exact same column boundaries regardless of its own
   content length. The toggle-slot column exists (empty) on every row,
   not just Passkey's, for the same reason: a column that only sometimes
   exists is a column that pushes everything after it sideways on the
   rows where it does. */
.auth-methods-list__row {
    display: grid;
    grid-template-columns: 1.25rem 1rem 9.5rem 1fr auto;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-2);
    border-bottom: 1px solid rgba(28, 25, 20, 0.06);
}

.auth-methods-list__row:last-child {
    border-bottom: none;
}

.auth-methods-list__toggle-slot {
    display: flex;
    align-items: center;
    justify-content: center;
}

.auth-methods-list__status-dot {
    display: inline-block;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    flex-shrink: 0;
}

/* Same palette .workspace-shortcut__swatch's own color dots already use —
   one "what green/red/amber mean in this app" rather than a second set
   introduced just for this page. */
.auth-methods-list__status-dot--green {
    background: #3FB37F;
}

.auth-methods-list__status-dot--red {
    background: #E4574C;
}

.auth-methods-list__status-dot--amber {
    background: #E3A72F;
}

.auth-methods-list__detail {
    color: rgba(28, 25, 20, 0.65);
    font-size: var(--text-size-base);
}

.auth-methods-list__actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex: 0 0 auto;
    justify-self: end;
}

/* Torleiv, 2026-08-17 (mobile audit): mirrors .api-keys-list__row's own
   mobile-stacking media query right below this file's api-keys-list rules
   — same fixed-column-grid-doesn't-fit-on-a-phone problem, same fix. */
@media (max-width: 640px) {
    .auth-methods-list__row {
        grid-template-columns: 1fr;
        justify-items: start;
        gap: var(--space-1);
    }

    .auth-methods-list__actions {
        justify-content: flex-start;
        justify-self: start;
        margin-top: var(--space-1);
    }
}

/* Passkey's row toggle (see disclosure_controller.js) — same rotate-on-
   expand treatment as .toc-list__disclosure, but an explicit button
   rather than a purely visual indicator, since "+ Legg til" sits in the
   same row as its own separate click target and native <details> would
   have made the two fight over the same click. Only rendered at all once
   at least one passkey exists — nothing to expand into otherwise. Sits
   inside .auth-methods-list__toggle-slot's own fixed-width grid column
   now rather than pushing the label over on just this one row (Torleiv,
   2026-08-11, screenshot) — no margin-right needed anymore, the slot
   itself provides the spacing. */
.auth-methods-list__disclosure {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: rgba(28, 25, 20, 0.4);
    cursor: pointer;
}

.auth-methods-list__disclosure i {
    transition: transform 0.15s ease;
}

.auth-methods-list__disclosure[aria-expanded="true"] i {
    transform: rotate(90deg);
}

.auth-methods-list__subrows {
    background: rgba(28, 25, 20, 0.02);
    border-bottom: 1px solid rgba(28, 25, 20, 0.06);
}

/* Overrides the top-level row's 5-column template (toggle/dot/label/
   detail/action) with a plain 2-column one — a sub-row has neither a
   toggle (it's already inside the expanded section) nor its own status
   dot (the summary row above already carries that), so the 5-column
   template would otherwise cram "label" and "actions" into its first two
   columns (1.25rem and 1rem — nowhere near enough for a passkey nickname). */
.auth-methods-list__row--sub {
    grid-template-columns: 1fr auto;
    padding-left: var(--space-6);
}

/* The passkey row sits inside its own disclosure-controller wrapper div
   (see the view — the toggle button and the subrows content it controls
   are siblings, not nested, so the controller has to live one level up),
   which means .auth-methods-list__row:last-child's usual "no bottom
   border on the last row" rule fires WRONGLY here whenever nobody has
   any passkeys yet: with no subrows sibling, the passkey row becomes the
   wrapper's only — and therefore last — child, even though it's always
   followed by another row (Autentiseringsapp, since Passkey moved to
   first — Torleiv, 2026-08-11) right after the wrapper closes.
   Same specificity as that rule (class + pseudo-class), just declared
   later, so no !important needed to win the tie. */
.auth-methods-list__row--passkey:last-child {
    border-bottom: 1px solid rgba(28, 25, 20, 0.06);
}

/* API keys — a real Navn/Opprettet/Sist brukt table (Slack's token
   management page as the reference point), not the label+detail-line
   pattern .auth-methods-list uses. Kept as its own classes rather than
   reusing .auth-methods-list so this doesn't ripple into
   authentication_methods#index. */
.api-keys-page {
    max-width: 720px;
    margin: 0 auto;
    width: 100%;
}

/* Same simple centered-column shape as .api-keys-page right above —
   another single-purpose settings page, not worth its own layout system. */
.integrations-page {
    max-width: 720px;
    margin: 0 auto;
    width: 100%;
}

.integrations-card {
    padding: var(--space-4);
}

/* Microsoft Entra's embedded step-by-step Azure setup guide — sits above
   its own connect form (integrations/index.html.erb), not linked out to a
   separate help page, since setting up an Azure app registration is a
   one-time task most admins doing it need the exact steps in front of
   them right there rather than a second tab to keep flipping back to. */
.integrations-card__setup-guide {
    padding-bottom: var(--space-4);
    margin-bottom: var(--space-4);
    border-bottom: 1px solid rgba(28, 25, 20, 0.08);
}

.integrations-card__setup-steps {
    margin: var(--space-2) 0 0;
    padding-left: var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    /* Bumped from --text-size-base + 75%-opacity text (Torleiv, 2026-08-20,
       Slack guide: "Større skrift") — someone following these steps is
       alt-tabbing to Slack and back, reading them at a glance each time;
       muted fine-print styling made that harder than it needed to be. */
    font-size: var(--text-size-lg);
    line-height: 1.5;
    color: rgba(28, 25, 20, 0.9);
}

.integrations-card__setup-steps li {
    list-style: decimal;
}

/* Sub-points under one numbered step (Torleiv, 2026-08-20, same request:
   "Del oppskriften opp i punkter og underpunkter") — a step that bundles
   several distinct clicks into one paragraph is easy to skim past under
   load; letters keep them visually subordinate to the numbered step
   they belong to. */
.integrations-card__setup-substeps {
    margin: var(--space-2) 0 0;
    padding-left: var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.integrations-card__setup-substeps li {
    list-style: lower-alpha;
}

/* Connected-integrations list (integrations/index.html.erb) — same
   single-box/bottom-border-per-row shape as .people-list, now that the
   index page only lists what's already connected instead of showing
   every kind's full setup form at once (the setup forms moved to
   integrations/new.html.erb's picker + per-kind step). */
.integrations-list {
    padding: var(--space-3);
}

.integrations-list__empty {
    padding: var(--space-4) var(--space-2);
    color: rgba(28, 25, 20, 0.65);
}

.integrations-list__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-3);
    padding: var(--space-4);
    border-bottom: 1px solid rgba(28, 25, 20, 0.06);
}

.integrations-list__row:last-child {
    border-bottom: none;
}

.integrations-list__info {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.integrations-list__name {
    font-weight: 600;
}

.integrations-list__meta {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-size-xs);
    color: rgba(28, 25, 20, 0.65);
}

.integrations-list__actions {
    display: flex;
    gap: var(--space-2);
    flex-shrink: 0;
}

.api-keys-page > * + * {
    margin-top: var(--space-6);
}

.api-keys-form-box {
    padding: var(--space-4);
}

.api-keys-list {
    padding: var(--space-2);
}

.api-keys-list__empty {
    padding: var(--space-4) var(--space-2);
    color: rgba(28, 25, 20, 0.65);
}

.api-keys-list__header,
.api-keys-list__row {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-2);
}

.api-keys-list__header {
    color: rgba(28, 25, 20, 0.45);
    font-size: var(--text-size-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    border-bottom: 1px solid rgba(28, 25, 20, 0.08);
}

.api-keys-list__row {
    border-bottom: 1px solid rgba(28, 25, 20, 0.06);
}

.api-keys-list__row:last-child {
    border-bottom: none;
}

.api-keys-list__name {
    font-weight: 600;
}

.api-keys-list__meta {
    color: rgba(28, 25, 20, 0.65);
    font-size: var(--text-size-base);
}

.api-keys-list__actions {
    display: flex;
    justify-content: flex-end;
}

@media (max-width: 640px) {
    .api-keys-list__header {
        display: none;
    }

    .api-keys-list__row {
        grid-template-columns: 1fr;
        justify-items: start;
        gap: var(--space-1);
    }

    .api-keys-list__actions {
        justify-content: flex-start;
        margin-top: var(--space-1);
    }
}

/* Torleiv, 2026-08-21 (#10226246707, "MCP UI i Stomn") — same list-row
   shape as .api-keys-list right above (grid header/row/name/meta/actions,
   mobile stack-to-1-column), own class since this is a distinct page/
   dataset, not the same "Navn/Opprettet/Sist brukt/Utløper" columns. */
.connected-apps-list {
    padding: var(--space-2);
}

.connected-apps-list__empty {
    padding: var(--space-4) var(--space-2);
    color: rgba(28, 25, 20, 0.65);
}

.connected-apps-list__header,
.connected-apps-list__row {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-2);
}

.connected-apps-list__header {
    color: rgba(28, 25, 20, 0.45);
    font-size: var(--text-size-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    border-bottom: 1px solid rgba(28, 25, 20, 0.08);
}

.connected-apps-list__row {
    border-bottom: 1px solid rgba(28, 25, 20, 0.06);
}

.connected-apps-list__row:last-child {
    border-bottom: none;
}

.connected-apps-list__name {
    font-weight: 600;
}

.connected-apps-list__meta {
    color: rgba(28, 25, 20, 0.65);
    font-size: var(--text-size-base);
}

.connected-apps-list__actions {
    display: flex;
    justify-content: flex-end;
}

@media (max-width: 640px) {
    .connected-apps-list__header {
        display: none;
    }

    .connected-apps-list__row {
        grid-template-columns: 1fr;
        justify-items: start;
        gap: var(--space-1);
    }

    .connected-apps-list__actions {
        justify-content: flex-start;
        margin-top: var(--space-1);
    }
}

/* Account (tenant) picker */

.tenant-list-item__logo {
    width: 32px;
    height: 32px;
    object-fit: contain;
    margin-right: var(--space-3);
    border-radius: var(--radius-sm);
}


} /* @layer overrides */