/* /Components/Pages/Dashboard.razor.rz.scp.css */
/* The dashboard ("John 1" concept) styling lives in wwwroot/app.css under the
   .j1-root namespace — it must be a global stylesheet because the service/status
   icons are injected as inline-SVG MarkupString, which Blazor CSS isolation does
   not tag with the scope attribute. Keeping the rules global lets them style both
   the Razor-rendered elements and the runtime SVG markup. */
/* /Components/Pages/Portal.razor.rz.scp.css */
/* Pre-sign-in portal landing — mirrors the UnifiedPortal landing layout
   (gradient hero card + feature cards) but wears the WorldCareMD brand. */

.portal-wrap[b-11bi24n3mi] {
    padding-top: 3rem;
    padding-bottom: 4rem;
}

.portal-hero[b-11bi24n3mi] {
    background: var(--brand-hero);
    color: #fff;
    border-radius: var(--brand-radius);
    padding: 3.25rem 2.75rem;
    box-shadow: var(--brand-shadow-lg);
}

.portal-eyebrow[b-11bi24n3mi] {
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: .12em;
    font-size: .75rem;
    font-weight: 700;
    color: rgba(255, 255, 255, .85);
    margin-bottom: .9rem;
}

.portal-hero h1[b-11bi24n3mi] {
    color: #fff;
    font-size: clamp(1.9rem, 4vw, 2.8rem);
    margin: 0 0 .85rem;
    line-height: 1.15;
}

.portal-hero h1 .brandword[b-11bi24n3mi] {
    font-family: var(--brand-display);
    background: linear-gradient(90deg, #ffffff 0%, #cfe0ff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.portal-lede[b-11bi24n3mi] {
    max-width: 40rem;
    font-size: 1.05rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, .9);
    margin: 0 0 1.9rem;
}

.portal-actions[b-11bi24n3mi] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1.1rem;
}

.portal-status[b-11bi24n3mi] {
    font-size: .9rem;
    color: rgba(255, 255, 255, .8);
}

.portal-status-ok[b-11bi24n3mi]::before {
    content: "\2713\00a0";
    color: #9ec3ff;
    font-weight: 700;
}

.portal-cards[b-11bi24n3mi] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 1.5rem;
    margin-top: 2rem;
}

.portal-card[b-11bi24n3mi] {
    transition: transform .15s ease, box-shadow .15s ease;
}

.portal-card:hover[b-11bi24n3mi] {
    transform: translateY(-3px);
    box-shadow: var(--brand-shadow-lg);
}

.portal-icon[b-11bi24n3mi] {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: var(--brand-gradient);
    color: #fff;
    font-size: 1.4rem;
    margin-bottom: 1rem;
}

.portal-card h3[b-11bi24n3mi] {
    margin: 0 0 .45rem;
    font-size: 1.2rem;
}

.portal-card p[b-11bi24n3mi] {
    margin: 0;
    color: var(--brand-muted);
    font-size: .95rem;
    line-height: 1.55;
}

@media (max-width: 560px) {
    .portal-hero[b-11bi24n3mi] { padding: 2.25rem 1.5rem; }
}
/* /Components/Pages/Register.razor.rz.scp.css */
/* Verify-first registration — polished card on the WorldCare brand system. */

/* Full-page backdrop so the card sits on a soft brand wash, not bare white. */
.register-page[b-mx9xsiznma] {
    /* Primary palette pushed to match the dashboard — dark purple (#33379a) + hero
       blue (#095fd6), sampled from the marketing hero. Overriding the brand vars here
       cascades the new colors through the whole card by DOM inheritance, including the
       globally-styled .btn-primary buttons and the gradient accents/step dots. */
    --brand-gradient: linear-gradient(90deg, #33379a 0%, #095fd6 100%);
    --brand-blue: #095fd6;
    --brand-blue-dark: #084ab5;
    --brand-violet: #33379a;

    min-height: calc(100vh - 140px);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 3rem 1.25rem 4rem;
    background:
        radial-gradient(1100px 380px at 50% -8%, rgba(9, 95, 214, .10), transparent 62%),
        var(--brand-bg-soft);
}

.register-card[b-mx9xsiznma] {
    position: relative;
    width: 100%;
    max-width: 460px;
    background: var(--brand-surface);
    border: 1px solid var(--brand-line);
    border-radius: var(--brand-radius);
    box-shadow: var(--brand-shadow-lg);
    padding: 2.5rem 2.25rem;
    text-align: center;
    overflow: hidden;
}

/* Brand gradient accent strip across the top edge. */
.register-card[b-mx9xsiznma]::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 5px;
    background: var(--brand-gradient);
}

