/* SecurityBulletins page (/soc/bulletins) — migrated from SecurityBulletins.razor.css; scoped under .page-security-bulletins. */
.page-security-bulletins { display: flex; flex-direction: column; gap: 34px; }

/* ─── Load animations (skeleton) ──────────────────────────────── */

.page-security-bulletins .loading .sb-bar > *,
.page-security-bulletins .loading .sb-featured > *,
.page-security-bulletins .loading .panel > * { visibility: hidden; }

.page-security-bulletins .loading .sb-bar,
.page-security-bulletins .loading .sb-featured,
.page-security-bulletins .loading .panel { position: relative; }

.page-security-bulletins .loading .sb-bar::after { border: 1px solid var(--line); }

/* neutralise the featured card's red accent while the skeleton shows */
.page-security-bulletins .loading .sb-featured {
    border-color: var(--line);
    background: var(--surface);
    box-shadow: none;
}

.page-security-bulletins .loading .sb-bar::after,
.page-security-bulletins .loading .sb-featured::after,
.page-security-bulletins .loading .panel::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 10;
    background-color: var(--surface-2);
    background-image: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.06) 50%, transparent 70%);
    background-size: 200% 100%;
    background-repeat: no-repeat;
    animation: skel-shimmer 1.4s linear infinite;
}

/* ─── Category chips + search ─────────────────────────────────── */

