/* /welcome landing page (Phase 4 of Simplified Signup and Trial Lockdown).
   Mirrors signup.css palette so the post-signup hand-off feels seamless.
   Card widens to a friendly hero on tablet+ and stays comfortable on phones.

   The /welcome page now has TWO layouts:

   - Hero view (default): trial chip + welcome copy + primary CTA. Card is
     compact (560px), text-centred.

   - Form view (after the user clicks "Set up your first practice"): the
     same card stays in place but its content swaps to <AddPracticePanel>.
     The card widens to 640px so the practice-name + practice-software
     side-by-side row has breathing room, and the chip + title stay centred
     while the form fields go left-aligned (where labels and field icons
     read most cleanly).

   The form panel itself is shared with AddPracticeDialog (the modal used
   from AccountSettings → Practices). Its styling lives in the
   `.add-practice-panel*` rules below so both hosts get identical typography,
   eyebrow, tab strip, action buttons, and field icons. The dialog adds a
   thin chrome layer on top via the `.add-practice-dialog*` rules. */

.welcome-container {
    /* Local indigo aliases resolve to the global tokens in _tokens.css.
       See login.css for the full rationale on the indirection layer. */
    --welcome-indigo: var(--gpc-indigo);
    --welcome-indigo-soft: var(--gpc-indigo-soft);
    --welcome-indigo-line: var(--gpc-indigo-line);
    --welcome-text: var(--gpc-text);
    --welcome-text-muted: var(--gpc-text-muted);
    /* Vertically centre the welcome card in the visible viewport. The
       LoggedInLayout's MudAppBar adds 64px of fixed header above MudMainContent,
       so we subtract that here — without it the flex container extends past the
       viewport and the visual centre falls below the perceived centre. `safe
       center` falls back to flex-start when the card is taller than the
       viewport, preventing the top from clipping offscreen on short windows. */
    display: flex;
    flex-direction: column;
    align-items: safe center;
    justify-content: safe center;
    min-height: calc(100vh - 64px);
    padding-top: 16px;
    padding-bottom: 16px;
}

.welcome-card-wrap {
    width: 100%;
    max-width: 560px;
    transition: max-width 220ms ease;
}

/* Form-view modifier — widens the card so the practice-name +
   practice-software row has comfortable breathing room (560px would
   crush both fields). Animates so the swap reads as a smooth morph
   rather than a jump-cut. */
.welcome-card-wrap--form {
    max-width: 640px;
}

.welcome-card {
    background: rgba(255, 255, 255, 0.96);
    border-radius: 14px;
    border-top: 4px solid var(--welcome-indigo);
    padding: 28px 24px 20px;
    box-shadow: 0 8px 30px rgba(59, 63, 122, 0.10);
    text-align: center;
}

/* Form-view tweaks for the host card: the header (chip + title +
   subtitle) stays centred — those have their own centred classes — but
   the embedded form needs left-aligned labels / icons / action row, so
   we explicitly align-left the panel and let the per-element rules
   above keep the header sections centred. */
.welcome-card--form {
    text-align: left;
    padding: 24px 24px 18px;
}

.welcome-card--form .welcome-trial-chip,
.welcome-card--form .welcome-title,
.welcome-card--form .welcome-subtitle {
    text-align: center;
}

.welcome-card--form .welcome-trial-chip {
    display: inline-flex;
    margin-left: auto;
    margin-right: auto;
}

/* The subtitle in form mode is shorter and acts as a secondary line
   under the title — give it a tighter bottom margin so the form's first
   field sits closer to the title block. */
.welcome-card--form .welcome-subtitle {
    margin-bottom: 14px;
}

/* In form mode the "trial active" chip is just a brand anchor — we keep
   the same pill but centre it within the now-left-aligned card. */
.welcome-card--form .welcome-trial-chip {
    align-self: center;
}

/* Title block in form mode: keep the welcome-card's overall padding but
   use a flex column so the centred header (chip + title + subtitle) and
   the left-aligned form sit naturally one under the other. */
.welcome-card--form > .welcome-title,
.welcome-card--form > .welcome-subtitle {
    display: block;
}

.welcome-trial-chip {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: 999px;
    background: var(--welcome-indigo-soft);
    color: var(--welcome-indigo);
    font-weight: 600;
    font-size: 0.8rem;
    margin-bottom: 16px;
}

.welcome-title {
    font-weight: 700;
    color: var(--welcome-indigo);
    letter-spacing: 0.01em;
    margin-bottom: 10px;
}

.welcome-subtitle {
    color: var(--welcome-text-muted);
    line-height: 1.6;
    margin-bottom: 24px;
}

.welcome-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 18px;
}

.welcome-footer-note {
    color: var(--welcome-text-muted);
    display: block;
}

/* ── AddPracticePanel ─────────────────────────────────────────────────
   The form body (eyebrow + tabs + create/join forms + action row). Used
   both inline inside the welcome card AND inside the AddPracticeDialog
   modal — keep all visual rules HERE so the two hosts stay in lockstep.
   Token block duplicates signup.css's --signup-* deliberately so the
   panel doesn't have to import another stylesheet. */
.add-practice-panel {
    /* Local indigo aliases resolve to the global tokens in css/_tokens.css.
       Duplicate-but-aligned with the same block in shared/adapter-dialogs.css
       so AddPracticePanel renders identically inside the /welcome card host
       AND inside the AddPracticeDialog modal host. Both blocks now resolve
       to the same global tokens, so a future palette change in _tokens.css
       flows through both surfaces without divergence. */
    --apd-indigo: var(--gpc-indigo);
    --apd-indigo-soft: var(--gpc-indigo-soft);
    --apd-indigo-line: var(--gpc-indigo-line);
    --apd-text: var(--gpc-text);
    --apd-text-muted: var(--gpc-text-muted);
}