.register-logo[b-mx9xsiznma] {
    height: 46px;
    width: auto;
    margin: .25rem auto 1.5rem;
}

.register-card h1[b-mx9xsiznma] {
    font-size: 1.55rem;
    margin: 0 0 .5rem;
}

.register-intro[b-mx9xsiznma] {
    color: var(--brand-muted);
    font-size: .95rem;
    line-height: 1.55;
    margin: 0 0 1.75rem;
}

/* Step indicator ------------------------------------------------------------ */
.stepper[b-mx9xsiznma] {
    list-style: none;
    display: flex;
    align-items: flex-start;
    margin: 0 0 1.9rem;
    padding: 0;
}

.stepper .step[b-mx9xsiznma] {
    position: relative;
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .45rem;
    font-size: .72rem;
    font-weight: 600;
    color: var(--brand-muted);
}

/* Connector line reaching back to the previous dot. */
.stepper .step:not(:first-child)[b-mx9xsiznma]::before {
    content: "";
    position: absolute;
    top: 13px;
    left: -50%;
    right: 50%;
    height: 2px;
    background: var(--brand-line);
    z-index: 0;
}

.stepper .step.active:not(:first-child)[b-mx9xsiznma]::before,
.stepper .step.done:not(:first-child)[b-mx9xsiznma]::before {
    background: var(--brand-green);
}

.step-dot[b-mx9xsiznma] {
    position: relative;
    z-index: 1;
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--brand-line);
    color: var(--brand-muted);
    font-size: .8rem;
    font-weight: 700;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}

.step.active .step-dot[b-mx9xsiznma] {
    border-color: transparent;
    background: var(--brand-gradient);
    color: #fff;
    box-shadow: 0 4px 12px rgba(9, 95, 214, .35);
}

.step.done .step-dot[b-mx9xsiznma] {
    border-color: var(--brand-green);
    background: var(--brand-green);
    color: #fff;
}

.step.active .step-label[b-mx9xsiznma],
.step.done .step-label[b-mx9xsiznma] {
    color: var(--brand-ink);
}

/* Form ---------------------------------------------------------------------- */
.register-form[b-mx9xsiznma] {
    text-align: left;
    display: flex;
    flex-direction: column;
}

/* Inter-field spacing lives on .field, NOT on .register-form's gap: EditForm is a
   child component, so Blazor doesn't stamp the CSS-isolation attribute on its <form>
   root — any rule targeting .register-form itself silently fails to match. The .field
   divs are authored here and are scoped, so their margin reliably applies. The roomy
   bottom margin gives each label+box its own breathing room instead of an
   undifferentiated stack of identical boxes. */
.field[b-mx9xsiznma] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .4rem;
    margin-bottom: 1.5rem;
}

.field label[b-mx9xsiznma] {
    text-align: left;
    font-size: .82rem;
    font-weight: 600;
    color: var(--brand-ink);
}

.field-hint[b-mx9xsiznma] {
    text-align: left;
    font-size: .75rem;
    line-height: 1.35;
    color: #6b7280;
}

/* Inputs are rendered by child components (InputText/InputDate), so reach them
   with ::deep rather than the scoped attribute selector. */
.field[b-mx9xsiznma]  input {
    width: 100%;
    box-sizing: border-box;
    padding: .7rem .85rem;
    /* Strong near-black border at rest — no halo until focus. */
    border: 1px solid var(--brand-ink);
    border-radius: var(--brand-radius-sm);
    font: inherit;
    font-size: .95rem;
    color: var(--brand-ink);
    background: #fff;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.field[b-mx9xsiznma]  input:focus {
    outline: none;
    border-color: var(--brand-ink);
    box-shadow: 0 0 0 3px rgba(9, 95, 214, .18);
}

/* Date of birth: hide the native calendar button — it's an extra tab stop — and
   supply our own tabindex=-1 trigger (see Register.razor) so Tab jumps straight to
   the next field instead of the picker. */
.field[b-mx9xsiznma]  input[type="date"]::-webkit-calendar-picker-indicator { display: none; }

