/* ─────────────────────────────────────────────────────────────────────
   HOMEi «سياسات الإرسال» — the delivery policies as one board
   (NOTIF-POL-1, 2026-09-25; the owner-approved mockup of that night).

   A head of four figures, a failure alert, search + group tabs, then one
   card per group: a row per event × audience, a switch per channel, what
   the policy did over the last 30 days. Under 900px each row folds into a
   small card and every switch carries its channel name.

   Colours come from tokens.css only (the ratchet holds this sheet at zero),
   so dark mode follows the tokens. No text under the 12px floor. RTL-safe:
   logical properties only.

   Registered as a Filament asset — a change here ships NOTHING until
   `php artisan filament:assets` is run and public/css/app/ is committed in
   the same change.
   ──────────────────────────────────────────────────────────────────── */

body:has(.npb) { background: var(--ho-brand-page); }
body:has(.npb) .fi-main-ctn { background: transparent; }

.npb {
    --npb-radius: 14px;
    --npb-cols: minmax(200px, 1.5fr) minmax(150px, 1fr) repeat(3, minmax(120px, .8fr)) minmax(140px, .9fr);
    color: var(--ho-brand-ink);
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.npb-lead { margin: -8px 0 0; color: var(--ho-brand-ink-muted); font-size: 14px; }
.npb-muted { color: var(--ho-brand-ink-muted); font-size: 13px; }
.npb-ic { width: 16px; height: 16px; flex: none; }

.npb-note {
    border: 1px solid var(--ho-info-line);
    background: var(--ho-info-soft);
    color: var(--ho-info-ink);
    border-radius: 12px;
    padding: 10px 14px;
    font-size: 13px;
}

/* ── the four figures ── */
.npb-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.npb-kpi {
    background: var(--ho-brand-card);
    border: 1px solid var(--ho-brand-line);
    border-radius: var(--npb-radius);
    padding: 14px 16px;
}
.npb-kpi b { display: block; font-size: 24px; font-weight: 700; line-height: 1.3; }
.npb-kpi span { color: var(--ho-brand-ink-muted); font-size: 13px; }
.npb-kpi-ok b { color: var(--ho-success-ink); }
.npb-kpi-warn b { color: var(--ho-warning-ink); }
.npb-kpi-bad b { color: var(--ho-danger-ink); }

/* ── the alert ── */
.npb-alert {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    background: var(--ho-danger-soft);
    border: 1px solid var(--ho-danger-line);
    border-inline-start-width: 4px;
    border-radius: 12px;
    padding: 12px 14px;
}
.npb-alert-t { font-weight: 600; color: var(--ho-danger-ink); }
.npb-alert p { margin: 2px 0 0; color: var(--ho-ink-muted); font-size: 13px; }
.npb-alert-go { margin-inline-start: auto; white-space: nowrap; color: var(--ho-info-ink); font-weight: 600; font-size: 13px; }

/* ── search · tabs · only-off ── */
.npb-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    background: var(--ho-brand-card);
    border: 1px solid var(--ho-brand-line);
    border-radius: var(--npb-radius);
    padding: 10px;
}
.npb-search {
    flex: 1 1 220px;
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--ho-line-strong);
    border-radius: 10px;
    padding: 0 12px;
    color: var(--ho-brand-ink-muted);
    background: var(--ho-brand-inset);
}
.npb-search input {
    flex: 1;
    border: 0;
    background: transparent;
    padding: 8px 0;
    color: var(--ho-brand-ink);
    font: inherit;
    font-size: 14px;
    outline: none;
}
.npb-search:focus-within { outline: 2px solid var(--ho-focus); outline-offset: 1px; }
.npb-seg { display: flex; flex-wrap: wrap; gap: 4px; background: var(--ho-brand-soft); border-radius: 10px; padding: 3px; }
.npb-seg button {
    border: 0;
    background: transparent;
    color: var(--ho-brand-ink-muted);
    font: inherit;
    font-size: 13px;
    padding: 6px 10px;
    border-radius: 8px;
    cursor: pointer;
}
.npb-seg button.npb-on { background: var(--ho-brand-card); color: var(--ho-brand-ink); font-weight: 600; box-shadow: 0 1px 2px var(--ho-brand-line); }
.npb-seg button:focus-visible { outline: 2px solid var(--ho-focus); }
.npb-n {
    display: inline-block;
    min-width: 20px;
    margin-inline-start: 6px;
    padding: 0 6px;
    border-radius: 10px;
    background: var(--ho-brand-line);
    color: var(--ho-brand-ink);
    font-size: 12px;
    text-align: center;
}
.npb-chk { display: flex; align-items: center; gap: 6px; color: var(--ho-brand-ink-muted); font-size: 13px; cursor: pointer; }

