@import '_content/AppShared.Identity.UI/AppShared.Identity.UI.0bbdeacffm.bundle.scp.css';

/* /Components/Layout/AppHeader.razor.rz.scp.css */
/* AppHeader scoped styles — matched to ap-header parent in MainLayout */

.ap-header-logo-link[b-awaf12iz59] {
    font-size: var(--ap-text-lg);
    font-weight: 600;
    color: var(--ap-text-primary);
    text-decoration: none;
    white-space: nowrap;
}

.ap-header-logo-link:hover[b-awaf12iz59],
.ap-header-logo-link:focus-visible[b-awaf12iz59] {
    color: var(--ap-primary);
}

.ap-header-nav[b-awaf12iz59] {
    display: flex;
    gap: var(--ap-space-4);
    align-items: center;
}

.ap-nav-link[b-awaf12iz59] {
    font-size: var(--ap-text-base);
    color: var(--ap-text-primary);
    text-decoration: none;
}

.ap-nav-link:hover[b-awaf12iz59],
.ap-nav-link:focus-visible[b-awaf12iz59] {
    color: var(--ap-primary);
}

.ap-header-actions[b-awaf12iz59] {
    display: flex;
    align-items: center;
    gap: var(--ap-space-3);
}

.ap-header-actions[b-awaf12iz59]  .ap-theme-selector-host {
    min-width: 160px;
}

/* === Language switcher === */

.ap-language-switcher[b-awaf12iz59] {
    display: flex;
    gap: var(--ap-space-1);
}

.ap-lang-btn[b-awaf12iz59] {
    font-size: var(--ap-text-xs);
    font-weight: 600;
    padding: var(--ap-space-1) var(--ap-space-2);
    background: transparent;
    color: var(--ap-text-secondary);
    border: 1px solid var(--ap-border-default);
    border-radius: var(--ap-radius-sm);
    cursor: pointer;
    line-height: 1.4;
    /* WCAG AA 2.5.5 / iam-login mobile-1: 44x44 minimum touch target at 375px viewport. */
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color var(--ap-motion-duration-fast) var(--ap-motion-ease-standard),
                color var(--ap-motion-duration-fast) var(--ap-motion-ease-standard);
}

.ap-lang-btn:hover[b-awaf12iz59],
.ap-lang-btn:focus-visible[b-awaf12iz59] {
    background: var(--ap-primary-subtle);
    color: var(--ap-primary);
}

.ap-lang-btn:focus-visible[b-awaf12iz59] {
    outline: var(--ap-focus-ring-width) solid var(--ap-focus-ring-color);
    outline-offset: var(--ap-focus-ring-offset);
}

/* === User menu === */

.ap-user-menu[b-awaf12iz59] {
    position: relative;
}

