/*
* Ricco — Filament v5 brand CSS (additive).
*
* Loaded by `AdminPanelProvider::boot()` via `FilamentAsset::register`
* AFTER Filament's pre-built `dist/theme.css`. This file is plain
* CSS — no Tailwind directives — because Tailwind v4's vendor-template
* scanning was unreliable on Windows (see the comment in
* AdminPanelProvider). Filament's bundle provides every utility class
* the blade templates expect; this file only contributes the
* Ricco design vocabulary on top.
*
* Source-of-truth: 2026 CC Brand Guide + Claude Design styles.css.
* Update both in lockstep when the brand changes.
*/
/* Brand fonts — direct selectors instead of `@theme --font-sans`
because Tailwind isn't processing this file. The Google Fonts
link tag is injected in AdminPanelProvider::boot(); these rules
tell every Filament page to actually use those families. */
html,
body,
.fi-body,
.fi-main,
.fi-modal {
font-family:
'Source Sans 3', 'Source Sans Pro', ui-sans-serif, system-ui, -apple-system,
BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}
:root {
/* === Brand colors (2026 CC Brand Guide) === */
--cc-gray: #454546; /* primary text / heads */
--cc-dim-gray: #696969; /* secondary text */
--cc-spanish: #939598; /* muted text */
--cc-light: #d1d2d4; /* borders / dividers */
--cc-air: #f6f6f6; /* app surface */
--cc-orange: #d46929; /* Active Orange — primary CTA */
--cc-orange-tint: #fbeee2; /* Orange wash for fills */
--cc-orange-deep: #b95414; /* Orange hover */
--cc-cyan: #1e90b9; /* Cyan Cornflower Blue — info / AI */
--cc-cyan-tint: #e3f3f9;
--cc-max: #44b3cc; /* MAX Blue */
--cc-max-tint: #e6f6fa;
/* === Semantic === */
--bg: #ffffff;
--bg-canvas: var(--cc-air);
--bg-elev: #ffffff;
--bg-sunken: #fafafa;
--bg-hover: #f3f3f4;
--fg: var(--cc-gray);
--fg-secondary: var(--cc-dim-gray);
--fg-muted: var(--cc-spanish);
--fg-inverse: #ffffff;
--border: #e5e5e7;
--border-strong: var(--cc-light);
--border-focus: var(--cc-cyan);
--ok-fg: #1f7a4a;
--ok-bg: #e6f4ec;
--ok-border: #b8dec7;
--warn-fg: #8a5a14;
--warn-bg: #fbeee2;
--warn-border: #efc89a;
--err-fg: #9a2a2a;
--err-bg: #fbeaea;
--err-border: #efb8b8;
--info-fg: #1e6a8a;
--info-bg: var(--cc-cyan-tint);
--info-border: #b8d9e5;
/* Shape */
--r-xs: 4px;
--r-sm: 6px;
--r-md: 8px;
--r-lg: 12px;
--r-xl: 16px;
--r-pill: 999px;
/* Elevation */
--shadow-1:
0 1px 2px rgba(20, 20, 30, 0.05), 0 0 0 1px rgba(20, 20, 30, 0.04);
--shadow-2:
0 4px 16px rgba(20, 20, 30, 0.08), 0 0 0 1px rgba(20, 20, 30, 0.04);
--shadow-3:
0 16px 40px rgba(20, 20, 30, 0.12), 0 0 0 1px rgba(20, 20, 30, 0.05);
}
/* Dark-mode overrides — Filament toggles ``
when the user picks dark mode (or system prefers it). Every
--cc-* hue stays the same (orange is orange in both modes) but
the semantic surface/text/border vars flip to dark equivalents
so anywhere we render with `var(--bg-elev)` / `var(--fg)` / etc.
adapts automatically. The pipeline tracker and custom-HTML cells
rely on these to look right against a dark Filament panel. */
.dark {
--bg: #0f172a;
--bg-canvas: #0b1220;
--bg-elev: #1e293b;
--bg-sunken: #111827;
--bg-hover: #1f2a3d;
--fg: #e5e7eb;
--fg-secondary: #cbd5e1;
--fg-muted: #94a3b8;
--fg-inverse: #0f172a;
--border: #334155;
--border-strong: #475569;
--ok-fg: #6ee7b7;
--ok-bg: rgba(31, 122, 74, 0.18);
--ok-border: rgba(110, 231, 183, 0.35);
--warn-fg: #fbbf24;
--warn-bg: rgba(212, 105, 41, 0.16);
--warn-border: rgba(251, 191, 36, 0.35);
--err-fg: #fca5a5;
--err-bg: rgba(154, 42, 42, 0.18);
--err-border: rgba(252, 165, 165, 0.35);
--info-fg: #7dd3fc;
--info-bg: rgba(30, 144, 185, 0.18);
--info-border: rgba(125, 211, 252, 0.35);
}
/* Sidebar logo wordmark sizing — Filament's default centres the
logo wide; brand mark wants a fixed square sit-side with text
beside it. The brand-mark.png we ship is icon-only so this is
just a sizing tweak. */
.fi-sidebar-header img {
height: 28px;
width: auto;
}
/* JetBrains Mono for inline identifiers — Filament's TextEntry +
text columns inherit `font-mono` when we apply the `font-mono`
helper. The `code` element gets it automatically. */
code,
.font-mono {
font-family: var(--font-mono);
font-variant-ligatures: none;
}
/* === Pipeline tracker (brand signature) ===
* The 4-stage chevron-jointed tracker that lives at the top of the
* Run Detail page. Ported verbatim from Claude Design — keep the
* chevron geometry and dimensions; the small dot + ring on the
* active stage is the moment the brand identity lands.
*/
.pipeline {
display: flex;
gap: 0;
align-items: stretch;
}
.stage {
flex: 1;
min-width: 0;
padding: 16px 18px;
background: var(--bg-elev);
color: var(--fg);
border: 1px solid var(--border);
border-right: none;
position: relative;
/* Flex column so an in-card CTA (e.g. View Import Summary on
the Source card) can pin to the bottom via `margin-top: auto`
while every other card without a CTA still keeps consistent
height — the parent `.pipeline` uses `align-items: stretch`. */
display: flex;
flex-direction: column;
}
.stage:first-child {
border-radius: var(--r-lg) 0 0 var(--r-lg);
}
.stage:last-child {
border-right: 1px solid var(--border);
border-radius: 0 var(--r-lg) var(--r-lg) 0;
}
.stage + .stage::before {
content: '';
position: absolute;
left: -10px;
top: 50%;
width: 20px;
height: 20px;
background: var(--bg-elev);
border-top: 1px solid var(--border);
border-right: 1px solid var(--border);
transform: translateY(-50%) rotate(45deg);
z-index: 1;
}
.stage-head {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 8px;
}
.stage-num {
width: 22px;
height: 22px;
border-radius: var(--r-pill);
display: grid;
place-items: center;
font-size: 11px;
font-weight: 700;
background: var(--bg-sunken);
color: var(--fg-muted);
border: 1px solid var(--border);
}
.stage-name {
font-size: 13px;
font-weight: 700;
color: var(--fg);
letter-spacing: 0.01em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.stage-meta {
font-variant-numeric: tabular-nums;
font-size: 12px;
color: var(--fg-secondary);
font-weight: 600;
}
.stage-detail {
font-size: 12px;
color: var(--fg-muted);
margin-top: 4px;
}
.stage-action {
font-family: var(--font-mono);
font-size: 11px;
color: var(--fg-muted);
margin-top: 12px;
opacity: 0.7;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.stage.done .stage-num {
background: var(--ok-bg);
color: var(--ok-fg);
border-color: var(--ok-border);
}
.stage.active .stage-num {
background: var(--cc-orange);
color: #ffffff;
border-color: var(--cc-orange);
}
.stage.warn .stage-num {
background: var(--warn-bg);
color: var(--warn-fg);
border-color: var(--warn-border);
}
.stage.pending .stage-num {
background: var(--bg-sunken);
color: var(--fg-muted);
}
.stage-running-pill {
display: inline-flex;
align-items: center;
gap: 5px;
font-size: 11px;
font-weight: 700;
color: var(--cc-orange);
text-transform: uppercase;
letter-spacing: 0.06em;
}
.stage-running-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--cc-orange);
box-shadow: 0 0 0 4px rgba(212, 105, 41, 0.18);
}
.stage-progress {
height: 3px;
margin-top: 12px;
background: var(--bg-sunken);
border-radius: 2px;
overflow: hidden;
position: relative;
}
.stage-progress > span {
display: block;
height: 100%;
background: var(--cc-orange);
}
/* Determinate mode — the width is set inline by the blade based
on real current/total. The width transitions smoothly so each
wire:poll tick visibly advances rather than snapping. */
.stage-progress[data-state="determinate"] > span {
transition: width 600ms ease-out;
}
/* Indeterminate mode — total unknown, so render a shimmer
sweeping left-to-right inside the track. Pure CSS keyframes;
no JS. The span fills 35% of the track width and slides across
on a continuous loop. */
.stage-progress[data-state="indeterminate"] > span {
width: 35%;
background: linear-gradient(
90deg,
rgba(212, 105, 41, 0) 0%,
var(--cc-orange) 40%,
var(--cc-orange) 60%,
rgba(212, 105, 41, 0) 100%
);
animation: stage-progress-shimmer 1.6s linear infinite;
}
@keyframes stage-progress-shimmer {
from { transform: translateX(-100%); }
to { transform: translateX(285%); }
}
/* In-card CTA button — pinned to the bottom of the stage card
via `margin-top: auto`. Used today only on the Source card to
surface the Import Summary modal. Stays compact and aligned
with the chevron-card aesthetic. */
.cc-stage-cta {
margin-top: auto;
align-self: stretch;
padding: 6px 10px;
border: 1px solid var(--border-strong);
border-radius: var(--r-sm);
background: transparent;
color: var(--fg);
font-size: 12px;
font-weight: 600;
cursor: pointer;
transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.cc-stage-cta:hover {
background: var(--bg-hover);
border-color: var(--cc-cyan);
color: var(--cc-cyan);
}
/* Pure-Alpine inline modal (used by the Source card's Import
Summary button). Stays out of Filament's modal stack because
the content is small and read-only; no Livewire round-trip
needed. */
.cc-modal-overlay {
position: fixed;
inset: 0;
z-index: 60;
background: rgba(15, 23, 42, 0.55);
backdrop-filter: blur(2px);
display: flex;
align-items: center;
justify-content: center;
padding: 16px;
}
.cc-modal-card {
width: 100%;
max-width: 640px;
max-height: 90vh;
background: var(--bg-elev);
color: var(--fg);
border: 1px solid var(--border);
border-radius: var(--r-lg);
box-shadow: var(--shadow-3);
overflow: hidden;
display: flex;
flex-direction: column;
}
.cc-modal-head {
position: relative;
padding: 18px 22px 14px;
border-bottom: 1px solid var(--border);
}
.cc-modal-heading {
font-size: 16px;
font-weight: 700;
margin: 0;
}
.cc-modal-sub {
margin: 4px 0 0;
font-size: 13px;
color: var(--fg-muted);
}
.cc-modal-close {
position: absolute;
top: 14px;
right: 14px;
width: 28px;
height: 28px;
border-radius: 6px;
border: none;
background: transparent;
color: var(--fg-muted);
cursor: pointer;
display: grid;
place-items: center;
}
.cc-modal-close:hover {
background: var(--bg-hover);
color: var(--fg);
}
.cc-modal-body {
padding: 18px 22px;
overflow-y: auto;
flex: 1 1 auto;
}
.cc-modal-foot {
padding: 12px 22px;
border-top: 1px solid var(--border);
background: var(--bg-sunken);
display: flex;
justify-content: flex-end;
gap: 8px;
}
.cc-modal-btn {
padding: 6px 14px;
border-radius: var(--r-sm);
border: 1px solid var(--border-strong);
background: var(--bg-elev);
color: var(--fg);
font-size: 13px;
font-weight: 600;
cursor: pointer;
}
.cc-modal-btn:hover {
background: var(--bg-hover);
}
/* === Review summary card (Run Detail right column) ===
* Net-new component per the Claude Design handoff. Donut chart +
* legend on top, divider, top flag reasons bar chart below. All
* `cc-*` prefixed classes are scoped to this partial so they can't
* collide with Filament's `fi-*` namespace. */
.cc-card {
background: var(--bg-elev);
border: 1px solid var(--border);
border-radius: var(--r-lg);
overflow: hidden;
}
.cc-card-head {
display: flex;
align-items: center;
gap: 12px;
padding: 14px 20px;
border-bottom: 1px solid var(--border);
}
.cc-card-title {
font-size: 15px;
font-weight: 700;
color: var(--fg);
margin: 0;
}
.cc-card-link {
margin-left: auto;
font-size: 13px;
font-weight: 600;
color: var(--cc-cyan);
text-decoration: none;
}
.cc-card-link:hover {
text-decoration: underline;
}
.cc-review-body {
padding: 20px 22px;
display: flex;
flex-direction: column;
gap: 16px;
}
.cc-donut-row {
display: flex;
align-items: center;
gap: 16px;
}
.cc-donut {
width: 96px;
height: 96px;
border-radius: 50%;
flex-shrink: 0;
display: grid;
place-items: center;
}
.cc-donut-hole {
width: 70px;
height: 70px;
border-radius: 50%;
background: var(--bg-elev);
display: grid;
place-items: center;
text-align: center;
}
.cc-donut-pct {
font-size: 18px;
font-weight: 700;
line-height: 1;
font-variant-numeric: tabular-nums;
color: var(--fg);
}
.cc-donut-label {
font-size: 10px;
color: var(--fg-muted);
text-transform: uppercase;
letter-spacing: 0.08em;
margin-top: 3px;
}
.cc-legend {
flex: 1;
display: flex;
flex-direction: column;
gap: 8px;
}
.cc-legend-row {
display: flex;
align-items: center;
gap: 8px;
font-size: 13px;
color: var(--fg);
}
.cc-legend-swatch {
width: 8px;
height: 8px;
border-radius: 2px;
flex-shrink: 0;
}
.cc-legend-label {
flex: 1;
}
.cc-legend-value {
font-variant-numeric: tabular-nums;
font-weight: 600;
}
.cc-muted {
color: var(--fg-muted);
}
.cc-divider {
height: 1px;
background: var(--border);
margin: 4px 0;
}
.cc-section-label {
font-size: 12px;
color: var(--fg-muted);
margin-bottom: 8px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
}
.cc-flag-list {
display: flex;
flex-direction: column;
gap: 8px;
}
.cc-flag-row {
display: flex;
align-items: center;
gap: 10px;
font-size: 13px;
color: var(--fg);
}
.cc-flag-label {
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.cc-flag-bar {
flex: 1;
height: 6px;
background: var(--bg-sunken);
border-radius: 3px;
overflow: hidden;
}
.cc-flag-bar > span {
display: block;
height: 100%;
background: var(--cc-orange);
}
.cc-flag-count {
font-variant-numeric: tabular-nums;
font-weight: 600;
width: 36px;
text-align: right;
}
/* === Run details compact 3-column grid === */
.cc-run-details-grid {
padding: 20px 22px;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
row-gap: 22px;
}
.cc-run-details-grid > div {
min-width: 0;
}
.cc-kpi-label {
font-size: 11px;
color: var(--fg-muted);
text-transform: uppercase;
letter-spacing: 0.06em;
font-weight: 600;
margin-bottom: 4px;
}
.cc-kpi-value {
font-size: 14px;
color: var(--fg);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.cc-kpi-value.cc-numeric {
font-variant-numeric: tabular-nums;
font-weight: 700;
}
/* === Two-column run-detail grid wrapper === */
.cc-run-detail-grid {
display: grid;
grid-template-columns: 1.6fr 1fr;
gap: 18px;
}
@media (max-width: 1024px) {
.cc-run-detail-grid {
grid-template-columns: 1fr;
}
}
/* === CSV split button ===
* Filament v5 has no native split-button primitive. We render
* Download CSV as a `color('gray')` Action followed by an
* `iconButton` ActionGroup chevron also on gray.
*
* Verified DOM (by `$group->toHtml()` dump):
*
*
← wrapper
*
*
*
*
*
* So `.cc-csv-split-caret` IS the button. For the negative margin
* we have to target the `.fi-dropdown` wrapper that follows the
* main button — that's the actual sibling in the action-bar flex
* row, not the button inside. */
/* Main half: Download CSV button — strip right-side radius. */
.cc-csv-split-main {
border-top-right-radius: 0 !important;
border-bottom-right-radius: 0 !important;
}
/* The dropdown wrapper following the main button — fully cancel
the action-bar's `gap: calc(var(--spacing)*3)` (= 12px). */
.cc-csv-split-main + .fi-dropdown {
margin-left: calc(var(--spacing, 0.25rem) * -3) !important;
}
/* Caret button. Rendering as `.fi-btn` (button() mode), so
background-color and the button outline ring come from
Filament's `.fi-btn:not(.fi-outlined)` rules — DO NOT override
`box-shadow` (it carries the button's outline ring composed
of multiple `--tw-*-shadow` variables). Use `border-left` for
the divider between halves so it stacks with Filament's
shadows instead of replacing them. */
.cc-csv-split-caret {
border-top-left-radius: 0 !important;
border-bottom-left-radius: 0 !important;
padding-inline: 0.5rem !important;
border-left: 1px solid rgba(0, 0, 0, 0.18) !important;
}
.dark .cc-csv-split-caret {
border-left-color: rgba(255, 255, 255, 0.18) !important;
}
/* === AI-action cyan icon accent ===
* Brand rule from the Claude Design handoff: "Cyan = AI." Actions
* that invoke ML — Apply Transform, Enrich Items — get a cyan
* tint on their leading icon while the button itself stays the
* secondary `gray` fill. Targets the SVG that Filament renders
* inside the button; `currentColor` lets the icon path inherit
* the override without us reaching into the SVG markup. */
.cc-ai-action svg {
color: var(--cc-cyan, #1e90b9) !important;
}
/* === Items review filter chip rail ===
* Per the Claude Design `items.jsx` mock (lines 47–77). Sits
* between the items table title and the filter row. Selected
* chip is orange (Active Orange brand CTA) with white text and a
* subtle shadow; idle chips are gray-on-white-ish (or dark in
* dark mode) with a count next to the label.
*
* Wired up via the render hook registered in AdminPanelProvider
* scoped to ItemsRelationManager. Counts and active state come
* from the relation manager's Livewire props via Alpine `$wire`. */
.cc-chip-row {
display: flex;
align-items: center;
/* Center the VIEW chip rail horizontally in its container per
Steven's 2026-05-22 direction. `justify-content: center`
centers the whole strip (the VIEW label + every chip) as a
single unit so the visual balance matches a tab-bar. */
justify-content: center;
gap: 8px;
flex-wrap: wrap;
/* Top buffer so the chip rail has breathing room from the
Activity Log section above. NO horizontal padding —
Filament's table-header container already provides the
interior padding; adding more pushed the chip-rail label
past the left edge of the visible area. */
padding: 16px 0 4px;
margin-bottom: 8px;
}
/* Filters bar inline layout — force the filter row to be flex
instead of CSS Grid. Filament v5 renders the filter form as a
`