.page-security-bulletins .sb-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.page-security-bulletins .sb-cats { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* The Add-filter menu and the search box share the right end of the bar. The menu's popover is absolutely
   positioned inside .tb-pop (components.css), so this row only has to lay the two triggers out. */
.page-security-bulletins .sb-bar-right { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

/* The removable chips for whatever that menu selected, on their own row under the bar, because the topic tags
   can be long, and wrapping them into the category pills would blur which control is which. */
.page-security-bulletins .sb-chips { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.page-security-bulletins .sb-cat {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 13px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface);
    color: var(--muted);
    font: 500 12.5px var(--font-body);
    cursor: pointer;
    white-space: nowrap;
    transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.page-security-bulletins .sb-cat:hover { color: var(--text); border-color: rgba(255, 255, 255, 0.22); }

.page-security-bulletins .sb-cat i {
    width: 8px;
    height: 8px;
    flex: none;
    border-radius: 50%;
    background: var(--c, var(--accent));
}

.page-security-bulletins .sb-cat span { color: var(--faint); font-variant-numeric: tabular-nums; }

.page-security-bulletins .sb-cat.is-active {
    color: var(--text);
    border-color: color-mix(in srgb, var(--c, var(--accent)) 55%, transparent);
    background: color-mix(in srgb, var(--c, var(--accent)) 10%, var(--surface));
}

/* ─── Featured bulletin ───────────────────────────────────────── */

.page-security-bulletins .sb-featured {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 22px 24px;
    border: 1px solid var(--accent-line);
    border-radius: var(--radius);
    background:
        linear-gradient(120deg, rgba(45, 212, 191, 0.06), transparent 55%),
        var(--surface);
    text-align: left;
    cursor: pointer;
    font: inherit;
    color: var(--text);
    overflow: hidden;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.page-security-bulletins .sb-featured:hover {
    border-color: var(--accent);
    box-shadow: 0 18px 36px -22px rgba(45, 212, 191, 0.35);
}

.page-security-bulletins .sb-featured-eyebrow {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent);
}

.page-security-bulletins .sb-featured-chips { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.page-security-bulletins .sb-featured h2 {
    margin: 2px 0 0;
    font-family: var(--font-display);
    font-size: 19px;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.page-security-bulletins .sb-featured p {
    margin: 0;
    max-width: 78ch;
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--muted);
}

.page-security-bulletins .sb-meta { font-size: 12px; color: var(--faint); font-variant-numeric: tabular-nums; }

/* ─── Shared tags / badges ────────────────────────────────────── */

.page-security-bulletins .sb-cattag {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    font-size: 11.5px;
    font-weight: 600;
    white-space: nowrap;
    color: var(--c, var(--muted));
    border: 1px solid color-mix(in srgb, var(--c, var(--muted)) 50%, transparent);
    background: color-mix(in srgb, var(--c, var(--muted)) 10%, transparent);
}

/* Topic tags (AWS, SaaS, …) — rounded chips on rows, the featured card and the flyout. Neutral by
   default; a tag that matches the customer's own tags gets .is-match, highlighted in the page accent
   so the customer can see at a glance which bulletins are relevant to their stack. */
.page-security-bulletins .sb-topics { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 5px; }
.page-security-bulletins .sb-topic {
    display: inline-flex;
    align-items: center;
    padding: 1px 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    color: color-mix(in srgb, var(--muted, #9AA4AD) 92%, #fff);
    border: 1px solid color-mix(in srgb, var(--muted, #9AA4AD) 34%, transparent);
    background: color-mix(in srgb, var(--muted, #9AA4AD) 12%, transparent);
}
.page-security-bulletins .sb-topic.is-match {
    color: color-mix(in srgb, var(--accent, #4D9FFF) 88%, #fff);
    border-color: color-mix(in srgb, var(--accent, #4D9FFF) 60%, transparent);
    background: color-mix(in srgb, var(--accent, #4D9FFF) 18%, transparent);
}

.page-security-bulletins .sb-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 9px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
}
.page-security-bulletins .sb-badge.new { color: var(--accent-2); border: 1px solid var(--accent-line); background: var(--accent-soft); }

/* ─── Bulletin list ───────────────────────────────────────────── */

.page-security-bulletins .sb-row {
    display: grid;
    grid-template-columns: 96px 150px minmax(0, 1fr) auto minmax(90px, auto);
    gap: 16px;
    align-items: center;
    padding: 15px 22px;
    border-bottom: 1px solid var(--line-soft);
    cursor: pointer;
    transition: background .18s ease;
}

/* bulletin id chip */
.page-security-bulletins .sb-tag {
    display: inline-block;
    justify-self: start;
    padding: 2px 8px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.03em;
    font-variant-numeric: tabular-nums;
    color: var(--accent-2);
    background: var(--accent-soft);
    white-space: nowrap;
}
.page-security-bulletins .sb-tag.lg { padding: 3px 10px; font-size: 12.5px; }
.page-security-bulletins .sb-row:hover { background: rgba(255, 255, 255, 0.035); }
.page-security-bulletins .sb-row:last-of-type { border-bottom: 0; }

.page-security-bulletins .sb-main { display: grid; gap: 3px; min-width: 0; }
.page-security-bulletins .sb-main strong {
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.page-security-bulletins .sb-sum {
    font-size: 12.5px;
    color: var(--faint);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.page-security-bulletins .sb-flags { display: flex; align-items: center; gap: 8px; }

.page-security-bulletins .sb-when { text-align: right; }
.page-security-bulletins .sb-when > span { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }

.page-security-bulletins .sb-empty {
    display: grid;
    gap: 6px;
    justify-items: center;
    padding: 44px 22px;
    text-align: center;
}
.page-security-bulletins .sb-empty strong { font-size: 14px; color: var(--muted); }
.page-security-bulletins .sb-empty span { font-size: 13px; color: var(--faint); }

.page-security-bulletins .sb-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* Carries the shared <Pager> beside the counts, so it wraps rather than squeezing on a narrow window. */
    flex-wrap: wrap;
    gap: 18px;
    padding: 13px 22px;
    border-top: 1px solid var(--line-soft);
    color: var(--faint);
    font-size: 12.5px;
}
.page-security-bulletins .sb-foot strong { color: var(--muted); font-variant-numeric: tabular-nums; }

/* ─── Reading flyout ──────────────────────────────────────────── */

.page-security-bulletins .fly-backdrop {
    position: fixed;
    inset: 0;
    z-index: 200;
    background: rgba(0, 0, 0, 0.45);
}

.page-security-bulletins .flyout {
    position: fixed;
    z-index: 210;
    top: 0;
    right: 0;
    height: 100vh;
    width: min(980px, calc(100vw - 24px));
    display: flex;
    flex-direction: column;
    padding: 18px 32px 0;
    background: var(--surface);
    border-left: 1px solid var(--line);
    box-shadow: -28px 0 60px -24px rgba(0, 0, 0, 0.8);
    animation: fly-in .28s cubic-bezier(0.4, 0, 0.2, 1) both;
}

.page-security-bulletins .fly-nav {
    display: flex;
    justify-content: flex-end;
    gap: 6px;
    margin-bottom: 10px;
}
.page-security-bulletins .fly-nav button {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border: 1px solid var(--line);
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    transition: color .15s ease, border-color .15s ease;
}
.page-security-bulletins .fly-nav button:hover:not(:disabled) { color: var(--text); border-color: rgba(255, 255, 255, 0.28); }
.page-security-bulletins .fly-nav button:disabled { opacity: 0.35; cursor: default; }
.page-security-bulletins .fly-nav button svg { width: 14px; height: 14px; }
.page-security-bulletins .fly-nav .fly-x { font-size: 18px; line-height: 1; }

.page-security-bulletins .fly-eyebrow { font-size: 12px; color: var(--faint); font-variant-numeric: tabular-nums; }

.page-security-bulletins .fly-title {
    margin: 6px 0 12px;
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: var(--text);
}

.page-security-bulletins .fly-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }

.page-security-bulletins .fly-body { flex: 1; overflow-y: auto; padding: 4px 2px 20px 0; border-top: 1px solid var(--line-soft); }

.page-security-bulletins .fly-h3 {
    margin: 18px 0 10px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--accent);
}

.page-security-bulletins .fly-desc { margin: 0; font-size: 13.5px; line-height: 1.65; color: var(--muted); }

.page-security-bulletins .fly-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 8px;
}
.page-security-bulletins .fly-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border: 1px solid var(--line);
    background: var(--surface-2);
    font-size: 13px;
    color: var(--muted);
}
.page-security-bulletins .fly-list svg { width: 15px; height: 15px; color: var(--accent); flex: none; }

.page-security-bulletins .fly-actions {
    margin: 0;
    padding-left: 20px;
    display: grid;
    gap: 8px;
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--muted);
}
.page-security-bulletins .fly-actions li::marker { color: var(--accent); font-weight: 700; }

.page-security-bulletins .fly-refs { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.page-security-bulletins .fly-refs a {
    font-size: 13px;
    color: var(--accent-2);
    text-decoration: none;
    word-break: break-all;
}
.page-security-bulletins .fly-refs a:hover { text-decoration: underline; }

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

@media (max-width: 1080px) {
    .page-security-bulletins .sb-row { grid-template-columns: minmax(0, 1fr) auto; row-gap: 8px; }
    .page-security-bulletins .sb-tag { order: -2; }
    .page-security-bulletins .sb-cattag { order: -1; justify-self: end; }
    .page-security-bulletins .sb-when { text-align: left; grid-column: 1 / -1; display: flex; gap: 10px; }
}

@media (prefers-reduced-motion: reduce) {
    .page-security-bulletins .loading .sb-bar::after,
    .page-security-bulletins .loading .sb-featured::after,
    .page-security-bulletins .loading .panel::after { animation: none; }
    .page-security-bulletins .flyout { animation: none; }
}

/* ─── Rich-text bulletin body (free-form advisories / patch summaries / best practice) ── */

.page-security-bulletins .fly-richtext { font-size: 13.5px; line-height: 1.65; color: var(--muted); }
.page-security-bulletins .fly-richtext > *:first-child { margin-top: 0; }
.page-security-bulletins .fly-richtext h1,
.page-security-bulletins .fly-richtext h2 {
    margin: 22px 0 10px;
    font-family: var(--font-display);
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--text);
}
.page-security-bulletins .fly-richtext h3,
.page-security-bulletins .fly-richtext h4 {
    margin: 18px 0 8px;
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
}
.page-security-bulletins .fly-richtext p { margin: 0 0 12px; }
.page-security-bulletins .fly-richtext ul,
.page-security-bulletins .fly-richtext ol { margin: 0 0 12px; padding-left: 22px; display: grid; gap: 6px; }
.page-security-bulletins .fly-richtext li::marker { color: var(--accent); }
.page-security-bulletins .fly-richtext a { color: var(--accent-2); text-decoration: none; word-break: break-word; }
.page-security-bulletins .fly-richtext a:hover { text-decoration: underline; }
.page-security-bulletins .fly-richtext blockquote {
    margin: 0 0 12px;
    padding: 8px 14px;
    border-left: 3px solid var(--accent);
    background: var(--surface-2);
    color: var(--text);
}
.page-security-bulletins .fly-richtext img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 14px 0;
    border: 1px solid var(--line);
    border-radius: var(--radius, 8px);
}
.page-security-bulletins .fly-richtext strong { color: var(--text); }

/* page override of the shared .tb-search */
.page-security-bulletins .tb-search { min-width: 220px; }