/* ── Admin: Settings (/admin/settings) ───────────────────────────────────
   Root-only, multi-tab shell. Every class here is prefixed `stg-`.

   The page's UI copy is Hebrew, so the page root re-establishes RTL inside
   the LTR-pinned .admin-main - the same self-contained island pattern
   .ct-page (admin-contracts.css) and .ep-page (admin-enrollment-pages.css)
   already use. LTR-sensitive values (phones, dates, template names, env var
   names) keep their dir="ltr" attributes in the template. The page root is
   deliberately NOT a horizontal scroller: every wide table on it sits in
   its own .stg-tablewrap scroller below, so the document never pans
   sideways on a phone.

   It borrows the shared kit from admin.css - .admin-page-header, .btn*,
   .form-*, .toggle/.toggle-slider, .course-filter-tab*, .toast - and never
   redefines any of it. Only the bits that kit has no answer for live here. */

.stg-page {
    direction: rtl;
    text-align: right;
}

/* admin.css positions the hint physically (margin-left) for the LTR pages. */
.stg-page .form-label-hint {
    margin-left: 0;
    margin-right: 0.35rem;
}

/* The shared toast is pinned LTR in admin.css because most admin copy is
   English. Every string this page shows it is Hebrew, so the island claims
   its own toast rather than editing the rule six other views depend on. */
.stg-page .toast {
    direction: rtl;
    text-align: right;
}

/* ── Header + save affordance ────────────────────────────────────────── */

.stg-head-actions {
    display: flex;
    align-items: center;
    gap: var(--space-sm, 8px);
    flex-wrap: wrap;
}

/* Unsaved work has to be legible from the top of the page: the controls that
   produce it are spread down four screens, so a reader who scrolled away from
   a switch still needs to be told the switch has not been written yet. */
.stg-dirty {
    font-size: 0.8rem;
    color: #8a5c00;
    background: #fff8e6;
    border: 1px solid #ffd88a;
    border-radius: var(--radius-sm, 8px);
    padding: 0.3rem 0.6rem;
}

/* ── Tab strip ───────────────────────────────────────────────────────── */

/* `.course-filter-tabs` is inline-flex with no wrap of its own, so without
   this the four Hebrew tabs force a horizontal scrollbar at phone widths.
   Wrapping keeps every area visible - same call as .pay-tabs. */
.stg-tabs {
    margin-bottom: var(--space-md, 16px);
    flex-wrap: wrap;
    max-width: 100%;
}

.stg-panel {
    display: flex;
    flex-direction: column;
    gap: var(--space-md, 16px);
}

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

.stg-card {
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: var(--radius-md, 12px);
    padding: var(--space-md, 16px) var(--space-lg, 24px);
    box-shadow: 0 1px 3px rgba(0, 60, 130, 0.04);
}

.stg-card__title {
    font-size: 1rem;
    font-weight: 600;
    color: #191a23;
    margin: 0 0 var(--space-xs, 4px);
}

.stg-card__lede {
    font-size: 0.83rem;
    line-height: 1.65;
    color: #5a5b6a;
    margin: 0 0 var(--space-md, 16px);
}

.stg-card__foot {
    margin: var(--space-md, 16px) 0 0;
    padding-top: var(--space-sm, 8px);
    border-top: 1px solid #f0f1f4;
    font-size: 0.78rem;
    line-height: 1.6;
    color: #8e8f9e;
}

/* ── Setting rows ────────────────────────────────────────────────────── */

.stg-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-md, 16px);
    padding: var(--space-md, 16px) 0;
    border-top: 1px solid #f0f1f4;
}

.stg-row:first-child {
    border-top: 0;
    padding-top: 0;
}

.stg-row__text {
    flex: 1 1 auto;
    min-width: 0;
}

.stg-row__title {
    font-size: 0.9rem;
    font-weight: 600;
    color: #191a23;
    margin: 0 0 0.15rem;
}

.stg-row__hint {
    font-size: 0.8rem;
    line-height: 1.6;
    color: #5a5b6a;
    margin: 0;
}

.stg-row__hint + .stg-row__hint {
    margin-top: 0.3rem;
}

.stg-row__control {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: var(--space-sm, 8px);
    padding-top: 0.15rem;
}

.stg-row__control--wide {
    flex: 0 0 240px;
    max-width: 240px;
}

.stg-num {
    width: 96px;
}

/* ── Banners ─────────────────────────────────────────────────────────── */

.stg-banner {
    border-radius: var(--radius-sm, 8px);
    padding: 0.85rem 1.1rem;
    font-size: 0.85rem;
    line-height: 1.65;
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
}

.stg-banner__body {
    min-width: 0;
}