/* ── a group ── */
.npb-group {
    background: var(--ho-brand-card);
    border: 1px solid var(--ho-brand-line);
    border-radius: 16px;
    overflow: hidden;
}
.npb-gh {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--ho-brand-line);
    background: var(--ho-surface-brand);
}
.npb-gh h2 { margin: 0; font-size: 16px; font-weight: 700; }
.npb-sp { flex: 1; }
.npb-bulk { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.npb-bulk-pair { display: inline-flex; gap: 4px; }
.npb-btn {
    border: 1px solid var(--ho-line-strong);
    background: var(--ho-brand-card);
    color: var(--ho-brand-ink);
    border-radius: 8px;
    padding: 4px 8px;
    font: inherit;
    font-size: 12px;
    cursor: pointer;
}
.npb-btn:hover { background: var(--ho-brand-soft); }
.npb-btn:focus-visible { outline: 2px solid var(--ho-focus); }

.npb-cols { display: grid; grid-template-columns: var(--npb-cols); align-items: center; }
.npb-cols > div { padding: 0 6px; min-width: 0; }
.npb-colh { padding: 8px 16px; background: var(--ho-brand-soft); border-bottom: 1px solid var(--ho-brand-line); color: var(--ho-brand-ink-muted); font-size: 12px; }
.npb-colh-ch { display: flex; align-items: center; gap: 4px; }

.npb-ev { border-bottom: 1px solid var(--ho-brand-line); }
.npb-ev:last-child { border-bottom: 0; }
.npb-row { padding: 10px 16px; }
.npb-row + .npb-row { border-top: 1px dashed var(--ho-brand-line); }
.npb-ename { font-weight: 600; }
.npb-ecode { color: var(--ho-brand-ink-muted); font-size: 12px; direction: ltr; text-align: left; }
[dir="rtl"] .npb-ecode { text-align: right; }

.npb-who {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 3px 10px;
    background: var(--ho-brand-soft);
    font-size: 13px;
}
.npb-who-cust { background: var(--ho-accent-soft); color: var(--ho-accent-ink); }

.npb-cell { display: flex; align-items: center; gap: 8px; }
.npb-cell-ch { display: none; }
.npb-cell-txt { display: flex; flex-direction: column; min-width: 0; }
.npb-state { font-size: 12px; color: var(--ho-brand-ink-muted); }
.npb-na { font-size: 12px; color: var(--ho-ink-muted); }
.npb-tpl {
    font-size: 12px;
    color: var(--ho-info-ink);
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    direction: ltr;
}
[dir="rtl"] .npb-tpl { text-align: right; }
.npb-tpl-missing { color: var(--ho-warning-ink); font-weight: 600; }

/* ── the switch ── */
.npb-sw {
    position: relative;
    flex: none;
    width: 40px;
    height: 22px;
    border: 0;
    border-radius: 999px;
    background: var(--ho-line-strong);
    cursor: pointer;
    transition: background-color .15s;
}
.npb-sw i {
    position: absolute;
    top: 3px;
    inset-inline-start: 3px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--ho-surface);
    transition: inset-inline-start .15s;
}
.npb-sw-on { background: var(--ho-success-line); }
.npb-sw-on i { inset-inline-start: 21px; }
.npb-sw:focus-visible { outline: 2px solid var(--ho-focus); outline-offset: 2px; }
.npb-sw:disabled { cursor: not-allowed; opacity: .55; }

/* ── last results ── */
.npb-stat { display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; font-size: 12px; color: var(--ho-brand-ink-muted); }
.npb-sent { color: var(--ho-brand-ink); font-weight: 600; }
.npb-pill { display: inline-block; white-space: nowrap; border-radius: 999px; padding: 1px 8px; font-size: 12px; font-weight: 600; }
.npb-pill-bad { background: var(--ho-danger-soft); color: var(--ho-danger-ink); }
.npb-pill-warn { background: var(--ho-warning-soft); color: var(--ho-warning-ink); }
.npb-skip { color: var(--ho-info-ink); }

.npb-empty {
    padding: 32px;
    text-align: center;
    color: var(--ho-brand-ink-muted);
    background: var(--ho-brand-card);
    border: 1px dashed var(--ho-brand-line);
    border-radius: var(--npb-radius);
}

/* ── narrow: every row folds into a small card ── */
@media (max-width: 900px) {
    .npb-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .npb-colh { display: none; }
    .npb-cols { grid-template-columns: 1fr; row-gap: 8px; }
    .npb-evname-cont { display: none; }
    .npb-cell-ch { display: inline-flex; align-items: center; gap: 4px; min-width: 110px; font-size: 13px; }
}