/* /Components/Layout/MainLayout.razor.rz.scp.css */
.page[b-znd1xuuyuj] {
    position: relative;
    display: flex;
    flex-direction: column;
}

main[b-znd1xuuyuj] {
    flex: 1;
}

.sidebar[b-znd1xuuyuj] {
    background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
}

.top-row[b-znd1xuuyuj] {
    background-color: #f7f7f7;
    border-bottom: 1px solid #d6d5d5;
    justify-content: flex-end;
    height: 3.5rem;
    display: flex;
    align-items: center;
}

    .top-row[b-znd1xuuyuj]  a, .top-row[b-znd1xuuyuj]  .btn-link {
        white-space: nowrap;
        margin-left: 1.5rem;
        text-decoration: none;
    }

    .top-row[b-znd1xuuyuj]  a:hover, .top-row[b-znd1xuuyuj]  .btn-link:hover {
        text-decoration: underline;
    }

    .top-row[b-znd1xuuyuj]  a:first-child {
        overflow: hidden;
        text-overflow: ellipsis;
    }

@media (max-width: 640.98px) {
    .top-row[b-znd1xuuyuj] {
        justify-content: space-between;
    }

    .top-row[b-znd1xuuyuj]  a, .top-row[b-znd1xuuyuj]  .btn-link {
        margin-left: 0;
    }
}

@media (min-width: 641px) {
    .page[b-znd1xuuyuj] {
        flex-direction: row;
    }

    .sidebar[b-znd1xuuyuj] {
        width: 250px;
        height: 100vh;
        position: sticky;
        top: 0;
    }

    .top-row[b-znd1xuuyuj] {
        position: sticky;
        top: 0;
        z-index: 1;
    }

    .top-row.auth[b-znd1xuuyuj]  a:first-child {
        flex: 1;
        text-align: right;
        width: 0;
    }

    .top-row[b-znd1xuuyuj], article[b-znd1xuuyuj] {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }
}

#blazor-error-ui[b-znd1xuuyuj] {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-znd1xuuyuj] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Pages/AutoRefresh.razor.rz.scp.css */
.ar-bar[b-ibym1xsl3i] {
    display: flex;
    align-items: center;
    gap: .6rem;
}

.ar-stamp[b-ibym1xsl3i] {
    color: #9CA3AF;
    font-size: .75rem;
    white-space: nowrap;
}

.ar-live[b-ibym1xsl3i] {
    position: relative;   /* contains the visually-hidden checkbox below — without this
                             it escapes to the page's containing block and can swallow
                             clicks meant for other controls */
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    border: 1px solid #E5E7EB;
    border-radius: 999px;
    padding: .2rem .6rem .2rem .5rem;
    font-size: .75rem;
    font-weight: 600;
    color: #6B7280;
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}

/* The checkbox drives state but the pill is the affordance */
.ar-live input[b-ibym1xsl3i] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.ar-dot[b-ibym1xsl3i] {
    width: .5rem;
    height: .5rem;
    border-radius: 50%;
    background: #D1D5DB;
}

.ar-live-on[b-ibym1xsl3i] {
    border-color: #A7F3D0;
    background: #ECFDF5;
    color: #065F46;
}

.ar-live-on .ar-dot[b-ibym1xsl3i] {
    background: #10B981;
    animation: ar-pulse-b-ibym1xsl3i 2s ease-in-out infinite;
}

@keyframes ar-pulse-b-ibym1xsl3i {
    0%, 100% { opacity: 1; }
    50%      { opacity: .35; }
}

@media (prefers-reduced-motion: reduce) {
    .ar-live-on .ar-dot[b-ibym1xsl3i] { animation: none; }
}
/* /Components/Pages/Campaign.razor.rz.scp.css */
/* ── CAMPAIGNS GRID ALIGNMENT ────────────────────────────────
   app.css declares .data-table td { vertical-align: middle } at ~503 and then
   .data-table tbody td { vertical-align: top } at ~1690; the later, more
   specific rule wins, so every cell was top-aligned while the Test cell carried
   an inline middle override. On a row whose Campaign List wraps to five lines
   that left the ✅ stranded near the bottom. One value for the whole row fixes
   it — middle, because every other cell here is a single-line chip or badge. */
.data-table tbody td[b-qlnebfy6se] {
    vertical-align: middle;
}

/* Ten columns at .85rem side padding spent ~270px on padding alone, which is what
   pushed the grid into a horizontal scrollbar. */
.data-table thead th[b-qlnebfy6se],
.data-table tbody td[b-qlnebfy6se] {
    padding-left: .5rem;
    padding-right: .5rem;
}

/* Icon columns: one fixed box per state so ⬜/✅/❌/⏳ never shift the column */
.cg-test-cell[b-qlnebfy6se] {
    text-align: center;
    width: 1%;      /* shrink-to-fit */
}

.cg-test-icon[b-qlnebfy6se] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    font-size: 1.05rem;
    line-height: 1;
    cursor: default;
}

/* Empty state reads as "nothing yet", matching the — used elsewhere in the grid,
   instead of ⬜ which renders as a heavy lavender block on Windows. */