.stg-banner__title {
    font-weight: 600;
    margin: 0 0 0.2rem;
}

.stg-banner p {
    margin: 0;
}

.stg-banner p + p {
    margin-top: 0.3rem;
}

.stg-banner i {
    margin-top: 0.2rem;
}

/* The kill switch. It is the loudest thing on the page on purpose: it means
   the automation turned ITSELF off and has not sent anything since. */
.stg-banner--kill {
    background: #fdecea;
    border: 1px solid #f3b8b0;
    color: #8a1c12;
}

.stg-banner--warn {
    background: #fff3cd;
    border: 1px solid #ffc107;
    color: #856404;
}

.stg-banner--ok {
    background: #eef7ee;
    border: 1px solid #b7dcb7;
    color: #245c27;
}

.stg-banner__reason {
    font-family: var(--font-mono, monospace);
    font-size: 0.8rem;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 6px;
    padding: 0.25rem 0.45rem;
    display: inline-block;
    word-break: break-word;
}

/* ── Counters ────────────────────────────────────────────────────────── */

.stg-counters {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
    gap: var(--space-sm, 8px);
}

.stg-counter {
    border: 1px solid #e8e8e8;
    border-radius: var(--radius-sm, 8px);
    background: #fbfcfe;
    padding: 0.55rem 0.7rem;
}

/* Solid ink, never the brand gradient: the gradient is forbidden above
   font-weight 400 and these numerals are semi-bold. */
.stg-counter__num {
    display: block;
    font-size: 1.3rem;
    font-weight: 600;
    color: #191a23;
    line-height: 1.2;
}

.stg-counter__label {
    display: block;
    font-size: 0.74rem;
    color: #5a5b6a;
    margin-top: 0.15rem;
}

.stg-counters__caption {
    font-size: 0.78rem;
    color: #8e8f9e;
    margin: var(--space-sm, 8px) 0 0.35rem;
}

.stg-counters__caption:first-child {
    margin-top: 0;
}

/* ── Preview ─────────────────────────────────────────────────────────── */

.stg-preview {
    border: 1px solid #e8e8e8;
    border-radius: var(--radius-sm, 8px);
    background: #fbfcfe;
    padding: 0.85rem 1rem;
}

/* WaFormattedText emits a <p>; the message body carries real newlines. */
.stg-preview__body {
    white-space: pre-wrap;
    font-size: 0.88rem;
    line-height: 1.7;
    color: #191a23;
    margin: 0;
}

.stg-preview__label {
    font-size: 0.75rem;
    color: #8e8f9e;
    margin: 0 0 0.35rem;
}

.stg-preview__buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0.7rem 0 0;
    padding: 0;
    list-style: none;
}

.stg-preview__button {
    border: 1px solid #cfe3ff;
    border-radius: var(--radius-full, 980px);
    background: #fff;
    color: #1c4f8a;
    font-size: 0.78rem;
    padding: 0.25rem 0.7rem;
}

.stg-params {
    margin-top: 0.8rem;
}

.stg-params__title {
    font-size: 0.78rem;
    color: #8e8f9e;
    margin: 0 0 0.35rem;
}

/* ── Tables (params, blocked list, recent activity) ──────────────────── */

.stg-tablewrap {
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
}

.stg-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
}

.stg-table th {
    text-align: right;
    font-weight: 600;
    color: #5a5b6a;
    font-size: 0.76rem;
    padding: 0.4rem 0.5rem;
    border-bottom: 1px solid #e8e8e8;
    white-space: nowrap;
}

.stg-table td {
    text-align: right;
    padding: 0.5rem;
    border-bottom: 1px solid #f2f3f6;
    color: #191a23;
    vertical-align: top;
}

.stg-table tr:last-child td {
    border-bottom: 0;
}

.stg-table__mono {
    font-family: var(--font-mono, monospace);
    font-size: 0.78rem;
    white-space: nowrap;
}

.stg-table__quote {
    color: #5a5b6a;
    max-width: 320px;
}

.stg-table__when {
    color: #8e8f9e;
    white-space: nowrap;
}

.stg-fallback {
    display: inline-block;
    margin-inline-start: 0.35rem;
    font-size: 0.72rem;
    color: #8a5c00;
    background: #fff8e6;
    border: 1px solid #ffd88a;
    border-radius: var(--radius-full, 980px);
    padding: 0 0.45rem;
}

/* ── State pills ─────────────────────────────────────────────────────── */

.stg-state {
    display: inline-block;
    font-size: 0.74rem;
    border-radius: var(--radius-full, 980px);
    padding: 0.1rem 0.55rem;
    white-space: nowrap;
    border: 1px solid transparent;
}

