/* _content/Ayva.Integrations.Gusto/Components/GustoConnectCard.razor.rz.scp.css */
/* GustoConnectCard — the four-step checklist.

   The card shell, chips, buttons and fact lists come from the panel's shared
   ::deep vocabulary (see GustoPanel.razor.css); this file owns the checklist
   itself, which nothing else on the panel draws. Tokens only. */

.gusto-steps[b-61nsdbjpmi] {
    display: flex;
    flex-direction: column;
    gap: var(--space-xl);
    margin: 0;
    padding: 0;
    min-width: 0;
    list-style: none;
    counter-reset: gusto-step;
}

.gusto-step[b-61nsdbjpmi] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--space-md);
    align-items: start;
    min-width: 0;
}

/* The marker is the whole progress indicator: filled for a finished step,
   ringed for the one the operator is on, outlined for what is still ahead. A
   separate progress bar would say the same thing twice. */
.gusto-step-marker[b-61nsdbjpmi] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--space-xl);
    height: var(--space-xl);
    background: var(--bg-hover);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-full);
    color: var(--text-muted);
    font-size: var(--text-3xs);
    font-weight: 700;
    line-height: 1;
}

.gusto-step[data-gusto-step-state="done"] .gusto-step-marker[b-61nsdbjpmi] {
    background: var(--success-color-15);
    border-color: var(--success-color-30);
    color: var(--success-text);
}

.gusto-step[data-gusto-step-state="active"] .gusto-step-marker[b-61nsdbjpmi] {
    background: var(--accent-color-15);
    border-color: var(--accent-color-40);
    color: var(--accent-color-light);
    box-shadow: var(--shadow-focus);
}

.gusto-step-body[b-61nsdbjpmi] {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    min-width: 0;
}

.gusto-step-title[b-61nsdbjpmi] {
    margin: 0;
    color: var(--text-primary);
    font-size: var(--text-sm);
    font-weight: 600;
}

/* A step still ahead is dimmed rather than hidden: an operator should be able
   to read what is coming without being invited to act on it yet. */
.gusto-step[data-gusto-step-state="todo"] .gusto-step-title[b-61nsdbjpmi] {
    color: var(--text-secondary);
}

.gusto-step-help[b-61nsdbjpmi] {
    margin: 0;
    max-width: 62ch;
    color: var(--text-secondary);
    font-size: var(--text-2xs);
    line-height: 1.6;
}

.gusto-step-value[b-61nsdbjpmi] {
    margin: 0;
    color: var(--text-primary);
    font-size: var(--text-2xs);
}


.gusto-secret-state[b-61nsdbjpmi] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin: 0;
    color: var(--text-secondary);
    font-size: var(--text-2xs);
}

@media (max-width: 768px) {
    .gusto-steps[b-61nsdbjpmi] {
        gap: var(--space-lg);
    }

    .gusto-step[b-61nsdbjpmi] {
        gap: var(--space-sm);
    }
}
/* _content/Ayva.Integrations.Gusto/Components/GustoWebhookCard.razor.rz.scp.css */
/* GustoWebhookCard — subscription state and the delivery table.

   Card shell, chips, buttons and the scrolling table frame come from the
   panel's shared ::deep vocabulary (GustoPanel.razor.css). Tokens only. */

.gusto-webhook-state[b-irmq6o3eh4] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-md);
    min-width: 0;
    padding: var(--space-md) var(--space-lg);
    background: var(--bg-hover);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
}

.gusto-webhook-sentence[b-irmq6o3eh4] {
    flex: 1 1 18rem;
    min-width: 0;
    color: var(--text-secondary);
    font-size: var(--text-2xs);
    line-height: 1.6;
}


@media (max-width: 768px) {
    .gusto-webhook-state[b-irmq6o3eh4] {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-sm);
    }
}
/* _content/Ayva.Integrations.Gusto/Panels/GustoPanel.razor.rz.scp.css */
/* GustoPanel — the Gusto console inside the /coms shell.

   Framing and the shared card/chip vocabulary the four cards use. Tokens only;
   every colour, radius, spacing and timing comes from ayva-theme.css. */

