/* Adapter-related shared dialogs.

   Three siblings, all consistent with signup.css / welcome.css /
   AddPracticePanel:

     - .practice-created-dialog        — post-create "next steps" prompt
     - .adapter-instructions-dialog    — full installation instructions
     - .adapter-email-dialog           — email-collect for instructions

   Each gets the same indigo top-accent + rounded paper, the same
   eyebrow strip, and the same SiteCode "verifier" treatment so the user
   recognises the verifier code anywhere it appears. */

.practice-created-dialog,
.adapter-instructions-dialog,
.adapter-email-dialog {
    /* Local indigo aliases resolve to the global tokens in css/_tokens.css.
       See pages/login.css for the full rationale on the indirection layer. */
    --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);
}

/* Indigo top accent stripe matches the signup card's `border-top: 4px
   solid var(--signup-indigo)` so the dialog reads as part of the same
   visual family. !important + multiple selectors win over MudBlazor's
   default `.mud-paper` / `.mud-dialog` border rules which otherwise
   eat the stripe. */
.practice-created-dialog .mud-dialog,
.adapter-instructions-dialog .mud-dialog,
.adapter-email-dialog .mud-dialog,
.practice-created-dialog.mud-dialog,
.adapter-instructions-dialog.mud-dialog,
.adapter-email-dialog.mud-dialog {
    border-top: 4px solid var(--apd-indigo) !important;
    border-radius: 14px !important;
    overflow: hidden;
}

.practice-created-dialog__title-row,
.adapter-instructions-dialog__title-row,
.adapter-email-dialog__title-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: var(--apd-indigo);
}

/* Hidden a11y title — the visible title lives inside DialogContent so we
   can centre it under the success icon (signup-style layout), but
   MudDialog's TitleContent slot is also where screen readers expect to
   find the dialog name. We keep the text in the DOM but visually
   collapse it to zero. */
.practice-created-dialog__a11y-title {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.practice-created-dialog .mud-dialog-title {
    padding: 0 !important;
    min-height: 0 !important;
}

/* ── Centred header (icon + title + eyebrow) ──────────────────────────
   Mirrors signup-card's header rhythm: success affordance on top, big
   indigo title under it, full-width eyebrow pill below as a status
   banner. Using the same vertical scale (0.875rem body, h5 title,
   pill eyebrow) so the dialog reads as part of the same family. */
.practice-created-dialog__header {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-bottom: 18px;
}

.practice-created-dialog__check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(46, 160, 67, 0.12);
    margin-bottom: 12px;
}

.practice-created-dialog__check .mud-icon-root {
    color: #2ea043 !important;
    font-size: 1.75rem !important;
}

.practice-created-dialog__title {
    font-weight: 700 !important;
    color: var(--apd-indigo) !important;
    letter-spacing: 0.01em !important;
    margin-bottom: 14px !important;
    text-align: center;
}

/* Eyebrow strip — full-width pill matching signup-eyebrow. */
.practice-created-dialog__eyebrow,
.adapter-instructions-dialog__eyebrow,
.adapter-email-dialog__eyebrow {
    display: block;
    width: 100%;
    background: var(--apd-indigo-soft);
    color: var(--apd-indigo);
    text-align: center;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 12px 20px;
    margin: 0;
    border-radius: 999px;
    line-height: 1.3;
    border: 1px solid var(--apd-indigo-line);
}

/* Outside the centred header (used by the other adapter dialogs that
   keep MudBlazor's default left-aligned title) the eyebrow needs its
   own vertical breathing room from the title above and content below. */
.adapter-instructions-dialog__eyebrow,
.adapter-email-dialog__eyebrow {
    margin: 4px 0 16px;
}

/* ── Site Code "verifier" panel ───────────────────────────────────────
   Highlighted block that surfaces the 6-character SiteCode with a key
   icon + monospace value. Used in BOTH the post-create prompt AND the
   install-instructions dialog so the user gets used to seeing the
   verifier presented in this style — recognising it later when the IT
   admin asks "what was that code?". */