.ap-user-avatar[b-awaf12iz59] {
    width: 44px;
    height: 44px;
    min-width: 44px;
    border-radius: var(--ap-radius-full);
    background: var(--ap-primary);
    color: var(--ap-color-on-accent);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.ap-user-avatar:hover[b-awaf12iz59] {
    background: var(--ap-action-primary-hover);
}

.ap-user-avatar:focus-visible[b-awaf12iz59] {
    outline: var(--ap-focus-ring-width) solid var(--ap-focus-ring-color);
    outline-offset: var(--ap-focus-ring-offset);
}

.avatar-initials[b-awaf12iz59] {
    font-size: var(--ap-text-sm);
    font-weight: bold;
    color: var(--ap-color-on-accent);
    line-height: 1;
    pointer-events: none;
    user-select: none;
}

/* === Dropdown === */

.ap-user-dropdown[b-awaf12iz59] {
    position: absolute;
    top: 48px;
    right: 0;
    min-width: 200px;
    background: var(--ap-bg-surface);
    border: 1px solid var(--ap-border-default);
    border-radius: var(--ap-radius-md);
    box-shadow: var(--ap-shadow-md);
    display: flex;
    flex-direction: column;
    z-index: 1000;
    padding: var(--ap-space-1) 0;
}

.ap-dropdown-item[b-awaf12iz59] {
    padding: var(--ap-space-2) var(--ap-space-3);
    color: var(--ap-text);
    text-decoration: none;
    display: block;
    width: 100%;
    text-align: left;
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: var(--ap-text-sm);
    font-weight: normal;
    box-sizing: border-box;
    transition: background-color var(--ap-motion-duration-fast) var(--ap-motion-ease-standard);
}

.ap-dropdown-item:hover[b-awaf12iz59],
.ap-dropdown-item:focus-visible[b-awaf12iz59] {
    background: var(--ap-primary-subtle);
    color: var(--ap-text);
}

.ap-dropdown-item:focus-visible[b-awaf12iz59] {
    outline: var(--ap-focus-ring-width) solid var(--ap-focus-ring-color);
    outline-offset: calc(-1 * var(--ap-focus-ring-offset));
}

.ap-dropdown-divider[b-awaf12iz59] {
    height: 1px;
    background: var(--ap-border-default);
    margin: var(--ap-space-1) 0;
}

/* === Hamburger button (mobile only) === */

.ap-hamburger[b-awaf12iz59] {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--ap-space-1);
    width: 44px;
    height: 44px;
    min-width: 44px;
    padding: var(--ap-space-2);
    background: transparent;
    border: none;
    border-radius: var(--ap-radius-sm);
    cursor: pointer;
    transition: background-color var(--ap-motion-duration-fast) var(--ap-motion-ease-standard);
    box-sizing: border-box;
}

.ap-hamburger:hover[b-awaf12iz59],
.ap-hamburger:focus-visible[b-awaf12iz59] {
    background: var(--ap-primary-subtle);
}

.ap-hamburger:focus-visible[b-awaf12iz59] {
    outline: var(--ap-focus-ring-width) solid var(--ap-focus-ring-color);
    outline-offset: var(--ap-focus-ring-offset);
}

.ap-hamburger-line[b-awaf12iz59] {
    display: block;
    width: 20px;
    height: 2px;
    background: var(--ap-text-primary);
    border-radius: var(--ap-radius-sm);
    transition: transform var(--ap-motion-duration-fast) var(--ap-motion-ease-standard),
                opacity var(--ap-motion-duration-fast) var(--ap-motion-ease-standard);
}

/* === Responsive: mobile breakpoint <640px === */

@media (max-width: 640px) {
    .ap-hamburger[b-awaf12iz59] {
        display: flex;
        order: 3;
    }

    .ap-header-nav[b-awaf12iz59] {
        display: none;
        position: absolute;
        top: 56px;
        left: 0;
        right: 0;
        flex-direction: column;
        background: var(--ap-bg-surface);
        border-bottom: 1px solid var(--ap-border-default);
        padding: var(--ap-space-2) 0;
        z-index: 100;
        gap: 0;
        box-shadow: var(--ap-shadow-md);
    }

    .ap-header-nav--open[b-awaf12iz59] {
        display: flex;
    }

    .ap-nav-link[b-awaf12iz59] {
        padding: var(--ap-space-3) var(--ap-space-4);
        min-height: 44px;
        display: flex;
        align-items: center;
        border-radius: 0;
    }

    .ap-nav-link:hover[b-awaf12iz59],
    .ap-nav-link:focus-visible[b-awaf12iz59] {
        background: var(--ap-primary-subtle);
    }

    /* F-09 mobile-horizontal-scroll fix (2026-05-12):
       at 375x812 the language switcher (2x 44px buttons + gap = 92px) plus the
       theme toggle (44px) plus the login button (~70px) plus the hamburger (44px)
       plus the app-switcher (60px) plus the logo (~110px) sums past the viewport
       and forces `.ap-header` to scrollWidth ~459px. WCAG 2.5.5 forbids shrinking
       the 44x44 touch targets, and `flex-wrap: wrap` would break the fixed 56px
       header height. The language switcher is the largest cluster that has a
       reasonable follow-up path (move into the hamburger dropdown) — hiding it
       here saves ~104px (including its gap) and brings `.ap-header` cleanly
       under 375px. Follow-up: surface the language toggle inside the mobile
       navigation dropdown (tracked in the fix folder's hardening note). */
    .ap-language-switcher[b-awaf12iz59] {
        display: none;
    }
}
/* /Components/Pages/Admin/Users.razor.rz.scp.css */
/* Admin/Users scoped styles */
.users-search-field[b-7be79762ks] {
    flex: 1;
    /* 220px: layout-specific minimum — search field must stay readable alongside the Clear button.
       No equivalent --ap-space-* token exists at this scale; documented as an accepted exception. */
    min-width: 220px;
}
/* /Components/Pages/AppLanding.razor.rz.scp.css */
/* === App hero: icon + content side-by-side === */