.gusto-panel[b-htvo6p8foz] {
    display: flex;
    flex-direction: column;
    gap: var(--space-xl);
    width: 100%;
    min-width: 0;
    color: var(--text-primary);
    font-family: var(--font-primary);
}

/* ── Head ──────────────────────────────────────────────────────────────── */

.gusto-panel-head[b-htvo6p8foz] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
    min-width: 0;
    padding-bottom: var(--space-md);
    border-bottom: 1px solid var(--border-color);
}

.gusto-panel-title-row[b-htvo6p8foz] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-md);
    min-width: 0;
}

.gusto-panel-title[b-htvo6p8foz] {
    margin: 0;
    font-size: var(--text-2xl);
    font-weight: 700;
    letter-spacing: -0.02em;
}

.gusto-panel-sub[b-htvo6p8foz] {
    margin: 0;
    max-width: 68ch;
    color: var(--text-secondary);
    font-size: var(--text-sm);
    line-height: 1.6;
}

.gusto-panel-chip[b-htvo6p8foz] {
    display: inline-flex;
    align-items: center;
    padding: 0 var(--space-md);
    background: var(--bg-hover);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-full);
    color: var(--text-secondary);
    font-size: var(--text-3xs);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
}

.gusto-panel-chip-ok[b-htvo6p8foz] {
    background: var(--success-color-10);
    border-color: var(--success-color-30);
    color: var(--success-text);
}

.gusto-panel-chip-warn[b-htvo6p8foz] {
    background: var(--warning-color-10);
    border-color: var(--warning-color-30);
    color: var(--warning-text);
}

.gusto-panel-chip-bad[b-htvo6p8foz] {
    background: var(--error-color-10);
    border-color: var(--error-color-30);
    color: var(--error-text);
}

/* ── OAuth outcome banner ──────────────────────────────────────────────── */

.gusto-panel-outcome[b-htvo6p8foz] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
    min-width: 0;
    padding: var(--space-lg) var(--space-xl);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    font-size: var(--text-sm);
    line-height: 1.6;
}

.gusto-panel-outcome-ok[b-htvo6p8foz] {
    background: var(--success-color-10);
    border-color: var(--success-color-30);
    color: var(--success-text);
}

.gusto-panel-outcome-bad[b-htvo6p8foz] {
    background: var(--warning-color-10);
    border-color: var(--warning-color-30);
    color: var(--warning-text);
}

/* ── States ────────────────────────────────────────────────────────────── */

.gusto-panel-centre[b-htvo6p8foz] {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-3xl) 0;
    color: var(--text-secondary);
    font-size: var(--text-sm);
}

.gusto-panel-fatal[b-htvo6p8foz] {
    padding: var(--space-lg) var(--space-xl);
    background: var(--bg-card);
    border: 1px solid var(--error-color-30);
    border-radius: var(--radius-lg);
    color: var(--error-text);
}

/* ── Cards ─────────────────────────────────────────────────────────────── */

/* Desktop-first: the connect checklist is the tall one and gets its own
   column, with the three supporting cards stacked beside it. */
.gusto-panel-cards[b-htvo6p8foz] {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    align-items: start;
    gap: var(--space-xl);
    min-width: 0;
}

/* The connect card spans the full height of the left column; the rest flow
   down the right. ::deep because .gusto-card is the CHILD components' element,
   not this component's — a scoped rule ending in a child's class silently
   matches nothing without it (recurring bug class). */
.gusto-panel-cards[b-htvo6p8foz]  > [data-gusto-connect-card] {
    grid-row: span 3;
}

@media (max-width: 1200px) {
    .gusto-panel-cards[b-htvo6p8foz] {
        grid-template-columns: minmax(0, 1fr);
    }

    .gusto-panel-cards[b-htvo6p8foz]  > [data-gusto-connect-card] {
        grid-row: auto;
    }
}