.date-field[b-mx9xsiznma] { position: relative; display: block; }
.date-field[b-mx9xsiznma]  input { padding-right: 2.4rem; }
.date-field .date-open[b-mx9xsiznma] {
    position: absolute; top: 50%; right: .55rem; transform: translateY(-50%);
    display: grid; place-items: center; width: 1.7rem; height: 1.7rem;
    background: none; border: 0; padding: 0; cursor: pointer;
    color: var(--brand-muted); font-size: 1rem; line-height: 1;
    transition: color .15s ease;
}
.date-field .date-open:hover[b-mx9xsiznma] { color: var(--brand-ink); }

.field[b-mx9xsiznma]  .validation-message {
    color: #b3261e;
    font-size: .8rem;
}

.register-form .btn-primary[b-mx9xsiznma] {
    width: 100%;
    margin-top: .6rem;
}

/* Form-level error — below the controls, above the submit button. */
.form-error[b-mx9xsiznma] {
    margin: 0;
    padding: .7rem .85rem;
    background: #fdeaea;
    border: 1px solid #f3c2c2;
    border-radius: var(--brand-radius-sm);
    color: #b3261e;
    font-size: .88rem;
    line-height: 1.45;
    white-space: pre-line;
}

/* Non-error status line (e.g. "we've sent a new code"). */
.form-notice[b-mx9xsiznma] {
    margin: 0 0 1.25rem;
    padding: .7rem .85rem;
    background: var(--brand-bg-soft);
    border: 1px solid var(--brand-blue);
    border-radius: var(--brand-radius-sm);
    color: var(--brand-blue-dark);
    font-size: .88rem;
    line-height: 1.45;
}

/* Channel chooser — each on-file option is a selectable card. */
.channel-options[b-mx9xsiznma] {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    text-align: left;
}

.channel-option[b-mx9xsiznma] {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .85rem 1rem;
    border: 1px solid var(--brand-line);
    border-radius: var(--brand-radius-sm);
    cursor: pointer;
    font-size: .95rem;
    color: var(--brand-ink);
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

.channel-option:hover[b-mx9xsiznma] {
    border-color: var(--brand-blue);
    background: var(--brand-bg-soft);
}

.channel-option:has(input:checked)[b-mx9xsiznma] {
    border-color: var(--brand-blue);
    box-shadow: 0 0 0 3px rgba(9, 95, 214, .15);
}

.channel-option input[b-mx9xsiznma] {
    accent-color: var(--brand-blue);
}

/* Resend sits under the verify button as a quiet, link-styled action. */
.resend-form[b-mx9xsiznma] {
    margin-top: 1rem;
    text-align: center;
}

.btn-link[b-mx9xsiznma] {
    background: none;
    border: none;
    padding: 0;
    color: var(--brand-blue-dark);
    font: inherit;
    font-size: .88rem;
    cursor: pointer;
    text-decoration: underline;
}

.btn-link:hover[b-mx9xsiznma] {
    color: var(--brand-blue);
}

/* "Already have an account? Sign in" — quiet line under the details form. */
.register-alt[b-mx9xsiznma] {
    margin: 1.5rem 0 0;
    font-size: .88rem;
    color: var(--brand-muted);
}

.register-alt a[b-mx9xsiznma] {
    color: var(--brand-blue-dark);
    font-weight: 600;
    text-decoration: none;
}

.register-alt a:hover[b-mx9xsiznma] {
    text-decoration: underline;
}

/* Success (Done) step ------------------------------------------------------- */
.register-success-icon[b-mx9xsiznma] {
    font-size: 3.25rem;
    line-height: 1;
    margin: .5rem 0 1rem;
    color: var(--brand-green);
}
/* /Components/Pages/SignedOut.razor.rz.scp.css */
.signed-out[b-l6vr8aqf76] {
    max-width: 420px;
    margin: 4rem auto;
    text-align: center;
    background: var(--brand-surface);
    border: 1px solid var(--brand-line);
    border-radius: var(--brand-radius);
    box-shadow: var(--brand-shadow);
    padding: 2.5rem 2rem;
}

.signed-out-check[b-l6vr8aqf76] {
    width: 56px;
    height: 56px;
    margin: 0 auto 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    color: #fff;
    background: #1f7a4d;
    border-radius: 50%;
}

.signed-out h1[b-l6vr8aqf76] {
    font-size: 1.5rem;
    margin: 0 0 .75rem;
}

.signed-out p[b-l6vr8aqf76] {
    color: var(--brand-muted);
    margin: 0 0 1.5rem;
}