/* hiro/filament-toolkit — portable design system for Filament v5 (Tailwind v4).
*
* Styles are written from scratch, screen by screen, to match the provided
* designs. Add rules below targeting Filament's own .fi-* classes (and the
* --hiro-* design tokens).
*
* The consuming app supplies the @import of Filament's base theme and its own
* @source directives — they do NOT live here.
*/
/* ------------------------------------------------------------------ *
* Design tokens
* ------------------------------------------------------------------ */
:root {
--hiro-accent: #059669; /* emerald-600 */
--hiro-rail-w: 4.75rem; /* collapsed width */
--hiro-rail-w-open: 18rem; /* expanded width */
--hiro-topbar-h: 3.5rem; /* mobile top bar height (< 1024px) */
--hiro-rail-bg: #f6faf8; /* shared sidebar + rail surface (light) */
--hiro-rail-card-bg: #ffffff; /* toggle pill / card surface */
--hiro-rail-border: #e2e9e5;
--hiro-rail-fg: #637381;
--hiro-rail-hover: #f4f6f8;
--hiro-row-hover: #f3fbf7; /* soft mint — table row hover */
}
.dark {
--hiro-accent: #34d399; /* emerald-400 */
--hiro-rail-bg: #001110; /* shared sidebar + rail surface (dark) */
--hiro-rail-card-bg: #022c22; /* elevated pill surface — emerald-950 */
--hiro-rail-border: #0f3b34; /* teal border, harmonised with the palette */
--hiro-rail-fg: #94a3b8;
--hiro-rail-hover: rgb(255 255 255 / 0.04);
--hiro-row-hover: rgb(52 211 153 / 0.08);
}
/* Page chrome surfaces. Filament resolves its dark backgrounds from the raw
--gray-* palette (the page body is `bg-gray-950`; cards, sections, the
sidebar, the topbar, modals and tables are `bg-gray-900`). That palette is
injected inline in the on `:root`, so we override it from `:root.dark`
— higher specificity than Filament's `:root`, so it wins regardless of
stylesheet order. `--color-gray-*` is `var(--gray-*)`, so this flows through
to those too. */
:root.dark {
--gray-950: #020618; /* app / page background */
--gray-900: #001110; /* cards, sections, sidebar, topbar, modals, tables */
}
/* Main content region — the mid surface between the app background (#020618)
and the cards (#001110). Filament leaves `.fi-main-ctn` transparent (it shows
the body through), so paint it explicitly in dark mode. */
.dark .fi-main-ctn {
background-color: #101f1e;
}
/* ------------------------------------------------------------------ *
* Right rail — collapsible replacement for Filament's topbar
* ------------------------------------------------------------------ */
/* Reserve space for the fixed rail on desktop so content isn't covered. Scoped
to pages that actually render the rail, so panels without rail content (the
rail is omitted) keep the full content width. */
@media (min-width: 1024px) {
body:has(.hiro-rail) .fi-main-ctn {
padding-right: var(--hiro-rail-w);
}
}
.hiro-rail {
position: fixed;
inset-block: 0;
inset-inline-end: 0;
z-index: 30;
display: flex;
flex-direction: column;
gap: 0.125rem;
width: var(--hiro-rail-w);
/* No padding: the collapsed header sits flush at the top (like the
sidebar) and section separators span the full width. */
padding: 0;
background: var(--hiro-rail-bg);
border-inline-start: 1px solid var(--hiro-rail-border);
color: var(--hiro-rail-fg);
transition: width 0.2s ease;
/* visible so the collapse pill, which overhangs the leading edge, isn't
clipped; the body clips its own horizontal overflow instead. */
overflow: visible;
}
.hiro-rail--open {
width: var(--hiro-rail-w-open);
box-shadow: -16px 0 32px -24px rgba(15, 23, 42, 0.3);
}
/* On mobile the rail is not a fixed edge strip but an off-canvas drawer slid in
from the trailing edge by the mobile top bar's bell ($store.hiroRail). It
always shows the full panel (never the collapsed icon strip), and its edge
toggle pill is hidden — the bell and the backdrop are the only controls. */
@media (max-width: 1023px) {
.hiro-rail {
width: var(--hiro-rail-w-open);
max-width: 85vw;
z-index: 50;
transform: translateX(100%);
transition: transform 0.2s ease;
}
[dir='rtl'] .hiro-rail {
transform: translateX(-100%);
}
.hiro-rail.hiro-rail--drawer-open {
transform: translateX(0);
}
/* The base .hiro-rail__* rules appear later in this file, and a media query
does not add specificity — so these mobile overrides need the extra
`.hiro-rail` prefix to win. Without it the edge toggle stays visible and
the drawer shows the collapsed icon strip instead of the full panel. */
.hiro-rail .hiro-rail__toggle {
display: none;
}
.hiro-rail .hiro-rail__when-collapsed {
display: none;
}
.hiro-rail .hiro-rail__when-open {
display: flex;
flex-direction: column;
flex: 1 1 auto;
min-height: 0;
}
}
/* Full-screen scrim behind the open mobile drawer. Hidden by Alpine's x-show
until the drawer opens (which only happens on mobile). */
.hiro-rail-backdrop {
position: fixed;
inset: 0;
z-index: 49;
background: rgba(2, 6, 23, 0.5);
}
/* ------------------------------------------------------------------ *
* Mobile top bar (< 1024px)
* ------------------------------------------------------------------ *
* Rail mode strips Filament's topbar, which on phones leaves only a floating
* sidebar-toggle button and the mid-edge collapse pills — duplicated and hard
* to reach. This bar replaces them with one fixed strip: a hamburger (opens the
* sidebar overlay) and a bell (opens the rail drawer). Hidden ≥1024px. */
.hiro-mobile-topbar {
display: none;
}
@media (max-width: 1023px) {
.hiro-mobile-topbar {
position: fixed;
inset-block-start: 0;
inset-inline: 0;
z-index: 20;
display: flex;
align-items: center;
gap: 0.25rem;
height: var(--hiro-topbar-h);
padding-inline: 0.5rem;
background: var(--hiro-rail-bg);
border-block-end: 1px solid var(--hiro-rail-border);
}
/* Push page content clear of the fixed bar. */
body:has(.hiro-mobile-topbar) .fi-main-ctn {
padding-block-start: var(--hiro-topbar-h);
}
/* Pin every sticky table header below the fixed top bar instead of at the
viewport edge (where it would hide behind the bar). The sticky stack
already offsets from this var; cascading it from the body reaches each
table's toolbar / selection bar / column header. */
body:has(.hiro-mobile-topbar) {
--hiro-sticky-top: var(--hiro-topbar-h);
}
/* Filament's fallback floating toggle and the desktop edge pills are all
superseded by the bar on mobile. */
.fi-layout-sidebar-toggle-btn-ctn,
.fi-sidebar-open-collapse-sidebar-btn,
.fi-sidebar-close-collapse-sidebar-btn {
display: none !important;
}
}
.hiro-mobile-topbar__btn {
display: flex;
flex: 0 0 auto;
align-items: center;
justify-content: center;
width: 2.5rem;
height: 2.5rem;
padding: 0;
border: 0;
border-radius: 0.625rem;
background: transparent;
color: var(--hiro-rail-fg);
cursor: pointer;
transition:
color 0.15s ease,
background 0.15s ease;
}
.hiro-mobile-topbar__btn:hover {
background: var(--hiro-rail-hover);
color: var(--hiro-accent);
}
.hiro-mobile-topbar__icon {
width: 1.5rem;
height: 1.5rem;
}
.hiro-mobile-topbar__brand {
flex: 1 1 auto;
min-width: 0;
overflow: hidden;
text-align: center;
font-weight: 600;
font-size: 0.95rem;
color: var(--hiro-accent);
white-space: nowrap;
text-overflow: ellipsis;
}
.hiro-mobile-topbar__bell {
position: relative;
display: flex;
}
/* Account avatar in the bar — a circular initial/image, matching the rail's
own avatar so the two read as the same identity. */
.hiro-mobile-topbar__avatar {
display: grid;
place-items: center;
width: 1.75rem;
height: 1.75rem;
border-radius: 9999px;
background: var(--hiro-accent);
color: #ffffff;
font-size: 0.8rem;
font-weight: 600;
overflow: hidden;
}
.hiro-mobile-topbar__avatar-img {
width: 100%;
height: 100%;
object-fit: cover;
}
.hiro-mobile-topbar__badge {
position: absolute;
inset-block-start: -0.35rem;
inset-inline-end: -0.35rem;
display: grid;
place-items: center;
min-width: 1rem;
height: 1rem;
padding: 0 0.25rem;
border-radius: 9999px;
background: var(--hiro-accent);
color: #fff;
font-size: 0.625rem;
font-weight: 700;
line-height: 1;
}
/* Collapse / expand pill, vertically centred on the rail's leading edge
(mirrors Filament's sidebar collapse button). */
.hiro-rail__toggle {
position: absolute;
inset-inline-start: -0.85rem;
inset-block-start: 50%;
transform: translateY(-50%);
display: flex;
align-items: center;
justify-content: center;
width: 1.7rem;
height: 1.7rem;
border-radius: 9999px;
background: var(--hiro-rail-card-bg);
border: 1px solid var(--hiro-rail-border);
color: var(--hiro-rail-fg);
box-shadow: 0 1px 3px rgba(15, 23, 42, 0.12);
cursor: pointer;
transition:
color 0.15s ease,
border-color 0.15s ease;
}
.hiro-rail__toggle:hover {
color: var(--hiro-accent);
border-color: var(--hiro-accent);
}
/* Body holds the application-supplied content; column layout lets a
.hiro-rail__footer pin itself to the bottom via margin-top: auto. */
.hiro-rail__body {
flex: 1 1 auto;
display: flex;
flex-direction: column;
min-height: 0;
overflow-x: hidden;
overflow-y: auto;
}
/* State helpers: let the application render different content for the
collapsed strip vs the expanded panel. */
.hiro-rail__when-collapsed {
display: flex;
flex-direction: column;
flex: 1 1 auto;
min-height: 0;
}
.hiro-rail__when-open {
display: none;
}
.hiro-rail--open .hiro-rail__when-collapsed {
display: none;
}
.hiro-rail--open .hiro-rail__when-open {
display: flex;
flex-direction: column;
flex: 1 1 auto;
min-height: 0;
}
/* Collapsed strip mirrors the sidebar: a 4rem header with the avatar centred
(like the sidebar logo), then the icon items starting at the same offset. */
.hiro-rail__when-collapsed .hiro-rail__user {
height: 4rem; /* = sidebar header height */
justify-content: center;
margin: 0;
padding: 0;
}
.hiro-rail__when-collapsed .hiro-rail__items {
padding-block-start: 2rem; /* = sidebar nav padding, so icons start level */
padding-inline: 0.5rem; /* inset like the sidebar nav */
gap: 0.25rem;
}
.hiro-rail__when-collapsed .hiro-rail__item {
justify-content: center;
padding-inline: 0; /* icon centred; the items area provides the inset */
}
.hiro-rail__toggle-icon {
width: 0.9rem;
height: 0.9rem;
}
/* User block. */
.hiro-rail__user {
display: flex;
align-items: center;
gap: 0.625rem;
width: 100%;
padding: 0.25rem;
margin-bottom: 0.375rem;
background: transparent;
border: 0;
color: inherit;
text-align: start;
cursor: pointer;
}
.hiro-rail__avatar {
flex: none;
display: grid;
place-items: center;
width: 1.75rem;
height: 1.75rem;
border-radius: 9999px;
background: var(--hiro-accent);
color: #ffffff;
font-size: 0.8rem;
font-weight: 600;
}
/* Items (notifications, logout). */
.hiro-rail__items {
display: flex;
flex-direction: column;
gap: 0.125rem;
}
.hiro-rail__item {
display: flex;
align-items: center;
gap: 0.625rem;
width: 100%;
padding: 0.5rem 0.375rem;
border: 0;
border-radius: 0.5rem;
background: transparent;
color: inherit;
text-align: start;
cursor: pointer;
}
.hiro-rail__item:hover {
background: var(--hiro-rail-hover);
}
/* Same hover treatment on the sidebar nav items. */
.fi-sidebar-item-btn:hover {
background-color: var(--hiro-rail-hover);
}
.hiro-rail__icon {
position: relative;
flex: none;
display: grid;
place-items: center;
width: 1.5rem;
height: 1.5rem;
}
/* Match Filament's sidebar icon size (1.5rem) so the rail and sidebar icons
are visually identical. */
.hiro-rail__glyph {
width: 1.5rem;
height: 1.5rem;
}
/* Labels are revealed only when the rail is expanded. */
.hiro-rail__label {
font-size: 0.8rem;
font-weight: 500;
white-space: nowrap;
opacity: 0;
transition: opacity 0.15s ease;
}
.hiro-rail--open .hiro-rail__label {
opacity: 1;
}
/* Badges. */
.hiro-rail__badge {
position: absolute;
inset-block-start: -0.25rem;
inset-inline-end: -0.25rem;
display: grid;
place-items: center;
min-width: 1rem;
height: 1rem;
padding: 0 0.25rem;
border-radius: 9999px;
font-size: 0.625rem;
font-weight: 700;
line-height: 1;
color: #ffffff;
}
.hiro-rail__badge--primary {
background: var(--hiro-accent);
}
.hiro-rail__badge--danger {
background: #ef4444;
}
.hiro-rail__badge--warning {
background: #f59e0b;
}
.hiro-rail__badge--info {
background: #64748b;
}
/* Logout pinned to the bottom. */
.hiro-rail__footer {
margin-top: auto;
}
.hiro-rail__item--logout {
color: #ef4444;
}
/* ------------------------------------------------------------------ *
* Sidebar collapse toggle — same centred edge pill as the rail
* ------------------------------------------------------------------ */
/* Border separating the sidebar from the page, plus overflow visible so the
overhanging collapse pill isn't clipped. */
.fi-sidebar.fi-main-sidebar {
overflow: visible;
/* Same surface as the rail. */
background-color: var(--hiro-rail-bg);
border-inline-end: 1px solid var(--hiro-rail-border);
}
/* Reskin Filament's built-in collapse/expand buttons (only one is shown at a
time via x-show) into a pill centred on the sidebar's trailing edge. */
.fi-sidebar-open-collapse-sidebar-btn,
.fi-sidebar-close-collapse-sidebar-btn {
position: absolute;
inset-inline-end: -0.85rem;
inset-block-start: 50%;
transform: translateY(-50%);
z-index: 40;
display: flex;
align-items: center;
justify-content: center;
width: 1.7rem;
height: 1.7rem;
padding: 0;
border-radius: 9999px;
background: var(--hiro-rail-card-bg);
border: 1px solid var(--hiro-rail-border);
color: var(--hiro-rail-fg);
box-shadow: 0 1px 3px rgba(15, 23, 42, 0.12);
cursor: pointer;
transition:
color 0.15s ease,
border-color 0.15s ease;
}
.fi-sidebar-open-collapse-sidebar-btn:hover,
.fi-sidebar-close-collapse-sidebar-btn:hover {
color: var(--hiro-accent);
border-color: var(--hiro-accent);
}
.fi-sidebar-open-collapse-sidebar-btn svg,
.fi-sidebar-close-collapse-sidebar-btn svg {
width: 0.9rem;
height: 0.9rem;
}
/* Brand mark slot (SIDEBAR_LOGO_BEFORE): centred, shown only while the sidebar
is collapsed (Filament shows its own brand logo when expanded). */
.hiro-sidebar-mark {
display: flex;
justify-content: center;
width: 100%;
}
.fi-sidebar.fi-sidebar-open .hiro-sidebar-mark {
display: none;
}
/* Filament reserves a scrollbar gutter on the right of the nav, which shifts
items off-centre (extra gap on the right). Drop it for symmetric spacing. */
.fi-sidebar.fi-main-sidebar .fi-sidebar-nav {
scrollbar-gutter: auto;
}
/* Filament hides the labels when collapsed but keeps the sidebar at the full
--sidebar-width. Shrink the collapsed sidebar to the rail's collapsed width
so it's a true icon strip of matching width, and centre the icons. */
@media (min-width: 1024px) {
.fi-body-has-sidebar-collapsible-on-desktop
.fi-sidebar.fi-main-sidebar:not(.fi-sidebar-open) {
width: var(--hiro-rail-w) !important;
}
/* Centre the icons with equal spacing on both sides (Filament's default
1.5rem inline nav padding is uneven on a narrow strip). */
.fi-sidebar.fi-main-sidebar:not(.fi-sidebar-open) .fi-sidebar-nav {
padding-inline: 0.5rem;
}
.fi-sidebar.fi-main-sidebar:not(.fi-sidebar-open) .fi-sidebar-nav-groups {
margin-inline: 0;
}
.fi-sidebar.fi-main-sidebar:not(.fi-sidebar-open) .fi-sidebar-item-btn,
.fi-sidebar.fi-main-sidebar:not(.fi-sidebar-open) .fi-sidebar-group-btn {
justify-content: center;
padding-inline: 0;
column-gap: 0;
}
/* The (empty) badge container + gap would push the icon off-centre. */
.fi-sidebar.fi-main-sidebar:not(.fi-sidebar-open) .fi-sidebar-item-badge-ctn {
display: none;
}
}
/* ------------------------------------------------------------------ *
* Solid primary buttons
* ------------------------------------------------------------------ *
* Filament v5 renders the filled primary button as a light tint in light
* mode (fi-bg-color-400 fill + dark fi-text-color-900 text). Force the
* classic solid look — primary-600 fill + white text. Scoped to the filled
* variant (.fi-bg-color-400) so outlined / link / ghost buttons are
* untouched. */
.fi-btn.fi-color-primary.fi-bg-color-400 {
background-color: var(--primary-600);
color: #ffffff;
}
.fi-btn.fi-color-primary.fi-bg-color-400:hover {
background-color: var(--primary-700);
color: #ffffff;
}
/* The icon carries its own fi-text-color-*; force it to match the label. */
.fi-btn.fi-color-primary.fi-bg-color-400 .fi-icon {
color: #ffffff;
}
/* ------------------------------------------------------------------ *
* Bordered table cells
* ------------------------------------------------------------------ *
* Visible vertical separators between columns on toolkit tables (the
* `.hiro-row-actions` marker). Targeted by position on the row's direct
* children so it works for both the header (whose checkbox cell is a `th`
* `.fi-ta-selection-cell`, not a `.fi-ta-header-cell`) and the body. The
* separator is the left edge of every cell except the first (left gutter) and
* the last (the zero-width row-action pill column).
*
* Drawn as an inset box-shadow rather than a border: the table is
* `border-collapse: collapse`, so the per-cell hover background paints over
* collapsed cell borders and hides them — a box-shadow sits on top of the
* background and survives the hover. Filament's own row dividers supply the
* horizontal lines. */
.hiro-row-actions .fi-ta-table thead tr > th:not(:first-child):not(:last-child),
.hiro-row-actions tbody .fi-ta-row > td:not(:first-child):not(:last-child) {
box-shadow: inset 1px 0 0 0 var(--hiro-rail-border);
}
/* Centre the row/header selection checkbox within its cell. Filament gives the
leading cell an oversized inline-start padding (1.5rem vs 0.75rem at the end),
which pushes the checkbox left of the cell's true centre — equalise the
horizontal padding so text-align actually centres it. */
.hiro-row-actions .fi-ta-selection-cell {
text-align: center;
padding-inline: 0.75rem;
}
/* ------------------------------------------------------------------ *
* Row density — switch vertical (top/bottom) cell padding
* ------------------------------------------------------------------ *
* Filament pads body-cell content (.fi-ta-text/.fi-ta-icon/…) with 1rem block
* padding and header cells with 0.875rem. We drive that block padding off two
* variables so the whole table can flip between "comfortable" (Filament's
* defaults) and "compact" (tight rows) with one class on .
*
* Default (.hiro-row-actions) = comfortable, so the override is a visual no-op
* until the `.hiro-dense` modifier (added to the same container) lowers the
* variables. The control that sets/clears it lives in the table-settings modal
* (hiro-toolkit::table-settings) and persists per user + per list in the
* database; the class is rendered server-side on the table container, so there
* is no flash of the wrong density. The padding lives on each column's leaf
* content element (the | itself is padding:0), so the override targets those
* plus header/selection. */
.hiro-row-actions {
--hiro-cell-py: 1rem; /* comfortable body cell top/bottom padding */
--hiro-head-py: 0.875rem; /* comfortable header cell top/bottom padding */
}
.hiro-row-actions.hiro-dense {
--hiro-cell-py: 0.4375rem; /* compact body cell padding */
--hiro-head-py: 0.4375rem; /* compact header cell padding */
}
.hiro-row-actions tbody .fi-ta-row .fi-ta-text,
.hiro-row-actions tbody .fi-ta-row .fi-ta-text-input,
.hiro-row-actions tbody .fi-ta-row .fi-ta-text-summary,
.hiro-row-actions tbody .fi-ta-row .fi-ta-icon,
.hiro-row-actions tbody .fi-ta-row .fi-ta-image,
.hiro-row-actions tbody .fi-ta-row .fi-ta-color,
.hiro-row-actions tbody .fi-ta-row .fi-ta-select,
.hiro-row-actions tbody .fi-ta-row .fi-ta-checkbox,
.hiro-row-actions tbody .fi-ta-row .fi-ta-selection-cell {
padding-block: var(--hiro-cell-py);
}
.hiro-row-actions thead .fi-ta-header-cell,
.hiro-row-actions thead .fi-ta-selection-cell {
padding-block: var(--hiro-head-py);
}
/* Compact mode — tighten spacing *inside* a cell, not just around it.
* ------------------------------------------------------------------ *
* When a column has a description (or a "+N more" list message) Filament stacks
* the value over the secondary text as a flex column with a fixed gap (gap-y-1,
* or gap-y-2 when badges are present) and pads the description's own line. With
* only the outer cell padding lowered, such cells stayed visibly taller than
* their plain neighbours, so compact rows looked uneven. Lower the inner gap and
* the description leading too, so a cell with a description packs as tight as one
* without. Variable-driven (mirrors --hiro-cell-py) so it's a no-op until dense. */
.hiro-row-actions {
--hiro-cell-gap: 0.25rem; /* comfortable inner value/description gap (Filament gap-y-1) */
}
.hiro-row-actions.hiro-dense {
--hiro-cell-gap: 0.125rem; /* compact inner value/description gap */
}
.hiro-row-actions tbody .fi-ta-row .fi-ta-text-has-descriptions,
.hiro-row-actions tbody .fi-ta-row .fi-ta-text-list-limited {
gap: var(--hiro-cell-gap);
}
.hiro-row-actions.hiro-dense tbody .fi-ta-row .fi-ta-text-description {
line-height: 1.15rem; /* trim the description's own leading when dense */
}
/* ------------------------------------------------------------------ *
* Table-settings modal — per-list view preferences (density, …)
* ------------------------------------------------------------------ *
* Rendered by the TOOLBAR_END render hook (hiro-toolkit::table-settings) as a
* cog icon-button + Filament modal on every toolkit list page. Controls are
* client-side (Alpine + localStorage). Add a preference by appending another
* .hiro-settings-group to that view — the styling here is generic. */
.hiro-settings {
display: flex;
flex-direction: column;
}
/* One setting per row: label/hint on the left, control on the right. Rows are
divided by a hairline so the (now several) settings stay scannable. */
.hiro-settings-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding-block: 0.875rem;
}
.hiro-settings-row:first-child {
padding-top: 0;
}
.hiro-settings-row:last-child {
padding-bottom: 0;
}
.hiro-settings-row + .hiro-settings-row {
border-top: 1px solid var(--hiro-rail-border);
}
.hiro-settings-row__text {
display: flex;
flex-direction: column;
gap: 0.125rem;
min-width: 0;
}
.hiro-settings-title {
display: block;
font-size: 0.875rem;
font-weight: 600;
color: var(--gray-950);
}
.dark .hiro-settings-title {
color: #ffffff;
}
.hiro-settings-hint {
display: block;
font-size: 0.75rem;
color: var(--gray-500);
}
/* Compact inline segmented control sitting at the right of a settings row
(e.g. comfortable | compact, sticky on | off). */
.hiro-settings-seg {
display: inline-flex;
flex: none;
gap: 0.25rem;
}
/* Native select for choices with many options (e.g. filters layout) — keeps
the modal short instead of a long button list. */
.hiro-settings-select {
flex: none;
max-width: 12rem;
padding: 0.4375rem 0.625rem;
border: 1px solid var(--hiro-rail-border);
border-radius: 0.625rem;
background: transparent;
color: var(--gray-700);
font-size: 0.8125rem;
font-weight: 500;
cursor: pointer;
}
.hiro-settings-select:focus {
outline: none;
border-color: var(--hiro-accent);
}
.dark .hiro-settings-select {
color: var(--gray-300);
}
.hiro-settings-seg__btn {
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0.4375rem 0.6875rem;
border: 1px solid var(--hiro-rail-border);
border-radius: 0.625rem;
background: transparent;
color: var(--gray-700);
font-size: 0.8125rem;
font-weight: 500;
cursor: pointer;
transition:
background 0.15s ease,
border-color 0.15s ease,
color 0.15s ease;
}
.hiro-settings-seg__btn:hover {
background: var(--hiro-rail-hover);
}
.dark .hiro-settings-seg__btn {
color: var(--gray-300);
}
.hiro-settings-seg__btn--active {
border-color: var(--hiro-accent);
background: color-mix(in srgb, var(--hiro-accent) 12%, transparent);
color: var(--hiro-accent);
}
.hiro-settings-seg__icon {
width: 1.1rem;
height: 1.1rem;
}
/* ------------------------------------------------------------------ *
* Sticky header chrome + no horizontal scroll
* ------------------------------------------------------------------ *
* Toolkit tables never scroll sideways: `overflow-x: clip` clips a too-wide
* table (use the column-toggle menu to drop columns), and pairing it with
* `overflow-y: visible` keeps the container OUT of being a scroll container —
* so the column header escapes to the page scroll and the whole header chrome
* (toolbar, selection bar, thead) pins to the viewport with plain CSS, no JS. */
/* Filament adds `.fi-ta-ctn:not(.fi-ta-ctn-with-header) { overflow: hidden }`,
* which turns the table container into a scroll container on any table WITHOUT
* a header — e.g. the per-record list tabs (Contacts / Addresses / Bank
* accounts), whose heading lives on the page, not the table. That traps the
* sticky chrome: instead of escaping to the page scroll, the toolbar and column
* header pin relative to the short container (top:56px / top:117px from ITS top)
* and land ON TOP of the first body row, hiding it. Force the container's
* overflow visible so the sticky header always escapes to the page scroll, the
* same way a with-header table already behaves. Horizontal overflow is still
* clipped one level down on .fi-ta-content-ctn, so this adds no sideways scroll. */
.hiro-row-actions .fi-ta-ctn {
overflow: visible;
}
.hiro-row-actions .fi-ta-content-ctn {
overflow-x: clip;
overflow-y: visible;
/* Expose the visible card width as `cqw` so the floating pill and the row
detail can anchor to the card's right edge / visible width even when the
table is wider than the card. `100% - 100cqw` (row width minus visible
width) is exactly the hidden overflow. */
container-type: inline-size;
}
.hiro-row-actions {
--hiro-ta-toolbar-h: 3.8125rem; /* .fi-ta-header-ctn (~61px) */
--hiro-ta-selection-h: 2.3125rem; /* .fi-ta-selection-indicator (~37px) */
}
/* Toolbar — top of the pinned stack, following the card's rounded corners. */
.hiro-row-actions .fi-ta-header-ctn {
position: sticky;
top: var(--hiro-sticky-top, 0px);
z-index: 27;
background-color: #ffffff;
border-start-start-radius: 0.75rem;
border-start-end-radius: 0.75rem;
box-shadow: inset 0 1px 0 0 oklab(0.129 -0.0038832 -0.0418201 / 0.05);
}
.dark .hiro-row-actions .fi-ta-header-ctn {
background-color: var(--color-gray-900);
box-shadow: inset 0 1px 0 0 oklab(0.999994 0.0000455678 0.0000200868 / 0.1);
}
/* Align the toolbar's horizontal inset with the table cells (0.75rem) so the
header action buttons (create, search, column toggle) line up flush with the
column gutter on the left and the table edge on the right — Filament's
default 1.5rem toolbar padding leaves them inset relative to the cells. */
.hiro-row-actions .fi-ta-header-toolbar {
padding-inline: 0.75rem;
}
/* Selection bar — pinned below the toolbar (shown only while rows are selected;
Filament toggles it with [hidden]). */
.hiro-row-actions .fi-ta-selection-indicator:not([hidden]) {
position: sticky;
top: calc(var(--hiro-sticky-top, 0px) + var(--hiro-ta-toolbar-h));
z-index: 26;
background-color: oklch(0.984 0.003 247.858);
}
.dark .hiro-row-actions .fi-ta-selection-indicator:not([hidden]) {
/* Opaque card colour (needed so scrolled rows don't show through the sticky
bar) with no tint — the cell inherits the card surface. */
background-color: var(--color-gray-900);
}
/* Column header — pinned below the toolbar, dropping further when the selection
bar is shown. */
.hiro-row-actions .fi-ta-table thead th {
position: sticky;
top: calc(var(--hiro-sticky-top, 0px) + var(--hiro-ta-toolbar-h));
z-index: 25;
/* The header tint lives on the (non-sticky) | , which scrolls away — give
the sticky cell its own opaque surface so rows don't show through. */
background-color: oklch(0.984 0.003 247.858);
box-shadow: inset 0 -1px 0 0 var(--hiro-rail-border);
}
.hiro-row-actions:has(.fi-ta-selection-indicator:not([hidden])) .fi-ta-table thead th {
top: calc(
var(--hiro-sticky-top, 0px) + var(--hiro-ta-toolbar-h) +
var(--hiro-ta-selection-h)
);
}
.dark .hiro-row-actions .fi-ta-table thead th {
background-color: var(--color-gray-900);
}
/* Middle header cells keep the vertical separator alongside the bottom divider. */
.hiro-row-actions thead tr > th:not(:first-child):not(:last-child) {
box-shadow:
inset 1px 0 0 0 var(--hiro-rail-border),
inset 0 -1px 0 0 var(--hiro-rail-border);
}
/* Sticky-header opt-out — when the user disables it in table settings, the
toolbar, selection bar and column header scroll away with the content instead
of pinning. Only the pinning is dropped; the header chrome (radii, dividers,
no-horizontal-scroll) is kept. */
.hiro-row-actions.hiro-no-sticky .fi-ta-header-ctn,
.hiro-row-actions.hiro-no-sticky .fi-ta-selection-indicator:not([hidden]),
.hiro-row-actions.hiro-no-sticky .fi-ta-table thead th {
position: static;
}
/* ------------------------------------------------------------------ *
* Hover row-action pill + expandable row detail
* ------------------------------------------------------------------ *
* Enabled by the `.hiro-row-actions` class (set by RowDetails::apply on
* tables from the toolkit's base ListRecords). The trailing pill column is
* lifted out of table flow: a floating pill (edit shortcut + expand caret)
* pinned to the row's right edge that fades in on hover, plus a full-width
* detail band the caret toggles. Expanding sets `--hiro-detail-h` on the row,
* which reserves bottom padding on every cell (pushing rows below down) and
* gives the detail its height. */
/* Collapse the (empty) pill-column header to zero footprint. */
.hiro-row-actions .hiro-row-panel-header {
width: 0;
max-width: 0;
padding: 0;
}
/* Positioning context for the floated pill + detail. */
.hiro-row-actions .fi-ta-row {
position: relative;
}
/* Soft row hover (on the cells so it wins over Filament's per-cell bg). */
.hiro-row-actions .fi-ta-row:hover > .fi-ta-cell {
background-color: var(--hiro-row-hover);
}
/* Push-down: every cell of an expanded row reserves the detail's height at the
bottom; top-align so the cell text stays put above the reserved band. */
.hiro-row-actions .fi-ta-row > .fi-ta-cell {
transition: padding-bottom 200ms ease;
}
.hiro-row-actions .fi-ta-row.hiro-expanded > .fi-ta-cell {
vertical-align: top;
padding-bottom: var(--hiro-detail-h, 0px);
}
/* Anchor spans only the row's content band (row height minus the detail), so
the pill stays centred on the text line even when the row is expanded. It
floats over the row pinned to the card's VISIBLE right edge — `100% - 100cqw`
shifts it in by the hidden overflow so it stays on screen when columns are
clipped. */
.hiro-row-panel-anchor {
position: absolute;
inset-inline-end: calc(max(0px, 100% - 100cqw) + 0.75rem);
top: 0;
height: calc(100% - var(--hiro-detail-h, 0px));
display: flex;
align-items: center;
/* Below the fixed mobile topbar (z-index: 20) so the caret slides under the
bar on scroll instead of bleeding over it; still above the detail band. */
z-index: 15;
pointer-events: none;
}
/* The floating pill. */
.hiro-row-panel {
display: flex;
align-items: center;
flex-wrap: nowrap;
gap: 0.375rem;
padding: 0.375rem;
border-radius: 12px;
background: var(--hiro-rail-card-bg);
box-shadow:
0 4px 14px rgb(15 23 42 / 0.16),
0 0 0 1px var(--hiro-rail-border);
opacity: 0;
pointer-events: none;
transition: opacity 120ms ease;
}
/* Dark mode: a frosted, slightly translucent pill that floats better over the
table rows than the flat elevated surface. The blur lets the row beneath show
through just enough to read as glass; a hairline white ring + deeper drop
shadow lift it off the #001110 card. */
.dark .hiro-row-panel {
background: rgb(0 17 16 / 0.8); /* #001110, slightly translucent */
box-shadow:
0 6px 20px rgb(0 0 0 / 0.45),
0 0 0 1px rgb(255 255 255 / 0.08);
backdrop-filter: blur(10px) saturate(1.15);
}
.hiro-row-actions .fi-ta-row:hover .hiro-row-panel,
.hiro-row-panel.is-open,
/* Keyboard focus only — :focus-within would keep the pill stuck open after a
mouse click left focus on the caret. */
.hiro-row-panel:has(:focus-visible) {
opacity: 1;
pointer-events: auto;
}
/* ------------------------------------------------------------------ *
* Touch devices — no hover to summon the pill
* ------------------------------------------------------------------ *
* On a phone/tablet the hover pill is invisible (no hover) and, once the tap
* emulates hover, several buttons appear at once over the row's right edge —
* easy to mis-tap. Instead show a single, always-visible caret per row (one
* clear tap target); tapping it both expands the row detail and reveals the
* edit/delete actions, which stay hidden until then. */
@media (hover: none) {
.hiro-row-actions .hiro-row-panel {
opacity: 1;
pointer-events: auto;
}
/* Collapsed: show only the caret. Everything else in the pill — the action
buttons (whatever element Filament wraps them in) and the divider — is
hidden until the row is opened, when their natural display returns. */
.hiro-row-actions .hiro-row-panel:not(.is-open) > :not(.hiro-caret-wrap),
.hiro-row-actions .hiro-row-panel:not(.is-open) .hiro-pill-divider {
display: none;
}
/* …and strip the floating card entirely: no background, shadow or padding,
so the collapsed state is just the bare caret glyph over the row instead
of an opaque white panel masking the cell behind it. The full pill
surface (background, shadow, padding) returns on .is-open, when the action
buttons reappear and need it. */
.hiro-row-actions .hiro-row-panel:not(.is-open) {
gap: 0;
padding: 0;
background: transparent;
box-shadow: none;
}
.dark .hiro-row-actions .hiro-row-panel:not(.is-open) {
background: transparent;
box-shadow: none;
backdrop-filter: none;
}
/* Keep a caret on every actionable row even when no column is clipped, so
there is always exactly one tap target to open it. */
.hiro-row-actions .hiro-caret-wrap--optional {
display: contents;
}
/* Larger hit area for touch, but kept modest so the caret doesn't dwarf the
row (dense sizing is handled by the shared rule below). */
.hiro-row-actions .hiro-pill-btn {
width: 1.75rem;
height: 1.75rem;
}
}
/* Pill buttons (icon links + caret). */
.hiro-pill-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.75rem;
height: 1.75rem;
border-radius: 9px;
color: var(--hiro-rail-fg);
background: transparent;
border: 0;
cursor: pointer;
transition:
background 120ms ease,
color 120ms ease;
}
.hiro-pill-btn:hover {
background: var(--hiro-rail-hover);
color: var(--hiro-accent);
}
.hiro-pill-icon {
width: 1.15rem;
height: 1.15rem;
}
/* Dense lists have a short row band, so the open pill — sized for the
comfortable row — towers over it. Tighten the whole pill there (desktop hover
and touch alike): smaller padding/gap/radius and 1.5rem buttons across the
board — icon links, caret and the native record actions, which otherwise
stay full-size — with a proportionally smaller caret glyph. */
html.hiro-dense .hiro-row-panel {
gap: 0.25rem;
padding: 0.25rem;
border-radius: 10px;
}
html.hiro-dense .hiro-row-panel .hiro-pill-btn,
html.hiro-dense .hiro-row-panel .fi-icon-btn,
html.hiro-dense .hiro-row-panel .fi-btn {
width: 1.5rem;
height: 1.5rem;
}
html.hiro-dense .hiro-pill-icon {
width: 1rem;
height: 1rem;
}
/* Native record actions rendered inside the pill (icon buttons) — strip
Filament's button chrome so they read as flat pill buttons. */
.hiro-row-panel .fi-icon-btn,
.hiro-row-panel .fi-btn {
width: 1.75rem;
height: 1.75rem;
min-height: 0;
/* Filament's sm icon buttons ship a negative margin for tight toolbars;
reset it so the pill's gap/padding stay even and icons don't overlap. */
margin: 0;
padding: 0;
border: 0;
background: transparent;
box-shadow: none;
border-radius: 9px;
color: var(--hiro-rail-fg);
}
.hiro-row-panel .fi-icon-btn:hover,
.hiro-row-panel .fi-btn:hover {
background: var(--hiro-rail-hover);
color: var(--hiro-accent);
}
/* Keep danger actions (e.g. delete) signalled on hover. */
.hiro-row-panel .fi-icon-btn.fi-color-danger:hover,
.hiro-row-panel .fi-btn.fi-color-danger:hover {
color: #ef4444;
}
.hiro-row-panel .fi-icon-btn .fi-icon,
.hiro-row-panel .fi-btn .fi-icon {
width: 1.15rem;
height: 1.15rem;
color: inherit;
}
.hiro-pill-divider {
width: 1px;
align-self: stretch;
margin-inline: 0;
margin-block: 0.125rem;
background: var(--hiro-rail-border);
}
.hiro-caret .hiro-pill-icon {
transition: transform 180ms ease;
}
.hiro-caret--open .hiro-pill-icon {
transform: rotate(180deg);
}
/* The caret + its divider lay out as flex children of the pill (display:
contents is transparent to flexbox). When the row has no custom detail view,
the caret is "optional": shown only once the responsive controller flags
clipped columns (`.hiro-has-hidden` on the table root) — otherwise there is
nothing to expand. */
.hiro-caret-wrap {
display: contents;
}
.hiro-caret-wrap--optional {
display: none;
}
.hiro-row-actions.hiro-has-hidden .hiro-caret-wrap--optional {
display: contents;
}
/* Detail band, pinned to the bottom of the (grown) row, spanning the visible
card width (its right edge follows the visible edge, not the overflowing
table's right). */
.hiro-row-detail {
position: absolute;
inset-inline-start: 0;
inset-inline-end: max(0px, calc(100% - 100cqw));
bottom: 0;
height: var(--hiro-detail-h, 0px);
overflow: hidden;
z-index: 10;
background: var(--hiro-rail-bg);
transition: height 200ms ease;
}
/* Dividers only while open: collapsed the band is height:0, so top+bottom borders
would stack into a doubled line over the row's own divider. The top line frames
the detail; the bottom restores the row divider the opaque band paints over
(else the detail bleeds into the next row with no separation). */
.hiro-row-actions .fi-ta-row.hiro-expanded .hiro-row-detail {
border-top: 1px solid var(--hiro-rail-border);
border-bottom: 1px solid var(--hiro-rail-border);
}
.hiro-row-detail-inner {
padding: 1rem 1.25rem 1.125rem;
}
/* ---- Compact detail content (the registered row-detail views) ---- */
.hiro-rd-body {
display: flex;
flex-wrap: wrap;
gap: 1.25rem 2.5rem;
align-items: stretch;
}
/* The auto block (clipped columns) sits above the custom view; divide the two
when both are present. */
.hiro-rd-body--auto:not(:last-child) {
margin-bottom: 1rem;
padding-bottom: 1rem;
border-bottom: 1px solid var(--hiro-rail-border);
}
.hiro-rd-section {
min-width: 0;
flex: 1 1 56%;
}
.hiro-rd-section--side {
flex: 1 1 280px;
padding-inline-start: 2.5rem;
border-inline-start: 1px solid var(--hiro-rail-border);
}
.hiro-rd-title {
margin: 0 0 0.75rem;
font-size: 0.6875rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--hiro-rail-fg);
}
.hiro-rd-facts {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(165px, 1fr));
gap: 0.75rem 1.75rem;
margin: 0;
}
.hiro-rd-fact dt {
margin-bottom: 0.1875rem;
font-size: 0.6875rem;
color: var(--hiro-rail-fg);
}
.hiro-rd-fact dd {
margin: 0;
font-size: 0.875rem;
font-weight: 500;
line-height: 1.3;
color: #0f172a;
font-variant-numeric: tabular-nums;
}
.dark .hiro-rd-fact dd {
color: #e5e7eb;
}
/* ============================================================
* Per-record sub-navigation tabs (SubNavigationPosition::Top)
*
* Filament ships .fi-tabs as a centered rounded card with shadow and
* pill items. For the per-record edit-page tabs we want a flat strip:
* - flush left, no card chrome
* - hidden scrollbar (still scrollable)
* - bottom divider line acts as the rail
* - accent underline on the active tab
* ============================================================ */
.fi-page-sub-navigation-tabs {
margin-left: 0;
margin-right: auto;
background-color: transparent;
border-radius: 0;
box-shadow: none;
padding: 0;
gap: 0.25rem;
border-bottom: 1px solid var(--hiro-rail-border);
/* Single non-wrapping row that scrolls sideways when it outgrows the
viewport. The scrollbar is hidden — reachability comes from a finger
swipe (touch) or the edge-hover auto-scroll in tab-scroll.js (mouse). */
flex-wrap: nowrap;
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
overscroll-behavior-x: contain;
scrollbar-width: none;
scroll-behavior: smooth;
}
.fi-page-sub-navigation-tabs::-webkit-scrollbar {
display: none;
}
/* Keep each tab at its natural width — never squashed — so the strip overflows
(and scrolls) instead of compressing the labels. */
.fi-page-sub-navigation-tabs .fi-tabs-item {
flex: 0 0 auto;
white-space: nowrap;
}
/* Edge fade — shown only while the strip overflows in that direction (classes
toggled by tab-scroll.js). A mask works on any background and hints "there's
more this way". Scoped to the per-record sub-nav only: form tabs collapse
their overflow into a dropdown instead of scrolling (see below), and a mask
on that strip would create a clipping context that hides the dropdown. */
.fi-page-sub-navigation-tabs.hiro-tabs-overflow {
--hiro-tabs-fade-l: transparent;
--hiro-tabs-fade-r: transparent;
-webkit-mask-image: linear-gradient(
to right,
var(--hiro-tabs-fade-l) 0,
#000 1.5rem,
#000 calc(100% - 1.5rem),
var(--hiro-tabs-fade-r) 100%
);
mask-image: linear-gradient(
to right,
var(--hiro-tabs-fade-l) 0,
#000 1.5rem,
#000 calc(100% - 1.5rem),
var(--hiro-tabs-fade-r) 100%
);
}
.fi-page-sub-navigation-tabs.hiro-tabs-overflow.hiro-tabs-at-start {
--hiro-tabs-fade-l: #000; /* at the start → no left fade */
}
.fi-page-sub-navigation-tabs.hiro-tabs-overflow.hiro-tabs-at-end {
--hiro-tabs-fade-r: #000; /* at the end → no right fade */
}
/* Tighten the gap between the tab strip and the page content — the thin
* border under the tabs already separates them, so Filament's default
* 32px reads as dead space. */
.fi-page.fi-page-has-sub-navigation .fi-page-main {
gap: 1rem;
}
/* On a narrow viewport (< md) Filament swaps the tab strip for a dropdown
* (`.fi-page-sub-navigation-dropdown`). Its panel isn't teleported, so it lives
* in normal flow ABOVE the page content — but a toolkit list table below it
* establishes its own stacking context (`container-type` on .fi-ta-content-ctn),
* which, coming later in the DOM with an auto z-index, paints over the panel and
* hides it "under the list". The panel's own z-index can't help (it's scoped to
* the dropdown's context), so lift the whole dropdown into a higher stacking
* context that wins over the table. The list's sticky chrome (toolbar z-27,
* selection z-26, thead z-25) competes directly here (it isn't isolated), so the
* dropdown must clear z-27 — but stay below the main left sidebar drawer + its
* overlay (z-30) and the rail drawer (z-50) so those still cover it. z-29 sits
* in that window: above the table, under the sidebar. */
.fi-page-sub-navigation-dropdown {
position: relative;
z-index: 29;
}
.fi-page-sub-navigation-tabs .fi-tabs-item {
border-radius: 0;
background-color: transparent;
padding: 0.625rem 0.875rem;
border-bottom: 2px solid transparent;
margin-bottom: -1px; /* overlap the 1px rail so the 2px indicator covers it cleanly */
transition: border-color 140ms ease, color 140ms ease;
}
.fi-page-sub-navigation-tabs .fi-tabs-item:hover,
.fi-page-sub-navigation-tabs .fi-tabs-item:focus-visible {
background-color: transparent;
border-bottom-color: var(--hiro-rail-border);
}
.fi-page-sub-navigation-tabs .fi-tabs-item.fi-active {
background-color: transparent;
border-bottom-color: var(--hiro-accent);
}
.fi-page-sub-navigation-tabs .fi-tabs-item.fi-active .fi-tabs-item-label,
.fi-page-sub-navigation-tabs .fi-tabs-item.fi-active > .fi-icon {
color: var(--hiro-accent);
}
/* ============================================================
* Schema/form Tabs (`Tabs::make()` inside a form schema)
*
* Reuse the same flat-underline treatment so form tabs read as part of
* the same design system as the per-record sub-nav (instead of the
* default centered pill-card with ring + shadow).
* ============================================================ */
.fi-sc-tabs > .fi-tabs {
margin-left: 0;
margin-right: auto;
background-color: transparent;
border-radius: 0;
box-shadow: none;
padding: 0;
gap: 0.25rem;
border-bottom: 1px solid var(--hiro-rail-border);
--tw-ring-shadow: 0 0 #0000;
/* Keep overflow visible: Filament's schema tabs manage their own overflow
by collapsing the tabs that don't fit into an inline "more" dropdown.
That dropdown panel is a descendant of this strip (Filament dropdowns
aren't teleported by default), so clipping it for a horizontal scroll
would hide the dropdown under the content below. */
overflow: visible;
}
.fi-sc-tabs > .fi-tabs .fi-tabs-item {
border-radius: 0;
background-color: transparent;
padding: 0.625rem 0.875rem;
border-bottom: 2px solid transparent;
margin-bottom: -1px;
transition: border-color 140ms ease, color 140ms ease;
}
.fi-sc-tabs > .fi-tabs .fi-tabs-item:hover,
.fi-sc-tabs > .fi-tabs .fi-tabs-item:focus-visible {
background-color: transparent;
border-bottom-color: var(--hiro-rail-border);
}
.fi-sc-tabs > .fi-tabs .fi-tabs-item.fi-active {
background-color: transparent;
border-bottom-color: var(--hiro-accent);
}
.fi-sc-tabs > .fi-tabs .fi-tabs-item.fi-active .fi-tabs-item-label,
.fi-sc-tabs > .fi-tabs .fi-tabs-item.fi-active > .fi-icon {
color: var(--hiro-accent);
}