@media (max-width: 768px) {
    .gusto-panel[b-htvo6p8foz] {
        gap: var(--space-lg);
    }

    .gusto-panel-title[b-htvo6p8foz] {
        font-size: var(--text-xl);
    }

    .gusto-panel-cards[b-htvo6p8foz] {
        gap: var(--space-lg);
    }

    .gusto-panel-outcome[b-htvo6p8foz] {
        padding: var(--space-md) var(--space-lg);
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   SHARED CARD VOCABULARY

   The four cards draw the same card shell, chips, buttons, fact lists and
   tables. Those rules live HERE, once, behind ::deep — a scoped rule reaches
   its own component's elements only, so the alternative is four byte-identical
   copies that drift the first time one is touched. Each card's own .razor.css
   holds what is genuinely its own (the checklist, the delivery table's column
   widths), and nothing in this block names a colour, radius or timing that is
   not a token.
   ═══════════════════════════════════════════════════════════════════════════ */

.gusto-panel[b-htvo6p8foz]  .gusto-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
    min-width: 0;
    padding: var(--space-xl);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
}

.gusto-panel[b-htvo6p8foz]  .gusto-card-head {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
    min-width: 0;
}

.gusto-panel[b-htvo6p8foz]  .gusto-card-title {
    margin: 0;
    color: var(--text-muted);
    font-size: var(--text-3xs);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.gusto-panel[b-htvo6p8foz]  .gusto-card-sub {
    margin: 0;
    color: var(--text-secondary);
    font-size: var(--text-2xs);
    line-height: 1.6;
}

.gusto-panel[b-htvo6p8foz]  .gusto-subhead {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    min-width: 0;
    padding-top: var(--space-sm);
    border-top: 1px solid var(--border-color);
}

.gusto-panel[b-htvo6p8foz]  .gusto-subhead-title {
    margin: 0;
    font-size: var(--text-sm);
    font-weight: 600;
}

/* ── Chips ─────────────────────────────────────────────────────────────── */

.gusto-panel[b-htvo6p8foz]  .gusto-chip {
    display: inline-flex;
    align-items: center;
    padding: 0 var(--space-md);
    background: var(--bg-hover);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-full);
    color: var(--text-secondary);
    font-size: var(--text-3xs);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
}

.gusto-panel[b-htvo6p8foz]  .gusto-chip-ok {
    background: var(--success-color-10);
    border-color: var(--success-color-30);
    color: var(--success-text);
}

.gusto-panel[b-htvo6p8foz]  .gusto-chip-warn {
    background: var(--warning-color-10);
    border-color: var(--warning-color-30);
    color: var(--warning-text);
}

.gusto-panel[b-htvo6p8foz]  .gusto-chip-bad {
    background: var(--error-color-10);
    border-color: var(--error-color-30);
    color: var(--error-text);
}

.gusto-panel[b-htvo6p8foz]  .gusto-chip-info {
    background: var(--info-color-10);
    border-color: var(--info-color-30);
    color: var(--info-text);
}

.gusto-panel[b-htvo6p8foz]  .gusto-chip-quiet {
    background: transparent;
    color: var(--text-muted);
}

/* ── Banners and refusals ──────────────────────────────────────────────── */

.gusto-panel[b-htvo6p8foz]  .gusto-banner,
.gusto-panel[b-htvo6p8foz]  .gusto-refusal {
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
    min-width: 0;
    padding: var(--space-md) var(--space-lg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    font-size: var(--text-2xs);
    line-height: 1.6;
}

.gusto-panel[b-htvo6p8foz]  .gusto-banner-warn,
.gusto-panel[b-htvo6p8foz]  .gusto-refusal {
    background: var(--warning-color-5);
    border-color: var(--warning-color-30);
    color: var(--warning-text);
}

.gusto-panel[b-htvo6p8foz]  .gusto-banner-danger {
    background: var(--error-color-10);
    border-color: var(--error-color-30);
    color: var(--error-text);
}

.gusto-panel[b-htvo6p8foz]  .gusto-refusal p,
.gusto-panel[b-htvo6p8foz]  .gusto-banner p {
    margin: var(--space-2xs) 0 0;
}

/* A step, a Register button or a preview that cannot proceed, with the reason
   in place of the control. Shared: all four cards draw it, and the `code` rule
   below already reached across the boundary into it — so the block belongs on
   this side of that boundary rather than copied four ways. */
.gusto-panel[b-htvo6p8foz]  .gusto-step-blocked {
    margin: 0;
    padding: var(--space-sm) var(--space-md);
    background: var(--warning-color-5);
    border: 1px solid var(--warning-color-30);
    border-radius: var(--radius-sm);
    color: var(--warning-text);
    font-size: var(--text-2xs);
    line-height: 1.6;
}

.gusto-panel[b-htvo6p8foz]  .gusto-refusal code,
.gusto-panel[b-htvo6p8foz]  .gusto-banner code,
.gusto-panel[b-htvo6p8foz]  .gusto-step-blocked code {
    font-family: var(--font-mono);
    font-size: var(--text-4xs);
    overflow-wrap: anywhere;
}

/* ── Fields ────────────────────────────────────────────────────────────── */

.gusto-panel[b-htvo6p8foz]  .gusto-fields {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: var(--space-lg);
    min-width: 0;
}

.gusto-panel[b-htvo6p8foz]  .gusto-field,
.gusto-panel[b-htvo6p8foz]  .gusto-copy {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.gusto-panel[b-htvo6p8foz]  .gusto-field-error {
    margin: 0;
    padding: var(--space-sm) var(--space-md);
    background: var(--error-color-10);
    border: 1px solid var(--error-color-30);
    border-radius: var(--radius-sm);
    color: var(--error-text);
    font-size: var(--text-2xs);
}

.gusto-panel[b-htvo6p8foz]  .gusto-empty {
    margin: 0;
    color: var(--text-muted);
    font-size: var(--text-2xs);
    line-height: 1.6;
}

.gusto-panel[b-htvo6p8foz]  .gusto-test-ok {
    margin: 0;
    padding: var(--space-sm) var(--space-md);
    background: var(--success-color-10);
    border: 1px solid var(--success-color-30);
    border-radius: var(--radius-sm);
    color: var(--success-text);
    font-size: var(--text-2xs);
}

/* A read-only field is a value to copy, not one to edit — the mono face is
   what stops an operator mis-reading an l for a 1 in a URL they are about to
   paste into a vendor console. ::deep because .mud-input-root belongs to
   MudTextField's own scope, never this component's (recurring bug class). */
.gusto-panel[b-htvo6p8foz]  .gusto-copy .mud-input-root {
    font-family: var(--font-mono);
    font-size: var(--text-3xs);
}

/* ── Facts ─────────────────────────────────────────────────────────────── */

.gusto-panel[b-htvo6p8foz]  .gusto-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: var(--space-md) var(--space-lg);
    margin: 0;
    min-width: 0;
}

.gusto-panel[b-htvo6p8foz]  .gusto-fact {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
    min-width: 0;
}

.gusto-panel[b-htvo6p8foz]  .gusto-fact-wide {
    grid-column: 1 / -1;
}

.gusto-panel[b-htvo6p8foz]  .gusto-fact dt {
    color: var(--text-muted);
    font-size: var(--text-4xs);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.gusto-panel[b-htvo6p8foz]  .gusto-fact dd {
    margin: 0;
    color: var(--text-primary);
    font-size: var(--text-2xs);
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.gusto-panel[b-htvo6p8foz]  .gusto-fact-warn {
    color: var(--warning-text);
}

.gusto-panel[b-htvo6p8foz]  .gusto-mono {
    font-family: var(--font-mono);
    font-size: var(--text-3xs);
}

/* ── Buttons ───────────────────────────────────────────────────────────── */

.gusto-panel[b-htvo6p8foz]  .gusto-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md);
    min-width: 0;
}

.gusto-panel[b-htvo6p8foz]  .gusto-button {
    min-height: var(--tap-target-min);
    padding: 0 var(--space-xl);
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-family: var(--font-primary);
    font-size: var(--text-xs);
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: border-color var(--transition-fast), background var(--transition-fast), color var(--transition-fast);
}

.gusto-panel[b-htvo6p8foz]  .gusto-button:hover:not(:disabled) {
    border-color: var(--accent-color);
    background: var(--bg-hover);
}

.gusto-panel[b-htvo6p8foz]  .gusto-button:focus-visible {
    outline: 2px solid var(--accent-color);
    outline-offset: 2px;
}

.gusto-panel[b-htvo6p8foz]  .gusto-button:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

.gusto-panel[b-htvo6p8foz]  .gusto-button-primary {
    background: var(--accent-color-10);
    border-color: var(--accent-color-30);
    color: var(--accent-color-light);
}

.gusto-panel[b-htvo6p8foz]  .gusto-button-danger {
    background: var(--error-color-10);
    border-color: var(--error-color-30);
    color: var(--error-text);
}

.gusto-panel[b-htvo6p8foz]  .gusto-button-quiet {
    min-height: auto;
    padding: var(--space-2xs) var(--space-md);
    font-size: var(--text-4xs);
}

/* ── Tables ────────────────────────────────────────────────────────────── */

/* Every wide table scrolls inside its OWN container — the panel body must
   never scroll horizontally (spec §9). */
.gusto-panel[b-htvo6p8foz]  .gusto-table-scroll {
    overflow-x: auto;
    min-width: 0;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
}

.gusto-panel[b-htvo6p8foz]  .gusto-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-2xs);
}

