/* API notifications page. Scoped under .apim; moved from the Blade view unchanged. */
.apim { --ink:#102a26; --muted:#5f716d; --faint:#9aa8a4; --line:#e2eae7; --canvas:#eef3f1;
    --surface:#fff; --surface-2:#f6f9f8; --teal:#075e54;
    --wa:#25d366; --wa-ink:#14824a; --read:#53bdeb; --tick:#8696a0;
    --sms:#c98a04; --sms-bg:#fdf3dc; --fail:#c2410c; --fail-bg:#fdeee6; --never:#a8a29e;
    font-family:"Plus Jakarta Sans",system-ui,sans-serif; color:var(--ink);
    background:var(--canvas); min-height:calc(100vh - 60px); padding:28px 30px 40px;
    -webkit-font-smoothing:antialiased; }
.apim a:focus-visible, .apim button:focus-visible, .apim summary:focus-visible,
.apim input:focus-visible { outline:2px solid var(--teal); outline-offset:2px; }
.apim-wrap { max-width:1080px; }

/* head */
.apim-head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px 24px;
    flex-wrap:wrap; margin-bottom:22px; }
.apim-h1 { font-family:"Bricolage Grotesque",sans-serif; font-weight:700; font-size:30px;
    letter-spacing:-.025em; line-height:1.1; margin:0; }
.apim-sub { color:var(--muted); font-size:14px; margin:6px 0 0; max-width:62ch; }
.apim-live { display:inline-flex; align-items:center; gap:9px; font-size:13px; font-weight:600;
    color:var(--muted); cursor:pointer; user-select:none; margin-top:6px; }
.apim-live input { accent-color:var(--wa-ink); width:16px; height:16px; margin:0; }

/* outcome bar: one proportional strip, each segment a filter */
.apim-outcomes { margin-bottom:22px; }
.apim-bar { display:flex; height:14px; border-radius:7px; overflow:hidden; background:var(--line); gap:2px; }
.apim-bar a { display:block; min-width:6px; transition:filter .12s; }
.apim-bar a:hover { filter:brightness(.92); }
.apim-bar.filtered a:not(.on) { opacity:.28; }
.apim-legend { display:flex; flex-wrap:wrap; gap:6px 22px; margin:12px 0 0; padding:0; list-style:none; }
.apim-legend a { display:inline-flex; align-items:baseline; gap:8px; text-decoration:none; color:var(--muted);
    font-size:13px; font-weight:500; padding:2px 0; border-bottom:2px solid transparent; }
.apim-legend a:hover { color:var(--ink); }
.apim-legend a.on { color:var(--ink); border-bottom-color:currentColor; }
.apim-legend .sw { width:10px; height:10px; border-radius:3px; align-self:center; flex:none; }
.apim-legend .n { font-family:"Bricolage Grotesque",sans-serif; font-weight:700; font-size:20px;
    color:var(--ink); font-variant-numeric:tabular-nums; }
