@import 'TV.BlazorApp.Client.12qhf57o28.bundle.scp.css';
@import '_content/Blazored.Modal/Blazored.Modal.bundle.scp.css';
@import '_content/CCTC_Components/CCTC_Components.ie52uq2yre.bundle.scp.css';

/* /Components/Account/Pages/ExternalLogin.razor.rz.scp.css */
/* ExternalLogin has no page-specific styles: the shared dark shell and the CCTC-<Button> submit
   (.tv-login__submit) both live in the global wwwroot/css/account-shell.css (via AccountShell.razor).
   This file is intentionally empty. */
/* /Components/Account/Pages/Login.razor.rz.scp.css */
/* Login — page-specific isolated styles ONLY. The shared dark shell (brand aside, layout, panel,
   form fields, inputs, status, badge) AND the cross-page primitives that the Login page renders via
   child components — the CCTC-<Button> submit (`.tv-login__submit*`) and the external-SSO picker
   (`.tv-login__sso*`) — live in the global wwwroot/css/account-shell.css. They must be global, not
   isolated here: those elements are emitted by child components inside the page's `AccountShell`
   ChildContent, so an isolated rule anchored on `.tv-login` (which `AccountShell`, not Login, renders)
   would no longer match. This file keeps only the sign-in/register tabs, which Login renders directly. */

/* tabs (server-rendered links, not JS tabs) */
.tv-login__tabs[b-vwy0c2fkh2] {
    display: flex;
    /* At a raised browser default font the two tabs cannot share a line on a narrow
       viewport; without wrapping they overflow and the page scrolls horizontally
       (WCAG 1.4.4 / 1.4.10). Wrapping stacks them full-width instead. */
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.3125rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--tv-rule);
    border-radius: 0.625rem;
}

.tv-login__tab[b-vwy0c2fkh2] {
    flex: 1;
    /* flex:1 sets flex-basis:0 but min-width still defaults to auto, so the tab
       cannot shrink below its label's min-content — the wrap above only helps once
       this is released. */
    min-width: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 2.75rem;
    padding: 0.5rem 1rem;
    border-radius: 0.4375rem;
    color: var(--tv-muted);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9375rem;
}

.tv-login__tab.is-active[b-vwy0c2fkh2] {
    background: var(--tv-accent);
    color: #00121d;
}

.tv-login__tab-num[b-vwy0c2fkh2] {
    font-family: var(--bs-font-monospace, monospace);
    font-size: 0.75rem;
}

.tv-login__tab:focus-visible[b-vwy0c2fkh2] {
    outline: 3px solid var(--cctc-focus-color);
    outline-offset: 2px;
}

@media (forced-colors: active) {
    .tv-login__tab[b-vwy0c2fkh2] {
        border: 1px solid ButtonBorder;
    }

    .tv-login__tab.is-active[b-vwy0c2fkh2] {
        outline: 2px solid Highlight;
    }
}