.gusto-panel[b-htvo6p8foz]  .gusto-table th {
    padding: var(--space-sm) var(--space-md);
    background: var(--bg-hover);
    border-bottom: 1px solid var(--border-color);
    color: var(--text-muted);
    font-size: var(--text-4xs);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-align: left;
    text-transform: uppercase;
    white-space: nowrap;
}

.gusto-panel[b-htvo6p8foz]  .gusto-table td {
    padding: var(--space-sm) var(--space-md);
    border-bottom: 1px solid var(--border-color);
    color: var(--text-secondary);
    vertical-align: top;
}

.gusto-panel[b-htvo6p8foz]  .gusto-table tr:last-child td {
    border-bottom: none;
}

.gusto-panel[b-htvo6p8foz]  .gusto-cell-strong {
    color: var(--text-primary);
    font-weight: 600;
}

.gusto-panel[b-htvo6p8foz]  .gusto-cell-quiet {
    color: var(--text-muted);
    white-space: nowrap;
}

.gusto-panel[b-htvo6p8foz]  .gusto-cell-actions {
    display: flex;
    gap: var(--space-sm);
    justify-content: flex-end;
}

.gusto-panel[b-htvo6p8foz]  .gusto-table-detail td {
    background: var(--bg-hover);
}

.gusto-panel[b-htvo6p8foz]  .gusto-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

@media (max-width: 768px) {
    .gusto-panel[b-htvo6p8foz]  .gusto-card {
        padding: var(--space-lg);
        gap: var(--space-md);
    }

    .gusto-panel[b-htvo6p8foz]  .gusto-fields,
    .gusto-panel[b-htvo6p8foz]  .gusto-facts {
        grid-template-columns: minmax(0, 1fr);
    }

    .gusto-panel[b-htvo6p8foz]  .gusto-actions .gusto-button {
        flex: 1 1 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .gusto-panel[b-htvo6p8foz]  .gusto-button {
        transition: none;
    }
}