.ap-app-hero[b-54z889keta] {
    display: flex;
    gap: var(--ap-space-6);
    align-items: flex-start;
    padding: var(--ap-space-6) 0;
    border-bottom: 1px solid var(--ap-border-default);
    margin-bottom: var(--ap-space-6);
}

.ap-app-hero-icon[b-54z889keta] {
    width: 80px;
    height: 80px;
    min-width: 80px;
    border-radius: var(--ap-radius-md);
    background: var(--ap-border-default);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--ap-text-3xl);
    flex-shrink: 0;
}

.ap-app-hero-content[b-54z889keta] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--ap-space-3);
}

.ap-app-hero-desc[b-54z889keta] {
    font-size: var(--ap-text-base);
    color: var(--ap-text-secondary);
    margin: 0;
    line-height: 1.6;
}

.ap-app-meta[b-54z889keta] {
    display: flex;
    gap: var(--ap-space-2);
    flex-wrap: wrap;
    align-items: center;
}

/* === Features section === */

.ap-app-features[b-54z889keta] {
    margin-top: var(--ap-space-6);
}

.ap-feature-list[b-54z889keta] {
    list-style: none;
    padding: 0;
    margin: var(--ap-space-4) 0 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--ap-space-4);
}

.ap-feature-item[b-54z889keta] {
    display: flex;
    align-items: flex-start;
    gap: var(--ap-space-3);
    padding: var(--ap-space-3);
    background: var(--ap-bg-surface);
    border: 1px solid var(--ap-border-default);
    border-radius: var(--ap-radius-md);
}

.ap-feature-icon[b-54z889keta] {
    font-size: var(--ap-text-xl);
    line-height: 1;
    flex-shrink: 0;
    color: var(--ap-primary);
}

/* === Back navigation === */

.ap-back-nav[b-54z889keta] {
    margin-top: var(--ap-space-6);
    padding-top: var(--ap-space-4);
    border-top: 1px solid var(--ap-border-default);
}

/* === Responsive === */

@media (max-width: 640px) {
    .ap-app-hero[b-54z889keta] {
        flex-direction: column;
        gap: var(--ap-space-4);
    }

    .ap-app-hero-icon[b-54z889keta] {
        width: 64px;
        height: 64px;
        min-width: 64px;
    }

    .ap-feature-list[b-54z889keta] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/PlanManagement.razor.rz.scp.css */
/* === Plan management grid: horizontal Basic | Pro row, stacks below 640px === */

.plan-management-grid[b-v8w4uzxgp2] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--ap-space-6);
    margin-top: var(--ap-space-6);
    align-items: stretch;
}

/* === Plan card === */

.plan-card[b-v8w4uzxgp2] {
    display: flex;
    flex-direction: column;
    gap: var(--ap-space-4);
    background-color: var(--ap-bg-surface);
    border: 1px solid var(--ap-border-default);
    border-radius: var(--ap-radius-lg);
    padding: var(--ap-space-6);
    box-shadow: var(--ap-shadow-sm);
}

