/* ── 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 overflow rule
   comes with it: RTL content overflows LEFTWARD, a direction the LTR
   .admin-main scroller cannot reach, so the island scrolls itself.

   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;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
}

/* 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 ───────────────────────────────────────────────────────── */

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

.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);
}

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

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

@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;
    }
}