.practice-created-dialog__verifier,
.adapter-instructions-dialog__verifier {
    background: var(--apd-indigo-soft);
    border: 1px solid var(--apd-indigo-line);
    border-radius: 10px;
    padding: 12px 16px;
    margin: 8px 0 16px;
    text-align: center;
}

.practice-created-dialog__verifier-label,
.adapter-instructions-dialog__verifier-label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: var(--apd-indigo);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 6px;
}

.practice-created-dialog__verifier-value,
.adapter-instructions-dialog__verifier-value {
    font-family: 'JetBrains Mono', 'Consolas', 'SFMono-Regular', monospace;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--apd-text);
    letter-spacing: 0.18em;
    line-height: 1.2;
    text-align: center;
}

.adapter-instructions-dialog__verifier-value-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.practice-created-dialog__verifier-hint,
.adapter-instructions-dialog__verifier-hint {
    color: var(--apd-text-muted);
    font-size: 0.78rem;
    margin-top: 6px;
    line-height: 1.45;
}

/* ── Post-create "next steps" dialog specifics ───────────────────────── */
/* Centred lede beneath the eyebrow — same width and rhythm as signup's
   "Already have an account? Sign in" line so the two screens feel
   tonally identical. */
.practice-created-dialog__lede {
    color: var(--apd-text);
    line-height: 1.55;
    margin: 18px 0 16px;
    text-align: center;
    font-size: 0.95rem !important;
}

/* Small uppercase section label — mirrors signup's `.signup-section-label`
   pattern (semibold body, tight letter-spacing) so each block of the
   dialog reads with the same hierarchy as a signup form section. */
.practice-created-dialog__section-title {
    color: var(--apd-text);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 0.72rem;
    margin: 18px 0 10px;
    text-align: center;
}

/* Three clickable action chips arranged in a responsive grid. Each
   chip is a plain <button> styled as a tile (not a MudButton) because
   we want a multi-line content layout (icon + title + sub-line) which
   MudButton doesn't accommodate cleanly. */
.practice-created-dialog__actions-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 18px;
}

.practice-created-dialog__action-chip {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
    padding: 16px 12px 14px;
    background: #ffffff;
    border: 1px solid var(--apd-indigo-line);
    border-radius: 12px;
    cursor: pointer;
    transition: border-color 120ms ease, background 120ms ease, transform 120ms ease, box-shadow 120ms ease;
    font: inherit;
    color: inherit;
    min-height: 110px;
}

.practice-created-dialog__action-chip:hover {
    border-color: var(--apd-indigo);
    background: var(--apd-indigo-soft);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(59, 63, 122, 0.12);
}

.practice-created-dialog__action-chip:focus-visible {
    outline: 2px solid var(--apd-indigo);
    outline-offset: 2px;
}

/* The "Download adapter" chip is the recommended next step — it gets
   the indigo accent so it visually leads the trio. Matches the
   `.signup-chip--selected` treatment for visual continuity. */
.practice-created-dialog__action-chip--primary {
    background: var(--apd-indigo);
    border-color: var(--apd-indigo);
    color: #ffffff;
}

.practice-created-dialog__action-chip--primary:hover {
    background: #2f3361;
    border-color: #2f3361;
    color: #ffffff;
}

.practice-created-dialog__action-chip-icon {
    color: var(--apd-indigo);
    font-size: 1.6rem !important;
}

.practice-created-dialog__action-chip--primary .practice-created-dialog__action-chip-icon {
    color: #ffffff;
}

.practice-created-dialog__action-chip-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: 100%;
}

.practice-created-dialog__action-chip-title {
    font-weight: 600;
    color: var(--apd-text);
    font-size: 0.875rem;
    line-height: 1.3;
}

.practice-created-dialog__action-chip--primary .practice-created-dialog__action-chip-title {
    color: #ffffff;
}