.plan-card--current[b-v8w4uzxgp2] {
    border-color: var(--ap-primary);
    box-shadow: var(--ap-shadow-md);
}

.plan-card-header[b-v8w4uzxgp2] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ap-space-3);
    flex-wrap: wrap;
}

.plan-card-title[b-v8w4uzxgp2] {
    margin: 0;
    font-size: var(--ap-text-2xl);
    color: var(--ap-text-primary);
}

.plan-card-badge[b-v8w4uzxgp2] {
    display: inline-flex;
    align-items: center;
    padding: var(--ap-space-1) var(--ap-space-3);
    border-radius: var(--ap-radius-full);
    background-color: var(--ap-primary-subtle);
    color: var(--ap-primary);
    font-size: var(--ap-text-sm);
    font-weight: 600;
    line-height: 1.4;
}

.plan-card-price[b-v8w4uzxgp2] {
    display: flex;
    flex-direction: column;
    gap: var(--ap-space-1);
    margin: 0;
}

.plan-card-price-value[b-v8w4uzxgp2] {
    font-size: var(--ap-text-3xl);
    font-weight: 600;
    color: var(--ap-text-primary);
    line-height: 1.2;
}

.plan-card-price-note[b-v8w4uzxgp2] {
    font-size: var(--ap-text-sm);
    color: var(--ap-text-secondary);
}

.plan-card-features[b-v8w4uzxgp2] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--ap-space-2);
    flex: 1;
}

.plan-card-feature[b-v8w4uzxgp2] {
    display: flex;
    align-items: flex-start;
    gap: var(--ap-space-2);
    color: var(--ap-text-primary);
    font-size: var(--ap-text-base);
    line-height: 1.5;
}

.plan-card-feature-icon[b-v8w4uzxgp2] {
    color: var(--ap-success);
    font-weight: 600;
    line-height: 1.5;
    flex-shrink: 0;
}

.plan-card-cta[b-v8w4uzxgp2] {
    margin-top: auto;
    padding-top: var(--ap-space-3);
}

/* Scoped Radzen overrides — wrapper ancestor required per ui-fidelity.md ::deep rule */
.plan-card-cta[b-v8w4uzxgp2]  .rz-button {
    width: 100%;
    min-height: 44px; /* 44x44 px touch target per blazor-ui.md §7 */
}

/* === Responsive: stack plan cards below 640 px per spec §2.3 === */

@media (max-width: 640px) {
    .plan-management-grid[b-v8w4uzxgp2] {
        grid-template-columns: 1fr;
        gap: var(--ap-space-4);
    }

    .plan-card[b-v8w4uzxgp2] {
        padding: var(--ap-space-4);
    }

    .plan-card-title[b-v8w4uzxgp2] {
        font-size: var(--ap-text-xl);
    }

    .plan-card-price-value[b-v8w4uzxgp2] {
        font-size: var(--ap-text-2xl);
    }
}
/* /Components/Pages/TourApp.razor.rz.scp.css */
/* === Tour progress section === */

.ap-tour-progress[b-50zgjbaxb2] {
    padding: var(--ap-space-4);
    background: var(--ap-bg-surface);
    border: 1px solid var(--ap-border-default);
    border-radius: var(--ap-radius-md);
    margin-bottom: var(--ap-space-4);
}

.ap-tour-step-counter[b-50zgjbaxb2] {
    font-size: var(--ap-text-sm);
    color: var(--ap-text-secondary);
    margin: 0;
    font-weight: 600;
}

/* === Tour action buttons === */

.ap-tour-actions[b-50zgjbaxb2] {
    display: flex;
    gap: var(--ap-space-3);
    flex-wrap: wrap;
    margin-top: var(--ap-space-4);
}

/* === Tour completed state === */