.cg-test-none[b-qlnebfy6se] {
    color: #D1D5DB;
    font-size: 1rem;
}

.cg-actions[b-qlnebfy6se] {
    white-space: nowrap;
    width: 1%;      /* shrink-to-fit: the icon group sets the width */
}

.cg-action-group[b-qlnebfy6se] {
    display: inline-flex;
    align-items: center;
    gap: .15rem;
}

/* List names run long ("Spark Clickers (State/Carrier Suppression) - 2 Month
   Lookback - No Record Limit") and were wrapping to seven lines, which set the
   height of the whole row. One line with an ellipsis; the full text stays
   available as a tooltip. */
/* The name was being squeezed to ~93px and wrapping to six lines, which set the
   row height for the whole grid. Truncating the Campaign List frees that width.
   The floor keeps it to one or two lines; below roughly 1250px of table width the
   wrapper's overflow-x takes over, which is the intended fallback for ten columns
   on a narrow screen. */
.cg-name-cell[b-qlnebfy6se] {
    min-width: 150px;
}

/* No width on the cell — the inner div's max-width caps it while still letting
   the column shrink on a narrow screen instead of forcing a scrollbar. */
.cg-follow-cell[b-qlnebfy6se] {
    white-space: nowrap;
}

/* Draft rows: the subsystem is assigned but there is no run panel to open yet */
.follow-plain[b-qlnebfy6se] {
    color: #6B7280;
    white-space: nowrap;
}

/* A cap, not a floor — on a narrow screen the cell shrinks and the ellipsis just
   engages earlier, so this never forces a horizontal scrollbar. */