.practice-created-dialog__action-chip-sub {
    color: var(--apd-text-muted);
    font-size: 0.72rem;
    line-height: 1.4;
}

.practice-created-dialog__action-chip--primary .practice-created-dialog__action-chip-sub {
    color: rgba(255, 255, 255, 0.85);
}

.practice-created-dialog__footer-note {
    color: var(--apd-text-muted);
    display: block;
    line-height: 1.5;
    text-align: center;
    font-size: 0.78rem;
    margin-top: 2px;
}

/* Push the dialog body's padding a little tighter so the centred
   header doesn't float in too much chrome, and stretch the actions
   row so the full-width submit button reads as a primary CTA bar. */
.practice-created-dialog .mud-dialog-content {
    padding: 8px 24px 4px !important;
}

.practice-created-dialog .mud-dialog-actions {
    padding: 12px 24px 20px !important;
}

.practice-created-dialog .mud-dialog-actions .practice-created-dialog__submit {
    width: 100%;
}

/* ── Install instructions dialog specifics ───────────────────────────── */
.adapter-instructions-dialog__section-title {
    color: var(--apd-text-muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.7rem;
    margin: 12px 0 6px;
}

.adapter-instructions-dialog__steps {
    margin: 0 0 16px;
    padding-left: 20px;
    color: var(--apd-text);
    font-size: 0.875rem;
    line-height: 1.55;
}

.adapter-instructions-dialog__steps li {
    margin-bottom: 6px;
}

.adapter-instructions-dialog__steps li:last-child {
    margin-bottom: 0;
}

.adapter-instructions-dialog__note {
    border-radius: 8px;
}

/* ── Email instructions dialog specifics ─────────────────────────────── */
.adapter-email-dialog__intro {
    color: var(--apd-text);
    line-height: 1.55;
    margin-bottom: 14px;
}

.adapter-email-dialog__success {
    text-align: center;
    padding: 6px 0;
}

.adapter-email-dialog__success-body {
    color: var(--apd-text-muted);
    line-height: 1.55;
    margin-top: 6px;
}

/* ── Shared typography normalisation ──────────────────────────────────
   Mirror the AddPracticePanel typography conventions so adapter dialogs
   feel like part of the same family — same input + button font sizing. */
.adapter-email-dialog .mud-input-control input,
.adapter-email-dialog .mud-input-control input::placeholder,
.adapter-email-dialog .mud-input-slot,
.adapter-email-dialog .mud-input-slot input,
.adapter-email-dialog .mud-input-slot input::placeholder,
.adapter-email-dialog .adapter-email-dialog__cancel,
.adapter-email-dialog .adapter-email-dialog__submit,
.adapter-instructions-dialog .adapter-instructions-dialog__cancel,
.adapter-instructions-dialog .adapter-instructions-dialog__submit,
.practice-created-dialog .practice-created-dialog__submit {
    font-size: 0.875rem !important;
    line-height: 1.5 !important;
}

.adapter-email-dialog .adapter-email-dialog__cancel,
.adapter-instructions-dialog .adapter-instructions-dialog__cancel {
    color: var(--apd-text-muted);
    font-weight: 500;
    text-transform: none;
}

.adapter-email-dialog .adapter-email-dialog__submit,
.adapter-instructions-dialog .adapter-instructions-dialog__submit,
.practice-created-dialog .practice-created-dialog__submit {
    text-transform: none;
}

@media (max-width: 600px) {
    .practice-created-dialog .mud-dialog,
    .adapter-instructions-dialog .mud-dialog,
    .adapter-email-dialog .mud-dialog {
        border-radius: 10px;
    }

    .practice-created-dialog__actions-grid {
        grid-template-columns: 1fr;
    }

    .practice-created-dialog__verifier-value,
    .adapter-instructions-dialog__verifier-value {
        font-size: 1.25rem;
    }
}