.ap-tour-completed[b-50zgjbaxb2] {
    padding: var(--ap-space-4);
    background: var(--ap-bg-surface);
    border: 1px solid var(--ap-border-default);
    border-radius: var(--ap-radius-md);
    margin-bottom: var(--ap-space-4);
}

.ap-tour-completed-message[b-50zgjbaxb2] {
    font-size: var(--ap-text-base);
    color: var(--ap-text-primary);
    margin: 0;
}

/* === Tour welcome / not-started state === */

.ap-tour-welcome[b-50zgjbaxb2] {
    padding: var(--ap-space-4);
    background: var(--ap-bg-surface);
    border: 1px solid var(--ap-border-default);
    border-radius: var(--ap-radius-md);
    margin-bottom: var(--ap-space-4);
}

.ap-tour-description[b-50zgjbaxb2] {
    font-size: var(--ap-text-base);
    color: var(--ap-text-secondary);
    margin: 0;
    line-height: 1.6;
}
/* /Components/Plans/PlanGateDialog.razor.rz.scp.css */
/* plan-tier-gating WI-06 — PlanGateDialog scoped styles.
   All values via design tokens per .claude/rules/ui-fidelity.md. The
   .plan-gate-dialog wrapper is mandatory for ::deep selectors to attach to
   an element this component owns (per the Blazor CSS-isolation rule). */

.plan-gate-dialog[b-y2sy8tknar] {
    display: flex;
    flex-direction: column;
    gap: var(--ap-space-4);
    padding: var(--ap-space-6);
    max-width: 420px;
    min-width: min(320px, 100%);
    background-color: var(--ap-bg-surface);
    color: var(--ap-text-primary);
    border-radius: var(--ap-radius-md);
}

.plan-gate-title[b-y2sy8tknar] {
    margin: 0;
    font-size: var(--ap-text-xl);
    font-weight: 600;
    line-height: 1.3;
    color: var(--ap-text-primary);
}

.plan-gate-body[b-y2sy8tknar] {
    margin: 0;
    font-size: var(--ap-text-base);
    line-height: 1.5;
    color: var(--ap-text-secondary);
}

.plan-gate-actions[b-y2sy8tknar] {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    gap: var(--ap-space-3);
    margin-top: var(--ap-space-2);
}

/* Mobile (< 640 px): stack the CTAs vertically with primary on top for
   thumb-reach on small viewports. Matches the page-spec mobile rule for
   action rows used across the platform. */
@media (max-width: 640px) {
    .plan-gate-actions[b-y2sy8tknar] {
        flex-direction: column-reverse;
    }

    .plan-gate-actions[b-y2sy8tknar]  .rz-button {
        width: 100%;
    }
}
/* /Components/Tour/TourNudge.razor.rz.scp.css */
.tour-nudge[b-x99ff4i3fm] {
    position: relative;
    background: var(--ap-bg-surface);
    border: 1px solid var(--ap-action-primary-bg);
    border-radius: var(--ap-radius-md);
    box-shadow: var(--ap-shadow-md);
    padding: var(--ap-space-3) var(--ap-space-4);
    max-width: 320px;
    display: flex;
    flex-direction: column;
    gap: var(--ap-space-2);
}

.tour-nudge__text[b-x99ff4i3fm] {
    font-size: var(--ap-text-sm);
    color: var(--ap-text-primary);
    margin: 0;
    line-height: 1.4;
}

.tour-nudge__actions[b-x99ff4i3fm] {
    display: flex;
    align-items: center;
    gap: var(--ap-space-2);
    justify-content: flex-end;
}
/* /Components/Tour/TourOverlay.razor.rz.scp.css */
.tour-overlay[b-r5je7id7kv] {
    position: fixed;
    inset: 0;
    z-index: var(--ap-tour-z-spotlight, 10000);
}