.cg-truncate[b-qlnebfy6se] {
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cg-date-cell[b-qlnebfy6se] {
    white-space: nowrap;
}

/* ── TOKEN CHIP PICKER ───────────────────────────────────────── */
.token-picker-chips[b-qlnebfy6se] {
    display   : flex;
    flex-wrap : wrap;
    gap       : .35rem;
    padding   : .5rem .6rem;
}

.token-chip[b-qlnebfy6se] {
    background    : #fff;
    border        : 1px solid #a0b4d8;
    border-radius : 4px;
    padding       : .2rem .6rem;
    font-size     : .78rem;
    font-family   : monospace;
    color         : #2a4a8a;
    cursor        : pointer;
    transition    : background .15s, color .15s, border-color .15s;
}

.token-chip:hover:not(:disabled)[b-qlnebfy6se] {
    background   : #2a4a8a;
    color        : #fff;
    border-color : #2a4a8a;
}

.token-chip:disabled[b-qlnebfy6se] {
    opacity : .45;
    cursor  : not-allowed;
}

/* Token already present in the active message */
.token-chip-active[b-qlnebfy6se] {
    background   : rgba(249, 115, 22, .12);
    border-color : #F97316;
    color        : #9A3412;
    font-weight  : 700;
}

.token-chip-active:hover:not(:disabled)[b-qlnebfy6se] {
    background   : rgba(249, 115, 22, .22);
    border-color : #EA580C;
    color        : #7C2D12;
}
/* /Components/Pages/CampaignDetail.razor.rz.scp.css */
.cd-back[b-j3e60bql01] {
    font-size: .8rem;
    color: #6B7280;
    text-decoration: none;
}

.cd-back:hover[b-j3e60bql01] { color: #1F2937; }

/* ── Lifecycle stepper ─────────────────────────────────────── */
.cd-stepper[b-j3e60bql01] {
    display: flex;
    gap: 0;
    margin: 1rem 0 1.25rem 0;
    flex-wrap: wrap;
}

.cd-step[b-j3e60bql01] {
    flex: 1 1 0;
    min-width: 180px;
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    position: relative;
    padding-right: 1.25rem;
}

.cd-connector[b-j3e60bql01] {
    position: absolute;
    top: 15px;
    right: .25rem;
    left: auto;
    width: calc(100% - 215px);
    min-width: 12px;
    height: 2px;
    background: #E5E7EB;
}

.cd-step:last-child .cd-connector[b-j3e60bql01] { display: none; }

.cd-dot[b-j3e60bql01] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .85rem;
    font-weight: 700;
    flex-shrink: 0;
    border: 2px solid #E5E7EB;
    background: #F9FAFB;
    color: #9CA3AF;
}

.cd-done   .cd-dot[b-j3e60bql01] { background: #D1FAE5; border-color: #10B981; color: #065F46; }
.cd-active .cd-dot[b-j3e60bql01] { background: #DBEAFE; border-color: #3B82F6; color: #1E40AF; }
.cd-warn   .cd-dot[b-j3e60bql01] { background: #FEF3C7; border-color: #F59E0B; color: #92400E; }
.cd-error  .cd-dot[b-j3e60bql01] { background: #FEE2E2; border-color: #EF4444; color: #991B1B; }

.cd-step-title[b-j3e60bql01] {
    font-size: .85rem;
    font-weight: 700;
    color: #1F2937;
}

.cd-pending .cd-step-title[b-j3e60bql01] { color: #9CA3AF; font-weight: 600; }

.cd-step-sub[b-j3e60bql01] {
    font-size: .72rem;
    color: #6B7280;
    margin-top: .1rem;
    max-width: 220px;
}

/* ── Cards & layout ────────────────────────────────────────── */
.cd-grid[b-j3e60bql01] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

@media (max-width: 900px) {
    .cd-grid[b-j3e60bql01] { grid-template-columns: 1fr; }
}

.cd-card[b-j3e60bql01] {
    background: #F8FAFC;
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    padding: .85rem 1rem;
}

.cd-card-title[b-j3e60bql01] {
    font-size: .7rem;
    font-weight: 700;
    color: #9CA3AF;
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-bottom: .6rem;
}

.cd-muted[b-j3e60bql01] {
    text-transform: none;
    letter-spacing: 0;
    font-weight: 500;
}

.cd-dl[b-j3e60bql01] {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: .25rem .9rem;
    font-size: .82rem;
    margin: 0;
}

.cd-dl dt[b-j3e60bql01] { color: #6B7280; font-weight: 600; }
.cd-dl dd[b-j3e60bql01] { margin: 0; color: #1F2937; }

.cd-msg[b-j3e60bql01] {
    font-size: .82rem;
    background: #FFFFFF;
    border: 1px solid #E5E7EB;
    border-radius: 6px;
    padding: .6rem .7rem;
    white-space: pre-wrap;
    word-break: break-word;
    color: #1F2937;
}
/* /Components/Pages/Offers.razor.rz.scp.css */
.token-picker-panel[b-evrfxa14nf] {
    background    : #f0f4ff;
    border        : 1px solid #c8d5ee;
    border-radius : 6px;
    padding       : .6rem .75rem;
    margin-bottom : .75rem;
}

.token-picker-label[b-evrfxa14nf] {
    font-size   : .75rem;
    font-weight : 600;
    color       : #555;
    margin-bottom: .45rem;
}

.token-picker-chips[b-evrfxa14nf] {
    display   : flex;
    flex-wrap : wrap;
    gap       : .35rem;
}

.token-chip[b-evrfxa14nf] {
    background    : #fff;
    border        : 1px solid #a0b4d8;
    border-radius : 4px;
    padding       : .2rem .6rem;
    font-size     : .78rem;
    font-family   : monospace;
    color         : #2a4a8a;
    cursor        : pointer;
    transition    : background .15s, color .15s, border-color .15s;
}

.token-chip:hover[b-evrfxa14nf] {
    background   : #2a4a8a;
    color        : #fff;
    border-color : #2a4a8a;
}

/* ── ACTIVE CHIP (token already present in URL) ─────────────── */
.token-chip-active[b-evrfxa14nf] {
    background   : rgba(249, 115, 22, .12);
    border-color : #F97316;
    color        : #9A3412;
    font-weight  : 700;
}

.token-chip-active:hover[b-evrfxa14nf] {
    background   : rgba(249, 115, 22, .22);
    border-color : #EA580C;
    color        : #7C2D12;
}

/* ── OFFER URL HIGHLIGHT BACKDROP ───────────────────────────── */

/* Wrapper gives the absolute-positioned backdrop something to fill */
.url-highlight-wrapper[b-evrfxa14nf] {
    position : relative;
    width    : 100%;
}

/*
 * The backdrop is an invisible clone of the textarea content.
 * Only the <mark> backgrounds are visible; all text is transparent.
 * Padding/font/line-height MUST match .form-textarea exactly.
 */
.url-highlight-backdrop[b-evrfxa14nf] {
    position      : absolute;
    top           : 0;
    left          : 0;
    right         : 0;
    bottom        : 0;
    padding       : .5rem .75rem;           /* == .form-textarea */
    font-family   : 'Consolas', monospace;  /* == .form-textarea */
    font-size     : .825rem;                /* == .form-textarea */
    line-height   : 1.6;                    /* == .form-textarea */
    white-space   : pre-wrap;
    word-wrap     : break-word;
    overflow      : hidden;
    pointer-events: none;
    color         : transparent;
    border        : 1px solid transparent;  /* keeps box model identical */
    border-radius : 6px;
    box-sizing    : border-box;
    z-index       : 0;
}

/* The textarea sits on top; its background is transparent so the
   backdrop highlights bleed through underneath the typed text. */
.url-highlight-textarea[b-evrfxa14nf] {
    background  : transparent !important;
    position    : relative;
    z-index     : 1;
    color       : #374151;
    caret-color : #374151;
}

/* Orange tint shown behind {{token}} text in the textarea */
.url-token-mark[b-evrfxa14nf] {
    background    : rgba(249, 115, 22, .22);
    border-radius : 3px;
    color         : transparent; /* text hidden; only background shows */
}

/* ── TABLE URL TOKEN HIGHLIGHT ───────────────────────────────­ */
.token-highlight[b-evrfxa14nf] {
    background    : rgba(249, 115, 22, .15);
    color         : #9A3412;
    border-radius : 3px;
    padding       : 0 2px;
    font-family   : 'Consolas', monospace;
    font-size     : .8em;
    font-weight   : 600;
}