/* Reportes — the shared bundles hub. * * Only the pieces the /ui catalog does not have: the bundle row (after @disarto_max's * "Upload files" — file tile, name, mono uppercase meta line) and the activity timeline * (after @HAFEEZOLAMIDE1's "Activity log"). KPIs, table, chips, buttons, segmented * control, section heads, empty states and the breadcrumb page are the catalog defaults * and are NOT restyled here. Everything rides --bb-* tokens, so dark mode comes free. */ .rp-page { padding-bottom: 56px; } .rp-head { display: flex; align-items: center; gap: 10px; margin: 2px 0 14px; } .rp-h1 { margin: 0; font: 650 22px/1.2 'Outfit', system-ui, sans-serif; letter-spacing: -.02em; color: var(--bb-ink); } .rp-seg { margin: 0 0 12px; } /* ------------------------------------------------------------------ the rows */ .rp-list { display: flex; flex-direction: column; gap: 8px; } /* --------------------------------------------------------------- the cards * 1 oct 2026, Miguel: "instead of a row, make it like cards, with an image preview of the * landing page or the front of the page". Reference (CollectUI): "Integration project cards" * by @_adamboyle — a card body over a TINTED FOOTER STRIP that holds the actions. On top of * it, the report's own first screen, framed like a page on a desk: inset from the card edge, * top corners rounded, cut off at the bottom, so it reads as "a page" and not a thumbnail. * Hover lifts the card (DESIGN.md). Not-live cards desaturate their preview: the status is * the chip, and the picture agrees with it. */ .rp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; } .rp-card { display: flex; flex-direction: column; min-width: 0; overflow: hidden; background: var(--bb-surface); border-radius: var(--bb-r-card, 10px); box-shadow: var(--bb-sh-card); cursor: pointer; transition: transform .18s var(--bb-ease-out, ease-out), box-shadow .18s ease-out; } .rp-card:hover { transform: translateY(-2px); box-shadow: var(--bb-sh-raised, var(--bb-sh-card)); } .rp-card:active { transform: translateY(0) scale(.995); } .rp-prev { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--bb-field); border-bottom: 1px solid var(--bb-line); } .rp-shot { --s: .25; position: absolute; inset: 14px 16px 0; border-radius: 8px 8px 0 0; overflow: hidden; background: var(--bb-surface); box-shadow: 0 0 0 1px var(--bb-line), 0 6px 18px rgba(13, 42, 94, .10); display: grid; place-items: center; } .rp-shot iframe { position: absolute; top: 0; left: 0; width: 1280px; height: 1100px; border: 0; /* responsive.css caps every iframe at max-width:100% — that squeezed the 1280px layout to the card width BEFORE the scale, leaving a 70px sliver that read as a blank card. */ max-width: none; max-height: none; min-width: 1280px; transform: scale(var(--s)); transform-origin: 0 0; pointer-events: none; } .rp-shot.is-collage { display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 1fr; gap: 2px; place-items: stretch; background: var(--bb-line); } .rp-shot.is-collage img { width: 100%; height: 100%; object-fit: cover; display: block; min-height: 0; } .rp-ph { color: var(--bb-ink-3); opacity: .6; } .rp-ph svg { width: 28px; height: 28px; max-width: none; flex: none; display: block; } .rp-card.is-expired .rp-shot, .rp-card.is-revoked .rp-shot { filter: grayscale(1); opacity: .55; } .rp-cbody { padding: 12px 14px 12px; display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 0; } .rp-chead { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; } .rp-card .rp-title { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .rp-card .rp-meta { margin-top: 0; } .rp-cfoot { display: flex; align-items: center; gap: 4px; justify-content: flex-start; padding: 6px 8px; min-height: 40px; background: var(--bb-stripe-bg, var(--bb-field)); border-top: 1px solid var(--bb-line); } .rp-cfoot .tb-btn { color: var(--bb-ink-2); } .rp-cfoot .tb-btn:hover { color: var(--bb-ink); } .rp-cfoot-r { margin-left: auto; padding-right: 6px; font: 600 11.5px/1 'Outfit', system-ui, sans-serif; color: var(--bb-ink-3); } .rp-card.rp-is-page .rp-cfoot-r { display: none; } /* Row card = the catalog's row default: 1px hairline all round, card radius, NO side stripe. The status is the chip and the tile's tint. */ .rp-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 14px; padding: 13px 14px 13px 13px; background: var(--bb-surface); border-radius: var(--bb-r-card, 10px); box-shadow: var(--bb-sh-card); cursor: pointer; transition: background-color var(--bb-t-fast, .12s) ease-out, transform var(--bb-t-fast, .12s) var(--bb-ease-out, ease-out); } .rp-row:hover { background: var(--bb-hover); } .rp-row:active { transform: scale(.996); } .rp-tile { width: 36px; height: 36px; border-radius: 9px; flex: none; display: grid; place-items: center; background: var(--bb-accent-tint); color: var(--bb-accent); } .rp-tile svg { width: 18px; height: 18px; max-width: none; flex: none; } .rp-row.is-expired .rp-tile { background: var(--bb-orange-tint); color: var(--bb-orange); } .rp-row.is-revoked .rp-tile { background: var(--bb-field); color: var(--bb-ink-3); } .rp-main { min-width: 0; } .rp-title { font: 600 14px/1.3 'Outfit', system-ui, sans-serif; color: var(--bb-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rp-row.is-revoked .rp-title { color: var(--bb-ink-3); } /* The reference's meta line: mono, uppercase, tracked, slash-separated. */ .rp-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 7px; margin-top: 4px; font-family: var(--bb-mono); font-variant-numeric: tabular-nums; font-size: 10.5px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--bb-ink-3); } .rp-meta i { font-style: normal; opacity: .55; } .rp-meta .rp-soon { color: var(--bb-orange); font-weight: 600; } .rp-acts { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; } /* Chip tone the catalog has no alias for: expired = amber, same pair as `.cx-chip.cx-med`. */ .bp-chip.rp-chip-warn { color: var(--bb-orange); background: var(--bb-orange-tint); } .tb-btn.rp-danger { color: var(--bb-red); } .tb-btn.rp-danger:hover { background: var(--bb-red-tint); } .tb-btn.rp-primary { background: var(--bb-accent); color: #fff; box-shadow: none; } .tb-btn.rp-primary:hover { background: var(--bb-accent-ink); } .tb-btn:disabled { opacity: .55; cursor: default; } /* -------------------------------------------------------------- the detail */ .rp-detail { overflow: hidden; } .rp-dhead .rp-acts { margin-left: auto; } .rp-url { padding: 10px 20px 0; } .rp-url code { font-family: var(--bb-mono); font-size: 11.5px; color: var(--bb-ink-2); background: var(--bb-field); padding: 4px 8px; border-radius: 6px; word-break: break-all; } .rp-dkpis { margin: 14px 20px 6px; } .pm-tv.rp-tv-sm { font-size: 15px; } /* bypm.css paints `.pm-tv` with `--navy`, which has no dark value (navy on navy). The catalog default is `--bb-ink`; restate it here rather than edit By PM's file. */ .rp-kpis .pm-tv { color: var(--bb-ink); } .rp-sec { margin-top: 10px; } .rp-sec-b { padding: 14px 20px 18px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; } .rp-sec-b > .tb-empty, .rp-sec-b > .tb-err, .rp-sec-b > .rp-log, .rp-sec-b > table { flex: 1 1 100%; } .rp-sec-tbl { padding-top: 4px; overflow-x: auto; } .rp-note { font-size: 11.5px; color: var(--bb-ink-3); } .rp-add { display: flex; flex-wrap: wrap; gap: 8px; padding: 14px 20px 6px; } .rp-in { flex: 1 1 260px; min-width: 0; padding: 8px 11px; border: 0; border-radius: var(--bb-r-control, 8px); background: var(--bb-field); color: var(--bb-ink); box-shadow: inset 0 0 0 1px var(--bb-line); font: 400 12.5px/1.3 'Outfit', system-ui, sans-serif; } .rp-in-sm { flex: 0 1 170px; } .rp-in:focus { outline: none; box-shadow: inset 0 0 0 1.5px var(--bb-accent); background: var(--bb-surface); } .rp-acc td.rp-mail { font-family: var(--bb-mono); font-size: 12px; } .rp-acc tr.is-off td { color: var(--bb-ink-3); } .rp-acc td.rp-td-act { text-align: right; width: 1%; } /* -------------------------------------------------------------- the timeline */ .rp-log { list-style: none; margin: 0; padding: 0; } .rp-ev { position: relative; display: flex; align-items: flex-start; gap: 12px; padding: 0 0 14px; } .rp-ev:last-child { padding-bottom: 0; } /* The rail: a 1px line from under one node to the next. */ .rp-ev:not(:last-child)::before { content: ''; position: absolute; left: 12px; top: 28px; bottom: 2px; width: 1px; background: var(--bb-line); } .rp-node { width: 25px; height: 25px; border-radius: 50%; flex: none; display: grid; place-items: center; background: var(--bb-field); color: var(--bb-ink-2); } .rp-node svg { width: 13px; height: 13px; max-width: none; flex: none; } .rp-ev.k-in .rp-node { background: var(--bb-green-tint); color: var(--bb-green); } .rp-ev.k-dl .rp-node { background: var(--bb-accent-tint); color: var(--bb-accent); } .rp-ev.k-bad .rp-node { background: var(--bb-red-tint); color: var(--bb-red); } .rp-ev.k-admin .rp-node { background: var(--bb-orange-tint); color: var(--bb-orange); } .rp-ev-t { padding-top: 4px; font-size: 12.5px; line-height: 1.45; color: var(--bb-ink); min-width: 0; overflow-wrap: anywhere; } .rp-ev-t > b { font-weight: 600; } .rp-v { color: var(--bb-ink-3); } .rp-log-p { font-family: var(--bb-mono); font-size: 11px; color: var(--bb-ink-2); } .rp-when { color: var(--bb-ink-3); white-space: nowrap; } /* ------------------------------------------------------------------ narrow */ /* mobile.css gives a