.tour-exit-confirm[b-r5je7id7kv] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: var(--ap-tour-z-popover, 10001);
    background: var(--ap-bg-surface);
    border: 1px solid var(--ap-border-default);
    border-radius: var(--ap-radius-md);
    box-shadow: var(--ap-shadow-md);
    padding: var(--ap-space-6);
    max-width: 400px;
    width: 90vw;
    display: flex;
    flex-direction: column;
    gap: var(--ap-space-3);
}

.tour-exit-confirm__title[b-r5je7id7kv] {
    font-size: var(--ap-text-lg);
    font-weight: 600;
    color: var(--ap-text-primary);
    margin: 0;
}

.tour-exit-confirm__body[b-r5je7id7kv] {
    font-size: var(--ap-text-sm);
    color: var(--ap-text-secondary);
    margin: 0;
}

.tour-exit-confirm__actions[b-r5je7id7kv] {
    display: flex;
    gap: var(--ap-space-2);
    justify-content: flex-end;
    flex-wrap: wrap;
}
/* /Components/Tour/TourPopover.razor.rz.scp.css */
.tour-popover[b-e6fwm7yugj] {
    position: fixed;
    z-index: var(--ap-tour-z-popover, 10001);
    max-width: var(--ap-tour-popover-max-width, 340px);
    width: max-content;
    background: var(--ap-bg-surface);
    border: 1px solid var(--ap-border-default);
    border-radius: var(--ap-radius-md);
    box-shadow: var(--ap-shadow-md);
    display: flex;
    flex-direction: column;
    gap: var(--ap-space-3);
    padding: var(--ap-space-4);
}

.tour-popover__header[b-e6fwm7yugj] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--ap-space-2);
}

.tour-popover__title[b-e6fwm7yugj] {
    font-weight: 600;
    font-size: var(--ap-text-base);
    color: var(--ap-text-primary);
    flex: 1;
}

.tour-popover__exit-btn[b-e6fwm7yugj] {
    flex-shrink: 0;
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--ap-text-secondary);
    font-size: var(--ap-text-base);
    line-height: 1;
    padding: var(--ap-space-1);
    border-radius: var(--ap-radius-sm);
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color var(--ap-motion-duration-fast) var(--ap-motion-ease-standard);
}

.tour-popover__exit-btn:hover[b-e6fwm7yugj] {
    background: var(--ap-border-default);
    color: var(--ap-text-primary);
}

.tour-popover__exit-btn:focus-visible[b-e6fwm7yugj] {
    outline: var(--ap-focus-ring-width) solid var(--ap-focus-ring-color);
    outline-offset: var(--ap-focus-ring-offset);
}

.tour-popover__body[b-e6fwm7yugj] {
    flex: 1;
}

.tour-popover__body-text[b-e6fwm7yugj] {
    margin: 0;
    font-size: var(--ap-text-sm);
    color: var(--ap-text-primary);
    line-height: 1.5;
}

.tour-popover__footer[b-e6fwm7yugj] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ap-space-2);
    flex-wrap: wrap;
}

.tour-popover__counter[b-e6fwm7yugj] {
    font-size: var(--ap-text-xs);
    color: var(--ap-text-secondary);
    white-space: nowrap;
}

.tour-popover__nav[b-e6fwm7yugj] {
    display: flex;
    gap: var(--ap-space-2);
    align-items: center;
}
/* /Components/Tour/TourSpotlight.razor.rz.scp.css */
.tour-spotlight[b-jehubyggoo] {
    position: fixed;
    inset: 0;
    z-index: var(--ap-tour-z-spotlight, 10000);
    pointer-events: none;
    width: 100vw;
    height: 100vh;
}

.tour-spotlight .spotlight-rect--transitioning[b-jehubyggoo] {
    transition: x var(--ap-tour-spotlight-transition, 200ms ease),
                y var(--ap-tour-spotlight-transition, 200ms ease),
                width var(--ap-tour-spotlight-transition, 200ms ease),
                height var(--ap-tour-spotlight-transition, 200ms ease);
}