/* Inline-host modifier — used by /welcome where the host card already
   provides padding and a frame. Removes the panel's own padding / extra
   margin so it doesn't double-pad inside the welcome card. */
.add-practice-panel--inline {
    padding: 0;
    margin: 0;
}

/* Eyebrow strip (dialog-host only — the welcome host suppresses it via
   ShowEyebrow=false because the welcome card's own trial chip already
   anchors the brand context). One-line context chip echoing the signup
   page's "7-day free trial · No credit card required". */
.add-practice-panel__eyebrow {
    display: block;
    width: 100%;
    background: var(--apd-indigo-soft);
    color: var(--apd-indigo);
    text-align: center;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 8px 14px;
    margin: 4px 0 12px;
    border-radius: 999px;
    line-height: 1.3;
    border: 1px solid var(--apd-indigo-line);
}

.add-practice-panel__tabpanel {
    padding-top: 8px;
}

/* Single source of truth for typography inside the panel — every
   interactive control (text input, select trigger, popover items, action
   buttons) is normalised to 0.875rem so the form scans as one consistent
   typographic set. Shotgun selectors mirror the ones in signup.css for
   the same reason: MudBlazor renders different underlying elements per
   control type (input, masked input, select trigger). */
.add-practice-panel .mud-input-control input,
.add-practice-panel .mud-input-control input::placeholder,
.add-practice-panel .mud-input-slot,
.add-practice-panel .mud-input-slot input,
.add-practice-panel .mud-input-slot input::placeholder,
.add-practice-panel .mud-input-input,
.add-practice-panel .mud-input-root,
.add-practice-panel .mud-input > input,
.add-practice-panel .mud-select .mud-input-slot,
.add-practice-panel .mud-select .mud-select-input,
.add-practice-panel .mud-select-input,
.add-practice-panel .add-practice-panel__cancel,
.add-practice-panel .add-practice-panel__submit {
    font-size: 0.875rem !important;
    line-height: 1.5 !important;
}

.add-practice-panel__popover .mud-list-item,
.add-practice-panel__popover .mud-list-item-text {
    font-size: 0.875rem !important;
}

.add-practice-panel__sitecode input {
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-family: 'JetBrains Mono', 'Consolas', 'SFMono-Regular', monospace;
    font-weight: 600;
}

.add-practice-panel__hint {
    color: var(--apd-text-muted);
    font-size: 0.875rem;
    line-height: 1.5;
}

.add-practice-panel__tab {
    text-transform: none;
    font-weight: 500;
    color: var(--apd-text-muted);
    min-width: 0;
    padding: 8px 16px;
}

.add-practice-panel__tab.mud-tab-active {
    color: var(--apd-indigo);
    font-weight: 600;
}

/* Action row — always right-aligned with a gap between Cancel + primary.
   Sitting inside the panel rather than the dialog's <DialogActions> means
   we get the same row shape in both hosts (the inline /welcome host has
   no <DialogActions>). Top border keeps the row visually separated from
   the form fields above without needing a heavy MudDivider. */
.add-practice-panel__actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 18px;
    padding-top: 12px;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.add-practice-panel__cancel {
    color: var(--apd-text-muted);
    font-weight: 500;
    text-transform: none;
}

.add-practice-panel__submit {
    text-transform: none;
}

/* ── AddPracticeDialog (modal wrapper) ────────────────────────────────
   The dialog still adds a thin chrome layer over the panel: indigo
   border-top accent on the paper + the title row + the body-padding
   override that stops MudBlazor from shifting the host card sideways
   when the modal opens. */
.add-practice-dialog .mud-dialog {
    border-top: 4px solid #3B3F7A;
    border-radius: 14px;
    overflow: hidden;
}

.add-practice-dialog__title-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: #3B3F7A;
}

/* Prevent MudBlazor from compensating for the disappearing scrollbar by
   adding `padding-right` / `overflow: hidden` to <body> when the dialog
   opens — that's what shifts the welcome card visibly to the left when
   the AddPracticeDialog appears (item B.1). The card stays anchored in
   the same position before / during / after dialog open. */
body.mud-dialog-open {
    padding-right: 0 !important;
    overflow: auto !important;
}

@media (max-width: 600px) {
    .welcome-card {
        border-radius: 10px;
        padding: 22px 18px 16px;
    }

    .welcome-card-wrap--form {
        max-width: 100%;
    }

    .add-practice-dialog .mud-dialog {
        border-radius: 10px;
    }

    .add-practice-panel__eyebrow {
        font-size: 0.65rem;
        letter-spacing: 0.1em;
        padding: 6px 10px;
    }
}

/* Phone — small phones (≤480px). Tighter card padding so a 360px
   viewport with two 16px container gutters still leaves the form
   fields a comfortable inner width. The AddPracticePanel tab strip
   gets a smaller font so its three tabs don't overflow the card. */
@media (max-width: 480px) {
    .welcome-card {
        padding: 18px 14px 14px;
    }

    .add-practice-panel__tab {
        font-size: 0.78rem !important;
    }

    .add-practice-panel__actions {
        flex-direction: column-reverse;
        align-items: stretch;
        gap: 6px;
    }

    .add-practice-panel__cancel,
    .add-practice-panel__submit {
        width: 100%;
    }
}