/* * Application utilities layered on top of the Filament panel styles. * Only Tailwind's theme and utilities are imported: Filament ships its own * base/preflight, so importing it again would break the panel. */ @import 'tailwindcss/theme.css' layer(theme); @import 'tailwindcss/utilities.css' layer(utilities); /* dark: follows the app's own theme switch (Filament puts .dark on ), never the computer's system setting; otherwise a dark-mode PC shows dark styles inside the light theme. */ @custom-variant dark (&:where(.dark, .dark *)); /* Map Filament's runtime colour variables into Tailwind so utilities like bg-warning-50 work. */ @theme inline { --color-primary-50: var(--primary-50); --color-primary-100: var(--primary-100); --color-primary-200: var(--primary-200); --color-primary-300: var(--primary-300); --color-primary-400: var(--primary-400); --color-primary-500: var(--primary-500); --color-primary-600: var(--primary-600); --color-primary-700: var(--primary-700); --color-primary-800: var(--primary-800); --color-primary-900: var(--primary-900); --color-primary-950: var(--primary-950); --color-gray-50: var(--gray-50); --color-gray-100: var(--gray-100); --color-gray-200: var(--gray-200); --color-gray-300: var(--gray-300); --color-gray-400: var(--gray-400); --color-gray-500: var(--gray-500); --color-gray-600: var(--gray-600); --color-gray-700: var(--gray-700); --color-gray-800: var(--gray-800); --color-gray-900: var(--gray-900); --color-gray-950: var(--gray-950); --color-danger-50: var(--danger-50); --color-danger-100: var(--danger-100); --color-danger-200: var(--danger-200); --color-danger-300: var(--danger-300); --color-danger-400: var(--danger-400); --color-danger-500: var(--danger-500); --color-danger-600: var(--danger-600); --color-danger-700: var(--danger-700); --color-danger-800: var(--danger-800); --color-danger-900: var(--danger-900); --color-danger-950: var(--danger-950); --color-warning-50: var(--warning-50); --color-warning-100: var(--warning-100); --color-warning-200: var(--warning-200); --color-warning-300: var(--warning-300); --color-warning-400: var(--warning-400); --color-warning-500: var(--warning-500); --color-warning-600: var(--warning-600); --color-warning-700: var(--warning-700); --color-warning-800: var(--warning-800); --color-warning-900: var(--warning-900); --color-warning-950: var(--warning-950); --color-success-50: var(--success-50); --color-success-100: var(--success-100); --color-success-200: var(--success-200); --color-success-300: var(--success-300); --color-success-400: var(--success-400); --color-success-500: var(--success-500); --color-success-600: var(--success-600); --color-success-700: var(--success-700); --color-success-800: var(--success-800); --color-success-900: var(--success-900); --color-success-950: var(--success-950); --color-info-50: var(--info-50); --color-info-100: var(--info-100); --color-info-200: var(--info-200); --color-info-300: var(--info-300); --color-info-400: var(--info-400); --color-info-500: var(--info-500); --color-info-600: var(--info-600); --color-info-700: var(--info-700); --color-info-800: var(--info-800); --color-info-900: var(--info-900); --color-info-950: var(--info-950); } @source '../views/**/*.blade.php'; @source '../../app/Filament/**/*.php'; @source '../../app/Livewire/**/*.php'; /* Queue cards and floor screens */ .q-card { @apply rounded-xl border border-gray-200 bg-white p-4 shadow-sm dark:border-white/10 dark:bg-white/5; } .q-card--rush { @apply border-rose-400 dark:border-rose-700; } .q-card--pinned { @apply border-amber-400 dark:border-amber-700; } .q-badge { @apply inline-flex items-center rounded-md px-2 py-0.5 text-xs font-medium ring-1 ring-inset; } .q-stage-chip { @apply inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-xs font-medium; } .tabular { font-variant-numeric: tabular-nums; } /* Classes built from a colour name at runtime (queue tab counters) */ @source inline("{,dark:}bg-{info,success,warning,danger}-100 {,dark:}text-{info,success,warning,danger}-{300,700} dark:bg-{info,success,warning,danger}-500/20"); /* ========================================================================== * Design foundation (audit section "How this audit was done"): one compact * page header, a slimmer menu, 40 px table rows, outline status badges, * fixed-width digits. Applies to every page; page-specific styling stays in * the page's own Blade view. * ========================================================================== */ /* Page frame: content starts higher, sections closer together */ .fi-main { padding-inline: 1.5rem; } .fi-page-header-main-ctn { padding-block: 1rem 1.5rem; row-gap: 1rem; } .fi-page-content { row-gap: 1rem; } .fi-header { min-height: 2.5rem; align-items: center; } .fi-header-heading { font-size: 1.375rem; line-height: 1.75rem; letter-spacing: -0.01em; } .fi-header-subheading { font-size: 0.875rem; margin-top: 0.125rem; } @media (max-width: 640px) { .fi-main { padding-inline: 1rem; } .fi-page-header-main-ctn { padding-block: 0.75rem 1rem; } .fi-header-heading { font-size: 1.25rem; } } /* Menu: 36 px items, tighter groups, everything fits on a 768 px laptop */ .fi-sidebar-nav { padding: 1rem 0.75rem; row-gap: 1rem; } .fi-sidebar-nav-groups { row-gap: 0.75rem; } .fi-sidebar-group { row-gap: 0.125rem; } .fi-sidebar-group-btn { padding-block: 0.25rem; } .fi-sidebar-group-label { font-size: 0.75rem; letter-spacing: 0.02em; } .fi-sidebar-item-btn { padding-block: 0.4rem; } .fi-sidebar-item-label { font-size: 0.875rem; } @media (max-width: 1023px) { .fi-sidebar-item-btn { padding-block: 0.625rem; } } /* Tables: 40 px rows, one line, numbers line up */ .fi-ta-text { padding-block: 0.5rem; } .fi-ta-text-item, .fi-ta-cell { font-size: 0.8125rem; } .fi-ta-header-cell { padding-block: 0.5rem; font-size: 0.75rem; } .fi-ta-header-toolbar { padding-block: 0.5rem; } .fi-ta-cell, .fi-ta-text-item, .tabular, td.text-right { font-variant-numeric: tabular-nums; } .fi-ta-icon { padding-block: 0.5rem; } /* Status badges: outline style, colour on the word only (no tinted blocks) */ .fi-badge { font-size: 0.75rem; font-weight: 600; } .fi-badge.fi-color { background-color: transparent; box-shadow: inset 0 0 0 1px color-mix(in oklab, currentColor 40%, transparent); } .fi-badge.fi-color-gray { box-shadow: inset 0 0 0 1px var(--gray-300); color: var(--gray-700); } .dark .fi-badge.fi-color-gray { box-shadow: inset 0 0 0 1px var(--gray-600); color: var(--gray-300); } /* Sections and cards: 16 px padding, one hairline border, no heavy shadow */ .fi-section-header { padding: 0.875rem 1rem; } .fi-section-content { padding: 1rem; } .fi-section:not(.fi-section-not-contained) { box-shadow: none; } /* Links: one link style everywhere (brand colour, underline on hover) */ .fi-link { font-weight: 500; } /* Secondary text never lighter than gray-600 (light) / gray-400 (dark) */ .text-gray-400:not(.dark *) { color: var(--gray-500); } /* Focus ring in the brand colour, both themes */ :focus-visible { outline-color: var(--primary-600); } /* Primary buttons: one brand colour in both themes with readable text (light: brand-700 + white, 5:1; dark: brand-500 + near-black, 6:1). */ .fi-btn.fi-color-primary:not(.fi-outlined):not(.fi-btn-outlined):not(.fi-fo-toggle-buttons *) { background-color: var(--primary-700); color: #fff; } .fi-btn.fi-color-primary:not(.fi-outlined):not(.fi-btn-outlined):not(.fi-fo-toggle-buttons *):hover { background-color: var(--primary-800); } .dark .fi-btn.fi-color-primary:not(.fi-outlined):not(.fi-btn-outlined):not(.fi-fo-toggle-buttons *) { background-color: var(--primary-500); color: var(--gray-950); } .dark .fi-btn.fi-color-primary:not(.fi-outlined):not(.fi-btn-outlined):not(.fi-fo-toggle-buttons *):hover { background-color: var(--primary-400); } .fi-btn.fi-color-primary:not(.fi-outlined) .fi-icon { color: inherit; } /* Green "done" buttons: dark green + white in light mode (was white on bright green, 2.3:1). */ .fi-btn.fi-color-success:not(.fi-outlined):not(.fi-fo-toggle-buttons *) { background-color: var(--success-700); color: #fff; } .dark .fi-btn.fi-color-success:not(.fi-outlined):not(.fi-fo-toggle-buttons *) { background-color: var(--success-500); color: var(--gray-950); } .fi-btn.fi-color-success:not(.fi-outlined) .fi-icon { color: inherit; } /* Shell: active menu item = brand left bar on a neutral background (SHELL-10) */ .fi-sidebar-item.fi-active > .fi-sidebar-item-btn { background-color: var(--gray-100); box-shadow: inset 3px 0 0 var(--primary-600); } .dark .fi-sidebar-item.fi-active > .fi-sidebar-item-btn { background-color: rgb(255 255 255 / 0.06); box-shadow: inset 3px 0 0 var(--primary-500); } .fi-sidebar-item.fi-active .fi-sidebar-item-label, .fi-sidebar-item.fi-active .fi-icon { color: var(--primary-700); } .dark .fi-sidebar-item.fi-active .fi-sidebar-item-label, .dark .fi-sidebar-item.fi-active .fi-icon { color: var(--primary-400); } /* Menu badge neutral grey (SHELL-8) */ .fi-sidebar-item .fi-badge.fi-color { color: var(--gray-700); box-shadow: inset 0 0 0 1px var(--gray-300); } .dark .fi-sidebar-item .fi-badge.fi-color { color: var(--gray-300); box-shadow: inset 0 0 0 1px var(--gray-600); } /* Search field wider, clear button grey (SHELL-5, SHELL-7) */ .fi-global-search-field { min-width: 25rem; } @media (max-width: 1023px) { .fi-global-search-field { min-width: 0; } } .fi-global-search-field .fi-input-wrp-suffix .fi-icon, .fi-global-search-field button .fi-icon { color: var(--gray-500); } /* Phone drawer narrower (SHELL-14) */ @media (max-width: 1023px) { .fi-sidebar.fi-sidebar-open { width: 18rem; } } /* User menu: divider before Sign out (SHELL-11) */ .fi-user-menu .fi-dropdown-list:last-child { border-top: 1px solid var(--gray-200); } .dark .fi-user-menu .fi-dropdown-list:last-child { border-top-color: rgb(255 255 255 / 0.1); } /* ========================================================================== * QA pass (01 Nov), group Z: shared fixes for every page. * ========================================================================== */ /* Z-3 Row actions (⋮ / icon buttons) no longer stretch a list row to 53 px: the actions cell gets the same slim padding as the text cells. */ .fi-ta-cell:has(> .fi-ta-actions) { padding-block: 0.125rem; } .fi-ta-actions .fi-icon-btn { height: 2.25rem; } /* Z-4 List tabs look like the Orders tabs everywhere: left-aligned, no box, an underline under the selected tab, plain grey counts. A count keeps its colour only when it means something (red/amber…) and is above zero. */ .fi-tabs:not(.fi-contained):not(.fi-vertical) { margin-inline: 0; padding: 0 0.25rem; gap: 0.25rem; border-radius: 0; background: transparent; box-shadow: none; border-bottom: 1px solid var(--gray-200); } .dark .fi-tabs:not(.fi-contained):not(.fi-vertical) { background: transparent; border-bottom-color: rgb(255 255 255 / 0.1); } .fi-tabs:not(.fi-contained):not(.fi-vertical) .fi-tabs-item { border-radius: 0; padding: 0 0.5rem; min-height: 2.25rem; gap: 0.375rem; background: transparent; border-bottom: 2px solid transparent; margin-bottom: -1px; } .fi-tabs:not(.fi-contained):not(.fi-vertical) .fi-tabs-item:hover { background: transparent; border-bottom-color: var(--gray-300); } .fi-tabs:not(.fi-contained):not(.fi-vertical) .fi-tabs-item .fi-tabs-item-label { color: var(--gray-600); } .dark .fi-tabs:not(.fi-contained):not(.fi-vertical) .fi-tabs-item .fi-tabs-item-label { color: var(--gray-400); } .fi-tabs:not(.fi-contained):not(.fi-vertical) .fi-tabs-item.fi-active { background: transparent; border-bottom-color: var(--primary-600); } .dark .fi-tabs:not(.fi-contained):not(.fi-vertical) .fi-tabs-item.fi-active { border-bottom-color: var(--primary-500); } .fi-tabs:not(.fi-contained):not(.fi-vertical) .fi-tabs-item.fi-active .fi-tabs-item-label { color: var(--gray-950); } .dark .fi-tabs:not(.fi-contained):not(.fi-vertical) .fi-tabs-item.fi-active .fi-tabs-item-label { color: #fff; } .fi-tabs-item .fi-badge { box-shadow: none !important; background: transparent !important; padding-inline: 0; min-width: 0; font-weight: 500; font-variant-numeric: tabular-nums; } .fi-tabs-item .fi-badge.fi-color-primary, .fi-tabs-item .fi-badge.fi-color-gray, .fi-tabs-item .fi-badge.is-zero { color: var(--gray-500) !important; font-weight: 500; } .dark .fi-tabs-item .fi-badge.fi-color-primary, .dark .fi-tabs-item .fi-badge.fi-color-gray, .dark .fi-tabs-item .fi-badge.is-zero { color: var(--gray-400) !important; } .fi-tabs-item .fi-badge.fi-color:not(.fi-color-primary):not(.fi-color-gray):not(.is-zero) { font-weight: 600; } @media (max-width: 1023px) { .fi-tabs:not(.fi-contained):not(.fi-vertical) .fi-tabs-item { min-height: 2.75rem; } } /* Z-5 Placeholders and "–" / "Never" text readable: ≥ 4.5:1 in both themes */ .fi-ta-placeholder, .fi-select-input-placeholder, .fi-fo-modal-table-select-placeholder, .fi-tabs-item-badge-placeholder, .fi-dropdown-list-item-badge-placeholder { color: var(--gray-500); } .dark .fi-ta-placeholder, .dark .fi-select-input-placeholder, .dark .fi-fo-modal-table-select-placeholder, .dark .fi-tabs-item-badge-placeholder, .dark .fi-dropdown-list-item-badge-placeholder { color: var(--gray-400); } input::placeholder, textarea::placeholder { color: var(--gray-500); opacity: 1; } .dark input::placeholder, .dark textarea::placeholder { color: var(--gray-400); } .fi-ta-text-item.fi-color-gray:not(.dark *), .fi-in-text-item.fi-color-gray:not(.dark *) { color: var(--gray-600); } /* Z-6 Touch targets on phones and tablets: 44 × 44 */ @media (max-width: 1023px) { .fi-topbar-open-sidebar-btn, .fi-topbar-close-sidebar-btn { min-width: 2.75rem; min-height: 2.75rem; } .fi-user-menu-trigger, .fi-user-menu .fi-dropdown-trigger { min-width: 2.75rem; min-height: 2.75rem; display: inline-flex; align-items: center; justify-content: center; } .fi-input-wrp-suffix .fi-icon-btn, .fi-input-wrp-prefix .fi-icon-btn { min-width: 2.75rem; min-height: 2.75rem; } .fi-fo-radio label, .fi-fo-checkbox-list label { min-height: 2.75rem; align-items: center; } .fi-fo-radio input[type=radio] { width: 1.25rem; height: 1.25rem; } } /* Phone search: short placeholder, no Ctrl+K hint */ @media (max-width: 640px) { .fi-global-search-field .fi-input-wrp-suffix { display: none; } } /* Page titles always start at the left (phones stacked them centred) */ .fi-header { align-items: flex-start; } @media (min-width: 640px) { .fi-header { align-items: center; } } /* Z-7 Shell */ /* divider before Sign out (the dropdown panel is teleported, so do not rely on .fi-user-menu) */ .fi-dropdown-panel form[action$="/logout"] { border-top: 1px solid var(--gray-200); margin-top: 0.25rem; padding-top: 0.25rem; } .dark .fi-dropdown-panel form[action$="/logout"] { border-top-color: rgb(255 255 255 / 0.1); } .fi-user-menu .fi-dropdown-list:last-child { border-top: 0; } /* search clear "×" grey in both themes */ .fi-global-search-field input[type=search]::-webkit-search-cancel-button { filter: grayscale(1); opacity: 0.6; } .fi-global-search-field .fi-icon-btn, .fi-global-search-field .fi-icon-btn .fi-icon { color: var(--gray-500); } /* theme switch labels under the three icons */ .fi-theme-switcher-btn { flex-direction: column; gap: 0.125rem; } .fi-theme-switcher-btn .ui-theme-label { font-size: 0.6875rem; line-height: 1rem; color: var(--gray-600); } .dark .fi-theme-switcher-btn .ui-theme-label { color: var(--gray-400); } .fi-theme-switcher-btn.fi-active .ui-theme-label { color: var(--primary-700); font-weight: 600; } .dark .fi-theme-switcher-btn.fi-active .ui-theme-label { color: var(--primary-400); } /* a menu group with a single visible item shows no group header */ .fi-sidebar-group:has(> .fi-sidebar-group-items > .fi-sidebar-item:only-child) > .fi-sidebar-group-btn { display: none !important; } .fi-sidebar-group:has(> .fi-sidebar-group-items > .fi-sidebar-item:only-child) > .fi-sidebar-group-items { display: flex !important; height: auto !important; overflow: visible !important; } /* phone drawer: close button + user block are only for the drawer */ @media (min-width: 1024px) { .ui-drawer-only { display: none !important; } } /* Z-11 Forms: one rule — left-aligned, at most ~960 px wide */ .fi-resource-edit-record-page .fi-page-content, .fi-resource-create-record-page .fi-page-content, .fi-page.ui-form-page .fi-page-content { max-width: 60rem; margin-inline: 0; } /* pages with a narrower content width (My account, Product types edit…) start at the left like the rest */ .fi-main { margin-inline: 0; } /* Z-15 Chips in multi-selects (departments, types) are plain information: neutral grey, not brand */ .fi-select-input-value-badges-ctn .fi-badge.fi-color-primary { color: var(--gray-700) !important; box-shadow: inset 0 0 0 1px var(--gray-300) !important; background: transparent !important; } .dark .fi-select-input-value-badges-ctn .fi-badge.fi-color-primary { color: var(--gray-300) !important; box-shadow: inset 0 0 0 1px var(--gray-600) !important; } .fi-select-input-value-badges-ctn .fi-badge.fi-color-primary .fi-badge-delete-btn, .fi-select-input-value-badges-ctn .fi-badge.fi-color-primary .fi-icon { color: var(--gray-500) !important; } /* Z-7 role line sits right under the name in the user menu */ .fi-dropdown-header:has(+ [data-ui=user-role]) { border-bottom: 0; padding-bottom: 0; } .fi-dropdown-panel [data-ui=user-role] { padding-inline-start: 2.5rem; padding-top: 0.125rem; border-bottom: 1px solid var(--gray-100); } .dark .fi-dropdown-panel [data-ui=user-role] { border-bottom-color: rgb(255 255 255 / 0.05); } /* Z-9 A selected toggle button (weekly-off days…) is the brand colour with readable text, ≥ 4.5:1 */ .fi-fo-toggle-buttons-input:checked + .fi-btn.fi-color-primary { background-color: var(--primary-700) !important; color: #fff !important; } .dark .fi-fo-toggle-buttons-input:checked + .fi-btn.fi-color-primary { background-color: var(--primary-500) !important; color: var(--gray-950) !important; } .fi-fo-toggle-buttons-input:checked + .fi-btn.fi-color-primary .fi-icon { color: inherit !important; } /* Z-10 Table repeaters (stage variants, product-type routes): headers line up with the values */ .fi-fo-table-repeater > table > thead th:not(.fi-align-end):not(.fi-align-right):not(.fi-align-center) { text-align: start; } /* Native dropdowns (