.apim-legend .zero .n { color:var(--faint); }
.o-read { background:var(--read); } .o-delivered { background:var(--wa); } .o-sent { background:#9be7b6; }
.o-sms { background:var(--sms); } .o-fail { background:var(--fail); } .o-never { background:var(--never); }

/* filters */
.apim-filters { display:flex; gap:10px; flex-wrap:wrap; align-items:flex-end; margin-bottom:14px; }
.apim-field { display:flex; flex-direction:column; gap:4px; font-size:12px; font-weight:600; color:var(--muted); }
/* Both are <label>s: cancel Bootstrap's `label { margin-bottom:.5rem }`, which pushed the
   fields above the Show messages button and the refresh toggle off the title's line. */
.apim .apim-field { margin:0; }
.apim .apim-live { margin:8px 0 0; } /* centred on the title's 33px line */
.apim-field input { height:40px; border:1px solid var(--line); border-radius:10px; padding:0 12px;
    font:inherit; font-size:14px; font-weight:500; color:var(--ink); background:var(--surface); }
.apim-field select { height:40px; border:1px solid var(--line); border-radius:10px; padding:0 30px 0 10px;
    font:inherit; font-size:14px; font-weight:500; color:var(--ink); background-color:var(--surface); }
.apim-field.grow { flex:1 1 180px; } /* small enough that the whole row fits on one line at 1080px */
.apim-btn { height:40px; border:none; border-radius:10px; padding:0 18px; font:inherit; font-weight:700;
    font-size:14px; background:var(--ink); color:#fff; cursor:pointer; }
.apim-btn:hover { background:var(--teal); }
.apim-reset { font-size:13px; font-weight:600; color:var(--teal); align-self:center; }

/* list */
.apim-list { background:var(--surface); border:1px solid var(--line); border-radius:14px; overflow:hidden; }
.apim-row { border-bottom:1px solid var(--line); }
.apim-row:last-child { border-bottom:none; }
.apim-row > summary { list-style:none; cursor:pointer; display:grid; gap:8px 18px; padding:14px 20px;
    align-items:baseline; /* date, template and number share the first line's baseline */
    grid-template-columns:96px minmax(0,1fr) auto 14px; grid-template-areas:"when what to chev" "when route route chev"; }
.apim-row > summary::-webkit-details-marker { display:none; }
.apim-row > summary:hover, .apim-row[open] > summary { background:var(--surface-2); }
.apim-when { grid-area:when; font-size:13px; font-weight:600; font-variant-numeric:tabular-nums; }
.apim-when small { display:block; font-weight:500; color:var(--faint); font-size:12px; margin-top:2px; }
.apim-what { grid-area:what; min-width:0; font-weight:600; font-size:15px; overflow:hidden;
    text-overflow:ellipsis; white-space:nowrap; }
.apim-what small { font-weight:500; color:var(--faint); font-size:12.5px; margin-left:6px; }
.apim-what .via { color:var(--muted); font-weight:500; font-size:13px; margin-left:8px; }
.apim-to { grid-area:to; font-size:13.5px; color:var(--muted); font-variant-numeric:tabular-nums; }
.apim-chev { grid-area:chev; align-self:center; color:var(--faint); font-size:11px; transition:transform .15s; }
.apim-row[open] .apim-chev { transform:rotate(90deg); }

/* SIGNATURE: the route each message took. WhatsApp ticks, then SMS if it was needed. */
.apim-route { grid-area:route; display:flex; flex-wrap:wrap; align-items:center; gap:4px 0;
    margin:0; padding:0; list-style:none; font-size:12.5px; }
.apim-route li { display:inline-flex; align-items:center; gap:6px; white-space:nowrap; }
.apim-route li + li::before { content:""; width:22px; height:2px; margin:0 8px; border-radius:1px; background:var(--line); }
.apim-route li.done + li::before, .apim-route li.fail + li.sms::before { background:var(--tick); }
.apim-route .ch { font-weight:700; color:var(--muted); }
.apim-route .g { width:20px; height:20px; border-radius:50%; display:grid; place-items:center; font-size:10px;
    background:var(--surface-2); color:var(--tick); border:1px solid var(--line); flex:none; }
.apim-route .t { font-weight:600; color:var(--ink); }
.apim-route .at { color:var(--faint); font-variant-numeric:tabular-nums; }
.apim-route li.todo .g { color:var(--faint); border-style:dashed; background:transparent; }
.apim-route li.todo .t { color:var(--faint); font-weight:500; }
.apim-route li.read .g { color:#fff; background:var(--read); border-color:var(--read); }
.apim-route li.fail .g { color:#fff; background:var(--fail); border-color:var(--fail); }
.apim-route li.fail .t { color:var(--fail); }
.apim-route .why { color:var(--muted); font-weight:500; max-width:28ch; overflow:hidden; text-overflow:ellipsis; }
/* the SMS step is a different channel, so a different colour */
.apim-sms .g { color:#fff; background:var(--sms); border-color:var(--sms); }
.apim-sms .t { color:#8a5d00; }
.apim-sms.queued .g { background:var(--sms-bg); color:var(--sms); border-color:var(--sms); }
.apim-sms.failed .g { background:var(--fail); border-color:var(--fail); }
.apim-sms.failed .t { color:var(--fail); }

/* expanded details: the story on the left, the message on the right, raw data folded away */
.apim-detail { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:22px 36px;
    padding:8px 20px 22px 134px; background:var(--surface-2); }
.apim-detail h3 { font-size:13px; font-weight:700; color:var(--muted); margin:0 0 8px; }
.apim-detail .apim-sub-h { margin-top:18px; }

.apim-summary { font-family:"Bricolage Grotesque",sans-serif; font-weight:600; font-size:18px; line-height:1.35;
    letter-spacing:-.01em; margin:0 0 16px; max-width:52ch; padding-left:12px; border-left:3px solid var(--tick); }
.apim-summary.good { border-left-color:var(--wa); }
.apim-summary.sms { border-left-color:var(--sms); }
.apim-summary.waiting { border-left-color:var(--sms); }
.apim-summary.bad { border-left-color:var(--fail); }

/* the journey, oldest first, in the route line's colours */
.apim-steps { list-style:none; margin:0; padding:0; }
/* fixed time column: each step is its own grid, so `auto` would collapse when a step has no time */
.apim-steps li { position:relative; display:grid; grid-template-columns:24px 92px 1fr; column-gap:10px;
    align-items:baseline; padding:0 0 14px; font-size:14px; }
.apim-steps li::before { content:""; position:absolute; left:11px; top:22px; bottom:0; width:2px; background:var(--line); }
.apim-steps li:last-child { padding-bottom:0; }
.apim-steps li:last-child::before { display:none; }
.apim-steps .dot { grid-row:1 / span 2; align-self:start; width:24px; height:24px; border-radius:50%; display:grid;
    place-items:center; font-size:10px; color:var(--tick); background:var(--surface); border:1px solid var(--line); }
.apim-steps time { grid-column:2; color:var(--muted); font-size:13px; font-variant-numeric:tabular-nums; white-space:nowrap; }
.apim-steps .what { grid-column:3; font-weight:600; } /* own column, so steps without a time still line up */
.apim-steps .note { grid-column:2 / -1; color:var(--muted); font-size:13.5px; line-height:1.45; margin-top:3px; max-width:56ch; }
.apim-steps .read .dot { color:#fff; background:var(--read); border-color:var(--read); }
.apim-steps .delivered .dot { color:var(--wa-ink); }
.apim-steps .failed .dot { color:#fff; background:var(--fail); border-color:var(--fail); }
.apim-steps .failed .what { color:var(--fail); }
.apim-steps .sms .dot { color:#fff; background:var(--sms); border-color:var(--sms); }
.apim-steps .sms-waiting .dot { color:var(--sms); background:var(--sms-bg); border-color:var(--sms); }
.apim-steps .queued .dot { color:var(--muted); border-style:dashed; }
.apim-steps .queued .what { color:var(--muted); font-weight:500; }
.apim-steps .sms .what, .apim-steps .sms-waiting .what { color:#8a5d00; }

.apim-tips { margin-top:18px; padding:12px 14px; border-radius:10px; background:var(--surface); border:1px solid var(--line); }
.apim-tips h3 { margin-bottom:6px; color:var(--ink); }
.apim-tips ul { margin:0; padding-left:18px; font-size:14px; line-height:1.5; }
.apim-tips li + li { margin-top:4px; }

.apim-about .apim-facts .pair { display:contents; }

.apim-tech { grid-column:1 / -1; border-top:1px solid var(--line); padding-top:12px; }
.apim-tech > summary { cursor:pointer; font-size:13px; font-weight:600; color:var(--muted); width:max-content; }
.apim-tech > summary:hover { color:var(--ink); }
.apim-tech[open] > summary { margin-bottom:12px; }
.apim-tech h4 { font-size:12.5px; font-weight:700; color:var(--muted); margin:14px 0 6px; }
.apim-tech pre { margin:0; max-width:640px; background:var(--surface); border:1px solid var(--line); border-radius:10px;
    padding:11px 13px; font-size:12.5px; color:var(--ink); white-space:pre-wrap; word-break:break-word; }
.apim-facts { display:grid; grid-template-columns:auto 1fr; gap:7px 16px; font-size:14px; margin:0; }
.apim-facts dt { color:var(--muted); font-weight:500; }
.apim-facts dd { margin:0; overflow-wrap:anywhere; }
.apim-copy { border:1px solid var(--line); background:var(--surface); color:var(--teal); border-radius:7px;
    font-size:11.5px; font-weight:700; padding:2px 8px; margin-left:6px; cursor:pointer; }
.apim-link { color:var(--teal); font-weight:600; font-size:13px; }

.apim-empty { padding:52px 24px; text-align:center; }
.apim-empty-title { font-family:"Bricolage Grotesque",sans-serif; font-weight:700; font-size:19px; margin:0 0 6px; }
.apim-empty-sub { color:var(--muted); font-size:14px; max-width:48ch; margin:0 auto; }
.apim-pager { padding:14px 20px; border-top:1px solid var(--line); }
.apim-pager nav { display:flex; justify-content:center; }

@media (max-width:760px) {
    .apim { padding:20px 16px 32px; }
    .apim-h1 { font-size:25px; }
    .apim-row > summary { grid-template-columns:minmax(0,1fr) 14px; padding:13px 16px;
        grid-template-areas:"when chev" "what chev" "route chev"; }
    .apim-when { display:flex; gap:8px; align-items:baseline; }
    .apim-when small { display:inline; margin:0; }
    .apim-to { display:none; }
    /* one line on a phone: the channel is implied by the ticks, the reason is in the details */
    .apim-route li:first-child, .apim-route .why { display:none; }
    .apim-route li:nth-child(2)::before { display:none; }
    .apim-route li + li::before { width:8px; margin:0 5px; }
    .apim-route li:not(:last-child) .at { display:none; }
    .apim-route li { gap:5px; }
    .apim-route .g { width:18px; height:18px; font-size:9px; }
    .apim-detail { grid-template-columns:minmax(0,1fr); padding:6px 16px 18px; }
    .apim-summary { font-size:16.5px; }
    /* dates share the row and the button spans it, so every control ends on the same right edge */
    .apim-field { flex:1 1 130px; }
    .apim-field input, .apim-field select { width:100%; min-width:0; }
    .apim-btn { flex:1 1 100%; }
}
@media (prefers-reduced-motion:reduce) {
    .apim * { transition:none !important; }
}

/* React-only states */
.apim-reset { border:none; background:none; padding:0; cursor:pointer; font-family:inherit; }
.apim-loading { margin:0; padding:40px 20px; text-align:center; color:var(--muted); font-size:14px; }
.apim-error { margin:0 0 14px; padding:10px 14px; border-radius:10px; font-size:13.5px;
    background:var(--fail-bg); color:#7c2d12; border:1px solid #f5c9b3; }
.apim-error button { border:none; background:none; padding:0; font:inherit; font-weight:700; color:var(--fail);
    text-decoration:underline; cursor:pointer; }
.apim-dim { opacity:.55; transition:opacity .12s; }

/* pagination footer: count on the left, pages in the middle, page size on the right */
.apim-pager { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px 18px;
    padding:12px 20px; border-top:1px solid var(--line); background:var(--surface); font-size:13px; color:var(--muted); }
.apim-count { margin:0; font-variant-numeric:tabular-nums; }
.apim-pages { display:flex; align-items:center; gap:4px; }
.apim-pages button { min-width:34px; height:34px; padding:0 10px; border-radius:8px; border:1px solid transparent;
    background:none; font:inherit; font-weight:600; color:var(--ink); cursor:pointer; font-variant-numeric:tabular-nums; }
.apim-pages button:hover:not(:disabled) { background:var(--surface-2); border-color:var(--line); }
.apim-pages button.on { background:var(--ink); color:#fff; cursor:default; }
.apim-pages button.step { border-color:var(--line); display:inline-flex; align-items:center; gap:7px; }
.apim-pages button.step i { font-size:10px; }
.apim-pages button:disabled { color:var(--faint); cursor:default; }
.apim-pages .gap { min-width:20px; text-align:center; color:var(--faint); }
.apim .apim-size { display:inline-flex; align-items:center; gap:8px; margin:0; font-weight:500; color:var(--muted); }
.apim-size select { height:34px; border:1px solid var(--line); border-radius:8px; padding:0 8px; font:inherit;
    font-weight:600; color:var(--ink); background:var(--surface); }
@media (max-width:760px) {
    .apim-pager { padding:12px 16px; justify-content:center; }
    .apim-pages { order:-1; width:100%; justify-content:center; gap:2px; }
    /* chevrons only on a phone; the buttons keep their aria-label */
    .apim-pages .step .txt { display:none; }
    .apim-pages button { min-width:32px; padding:0 6px; }
    .apim-pages .gap { min-width:14px; }
}