/* Error-styling for Blazor <ValidationMessage> on Identity pages.
   Uses Fluent design tokens so light/dark themes inherit automatically.
   Summary-level errors now render through <FluentValidationSummary> -> FluentMessageBar
   and do not need bespoke CSS. */

.sc-saas-validation-message {
    color: var(--error-fill-rest, #c50f1f);
    font-size: var(--type-ramp-minus-1-font-size, 12px);
    line-height: var(--type-ramp-minus-1-line-height, 16px);
    margin-top: 2px;
    display: block;
}

/* FluentMessageBar ships hardcoded light hex values for its intent variants
   (e.g. .intent-warning { background:#FDF6F3; border:1px solid #F4BFAB; }).
   Those don't respond to theme mode, so in dark mode the bar washes out.
   Re-bind them to FluentUI design tokens so they track light/dark correctly.

   We key off body:has(> fluent-design-theme[mode="dark"]) rather than
   body[data-theme="dark"] because the data-theme attribute is only present on
   full-page loads — Blazor enhanced navigation replaces body content without
   re-applying it, so a nav-link click would re-wash the bar. <fluent-design-theme>
   is always rendered as a body child by the page's theme host, so :has() is
   stable across both initial load and enhanced navigation. */
body:has(> fluent-design-theme[mode="dark"]) .fluent-messagebar.intent-warning {
    background-color: var(--warning-background, #4a2a00) !important;
    border-color: var(--warning-foreground, #ffb84d) !important;
    color: var(--neutral-foreground-rest) !important;
}

    body:has(> fluent-design-theme[mode="dark"]) .fluent-messagebar.intent-warning .fluent-messagebar-message,
    body:has(> fluent-design-theme[mode="dark"]) .fluent-messagebar.intent-warning .fluent-messagebar-icon {
        color: var(--neutral-foreground-rest) !important;
    }

/* Error intent — FluentMessageBar ships .intent-error { background:#FDF3F4; border:1px solid #F1BBBC; }
   which washes out in dark mode the same way .intent-warning does. Mirror the warning fix. */
body:has(> fluent-design-theme[mode="dark"]) .fluent-messagebar.intent-error {
    background-color: var(--error-background, #3b0a0d) !important;
    border-color: var(--error-fill-rest, #f1707b) !important;
    color: var(--neutral-foreground-rest) !important;
}

    body:has(> fluent-design-theme[mode="dark"]) .fluent-messagebar.intent-error .fluent-messagebar-message,
    body:has(> fluent-design-theme[mode="dark"]) .fluent-messagebar.intent-error .fluent-messagebar-icon {
        color: var(--neutral-foreground-rest) !important;
    }

/* Success / info intents — same hardcoded-light problem. Cheap to cover now
   so any future StatusMessage success/info doesn't regress. */
body:has(> fluent-design-theme[mode="dark"]) .fluent-messagebar.intent-success {
    background-color: var(--success-background, #0a2e0a) !important;
    border-color: var(--success-foreground, #6cbf6c) !important;
    color: var(--neutral-foreground-rest) !important;
}

body:has(> fluent-design-theme[mode="dark"]) .fluent-messagebar.intent-info {
    background-color: var(--info-background, #0a2230) !important;
    border-color: var(--info-foreground, #4ab3ff) !important;
    color: var(--neutral-foreground-rest) !important;
}

    body:has(> fluent-design-theme[mode="dark"]) .fluent-messagebar.intent-success .fluent-messagebar-message,
    body:has(> fluent-design-theme[mode="dark"]) .fluent-messagebar.intent-success .fluent-messagebar-icon,
    body:has(> fluent-design-theme[mode="dark"]) .fluent-messagebar.intent-info .fluent-messagebar-message,
    body:has(> fluent-design-theme[mode="dark"]) .fluent-messagebar.intent-info .fluent-messagebar-icon {
        color: var(--neutral-foreground-rest) !important;
    }

/* ============================================================================
   External login picker — vendor-branded sign-in buttons.
   Each variant matches the vendor's official brand guidelines:
     - Microsoft: https://learn.microsoft.com/entra/identity-platform/howto-add-branding-in-apps
     - Google:    https://developers.google.com/identity/branding-guidelines
     - Facebook:  https://about.meta.com/brand/resources/facebookapp/logo
   Do not "improve" the colors, fonts, logos, or wording — these are contractual.
   ============================================================================ */

.sc-saas-ext-picker {
    margin: 16px 0;
    padding: 0 4px;
}

    .sc-saas-ext-picker form {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

/* Shared base: layout only. Visuals come from per-vendor modifier classes. */
.sc-saas-ext-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    padding: 0 16px;
    border-radius: 4px;
    cursor: pointer;
    text-align: center;
    box-sizing: border-box;
    user-select: none;
    -webkit-appearance: none;
    appearance: none;
    transition: background-color 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
}

    .sc-saas-ext-btn:disabled {
        opacity: 0.6;
        cursor: not-allowed;
    }

.sc-saas-ext-btn__logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.sc-saas-ext-btn__label {
    display: inline-block;
    line-height: 1;
}

/* ---- Microsoft ----------------------------------------------------------
   White background, 1px #8C8C8C border, Segoe UI 15px #5E5E5E "Sign in with
   Microsoft", 4-square logo 21x21, min-height 41px.
   Spec mandates white in BOTH light AND dark mode — do not add a dark-mode override. */
.sc-saas-ext-btn--microsoft {
    min-height: 41px;
    background-color: #FFFFFF;
    border: 1px solid #8C8C8C;
    color: #5E5E5E;
    font-family: "Segoe UI", "Segoe UI Web (West European)", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 15px;
    font-weight: 600;
}

    .sc-saas-ext-btn--microsoft:hover {
        background-color: #F5F5F5;
    }

    .sc-saas-ext-btn--microsoft:active {
        background-color: #EBEBEB;
    }

    .sc-saas-ext-btn--microsoft:focus-visible {
        outline: 2px solid #0067B8;
        outline-offset: 2px;
    }

/* ---- Google -------------------------------------------------------------
   White background, 1px #747775 border, Roboto Medium 14px #1F1F1F "Sign in
   with Google", multi-color G logo 18x18, min-height 40px, 20px corner radius
   per Google's current Material 3-style button spec.
   Dark mode: switches to the official dark variant — see override block below. */
.sc-saas-ext-btn--google {
    min-height: 40px;
    background-color: #FFFFFF;
    border: 1px solid #747775;
    border-radius: 20px;
    color: #1F1F1F;
    font-family: Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.25px;
}

    .sc-saas-ext-btn--google:hover {
        background-color: #F8FAFD;
        border-color: #747775;
        box-shadow: 0 1px 2px 0 rgba(60, 64, 67, 0.30), 0 1px 3px 1px rgba(60, 64, 67, 0.15);
    }

    .sc-saas-ext-btn--google:active {
        background-color: #F1F3F4;
    }

    .sc-saas-ext-btn--google:focus-visible {
        outline: 2px solid #1F1F1F;
        outline-offset: 2px;
    }

/* ---- Facebook -----------------------------------------------------------
   Background #1877F2, white text "Continue with Facebook", Helvetica/Arial,
   white f-logo 20x20, min-height 40px. */
.sc-saas-ext-btn--facebook {
    min-height: 40px;
    background-color: #1877F2;
    border: 1px solid #1877F2;
    color: #FFFFFF;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 15px;
    font-weight: 600;
}

    .sc-saas-ext-btn--facebook:hover {
        background-color: #166FE5;
        border-color: #166FE5;
    }

    .sc-saas-ext-btn--facebook:active {
        background-color: #1464D2;
        border-color: #1464D2;
    }

    .sc-saas-ext-btn--facebook:focus-visible {
        outline: 2px solid #1877F2;
        outline-offset: 2px;
    }

/* ---- Generic fallback for unbranded providers --------------------------- */
.sc-saas-ext-btn--generic {
    min-height: 40px;
    background-color: var(--accent-fill-rest, #0067B8);
    border: 1px solid transparent;
    color: #FFFFFF;
    font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 14px;
    font-weight: 600;
}

/* ---------- Dark mode overrides ----------
   Keyed off body:has(> fluent-design-theme[mode="dark"]) — see the
   FluentMessageBar block at the top of this file for the rationale
   (data-theme body attribute doesn't survive Blazor enhanced navigation).

   Microsoft: intentionally absent — brand spec mandates white in dark mode too.
   Facebook:  intentionally absent — brand spec keeps #1877F2 in both modes. The
              loud blue is symmetric across light and dark and is the vendor's
              intended visual weight; muting it would create a worse asymmetry
              (two near-white buttons + one dark Google button). */

body:has(> fluent-design-theme[mode="dark"]) .sc-saas-ext-btn--google {
    background-color: #131314;
    color: #E3E3E3;
    border: 1px solid #8E918F;
}

/* ============================================================================
   Register / Login two-column layout.
   - Wide:   side-by-side, equal columns, BOTH columns' last action button
             (Register on left, last external provider on right) sit flush
             at the bottom so their bottom edges line up.
   - Narrow: single column, right column stacks below the left. Triggered
             at <= 768px which is the conventional tablet-portrait breakpoint
             and matches when the inner content otherwise starts wrapping awkwardly.
   ============================================================================ */

.sc-saas-register-columns {
    display: flex;
    flex-direction: row;
    align-items: stretch; /* equal-height columns so bottom-alignment works */
    gap: 24px;
}

.sc-saas-register-column {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

/* The EditForm fills the left column; its submit button is pushed to the bottom
   so it bottom-aligns with the last external-provider button on the right. */
.sc-saas-register-column--left > form {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}

    .sc-saas-register-column--left > form > #register-submit-button,
    .sc-saas-register-column--left > section > form > #login-submit-button {
        margin-top: auto; /* pin to the bottom of the column */
        min-height: 40px; /* match Google / Facebook button heights for visual parity */
    }

/* Login's left column wraps the form in <section> — make that section a flex
   column too so the inner form can stretch and push its submit button down. */
.sc-saas-register-column--left > section,
.sc-saas-register-column--left > section > form {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}

/* Right column: section grows, external-login picker pinned to bottom. */
.sc-saas-register-column--right > section {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}

    .sc-saas-register-column--right > section > #external-login-picker {
        margin-top: auto; /* picker sits at the bottom of the column so the last
                             provider button bottom-aligns with the Register/Log In
                             button on the left (which also uses margin-top:auto). */
        margin-bottom: 0; /* override sc-saas-ext-picker's default 16px so the last
                             provider button sits flush with the column's bottom edge. */
    }

/* Narrow: stack columns vertically. Drop the equal-height constraint so each
   column is just as tall as its own content; the bottom-alignment trick only
   makes sense side-by-side. */
@media (max-width: 768px) {
    .sc-saas-register-columns {
        flex-direction: column;
        gap: 16px;
    }

    .sc-saas-register-column--left > form > #register-submit-button,
    .sc-saas-register-column--left > section > form > #login-submit-button {
        margin-top: 0; /* no longer need to push to bottom in single-column flow */
    }

    .sc-saas-register-column--right > section > #external-login-picker {
        margin-top: 0;
        margin-bottom: 16px; /* restore breathing room in single-column flow */
    }
}

/* Consistent breathing room between the addendum text and the external-login
   picker. Picker still uses margin-top:auto for bottom-alignment; this just
   establishes a *minimum* gap so when the right column is naturally taller
   than the left (no auto space gets distributed) the picker doesn't crowd
   the text above it. */
#register-with-microsoft-addendum {
    margin-bottom: 12px;
}

/* Width-constraining wrapper for FluentDataGrid on Account Manage pages.
   FluentDataGrid renders a full-width row/border element OUTSIDE its
   GridTemplateColumns track, so setting max-width on the grid itself only
   constrains the cells — the row underline still spans the page. Wrap the
   grid in a block-level container with a max-width so the whole grid
   (including its row borders) stays anchored next to the page content. */
.sc-saas-grid-wrapper {
    width: 100%;
    max-width: 600px;
}

/* Vertically center cell content inside a FluentDataGrid TemplateColumn.
   Without this, a <form> child (which is block-level by default) collapses
   to the top of the cell, leaving an action button visually "smooshed"
   against the cell's bottom border. */
.sc-saas-grid-cell-form {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin: 0;
}

/* Destructive action button (e.g., "Remove" external login, "Delete Personal Data").
   Fluent UI Blazor v4 fluent-button doesn't expose a ::part hook we can
   restyle directly; the supported customization path is to override the
   --accent-fill-* design tokens on the element itself. The button then
   recomputes its rest/hover/active fills from those tokens automatically,
   so we get correct chrome (focus ring, typography, sizing) for free and
   only redirect the color palette to "error" so the button reads as
   destructive in both light and dark modes.

   Applies to both <fluent-button> and <fluent-anchor> (when rendered with
   Appearance="Accent") because FluentAnchor in accent appearance uses the
   same --accent-fill-* design tokens.

   Tokens (the !important is needed because Fluent's own component styles
   set these via the design-system provider at the same specificity level
   we're competing with):
     --accent-fill-rest    -> resting fill
     --accent-fill-hover   -> hover fill
     --accent-fill-active  -> pressed fill
     --foreground-on-accent-rest -> text color computed against the fill */
fluent-button.sc-saas-destructive-button,
fluent-anchor.sc-saas-destructive-button {
    --accent-fill-rest: var(--error-fill-rest, #c50f1f) !important;
    --accent-fill-hover: var(--error-fill-hover, #b10e1c) !important;
    --accent-fill-active: var(--error-fill-active, #960c18) !important;
    --accent-fill-focus: var(--error-fill-rest, #c50f1f) !important;
    --foreground-on-accent-rest: #ffffff !important;
    --foreground-on-accent-hover: #ffffff !important;
    --foreground-on-accent-active: #ffffff !important;
}

/* FluentDataGrid gives each row a fixed height (~32px) and clips overflow,
   which cuts off the bottom edge of any cell content taller than that —
   e.g., a 40px FluentButton in a TemplateColumn. On Account Manage pages
   we'd rather the row grow to fit its content (we only have a handful of
   rows, so we don't need fixed-height virtualization).

   Scoped to .sc-saas-grid-wrapper so we don't accidentally relax row
   height on FluentDataGrids elsewhere in the app that DO rely on the
   fixed-height contract (e.g., virtualized grids). */
.sc-saas-grid-wrapper .fluent-data-grid-row {
    height: auto;
    min-height: 48px; /* enough room for a 40px FluentButton + 4px breathing room top/bottom */
}

.sc-saas-grid-wrapper .fluent-data-grid-cell {
    overflow: visible;
    height: auto;
    padding-top: 4px;
    padding-bottom: 4px;
}

/* FluentDataGrid renders as a CSS-grid <table> where each <td role="gridcell">
   gets an INLINE style of height:32px (and the parent table sets grid-auto-rows
   to a fixed track), so class selectors without !important lose to the inline
   style. The default 32px is shorter than a 40px FluentButton, which is why the
   button's bottom edge was clipped against the row's bottom border.

   On Account Manage pages we'd rather rows grow to fit a normal-size action
   button. Scoped to .sc-saas-grid-wrapper so we don't relax row height on
   FluentDataGrids elsewhere (e.g., virtualized ones that DO rely on the
   fixed-height contract). */

/* The table itself drives row height via grid-auto-rows. */
.sc-saas-grid-wrapper table[role="grid"] {
    grid-auto-rows: minmax(48px, auto) !important;
}

/* The cell carries an inline height:32px — beat it with !important and let
   it grow. Also drop overflow:hidden so a slightly-taller button isn't
   clipped, and bump vertical padding so the button has breathing room. */
.sc-saas-grid-wrapper td[role="gridcell"],
.sc-saas-grid-wrapper th[role="columnheader"] {
    height: auto !important;
    min-height: 48px !important;
    overflow: visible !important;
    padding-top: 4px !important;
    padding-bottom: 4px !important;
    align-self: center !important; /* center the cell within the now-taller row track */
}

/* ============================================================================
   Account Manage layout — responsive nav (hamburger on narrow screens).

   The Identity Manage pages are SSR-only (no Blazor interactivity), so we use
   the classic checkbox-hack pattern: a hidden <input type="checkbox"> sibling
   holds the open/closed state, and a <label for="..."> acts as the toggle
   button. This works without JS and survives Blazor enhanced navigation,
   matching the rationale documented above for the message-bar dark-mode rules.

   Wide screens: hamburger is hidden, side-by-side columns as before.
   Narrow screens (<= 768px, the same breakpoint used by .sc-saas-register-columns):
     - hamburger label is shown
     - nav column is collapsed (display:none) by default
     - checking the checkbox reveals the nav column above the content
   ============================================================================ */

/* Wide-screen column sizing (replaces the previous inline style="flex:0 0 240px"). */
.sc-saas-manage-nav-column {
    flex: 0 0 240px;
    min-width: 0;
}

.sc-saas-manage-content-column {
    flex: 1 1 0;
    min-width: 0;
    /* Constrain Identity Manage page content (forms, warning bars, status messages)
       to a comfortable reading width so message bars and inputs don't stretch
       across a wide viewport. Previously each page added its own inline
       style="max-width:560px" wrapper around (part of) its content, which was
       inconsistent across pages — e.g., PersonalData wrapped everything but
       DeletePersonalData wrapped only the form, leaving its FluentMessageBar
       full-width. Centralizing here gives every Manage page the same treatment. */
    max-width: 600px;
}

/* The checkbox itself is always visually hidden — it's just a state holder.
   Kept focusable+in-flow-adjacent so the :checked selector works. */
.sc-saas-manage-nav-toggle {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

/* The visible toggle button. Hidden on wide screens — shown only at <=768px. */
.sc-saas-manage-nav-toggle-label {
    display: none;
}

.sc-saas-manage-nav-toggle-bars {
    display: inline-block;
    width: 18px;
    height: 2px;
    background: currentColor;
    position: relative;
}

    .sc-saas-manage-nav-toggle-bars::before,
    .sc-saas-manage-nav-toggle-bars::after {
        content: "";
        position: absolute;
        left: 0;
        width: 18px;
        height: 2px;
        background: currentColor;
    }

    .sc-saas-manage-nav-toggle-bars::before {
        top: -6px;
    }

    .sc-saas-manage-nav-toggle-bars::after {
        top: 6px;
    }

@media (max-width: 768px) {
    /* Show the hamburger button. */
    .sc-saas-manage-nav-toggle-label {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        margin: 8px 0 12px 0;
        padding: 8px 12px;
        border: 1px solid var(--neutral-stroke-rest, #d1d1d1);
        border-radius: 4px;
        cursor: pointer;
        background: var(--neutral-layer-1, transparent);
        color: var(--neutral-foreground-rest);
        font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, sans-serif;
        font-size: 14px;
        font-weight: 600;
        user-select: none;
    }

        .sc-saas-manage-nav-toggle-label:hover {
            background: var(--neutral-fill-stealth-hover, rgba(0, 0, 0, 0.04));
        }

    /* Keyboard focus on the (visually hidden) checkbox should highlight the label. */
    .sc-saas-manage-nav-toggle:focus-visible + .sc-saas-manage-nav-toggle-label {
        outline: 2px solid var(--accent-fill-rest, #0067B8);
        outline-offset: 2px;
    }

    /* Stack the manage layout columns vertically and hide the nav until toggled. */
    #manage-layout-stack {
        flex-direction: column !important; /* override FluentStack's inline flex-direction:row */
        gap: 12px;
    }

    .sc-saas-manage-nav-column {
        flex: 0 0 auto;
        width: 100%;
        display: none; /* collapsed by default on narrow */
    }

    .sc-saas-manage-content-column {
        flex: 1 1 auto;
        width: 100%;
    }

    /* When the toggle is checked, reveal the nav column. The checkbox is a
       previous sibling of #manage-layout-stack inside .sc-saas-manage-layout,
       so we use the general sibling combinator (~) to reach into the stack. */
    .sc-saas-manage-nav-toggle:checked ~ #manage-layout-stack .sc-saas-manage-nav-column {
        display: block;
    }
}