/* ============================================================
Zeper Go HRM — Filament theme skin
Maps the "Zeper Go" design system onto Filament's shell.
Light + Dark palettes mirror the source HTML mockup.
============================================================ */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap');
:root {
--zp-bg: #f1f4fd;
--zp-panel: #ffffff;
--zp-panel2: #f7f9ff;
--zp-border: #e2e8f6;
--zp-text: #0e0e44;
--zp-sub: #61688c;
--zp-accent: #381baf;
--zp-accent2: #005bc9;
--zp-cyan: #00ddd7;
--zp-mint: #48f2ff;
--zp-hover: #eef1fc;
--zp-warn: #f7980c;
--zp-danger: #ef4034;
--zp-info: #2984fb;
--zp-ok: #1ac689;
--zp-grid: #e6eaf7;
--zp-shadow: 0 1px 3px rgba(14, 14, 68, .06), 0 8px 24px rgba(14, 14, 68, .05);
--zp-grad: linear-gradient(120deg, #4913b7, #2d99ea 55%, #6be2f2);
--zp-grad2: linear-gradient(120deg, #381baf, #005bc9);
}
.dark {
--zp-bg: #0e0e44;
--zp-panel: #121556;
--zp-panel2: #10134e;
--zp-border: #1c1d68;
--zp-text: #eaecfb;
--zp-sub: #9aa1c8;
--zp-accent: #6645dd;
--zp-accent2: #2d99ea;
--zp-cyan: #00ddd7;
--zp-mint: #48f2ff;
--zp-hover: #191c63;
--zp-warn: #f7980c;
--zp-danger: #ef4034;
--zp-info: #2984fb;
--zp-ok: #1ac689;
--zp-grid: #1c1d68;
--zp-shadow: 0 1px 3px rgba(0, 0, 0, .45), 0 10px 30px rgba(0, 0, 0, .4);
--zp-grad2: linear-gradient(120deg, #4913b7, #2d99ea);
}
/* ---------- Typography ---------- */
.fi-body,
.fi-sidebar,
.fi-main {
font-family: 'DM Sans', 'Inter', system-ui, sans-serif !important;
-webkit-font-smoothing: antialiased;
}
.fi-header-heading,
.fi-section-header-heading,
.fi-modal-heading,
.fi-wi-stats-overview-stat-value,
h1, h2, h3 {
font-family: 'Space Grotesk', 'DM Sans', sans-serif !important;
letter-spacing: -.01em;
}
/* ---------- App background ---------- */
.fi-body {
background-color: var(--zp-bg) !important;
color: var(--zp-text);
}
.fi-main-ctn,
.fi-main {
background-color: var(--zp-bg) !important;
}
/* ---------- Main content area — full width, comfortable padding ----------
Filament default: max-w-7xl (1280px) mx-auto px-4 md:px-6 lg:px-8.
With maxContentWidth(Full) set in the panel, max-w-full removes the
width cap; we keep a modest horizontal padding matching the mockup. */
.fi-main {
max-width: 100% !important;
padding-left: 26px !important;
padding-right: 26px !important;
padding-top: 0 !important;
}
/* ---------- Sidebar ---------- */
.fi-sidebar,
.fi-sidebar-header,
.fi-sidebar-nav {
background-color: var(--zp-panel) !important;
border-color: var(--zp-border) !important;
}
/* vertical divider separating the sidebar (logo + nav) from the main area,
matching the mockup's `aside { border-right }` — appears right after the logo */
.fi-sidebar {
border-right: 1px solid var(--zp-border) !important;
}
/* Make the brand area flow as the top of the sidebar — no separate header bar.
Filament's default is a rigid h-16 strip with ring + shadow + bg that reads
like a top navbar; the mockup has the brand seamlessly atop the sidebar. */
.fi-sidebar-header {
background-color: var(--zp-panel) !important;
box-shadow: none !important;
border: none !important;
--tw-ring-shadow: 0 0 #0000 !important;
--tw-ring-offset-shadow: 0 0 #0000 !important;
height: auto !important;
min-height: 0 !important;
align-items: flex-start !important;
padding: 18px 14px 8px !important;
}
/* nav list spacing — tight gaps, minimal top padding so it hugs the brand */
.fi-sidebar-nav {
padding: 6px 10px 12px !important;
gap: 2px !important;
}
.fi-sidebar-nav-groups,
.fi-sidebar-group,
.fi-sidebar-group-items {
gap: 2px !important;
}
/* group header row (collapsible button holds the spacing) — compact */
.fi-sidebar-group-button {
padding: 12px 12px 5px !important;
}
/* group label — 10px / 700 / uppercase / .7px tracking / muted; no own padding */
.fi-sidebar-group-label {
font-size: 10px !important;
font-weight: 700 !important;
letter-spacing: .7px !important;
line-height: 1.2 !important;
text-transform: uppercase !important;
color: var(--zp-sub) !important;
opacity: .7 !important;
padding: 0 !important;
}
/* collapse chevron — shrink so the row isn't tall */
.fi-sidebar-group-collapse-button { width: 16px !important; height: 16px !important; }
/* nav item — 13.5px / 600 / muted, 9px·12px padding, 11px gap, 10px radius */
.fi-sidebar-item-button {
border-radius: 10px !important;
padding: 9px 12px !important;
gap: 11px !important;
justify-content: flex-start !important;
font-family: 'DM Sans', sans-serif !important;
font-size: 13.5px !important;
font-weight: 600 !important;
color: var(--zp-sub) !important;
background: transparent !important;
position: relative !important;
transition: background .2s, color .2s, transform .15s !important;
}
.fi-sidebar-item-label {
font-size: 13.5px !important;
font-weight: 600 !important;
color: inherit !important;
}
.fi-sidebar-item-icon {
width: 17px !important;
height: 17px !important;
color: var(--zp-sub) !important;
transition: transform .25s, color .2s !important;
}
/* hover */
.fi-sidebar-item-button:hover {
background: var(--zp-hover) !important;
color: var(--zp-text) !important;
}
.fi-sidebar-item-button:hover .fi-sidebar-item-icon {
color: var(--zp-text) !important;
transform: scale(1.12);
}
/* active — accent-tinted bg, accent text/icon, 3px left bar */
.fi-sidebar-item.fi-active > .fi-sidebar-item-button,
.fi-sidebar-item-button.fi-active {
background: color-mix(in srgb, var(--zp-accent) 14%, transparent) !important;
color: var(--zp-accent) !important;
}
.fi-sidebar-item.fi-active .fi-sidebar-item-icon,
.fi-sidebar-item-button.fi-active .fi-sidebar-item-icon {
color: var(--zp-accent) !important;
}
.fi-sidebar-item.fi-active > .fi-sidebar-item-button::before,
.fi-sidebar-item-button.fi-active::before {
content: "";
position: absolute;
left: 0;
top: 18%;
height: 64%;
width: 3px;
border-radius: 3px;
background: var(--zp-accent);
}
/* nav count badges keep the brand accent tone */
.fi-sidebar-item-badge { font-weight: 700 !important; }
/* ---------- Topbar ---------- */
.fi-topbar > nav {
background-color: var(--zp-panel) !important;
border-bottom: 1px solid var(--zp-border) !important;
}
/* custom "Ask Zoono AI" search bar (TOPBAR_START render hook) */
.zp-topbar-search {
display: flex;
align-items: center;
gap: 10px;
flex: 1;
max-width: 460px;
padding: 9px 14px;
margin-right: 14px;
background: var(--zp-bg);
border: 1px solid var(--zp-border);
border-radius: 10px;
color: var(--zp-sub);
cursor: text;
text-align: left;
transition: border-color .2s, box-shadow .2s;
}
.zp-topbar-search:hover { border-color: var(--zp-accent); }
.zp-topbar-search:focus-visible {
outline: none;
border-color: var(--zp-accent);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--zp-accent) 18%, transparent);
}
.zp-topbar-search svg { flex-shrink: 0; color: var(--zp-sub); }
.zp-topbar-search-text {
font-size: 13.5px;
font-family: 'DM Sans', sans-serif;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
@media (max-width: 1024px) {
.zp-topbar-search { max-width: none; margin-right: 8px; }
.zp-topbar-search-text { font-size: 12.5px; }
}
/* notification bell trigger — keep it tidy in the topbar */
.fi-topbar .fi-icon-btn { color: var(--zp-sub); }
/* "View as role" switcher (HR/Admin only) — mockup .role-switch */
.zp-roles {
display: flex;
background: var(--zp-bg);
border: 1px solid var(--zp-border);
border-radius: 10px;
padding: 3px;
gap: 2px;
}
.zp-role {
border: none;
background: transparent;
color: var(--zp-sub);
font-size: 12px;
font-weight: 600;
padding: 6px 11px;
border-radius: 8px;
cursor: pointer;
font-family: 'DM Sans', sans-serif;
white-space: nowrap;
transition: background .18s, color .18s;
}
.zp-role:hover { color: var(--zp-text); }
.zp-role-active {
background: var(--zp-grad2);
color: #fff !important;
}
@media (max-width: 1100px) {
.zp-roles { display: none; }
}
/* role line inside the user-menu dropdown */
.zp-usermenu-role {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 14px 4px;
}
.zp-usermenu-role-label {
font-size: 10px;
font-weight: 700;
letter-spacing: .5px;
text-transform: uppercase;
color: var(--zp-sub);
}
.zp-usermenu-role-badge {
font-size: 11.5px;
font-weight: 700;
color: #fff;
background: var(--zp-grad2);
padding: 2px 10px;
border-radius: 20px;
}
.zp-usermenu-role-preview {
font-size: 10px;
font-weight: 600;
color: var(--zp-warn);
border: 1px solid color-mix(in srgb, var(--zp-warn) 40%, transparent);
border-radius: 20px;
padding: 1px 7px;
}
/* ---------- Brand block (custom logo view) ---------- */
.fi-logo { width: 100%; }
.zp-brand {
display: flex;
align-items: center;
gap: 11px;
}
.zp-brand-mark {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
}
.zp-brand-mark svg { width: 24px; height: 19px; }
.zp-brand-text h1 {
font-family: 'Space Grotesk', sans-serif;
font-size: 16px;
font-weight: 700;
line-height: 1.1;
color: var(--zp-text);
}
.zp-brand-text p {
font-size: 11px;
color: var(--zp-sub);
margin-top: 2px;
}
/* ---------- Cards / sections ---------- */
.fi-section,
.fi-wi-stats-overview-stat,
.fi-ta-ctn,
.fi-fo-component-ctn .fi-section {
border-radius: 16px !important;
box-shadow: var(--zp-shadow);
}
/* ---------- Buttons keep brand radius ---------- */
.fi-btn {
border-radius: 10px !important;
}
/* ---------- Inputs ---------- */
.fi-input,
.fi-select-input,
.fi-fo-field-wrp .fi-input {
border-radius: 10px !important;
}
/* ---------- The phantom focus ring on the app's own fields ----------
Clicking a hand-rolled search box drew a second rectangle inside it
instead of lighting up the box itself.
@tailwindcss/forms ships inside Filament's compiled stylesheet, and it
carries a rule for every bare field:
[type=text]:focus, ..., select:focus, textarea:focus {
--tw-ring-color: #2563eb;
--tw-ring-shadow: ... 0 0 0 1px var(--tw-ring-color);
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
That paints a 1px blue ring on the input element. Where the app styles
the *wrapper* as the visible field - a pill with the magnifier in it,
the input inside stripped to `border: none; background: transparent` -
the ring is drawn around the stripped input, inset from the pill it
sits in. So focus produced thin blue lines a few pixels inside the pill
rather than the pill's own border turning blue. `outline: none` on the
input never touched it: it is a box-shadow, not an outline.
Filament's own inputs already carry `focus:ring-0` for exactly this
reason. This gives the app's fields the same thing, once, instead of
every screen having to remember to.
Only the ring variables are neutralised, not `box-shadow` itself, so a
field that deliberately draws its own focus shadow (the attendance
correction textarea, for one) keeps it.
Excluded: checkboxes, radios and file inputs, whose ring is their only
focus indicator, and anything Filament renders (`fi-*`), which is not
ours to restyle. */
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([class*="fi-"]):focus,
select:not([class*="fi-"]):focus,
textarea:not([class*="fi-"]):focus {
--tw-ring-shadow: 0 0 #0000;
--tw-ring-offset-shadow: 0 0 #0000;
}
/* ---------- The month / year jump picker ----------------------------
Lifted out of the Calendar page so Revenue & Profitability can use the
same control rather than a second one that looks nearly like it.
The shape is the Calendar's and is deliberately unchanged: a run of
years, then the months inside the year chosen, the period on screen
filled and today's outlined - two different facts, and a period can be
both. What is added here is only what a second consumer needs, and the
Calendar is unaffected by any of it.
Named `zcal-*` still: renaming it would have meant touching every line
of the Calendar's markup to no visible end. */
.zcal-jump { position: relative; flex: 0 1 auto; min-width: 0; }
.zcal-jump-panel {
position: absolute;
z-index: 30;
top: calc(100% + 6px);
left: 0;
width: 244px;
padding: 10px;
border-radius: 14px;
background: var(--zp-panel, #fff);
border: 1px solid var(--zp-border, #e2e8f6);
box-shadow: 0 12px 32px rgba(56, 27, 175, .16);
}
.zcal-jump-head {
display: flex; align-items: center; justify-content: space-between;
gap: 6px; margin-bottom: 8px;
}
.zcal-jump-step {
display: flex; align-items: center; justify-content: center;
width: 26px; height: 26px; flex: none;
border: 0; border-radius: 8px; cursor: pointer;
background: var(--zp-hover, #eef2fb); color: var(--zp-sub, #61688c);
}
.zcal-jump-step:hover { color: var(--zp-text, #0e0e44); }
.zcal-jump-level {
flex: 1; padding: 4px 8px; border: 0; border-radius: 8px; cursor: pointer;
background: none; font: inherit; font-size: 13px; font-weight: 700;
color: var(--zp-text, #0e0e44);
}
.zcal-jump-level:hover { background: var(--zp-hover, #eef2fb); }
.zcal-jump-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.zcal-jump-cell {
padding: 8px 0; border: 0; border-radius: 9px; cursor: pointer;
background: none; font: inherit; font-size: 12.5px; font-weight: 600;
color: var(--zp-text, #0e0e44);
}
.zcal-jump-cell:hover { background: var(--zp-hover, #eef2fb); }
.zcal-jump-cell:focus-visible { outline: 2px solid var(--zp-accent, #381baf); outline-offset: 1px; }
/* The month on screen, filled. Today's month, outlined — two different
facts, and a month can be both. */
.zcal-jump-cell--on { background: var(--zp-accent, #381baf); color: #fff; }
.zcal-jump-cell--on:hover { background: var(--zp-accent, #381baf); filter: brightness(1.08); }
.zcal-jump-cell--now { box-shadow: inset 0 0 0 1.5px var(--zp-accent, #381baf); }
.zcal-jump-today {
width: 100%; margin-top: 8px; padding: 7px 0;
border: 1px solid var(--zp-border, #e2e8f6); border-radius: 9px; cursor: pointer;
background: none; font: inherit; font-size: 12px; font-weight: 600;
color: var(--zp-accent, #381baf);
}
.zcal-jump-today:hover { background: var(--zp-hover, #eef2fb); }
/* ---- What a second consumer needs ------------------------------------
Revenue's copy sits at the right-hand end of a wide toolbar rather than
at the left of a page, and it reports on months that have been and gone
rather than on a diary. Hence: an alignment it can ask for, somewhere to
go when the window is too short, and a period it is allowed to refuse.
All three are opt-in modifiers. The Calendar asks for none of them and
is drawn exactly as it was. */
.zcal-jump-panel--right { left: auto; right: 0; }
.zcal-jump-panel--up { top: auto; bottom: calc(100% + 6px); }
.zcal-jump-panel { max-width: calc(100vw - 28px); }
/* A period there is nothing to report on yet. Greyed rather than absent: a
month missing from the grid reads as a bug, one visibly not here yet
reads as what it is. */
.zcal-jump-cell:disabled { opacity: .34; cursor: not-allowed; color: var(--zp-sub, #61688c); }
.zcal-jump-cell:disabled:hover { background: none; }
/* A year with something in it, in a grid of twelve that mostly has not.
A dot rather than a colour, so it does not compete with "on" or "now". */
.zcal-jump-cell--has { position: relative; }
.zcal-jump-cell--has::after {
content: ''; position: absolute; left: 50%; bottom: 3px;
width: 3px; height: 3px; border-radius: 50%;
transform: translateX(-50%);
background: var(--zp-accent, #381baf);
}
.zcal-jump-cell--on.zcal-jump-cell--has::after { background: #fff; }
/* ---------- Scrollbar ---------- */
::-webkit-scrollbar {
width: 9px;
height: 9px;
}
::-webkit-scrollbar-thumb {
background: var(--zp-border);
border-radius: 6px;
}
::-webkit-scrollbar-thumb:hover {
background: var(--zp-sub);
}
/* ---------- Resource list filter tabs (mirror the mockup's `.filters` pills) ----------
Filament renders list-page tabs as a single centered white card (`mx-auto rounded-xl
bg-white p-2 shadow ring`), which leaves a wide empty gutter. The Zeper mockup uses a
left-aligned, compact row of bordered pills (`.filters > .btn`). Reshape to match. */
.fi-tabs {
/* kill `mx-auto` centering → hug the left edge like `.filters` */
margin-left: 0 !important;
margin-right: auto !important;
/* drop the wrapping card: transparent, no padding/shadow/ring */
background: transparent !important;
padding: 0 !important;
box-shadow: none !important;
--tw-ring-shadow: 0 0 #0000 !important;
--tw-ring-offset-shadow: 0 0 #0000 !important;
gap: 10px !important;
flex-wrap: wrap;
/* compact: snug under the header, tight above the table (mockup uses margin-top:20px) */
margin-top: 2px !important;
margin-bottom: 14px !important;
}
/* each tab = a `.btn` pill: bordered, white, muted label */
.fi-tabs-item {
padding: 8px 15px !important;
border-radius: 10px !important;
border: 1px solid var(--zp-border) !important;
background: var(--zp-panel) !important;
transition: transform .15s, background .2s, color .2s, border-color .2s !important;
}
.fi-tabs-item:hover {
transform: translateY(-1px);
background: var(--zp-hover) !important;
}
.fi-tabs-item .fi-tabs-item-label {
color: var(--zp-sub) !important;
font-size: 13px !important;
font-weight: 600 !important;
}
.fi-tabs-item:hover .fi-tabs-item-label {
color: var(--zp-text) !important;
}
/* active pill = filled accent + white label (mockup `.btn.active`) */
.fi-tabs-item.fi-active,
.fi-tabs-item.fi-tabs-item-active {
background: var(--zp-accent) !important;
border-color: var(--zp-accent) !important;
}
.fi-tabs-item.fi-active .fi-tabs-item-label,
.fi-tabs-item.fi-tabs-item-active .fi-tabs-item-label {
color: #fff !important;
}
/* ---------- Employees list: search + pills in one row (mockup `.filters`) ----------
The custom list view (filament.resources.employees.list) lays out a free-growing
search box beside the department pills, exactly like the mockup's `.filters` flex row. */
.zp-filters {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}
/* search grows to fill the row; pills hug the right (mockup `.filters .search{max-width:none}`) */
.zp-search {
position: relative;
flex: 1 1 280px;
min-width: 220px;
display: block;
}
.zp-search svg {
position: absolute;
left: 12px;
top: 50%;
transform: translateY(-50%);
width: 16px;
height: 16px;
color: var(--zp-sub);
pointer-events: none;
}
.zp-search input {
width: 100%;
padding: 9px 12px 9px 38px;
background: var(--zp-bg) !important;
border: 1px solid var(--zp-border) !important;
border-radius: 10px !important;
color: var(--zp-text) !important;
font-size: 13.5px;
font-family: inherit;
outline: none;
transition: border-color .2s, box-shadow .2s;
box-shadow: none !important;
}
.zp-search input::placeholder {
color: var(--zp-sub);
}
.zp-search input:focus {
border-color: var(--zp-accent) !important;
box-shadow: 0 0 0 3px color-mix(in srgb, var(--zp-accent) 18%, transparent) !important;
}
/* inside the filters row the pills are no longer the full-width block: drop the
block margins set above so they sit snug against the search box */
.zp-filters .fi-tabs {
margin: 0 !important;
}
/* the search + department filters now live in the `.zp-filters` row above the table,
so the table's own search box is a redundant duplicate and goes.
The toolbar itself must NOT go with it. Filament renders the bulk-actions button
inside this toolbar, behind x-show="selectedRecords.length" — so hiding the whole
strip meant ticking rows produced checkboxes, a selection count, and no way
whatsoever to act on them. The toolbar now collapses to nothing while empty and
appears only when there is a selection to act on. */
.zp-emp-table .fi-ta-header-toolbar {
padding: 0 !important;
border: 0 !important;
}
.zp-emp-table .fi-ta-header-toolbar .fi-ta-search-field,
.zp-emp-table .fi-ta-header-toolbar .fi-ta-col-toggle {
display: none !important;
}
/* Only the bulk-actions group is left, and it brings its own spacing when shown. */
.zp-emp-table .fi-ta-header-toolbar .fi-ta-actions {
padding: 10px 16px;
}
/* ---------- Goals & Performance: Goal Workflow card (mockup `.card .wf-steps`) ----------
The workflow stepper is rendered by GoalWorkflowOverview as a header widget. Classes are
`zp-`prefixed copies of the mockup's `.card`, `.card-title`, `.wf-*` so they survive
Tailwind's purge and don't collide with Filament's own utilities. */
.zp-card {
background: var(--zp-panel);
border: 1px solid var(--zp-border);
border-radius: 16px;
padding: 18px;
box-shadow: var(--zp-shadow);
}
.zp-card-title {
font-size: 14.5px;
font-weight: 700;
color: var(--zp-text);
margin-bottom: 14px;
}
.zp-ct-sub {
display: block;
font-size: 11.5px;
font-weight: 500;
color: var(--zp-sub);
margin-top: 3px;
}
/* Four steps, one line, whatever the card is.
They used to be four fixed 96px columns on a wrapping row, and the four of
them plus their arrows come to 499px in the 478px this card gives them — so
Year-end Review dropped onto a line of its own and the arrow that belonged
in front of it stayed behind at the end of the first line, pointing at
nothing. A workflow strip that wraps stops reading as a sequence, which is
the only thing it is for.
So the columns share the row instead of claiming a width from it: each step
takes a quarter of whatever is there, and a label too long for its quarter
wraps under its own dot rather than pushing the step after it onto the next
line. The arrows keep their size and sit between them.
Aligned to the top rather than the middle, so that a step whose label takes
two lines does not sit its dot lower than the three beside it. The arrows
are nudged down by hand to the dots' centre line for the same reason. */
.zp-wf-steps {
display: flex;
align-items: flex-start;
gap: 6px;
flex-wrap: nowrap;
padding: 6px 0;
}
.zp-wf-step {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
flex: 1 1 0;
min-width: 0;
/* For the count, which is pinned to the dot rather than set after the
label — see the note on .zp-wf-count. */
position: relative;
}
.zp-wf-dot {
width: 34px;
height: 34px;
border-radius: 50%;
background: var(--zp-grad2);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-family: 'Space Grotesk', 'DM Sans', sans-serif;
}
.zp-wf-lbl {
font-size: 11.5px;
color: var(--zp-sub);
font-weight: 600;
text-align: center;
}
.zp-wf-arrow {
color: var(--zp-accent);
font-size: 18px;
flex: 0 0 auto;
/* Half the difference between the dot and this line of text, so the arrow
runs through the middle of the circles rather than the labels. */
margin-top: 4px;
}
/* ---------- Goal workflow: done / here now / still to come ----------
The strip keeps its shape; only the treatment of each step changes, so a
glance says where the year has got to instead of implying step one. */
.zp-wf-step--completed .zp-wf-dot {
background: none;
background-color: var(--zp-ok, #16a34a);
}
.zp-wf-step--current .zp-wf-dot {
box-shadow: 0 0 0 4px color-mix(in srgb, var(--zp-accent) 22%, transparent);
transform: scale(1.08);
}
.zp-wf-step--current .zp-wf-lbl {
color: var(--zp-text);
font-weight: 700;
}
.zp-wf-step--upcoming .zp-wf-dot {
background: none;
background-color: var(--zp-panel2, #eef1fc);
color: var(--zp-sub);
border: 1.5px dashed var(--zp-border);
}
.zp-wf-step--upcoming .zp-wf-lbl { opacity: .7; }
/* The strip, on a phone.
Four steps and three arrows share 343px once the page has its gutters,
so a step gets about 63px. Nothing overflows — the steps are `flex: 1 1
0` with a zero floor, so they give ground rather than push — but a 34px
dot inside 63px leaves a label of two or three wrapped words at a size
meant for a laptop. Smaller dot, smaller text, thinner arrows: the same
strip, sized for the room it actually has.
The strip still fits without scrolling, which is the point. A workflow
that has to be dragged sideways to be read is a workflow nobody reads. */
@media (max-width: 640px) {
.zp-wf-steps { gap: 3px; }
.zp-wf-step { gap: 4px; }
.zp-wf-dot { width: 26px; height: 26px; font-size: 12px; }
.zp-wf-dot svg { width: 12px; height: 12px; }
.zp-wf-lbl { font-size: 9.5px; line-height: 1.25; }
.zp-wf-arrow { font-size: 13px; margin-top: 2px; }
}
/* The count rides on the step's dot, not on the end of its label.
Set after the label it was part of the same line of text, and a label as
long as "Mid-year Review" fills a quarter of this card on its own — so the
number was pushed onto a second line and sat under the words on its own,
reading as a stray digit rather than as that step's count. Which label it
happens to is a matter of how wide the card is, so no wording fixes it.
On the dot it is out of the text altogether and every label has the whole
column to itself. Placed from the middle of the step rather than by the
dot's own corner, because the dot is a flex child that stays centred at any
column width; half of 34px is 17, so 9 puts the badge over its top-right
edge the way a count sits on a tab. */
.zp-wf-count {
position: absolute;
top: -2px;
left: calc(50% + 9px);
min-width: 16px;
padding: 0 4px;
border-radius: 999px;
background: var(--zp-panel2, #eef1fc);
border: 1px solid var(--zp-border);
font-size: 10px;
font-weight: 700;
color: var(--zp-sub);
}
.zp-wf-step--current .zp-wf-count {
background: var(--zp-accent);
border-color: transparent;
color: #fff;
}
.zp-sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.zp-card-meta {
font-size: 11px;
color: var(--zp-sub);
margin-top: 8px;
display: flex;
align-items: center;
gap: 5px;
opacity: .85;
}
.zp-card-meta svg {
width: 12px;
height: 12px;
flex-shrink: 0;
}
/* ---------- Goal workflow: the strip arriving ----------
The card says where the year has got to, and it now says it in the order the
year goes in: the steps land left to right, sixty milliseconds apart, so the
eye is walked from what is done to what is next rather than being handed all
four at once. The arrows land with them, in their turn, which is what makes
it read as a sequence being laid down instead of a row of dots fading in.
It happens on arrival and then stops. The widget does not poll, so this runs
once per page load and is never replayed underneath somebody who is reading
it — an animation that restarts every few seconds is a distraction sitting
permanently in the corner of the screen.
The one exception is the step the goals are actually at, which keeps a slow
ring — three seconds a breath, and the ring only, so the dot itself never
moves. That one is worth a heartbeat: it is the answer to the question the
card exists to answer, and it is the thing somebody scanning the screen
should find first. */
@keyframes zp-wf-appear {
from {
opacity: 0;
transform: translateY(6px);
}
to {
opacity: 1;
transform: none;
}
}
/* `backwards`, so each one is held invisible through its own delay rather than
appearing and then starting. */
.zp-wf-steps > * {
animation: zp-wf-appear 380ms cubic-bezier(0.2, 0.7, 0.3, 1) backwards;
}
/* Steps and arrows alternate, so this is simply the order along the row. */
.zp-wf-steps > *:nth-child(1) { animation-delay: 0ms; }
.zp-wf-steps > *:nth-child(2) { animation-delay: 60ms; }
.zp-wf-steps > *:nth-child(3) { animation-delay: 120ms; }
.zp-wf-steps > *:nth-child(4) { animation-delay: 180ms; }
.zp-wf-steps > *:nth-child(5) { animation-delay: 240ms; }
.zp-wf-steps > *:nth-child(6) { animation-delay: 300ms; }
.zp-wf-steps > *:nth-child(7) { animation-delay: 360ms; }
.zp-wf-steps > *:nth-child(n + 8) { animation-delay: 420ms; }
/* The tick draws itself, once its own step has landed.
26 is the length of the polyline in the widget's markup, near enough: the
dash is the whole stroke, and the offset walks it on from the start. */
@keyframes zp-wf-tick {
from { stroke-dashoffset: 26; }
to { stroke-dashoffset: 0; }
}
.zp-wf-step--completed .zp-wf-dot svg polyline {
stroke-dasharray: 26;
animation: zp-wf-tick 380ms ease-out 220ms backwards;
}
/* And the count arrives after the dot it sits on, with a little overshoot, so
it reads as landing there rather than having always been there. */
@keyframes zp-wf-count-in {
from {
opacity: 0;
transform: scale(0.4);
}
to {
opacity: 1;
transform: none;
}
}
.zp-wf-count {
animation: zp-wf-count-in 300ms cubic-bezier(0.2, 1.4, 0.4, 1) 420ms backwards;
}
/* The step the goals are at, breathing. Ring only — the same ring the rule
above gives it, widened and thinned and put back — so nothing moves and
nothing reflows; and it starts once the strip has finished arriving. */
@keyframes zp-wf-breathe {
0%, 100% {
box-shadow: 0 0 0 4px color-mix(in srgb, var(--zp-accent) 22%, transparent);
}
50% {
box-shadow: 0 0 0 9px color-mix(in srgb, var(--zp-accent) 9%, transparent);
}
}
.zp-wf-step--current .zp-wf-dot {
animation: zp-wf-breathe 3.2s ease-in-out 900ms infinite;
}
/* Each step answers the pointer, since each one has something to say — the
title on it names the stage, its state and how many goals are sitting
there. */
.zp-wf-dot {
transition: transform 200ms cubic-bezier(0.2, 0.7, 0.3, 1);
}
.zp-wf-step:hover .zp-wf-dot {
transform: scale(1.12);
}
.zp-wf-step--current:hover .zp-wf-dot {
transform: scale(1.18);
}
/* Where movement is turned down at the system level the card is simply drawn
as it ends up: every step present, the tick whole, the ring steady. */
@media (prefers-reduced-motion: reduce) {
.zp-wf-steps > *,
.zp-wf-count,
.zp-wf-step--current .zp-wf-dot,
.zp-wf-step--completed .zp-wf-dot svg polyline {
animation: none;
}
.zp-wf-step--completed .zp-wf-dot svg polyline {
stroke-dasharray: none;
}
.zp-wf-dot {
transition: none;
}
}
/* On a narrow window the arrows go and the steps have the row to themselves;
four dots in a line still read as an order without them. */
@media (max-width: 980px) {
.zp-wf-arrow {
display: none;
}
}
/* ---------- Acknowledged progress bar (Policies table) ---------- */
.zp-ack {
display: flex;
align-items: center;
gap: 8px;
max-width: 240px;
}
.zp-ack-bar {
height: 6px;
background: var(--zp-hover);
border-radius: 4px;
overflow: hidden;
min-width: 54px;
flex: 1;
}
.zp-ack-bar span {
display: block;
height: 100%;
border-radius: 4px;
transition: width .8s cubic-bezier(.4, 0, .2, 1);
}
.zp-ack-val {
font-size: 12px;
color: var(--zp-sub);
white-space: nowrap;
}
/* ---------- Dark mode: Filament table overrides ----------
Filament tables use Tailwind dark: utilities (dark:bg-gray-900, etc.)
which ignore our CSS variables. Force Zeper palette on all table
elements when .dark is active. */
.dark .fi-ta-ctn {
background-color: var(--zp-panel) !important;
border-color: var(--zp-border) !important;
}
.dark .fi-ta-header {
background-color: var(--zp-panel) !important;
border-color: var(--zp-border) !important;
}
.dark .fi-ta-header-toolbar {
background-color: var(--zp-panel) !important;
}
.dark .fi-ta-filters-form {
background-color: var(--zp-panel2) !important;
border-color: var(--zp-border) !important;
}
/* column headers */
.dark .fi-ta-col-header-cell {
background-color: var(--zp-panel2) !important;
border-color: var(--zp-border) !important;
color: var(--zp-sub) !important;
}
/* table body rows */
.dark .fi-ta-row {
background-color: var(--zp-panel) !important;
border-color: var(--zp-border) !important;
}
.dark .fi-ta-row:hover td,
.dark .fi-ta-row:hover > * {
background-color: var(--zp-hover) !important;
}
/* cells */
.dark .fi-ta-cell,
.dark .fi-ta-text-col {
color: var(--zp-text) !important;
border-color: var(--zp-border) !important;
}
/* table footer / pagination */
.dark .fi-ta-footer,
.dark .fi-pagination {
background-color: var(--zp-panel) !important;
border-color: var(--zp-border) !important;
}
.dark .fi-pagination-item-btn {
color: var(--zp-sub) !important;
background-color: transparent !important;
}
.dark .fi-pagination-item-btn:hover {
background-color: var(--zp-hover) !important;
color: var(--zp-text) !important;
}
.dark .fi-pagination-item-btn.fi-active {
background-color: var(--zp-accent) !important;
color: #fff !important;
}
/* checkboxes row */
.dark .fi-ta-header-row,
.dark thead tr {
background-color: var(--zp-panel2) !important;
border-color: var(--zp-border) !important;
}
/* empty state */
.dark .fi-ta-empty-state {
background-color: var(--zp-panel) !important;
color: var(--zp-sub) !important;
}
/* search / filter inputs inside the table toolbar */
.dark .fi-ta-search-field input,
.dark .fi-input {
background-color: var(--zp-panel2) !important;
border-color: var(--zp-border) !important;
color: var(--zp-text) !important;
}
.dark .fi-ta-search-field input::placeholder {
color: var(--zp-sub) !important;
}
/* action buttons inside table rows */
.dark .fi-ta-row-actions .fi-btn {
background-color: transparent !important;
border-color: var(--zp-border) !important;
color: var(--zp-sub) !important;
}
.dark .fi-ta-row-actions .fi-btn:hover {
background-color: var(--zp-hover) !important;
color: var(--zp-accent) !important;
}
/* ---------- Dark mode: stats overview cards ----------
Filament uses dark:bg-gray-900 (#111827) on stat cards, but the Zeper
dark palette uses --zp-panel (#121556 navy). Override so all cards
share the same panel colour across the entire app. */
.dark .fi-wi-stats-overview-stat {
background-color: var(--zp-panel) !important;
border-color: var(--zp-border) !important;
--tw-ring-color: var(--zp-border) !important;
}
.dark .fi-wi-stats-overview-stat-label {
color: var(--zp-sub) !important;
}
.dark .fi-wi-stats-overview-stat-value {
color: var(--zp-text) !important;
}
.dark .fi-wi-stats-overview-stat-description {
color: var(--zp-sub) !important;
}
/* ---------- Dark mode: general form/section backgrounds ---------- */
.dark .fi-section,
.dark .fi-fo-component-ctn {
background-color: var(--zp-panel) !important;
border-color: var(--zp-border) !important;
}
.dark .fi-fo-field-wrp {
background-color: transparent !important;
}
.dark .fi-input,
.dark .fi-select-input,
.dark textarea {
background-color: var(--zp-panel2) !important;
border-color: var(--zp-border) !important;
color: var(--zp-text) !important;
}
/* ── Expense · Top Categories breakdown bars ───────────────────────────── */
.zp-cat-row {
margin-bottom: 12px;
}
.zp-cat-row:last-child {
margin-bottom: 0;
}
.zp-cat-head {
display: flex;
justify-content: space-between;
font-size: 13px;
margin-bottom: 5px;
}
.zp-cat-name {
color: var(--zp-text);
font-weight: 600;
}
.zp-cat-pct {
color: var(--zp-sub);
}
/* Named for what it is, after it turned out not to be the only `.zp-bar`.
Three screens use that class: this progress bar, and the heading strips
on Statutory Compliance and Escalations & Awards. This rule is global, so
it was setting `height: 6px; overflow: hidden` on both of those toolbars
— Compliance only escaped it by carrying a `min-height: 68px` of its own,
and Escalations, which carries none, has been clipping its heading at
every width since the day both were written. */
.zp-cat-bar {
height: 6px;
background: var(--zp-hover);
border-radius: 4px;
overflow: hidden;
}
.zp-cat-bar span {
display: block;
height: 100%;
border-radius: 4px;
transition: width .8s cubic-bezier(.4, 0, .2, 1);
}
/* Livewire needs a root element even when there is no button to draw, so the
wrapper is transparent to layout rather than an empty box adding a gap. */
.zp-clock-slot { display: contents; }
/* ---- Clock in / out, in the topbar beside the notification bell ----------
Sized and spaced to sit with .zp-roles rather than beside it as a
different-looking thing: same pill radius, same border, same 12px type. */
.zp-clock {
display: inline-flex;
align-items: center;
gap: 7px;
background: var(--zp-bg);
border: 1px solid var(--zp-border);
border-radius: 10px;
padding: 7px 13px;
font-family: 'DM Sans', sans-serif;
font-size: 12px;
font-weight: 600;
color: var(--zp-sub);
cursor: pointer;
white-space: nowrap;
transition: background .18s, color .18s, border-color .18s;
}
.zp-clock:hover { color: var(--zp-text); border-color: var(--zp-accent); }
.zp-clock:disabled { opacity: .55; cursor: progress; }
.zp-clock:focus-visible { outline: 2px solid var(--zp-accent); outline-offset: 2px; }
/* Clocked in: the button now offers the opposite action, so it reads as
"running" rather than as a call to action. */
.zp-clock-in {
background: var(--zp-grad2);
border-color: transparent;
color: #fff;
}
.zp-clock-in:hover { color: #fff; border-color: transparent; filter: brightness(1.06); }
.zp-clock-dot {
width: 7px;
height: 7px;
border-radius: 50%;
border: 1.5px solid currentColor;
flex-shrink: 0;
}
.zp-clock-dot-live {
background: #fff;
border-color: #fff;
animation: zp-clock-pulse 2s ease-in-out infinite;
}
@keyframes zp-clock-pulse {
0%, 100% { opacity: 1; }
50% { opacity: .35; }
}
.zp-clock-since {
font-variant-numeric: tabular-nums;
opacity: .8;
padding-left: 6px;
border-left: 1px solid rgba(255, 255, 255, .35);
}
/* Below this the topbar is tight; the label goes and the dot carries the
state, matching how .zp-roles bows out at the same width. */
@media (max-width: 1100px) {
.zp-clock { padding: 7px 10px; }
.zp-clock-label, .zp-clock-since { display: none; }
}
@media (prefers-reduced-motion: reduce) {
.zp-clock-dot-live { animation: none; }
}
/* ---- Settings screen ---------------------------------------------------- */
.zp-settings { display: flex; flex-direction: column; gap: 14px; }
.zp-setting {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 28px;
background: var(--zp-panel);
border: 1px solid var(--zp-border);
border-radius: 16px;
padding: 20px 22px;
box-shadow: var(--zp-shadow);
}
.zp-setting-body { min-width: 0; }
.zp-setting-title {
font-size: 14.5px;
font-weight: 700;
color: var(--zp-text);
margin-bottom: 6px;
}
.zp-setting-desc {
font-size: 13px;
line-height: 1.65;
color: var(--zp-sub);
max-width: 62ch;
}
.zp-setting-note {
margin-top: 10px;
font-size: 12.5px;
color: var(--zp-sub);
opacity: .85;
}
/* The switch itself. A real button with role="switch" rather than a styled
checkbox, so it is reachable by keyboard and announced as on or off. */
.zp-switch {
flex-shrink: 0;
width: 46px;
height: 26px;
border-radius: 999px;
border: 1px solid var(--zp-border);
background: var(--zp-bg);
padding: 2px;
cursor: pointer;
transition: background .2s, border-color .2s;
}
.zp-switch:disabled { opacity: .6; cursor: progress; }
.zp-switch:focus-visible { outline: 2px solid var(--zp-accent); outline-offset: 2px; }
.zp-switch-on { background: var(--zp-grad2); border-color: transparent; }
.zp-switch-knob {
display: block;
width: 20px;
height: 20px;
border-radius: 50%;
background: #fff;
box-shadow: 0 1px 3px rgba(0, 0, 0, .28);
transform: translateX(0);
transition: transform .2s ease;
}
.zp-switch-on .zp-switch-knob { transform: translateX(20px); }
@media (prefers-reduced-motion: reduce) {
.zp-switch, .zp-switch-knob { transition: none; }
}
/* ---- A setting in a hand ----
Stacking the row put the switch after the paragraph. Measured at 375px:
on the clocking setting the title sat at 110px and its switch at 368 —
258px of description and note between the name of the thing and the
control that turns it on, and 346px on the one below it. Nothing
overflowed and nothing scrolled; the control had simply been moved to
the end of the reading.
So the row becomes a small grid instead, and the control goes back level
with the title where a phone expects it — the description and anything
after it run the full width underneath. `display: contents` on the body
lets the title out of its wrapper to sit beside a switch that is the
wrapper's sibling, so none of this needs the markup changed.
Written as "the last child" rather than as the switch, because not every
setting has one: Shifts ends in a link to the screen that manages them. */
@media (max-width: 640px) {
/* the control beside the thing it controls */
.zp-setting:not(.zp-setting-block) {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 8px 14px;
align-items: start;
padding: 16px;
border-radius: 13px;
}
.zp-setting-body { display: contents; }
.zp-setting-title {
grid-column: 1;
grid-row: 1;
margin-bottom: 0;
font-size: 13.5px;
}
.zp-setting-body > :not(.zp-setting-title) { grid-column: 1 / -1; }
.zp-setting:not(.zp-setting-block) > :last-child {
grid-column: 2;
grid-row: 1;
align-self: center;
}
.zp-settings { gap: 10px; }
.zp-setting-desc { font-size: 12.5px; line-height: 1.55; }
.zp-setting-note { font-size: 11.5px; margin-top: 0; }
}
/* Break sits beside Clock In/Out as one control group, so the topbar reads as
one thing rather than two unrelated buttons. */
.zp-clock-group { display: inline-flex; align-items: center; gap: 6px; }
/* Break is the quieter of the two: it is the more frequent press, but the
less consequential one, so it does not compete with Clock Out. */
.zp-clock-break { font-weight: 600; }
.zp-clock-break:hover { border-color: var(--zp-warn); color: var(--zp-text); }
/* Actively on a break — amber, matching the badge on the lifecycle row. */
.zp-clock-onbreak {
background: var(--zp-warn);
border-color: transparent;
color: #fff;
}
.zp-clock-onbreak:hover { background: var(--zp-warn); color: #fff; border-color: transparent; filter: brightness(1.06); }
@media (max-width: 1100px) {
.zp-clock-group { gap: 4px; }
}
/* ──────────────────────────────────────────────────────────────────────
Phones
─────────────────────────────────────────────────────────────────────
The topbar's search button was flex:1 with no maximum below 1024px, so
on a 375px screen it took the whole bar and pushed the notification bell
and the avatar off the right-hand edge. They were not missing; they were
outside the screen.
Below 640px it becomes the icon alone, which leaves room for everything
that has to be reachable. */
@media (max-width: 640px) {
.zp-topbar-search {
flex: 0 0 auto;
width: 36px;
height: 36px;
justify-content: center;
padding: 0;
margin-right: 6px;
gap: 0;
}
.zp-topbar-search-text { display: none; }
/* The hamburger, which opens the side navigation, is rendered after the
TOPBAR_START hook this search button lives in — so with the button at
flex:1 it was pushed off the edge along with the bell and the avatar.
Freeing the width brings it back; this puts it where a hamburger
belongs, at the far left, ahead of everything else. */
.fi-topbar-open-sidebar-btn,
.fi-topbar-close-sidebar-btn { order: -1; flex: 0 0 auto; }
.zp-topbar-search { order: 0; }
/* Big enough to hit with a thumb. */
.fi-topbar-open-sidebar-btn,
.fi-topbar-close-sidebar-btn { width: 2.5rem; height: 2.5rem; }
/* The drawer it opens should cover the screen it is on, not a desktop
fraction of it. */
.fi-sidebar.fi-sidebar-open { width: min(20rem, 86vw); }
/* A shorter bar, because vertical space is what a phone is short of. */
.fi-topbar > nav,
.fi-topbar nav.fi-topbar-nav { min-height: 3.25rem; }
.fi-topbar { padding-left: .5rem; padding-right: .5rem; }
/* The right-hand group stays put and stays visible. */
.fi-topbar-end { gap: .25rem; flex: 0 0 auto; margin-left: auto; }
.fi-topbar-end .fi-icon-btn { width: 2.25rem; height: 2.25rem; }
/* Clocking in is a topbar control on every screen; on a phone it is the
icon and the state, without the wording that will not fit. */
.zp-clock-group { gap: 3px; }
/* Page padding on a phone was desktop padding, which cost a third of the
width to whitespace. */
.fi-main { padding-left: .75rem; padding-right: .75rem; }
.fi-header { gap: .5rem; }
.fi-header-heading { font-size: 1.375rem; line-height: 1.75rem; }
/* Nothing anywhere in the panel may push the page sideways. A table or a
chart that is genuinely wider than the screen scrolls inside its own
box instead of moving the whole page.
The clip belongs on .fi-main and nowhere closer in. A box clips at its
own padding edge, and .fi-page is drawn exactly around the content —
so clipping there cut every ring a field or a button draws just
outside itself, which is a Tailwind box-shadow rather than a border
and so falls outside the box. .fi-main has the page gutter between
the content and its clip edge, which is the room those rings need. */
.fi-main { max-width: 100%; overflow-x: clip; }
.fi-page { max-width: 100%; }
.fi-ta-ctn, .fi-ta-content { overflow-x: auto; }
/* Filament's action groups and header buttons wrap rather than overflow. */
.fi-header-actions, .fi-ac { flex-wrap: wrap; }
/* A modal on a phone should use the screen it has. */
.fi-modal-window { margin: .5rem; max-width: calc(100vw - 1rem); }
}
/* Landscape on a phone is short rather than narrow, so the bar shrinks
further and the charts get the height back. */
@media (max-width: 900px) and (orientation: landscape) {
.fi-topbar > nav,
.fi-topbar nav.fi-topbar-nav { min-height: 2.875rem; }
}
/* Department dropdown in the Employee Lifecycle filter row. Sized and
bordered like the search box beside it so the row reads as one control
group rather than two borrowed widgets. */
.zp-dept-filter select {
appearance: none;
background: var(--zp-panel) url("data:image/svg+xml;utf8,") no-repeat right 12px center;
border: 1px solid var(--zp-border);
border-radius: 10px;
color: var(--zp-text);
font-family: 'DM Sans', sans-serif;
font-size: 13px;
font-weight: 600;
padding: 9px 34px 9px 13px;
cursor: pointer;
flex-shrink: 0;
}
.zp-dept-filter select:hover { border-color: var(--zp-accent); }
.zp-dept-filter select:focus-visible { outline: 2px solid var(--zp-accent); outline-offset: 2px; }
@media (max-width: 780px) {
.zp-dept-filter select { width: 100%; }
}
/* ---- Requisitions: the Sign-off cell ------------------------------------
Both signatures on one row — "Approved by Priya (Management), 2 Sep 2026 ·
agreed by Diya (Manager), 2 Sep 2026" — ran to two full lines and set the
height of every row on the page, including the ones with three words to
say. Clamped to two lines; the whole sentence is on the tooltip, so nothing
is lost by shortening what is drawn. */
.fi-table-cell-approval-status p {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
/* A ceiling as well as a clamp: -webkit-line-clamp is ignored by a few
engines, and without this the row would grow again on those. */
max-height: 2.6em;
line-height: 1.3;
}
/* Stops the column claiming half the table when a sentence is long. */
.fi-table-cell-approval-status .fi-ta-text {
max-width: 22rem;
}
/* A select opens upwards when there is no room below it.
Choices.js already works this out: `position: 'auto'` measures where the
bottom of the list would land and, when that is past the bottom of the
window, adds `is-flipped` to the wrapper. Filament ships no rule for that
class, so the decision was made and then ignored — the list stayed pinned
at `top: 100%` and ran off the screen.
Where this bit was the Filters panel on Recruitment: the funnel sits well
down the page, so the Status list opened below the fold and the options
being picked could not be reached. Anything low on any screen had the same
problem — a filter, a form field near the footer, a picker in a modal.
Only the direction changes. The list keeps its own `max-height` and its own
scrolling, so nothing new scrolls and the panel around it is untouched. */
.choices.is-flipped .choices__list--dropdown,
.choices.is-flipped .choices__list[aria-expanded] {
top: auto;
bottom: 100%;
margin-top: 0;
/* Mirrors the .5rem gap the un-flipped list leaves below the input. */
margin-bottom: 0.5rem;
}
/* ---------------------------------------------------------------------------
Modals: a dialog, not a second page.
--------------------------------------------------------------------------- */
/* Filament sizes a modal to its content and scrolls the full-screen overlay
behind it, so the dialog itself has no height limit. On a long form — Add
event carries eleven fields — it grew taller than the screen: the heading
went off the top, the Create and Cancel buttons off the bottom, and there
was no scrollbar on the dialog to say there was more of it.
Capping the height and scrolling only the middle keeps the title and the
buttons where they were put. The cap is `min()` of two things because either
alone is wrong: a share of the viewport alone makes a dialog on a tall
monitor almost as tall as the screen, and a fixed height alone overflows a
short laptop.
`.rounded-xl` is what tells an ordinary dialog apart from the two kinds that
are supposed to fill the screen — slide-overs and full-screen modals both
carry `h-[100dvh]` and are given square corners, so neither is touched here.
`dvh` is declared after `vh` rather than instead of it: the second wins
wherever it is understood, and on a phone `vh` counts the address bar, which
would put the buttons underneath it. */
.fi-modal-window.rounded-xl {
max-height: 85vh;
max-height: min(85dvh, 44rem);
}
/* The fields scroll; the heading and the buttons do not.
min-height:0 because a flex child will not shrink below its own content
without it, and nothing that cannot shrink can scroll. */
.fi-modal-content {
min-height: 0;
overflow-y: auto;
padding-top: 1rem;
padding-bottom: 1rem;
}
/* The heading sat a clear 3rem above the first field — 1.5rem of padding under
the header meeting 1.5rem over the content. */
.fi-modal-header {
padding-top: 1.25rem;
}
/* The buttons keep a little more room beneath them than above, so the row
reads as the floor of the dialog rather than as another field. */
.fi-modal-footer {
padding-bottom: 1.25rem;
}
/* Centred rather than sitting high.
The window lives in the middle row of a three-row grid, and above `sm` that
grid is `1fr auto 3fr` — three times as much space below as above, which
holds the dialog well up the screen. That reads as deliberate when the
dialog is tall enough to nearly fill the space; now that it is capped it
just looks misplaced. Below `sm` the ratio is already even. */
@media (min-width: 640px) {
[x-ref="modalContainer"] {
grid-template-rows: 1fr auto 1fr;
}
}
/* And the gaps are closed up.
The height is nearly all gap rather than content: 1.5rem between each field
and another 0.5rem between every label and its own input. Both read well
down a full-page form with the room for them, but stacked eleven deep in a
dialog they are most of why it does not fit — so without this, the scrolling
added above is mostly scrolling past empty space.
Scoped to modals, so full-page forms keep the airier spacing they were
designed with. Only spacing changes: no field, button or behaviour is
touched by any of this. */
.fi-modal-content .fi-fo-component-ctn {
gap: 0.75rem;
}
.fi-modal-content .fi-fo-field-wrp > .grid {
row-gap: 0.25rem;
}
/* Helper text is a hint, not a paragraph — it does not need the field's
leading. ("Only HR/Admin can add a company holiday", and so on.) */
.fi-modal-content .fi-fo-field-wrp-helper-text,
.fi-modal-content .fi-fo-field-wrp-hint {
line-height: 1.3;
}
/* On a phone the screen is the constraint, not the ceiling above.
44rem is taller than most phones, so the fixed half of the cap never binds
and the dialog would be left at 85% of a screen that is already small. Here
it takes what there is, less a margin, and the tighter padding buys back
room that matters more at this size. */
@media (max-width: 640px) {
.fi-modal-window.rounded-xl {
max-height: calc(100vh - 1.5rem);
max-height: calc(100dvh - 1.5rem);
}
.fi-modal-header {
padding-top: 1rem;
}
.fi-modal-content {
padding-top: 0.75rem;
padding-bottom: 0.75rem;
}
.fi-modal-footer {
padding-bottom: 1rem;
}
}
/* ── Description boxes ─────────────────────────────────────────────────────
A textarea with a drag handle is one the reader can stretch to any height,
which inside a modal pushes the buttons off the bottom of the screen. Every
description and notes box in the app is now a fixed three lines that scrolls
when the writing runs past them, rather than growing under the cursor. */
.fi-fo-textarea textarea,
textarea.fi-input {
resize: none;
}
/* ── How far a box that can be dragged may be dragged ──────────────────────
A drag handle with nothing behind it stretches for as long as the mouse
moves. Inside a dialog that is not a big text box, it is a dialog whose
Save button is somewhere below the bottom of the screen, with no way to
scroll to it.
A ceiling rather than no handle: making these boxes bigger is genuinely
useful when somebody is writing a paragraph. What is not useful is being
able to make one taller than the monitor. */
textarea {
max-width: 100%;
max-height: 60vh;
}
/* Inside a dialog there is a heading and a row of buttons to fit as well, so
a box may have less of the screen than one on a page of its own. */
.fi-modal textarea,
.zp-corr-modal textarea,
.zeper-event-modal textarea {
max-height: 40vh;
}
/* And a floor. A handle that drags both ways can be dragged shut, leaving a
line too thin to read what you typed into it. */
.zp-corr-textarea,
.zp-ev-input {
min-height: 76px;
}
/* A notification that leads somewhere looks like it does.
Filament draws the card as a plain div and puts the only anchor underneath
the body, so there was nothing to say the card was clickable — and until
the script in filament/notification-click.blade.php it was not. The pointer
is shown only on cards that actually carry a link, because a hand cursor
over a notification that goes nowhere is its own small lie. */
.fi-no-notification:has(.fi-no-notification-actions a[href]) {
cursor: pointer;
}
/* A picker inside a dialog is capped by the dialog, not by the window.
Choices.js sizes its list against the viewport, and .fi-modal-window is
already capped at min(85dvh, 44rem) - so in a dialog the list could be
taller than the box it opens in, and .fi-modal-content's own `overflow-y:
auto` is not a clipping boundary it respects. The Filters panel on Policy
Tracker showed it plainly: the Policy list left the dialog and lay across
the Department field below it.
The flip rule above decides which way it opens; this decides how far it can
go. 14rem is about eight options, which is enough to choose from without
the list becoming the dialog. It keeps its own internal scrolling, so
nothing is unreachable, and the z-index only has to beat the fields beside
it rather than the overlay. */
.fi-modal-content .choices__list--dropdown,
.fi-modal-content .choices__list[aria-expanded] {
z-index: 30;
}
/* Capped on the inner list, which is the one that already scrolls.
The cap was on the outer box, with its own overflow-y — and Filament caps
the list *inside* it at 15rem with overflow of its own. Fifteen inside
fourteen means both boxes overflow, so both drew a scrollbar: two bars a few
pixels apart, one moving the list and one moving the box around it.
Same 14rem, one layer down, so there is one bar and it is the one attached
to the options. */
.fi-modal-content .choices__list--dropdown .choices__list,
.fi-modal-content .choices__list[aria-expanded] .choices__list {
max-height: 14rem;
}
/* The dialog keeps its height when a list is opened.
Two rules used to sit here: the window was allowed to grow to 54rem while a
list was open, and the content was given a 22rem floor so the list had
somewhere to sit. Both were answers to the same problem — the list being
clipped by the scrolling content — and both solved it by making the box
bigger, so a short dialog jumped taller the moment anybody touched a
dropdown. That is a strange thing for a box to do while it is being read.
Neither is needed now. The script in
resources/views/filament/dropdowns-inside-dialogs.blade.php measures the room
the dialog actually has on each side, opens the list towards the better one
and caps it to what is there — so the list fits inside the height the dialog
already had, and the dialog does not move. */
/* And a dialog with nothing to scroll lets the list out altogether.
The two rules above cap an in-dialog list to the room the dialog has, which
is the right answer for a dialog tall enough to have any. A short one has
none on either side: "Who has Monday off?" in Settings is one field, its
helper text and two buttons, so there are about 40px below the field and
about 90px above it. Capped to that, the list opened upward as the larger of
two bad sides and drew a stub of itself over the field's own label.
A dialog that short is not scrolling, and a box with no scroll position has
none to lose by not clipping — so it stops. The list then hangs over the
footer, which is what a dropdown does to whatever is beneath it everywhere
else in the application, and the boundary goes back to being the window,
where the room actually is. Nothing about the dialog moves; only the list
is allowed past its edge.
The class is put on by the script in
resources/views/filament/dropdowns-inside-dialogs.blade.php, because "has
nothing to scroll" is a measurement rather than a selector — and it is put
on only there, so a dialog that *is* scrolling keeps its overflow. Taking
the overflow off a scrolled element resets it to the top, and a nine-field
panel jumping to its first field because somebody opened the dropdown on
its last is worse than a capped list.
`overflow: visible` rather than `overflow-y`: a lone `overflow-y: visible`
against the inherited `overflow-x` computes back to `auto`, and the box goes
on clipping. */
.fi-modal-content.zp-lists-may-leave {
overflow: visible;
}
/* Which way a list opens inside a dialog is decided against the dialog.
The flip rule at the top of this file acts on `is-flipped`, and Choices.js
works that class out by measuring the field against the *window*. Inside a
dialog that is the wrong boundary in both directions:
- The last field of a tall dialog has hundreds of pixels of window below
it and none of dialog, so Choices says "room below", opens downward and
the options are clipped by the bottom of the box. Priority on
Requisitions - ninth of nine fields - was exactly this.
- A field near the top of a short dialog has the opposite problem: flipping
it upward puts the list past the top edge of a scroll container, where it
cannot be reached at all.
So `is-flipped` is recomputed against the dialog by the script in
resources/views/filament/dropdowns-inside-dialogs.blade.php, which also caps
the list to the room actually there. This file only says what the class
means; nothing here forces a direction any more, because a fixed direction
is wrong for one of the two cases whichever one is chosen. */
/* ---------------------------------------------------------------------------
Filters in the header strip.
--------------------------------------------------------------------------- */
/* A list of two or three filters lives in the header rather than behind the
funnel — see App\Filament\Tables\FilterPanel for which lists those are and
why. This is the one thing that needs saying in CSS about it.
.fi-ta-ctn carries `overflow: hidden`, which is what keeps the table's rows
inside its rounded corners. A filter's option list is absolutely positioned
and cannot escape a clipping context, so in the header it was cut off at
whichever edge it reached first: on a short list — Vendors has five rows, an
empty one has none — the options ran straight into the bottom of the box and
were gone.
Unclipped only while a list is actually open, so the corners still clip the
rows the rest of the time. Nothing else in the container scrolls: the
horizontal scrolling for a wide table is on .fi-ta-content inside it, which
keeps its own overflow either way. */
.fi-ta-ctn:has(.fi-ta-filters-above-content-ctn .choices.is-open) {
overflow: visible;
}
/* And with it unclipped, the list opens over the rows rather than under them.
The rows are later in the document than the header, so without this they
paint on top of an option list that is hanging over them — the options were
there, and the first rows of the table were drawn across them. */
.fi-ta-filters-above-content-ctn .choices__list--dropdown,
.fi-ta-filters-above-content-ctn .choices__list[aria-expanded] {
z-index: 30;
}
/* The flip-upward rule at the top of this file applies here and is wanted:
this list is on the page, so upwards is more page, and a filter low on a
long list opens towards the space there is. That is the opposite of the
in-dialog rule, where upwards is the top edge of a scroll container — the
difference is the point, and neither is a special case for one screen. */
/* The filters sit on the search row, not on a row of their own above it.
Filament renders an above-content filter form as its own band inside the
table header, directly above the band holding Search. On a list with one
filter that is a whole extra row of chrome to show one