.stg-state--sent {
    background: #eef7ee;
    border-color: #b7dcb7;
    color: #245c27;
}

/* `unknown` is NOT a failure: the provider did not answer, and the message
   most likely arrived. It never wears the red. */
.stg-state--unknown {
    background: #eef5ff;
    border-color: #cfe3ff;
    color: #1c4f8a;
}

.stg-state--failed {
    background: #fdecea;
    border-color: #f3b8b0;
    color: #8a1c12;
}

.stg-state--skipped {
    background: #f4f5f8;
    border-color: #e2e4e8;
    color: #5a5b6a;
}

.stg-state--pending,
.stg-state--sending {
    background: #fff8e6;
    border-color: #ffd88a;
    color: #8a5c00;
}

/* ── Radio group (opt-out policy) ────────────────────────────────────── */

.stg-choices {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    border: 0;
    margin: 0;
    padding: 0;
}

.stg-choices__legend {
    padding: 0;
    font-size: 0.9rem;
    font-weight: 600;
    color: #191a23;
    margin-bottom: 0.5rem;
}

.stg-choice {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    border: 1px solid #e2e4e8;
    border-radius: var(--radius-sm, 8px);
    padding: 0.6rem 0.75rem;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}

.stg-choice:hover {
    border-color: #cfe3ff;
}

.stg-choice--active {
    border-color: #0071e3;
    background: #f5f9ff;
}

.stg-choice input {
    width: 16px;
    height: 16px;
    margin-top: 0.15rem;
    flex: none;
    accent-color: #0071e3;
}

.stg-choice input:focus-visible {
    outline: 2px solid #0071e3;
    outline-offset: 2px;
}

.stg-choice__text {
    min-width: 0;
}

.stg-choice__title {
    display: block;
    font-size: 0.87rem;
    font-weight: 600;
    color: #191a23;
}

.stg-choice__hint {
    display: block;
    font-size: 0.79rem;
    line-height: 1.6;
    color: #5a5b6a;
    margin-top: 0.15rem;
}

/* ── Inline states ───────────────────────────────────────────────────── */

.stg-state-line {
    font-size: 0.83rem;
    color: #5a5b6a;
    margin: 0;
}

.stg-error {
    font-size: 0.83rem;
    line-height: 1.6;
    color: #8a1c12;
    margin: 0;
}

.stg-empty {
    font-size: 0.83rem;
    color: #8e8f9e;
    margin: 0;
    padding: 0.75rem 0;
}

.stg-inline-actions {
    display: flex;
    align-items: center;
    gap: var(--space-sm, 8px);
    flex-wrap: wrap;
    margin-top: var(--space-sm, 8px);
}

/* ── Test send ───────────────────────────────────────────────────────── */

.stg-testrow {
    display: flex;
    align-items: flex-end;
    gap: var(--space-sm, 8px);
    flex-wrap: wrap;
}

.stg-testrow__field {
    flex: 0 0 220px;
    max-width: 220px;
}

.stg-result {
    margin-top: var(--space-sm, 8px);
    border: 1px solid #e8e8e8;
    border-radius: var(--radius-sm, 8px);
    background: #fbfcfe;
    padding: 0.7rem 0.85rem;
    font-size: 0.83rem;
    line-height: 1.65;
    color: #191a23;
}

.stg-result__body {
    white-space: pre-wrap;
    font-size: 0.82rem;
    color: #5a5b6a;
    margin: 0.4rem 0 0;
}

/* ── The template picker host ────────────────────────────────────────── */

/* The `--wa-*` palette is declared on `.wab-scope` (and three inbox roots),
   so the borrowed .wai-tpl__* preview card renders as unstyled text on white
   without this wrapper. See admin-wa-bulk.css, "The token bridge". */
.stg-picker {
    margin-top: var(--space-sm, 8px);
}

/* ── Demo tab (root only, never on the demo host) ────────────────────── */

/* The only outbound link on the page. Latin hostname, so it carries
   dir="ltr" in the template; the flex row keeps the icon beside the text
   whichever direction the island resolves to. */
.stg-demo-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-family: var(--font-mono, monospace);
    font-size: 0.85rem;
    color: #0071e3;
    text-decoration: none;
    word-break: break-all;
}

.stg-demo-link:hover {
    text-decoration: underline;
}

/* Configured checklist: one row per secret, green when present, grey when
   not. The verdict word is redundant with the colour on purpose - colour
   alone is not a signal for everyone. */
.stg-checklist {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.4rem;
}

.stg-check {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0.7rem;
    border: 1px solid #e8e8e8;
    border-radius: var(--radius-sm, 8px);
    font-size: 0.83rem;
    line-height: 1.5;
}

.stg-check i {
    font-size: 1rem;
    flex: 0 0 auto;
}

.stg-check__text {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
    flex: 1 1 auto;
}

.stg-check__label {
    color: #191a23;
}

.stg-check__name {
    font-family: var(--font-mono, monospace);
    font-size: 0.76rem;
    color: #5a5b6a;
    align-self: flex-start;
}

.stg-check__verdict {
    font-size: 0.74rem;
    border-radius: var(--radius-full, 980px);
    padding: 0.1rem 0.55rem;
    white-space: nowrap;
    border: 1px solid transparent;
}

.stg-check--ok {
    background: #f4fbf4;
    border-color: #cfe8cf;
}

.stg-check--ok i {
    color: #2e7d32;
}

.stg-check--ok .stg-check__verdict {
    background: #eef7ee;
    border-color: #b7dcb7;
    color: #245c27;
}

.stg-check--missing {
    background: #f8f9fb;
    border-color: #e2e4e8;
}

.stg-check--missing i {
    color: #8e8f9e;
}

.stg-check--missing .stg-check__verdict {
    background: #f4f5f8;
    border-color: #e2e4e8;
    color: #5a5b6a;
}

/* Last-run summary: a definition list laid out as label / value rows. */
.stg-kv {
    margin: 0 0 var(--space-md, 16px);
    display: grid;
    gap: 0.45rem;
    font-size: 0.83rem;
}

.stg-kv__row {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.stg-kv dt {
    flex: 0 0 170px;
    color: #5a5b6a;
    font-weight: 600;
    font-size: 0.78rem;
}

.stg-kv dd {
    margin: 0;
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    color: #191a23;
}

.stg-kv code {
    font-family: var(--font-mono, monospace);
    font-size: 0.8rem;
}

.stg-kv__muted {
    color: #8e8f9e;
}

.stg-demo-stale {
    margin-bottom: var(--space-md, 16px);
}

.stg-demo-missing {
    margin: 0 0 var(--space-sm, 8px);
}

.stg-demo-actions {
    margin-top: 0;
}

/* The live step log: a terminal. LTR because the lines are tool output,
   monospace, capped in height and scrolled by the component so the newest
   line stays in view while a run is in flight. */
.stg-log {
    margin: 0;
    max-height: 360px;
    overflow: auto;
    overscroll-behavior: contain;
    background: #191a23;
    color: #e6e7ec;
    border-radius: var(--radius-sm, 8px);
    padding: 0.75rem 0.9rem;
    font-family: var(--font-mono, monospace);
    font-size: 0.76rem;
    line-height: 1.55;
    white-space: pre-wrap;
    word-break: break-word;
    text-align: left;
}

/* ── Responsive ──────────────────────────────────────────────────────── */

@media (max-width: 1024px) {
    .stg-card {
        padding: var(--space-md, 16px);
    }

    /* ── Touch floors (admin mobile revamp) ──
       44px targets and 16px input text below 1025px; an iOS input under
       16px zooms the whole page on focus. Includes the invoicing tab's
       .stg-row/.toggle kit - the flip's confirm behaviour is untouched. */
    .stg-page .btn,
    .stg-page .btn-icon {
        min-height: 44px;
        min-width: 44px;
    }

    .stg-page .course-filter-tab {
        min-height: 44px;
    }

    .stg-page .form-input,
    .stg-page .form-select,
    .stg-page .form-textarea {
        font-size: 16px;
        min-height: 44px;
    }

    /* The 36x20 slider pill stays its size; the LABEL grows an invisible
       44px-tall halo so a thumb can hit it. .toggle is position: relative
       already, so the halo anchors to the pill itself. */
    .stg-page .toggle::after {
        content: '';
        position: absolute;
        inset: -12px -8px;
    }

    /* A radio row is one tap target; keep it comfortably tall even when
       its hint wraps to a single short line. */
    .stg-choice {
        min-height: 44px;
    }
}

@media (max-width: 767px) {
    .stg-row {
        flex-direction: column;
        align-items: stretch;
        gap: 0.6rem;
    }

    .stg-row__control {
        padding-top: 0;
    }

    .stg-row__control--wide {
        flex: 1 1 auto;
        max-width: none;
    }

    .stg-testrow__field {
        flex: 1 1 100%;
        max-width: none;
    }

    .stg-table__quote {
        max-width: 200px;
    }

    .stg-head-actions {
        width: 100%;
        justify-content: flex-start;
    }

    .stg-kv dt {
        flex-basis: 100%;
    }

    .stg-demo-actions .btn {
        width: 100%;
        justify-content: center;
    }

    .stg-log {
        max-height: 260px;
    }
}