creates a containing block that breaks
fixed-position page containers like Sites, Inventory, Services) */
@keyframes page-enter {
from { opacity: 0; }
to { opacity: 1; }
}
.page-enter {
animation: page-enter 0.2s ease-out forwards;
}
/* Better scrollbar styling for desktop */
@media (min-width: 768px) {
::-webkit-scrollbar {
width: 8px;
height: 8px;
}
::-webkit-scrollbar-track {
background: transparent;
}
::-webkit-scrollbar-thumb {
background: #cbd5e1;
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: #94a3b8;
}
}
/* High Contrast Mode support */
@media (forced-colors: active) {
.skip-to-main {
border: 2px solid ButtonText;
}
*:focus-visible {
outline: 2px solid Highlight !important;
}
}
/* Print styles — hide nav, FABs, chat widgets when printing */
@media print {
nav,
.bottom-nav,
.combined-fab,
.chat-windows,
.ai-assistant-panel,
.skip-to-main,
.powered-by-footer,
[data-print-hide] {
display: none !important;
}
main {
margin: 0 !important;
padding: 0 !important;
}
body {
font-size: 12pt;
line-height: 1.4;
}
}
/* Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
.skeleton {
animation: none !important;
opacity: 0.5;
}
.page-enter {
animation: none !important;
}
}
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
"Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans",
"Helvetica Neue", sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
code {
font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
monospace;
}
.App {
text-align: center;
}
.App-logo {
height: 40vmin;
pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
.App-logo {
animation: App-logo-spin infinite 20s linear;
}
}
.App-header {
background-color: #0f0f10;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: calc(10px + 2vmin);
color: white;
}
.App-link {
color: #61dafb;
}
@keyframes App-logo-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
/* Google Places Autocomplete dropdown - ensure it appears above modals */
.pac-container {
z-index: 10000 !important;
background-color: white;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
margin-top: 4px;
}
.pac-item {
padding: 8px 12px;
cursor: pointer;
}
.pac-item:hover {
background-color: #f3f4f6;
}
.pac-icon {
margin-right: 8px;
}
/* ========================================
LIGHT MODE STYLES - Explicit Input Styling
======================================== */
/* Light mode for inputs and forms - ensure white background */
:root input:not([type="checkbox"]):not([type="radio"]),
:root textarea,
:root select {
background-color: #ffffff !important;
border-color: #d1d5db !important;
color: #111827 !important;
}
:root input::-moz-placeholder, :root textarea::-moz-placeholder {
color: #9ca3af !important;
}
:root input::placeholder,
:root textarea::placeholder {
color: #9ca3af !important;
}
:root input:focus,
:root textarea:focus,
:root select:focus {
border-color: #3b82f6 !important;
background-color: #ffffff !important;
}
/* Ensure inputs in light mode have proper styling */
body:not(.dark) input:not([type="checkbox"]):not([type="radio"]),
body:not(.dark) textarea,
body:not(.dark) select {
background-color: #ffffff !important;
border-color: #d1d5db !important;
color: #111827 !important;
}
body:not(.dark) input::-moz-placeholder, body:not(.dark) textarea::-moz-placeholder {
color: #9ca3af !important;
}
body:not(.dark) input::placeholder,
body:not(.dark) textarea::placeholder {
color: #9ca3af !important;
}
/* ========================================
DARK MODE STYLES
======================================== */
/* Dark mode background colors */
.dark body,
.dark .bg-white {
background-color: #111827 !important;
}
.dark .bg-gray-50 {
background-color: #1f2937 !important;
}
.dark .bg-gray-100 {
background-color: #374151 !important;
}
.dark .bg-gray-200 {
background-color: #4b5563 !important;
}
/* Dark mode text colors */
.dark .text-gray-900,
.dark .text-gray-800 {
color: #f9fafb !important;
}
.dark .text-gray-700 {
color: #e5e7eb !important;
}
.dark .text-gray-600 {
color: #d1d5db !important;
}
.dark .text-gray-500 {
color: #9ca3af !important;
}
.dark .text-gray-400 {
color: #6b7280 !important;
}
.dark .text-black {
color: #f9fafb !important;
}
/* ⭐ Modal-header defensive rules ────────────────────────────────────
Many modals paint their header with a coloured gradient + `text-white`
on the wrapper, then rely on child /
/ to INHERIT that
white. Some global .dark overrides above (e.g. `.dark .text-gray-900`
→ light) mistakenly flip modal-header titles that inadvertently ship
with a text-gray-* class. Force any element inside a `.text-white`
ancestor to actually render white in both modes.
Also inverts the story for `.text-black` when the parent is white —
protects against child utility classes on dark headers.
Uses a targeted selector (not h2 globally) so it only kicks in when
a text-white wrapper explicitly claims a light-on-dark header. */
.text-white h2,
.text-white h3,
.text-white p,
.text-white span:not([class*="text-emerald"]):not([class*="text-red"]):not([class*="text-amber"]):not([class*="text-blue"]):not([class*="text-green"]),
.text-white div > .text-white\/80,
.text-white div > .text-white\/60,
.text-white div > .text-white\/70,
.text-white div > .text-white\/90 {
color: inherit !important;
}
.dark .text-white,
.dark .text-white h2,
.dark .text-white h3,
.dark .text-white p {
color: #ffffff !important;
}
/* Dark mode border colors */
.dark .border-gray-200,
.dark .border-gray-100 {
border-color: #374151 !important;
}
.dark .border-gray-300 {
border-color: #4b5563 !important;
}
.dark .divide-gray-200 > * + * {
border-color: #374151 !important;
}
/* Dark mode for cards and containers */
.dark .bg-white\/50,
.dark .bg-white\/80,
.dark .bg-white\/90 {
background-color: rgba(31, 41, 55, 0.8) !important;
}
/* Dark mode shadows */
.dark .shadow,
.dark .shadow-sm,
.dark .shadow-md,
.dark .shadow-lg,
.dark .shadow-xl {
--tw-shadow-color: rgba(0, 0, 0, 0.5);
}
/* Dark mode for inputs and forms */
.dark input,
.dark textarea,
.dark select {
background-color: #1f2937 !important;
border-color: #374151 !important;
color: #f9fafb !important;
}
.dark input::-moz-placeholder, .dark textarea::-moz-placeholder {
color: #6b7280 !important;
}
.dark input::placeholder,
.dark textarea::placeholder {
color: #6b7280 !important;
}
.dark input:focus,
.dark textarea:focus,
.dark select:focus {
border-color: #3b82f6 !important;
--tw-ring-color: rgba(59, 130, 246, 0.5) !important;
}
/* Dark mode for tables */
.dark table {
background-color: #111827 !important;
}
.dark thead {
background-color: #1f2937 !important;
}
.dark th {
color: #d1d5db !important;
border-color: #374151 !important;
}
.dark td {
border-color: #374151 !important;
color: #e5e7eb !important;
}
.dark tbody tr:hover {
background-color: #1f2937 !important;
}
.dark .hover\:bg-gray-50:hover {
background-color: #1f2937 !important;
}
.dark .hover\:bg-gray-100:hover {
background-color: #374151 !important;
}
/* Dark mode for modals and dialogs */
.dark [role="dialog"],
.dark .modal-content {
background-color: #1f2937 !important;
border-color: #374151 !important;
}
/* Dark mode for navigation sidebar */
.dark .sidebar,
.dark nav {
background-color: #111827 !important;
}
.dark .nav-item:hover {
background-color: #1f2937 !important;
}
/* Dark mode for dropdowns */
.dark .dropdown-menu,
.dark [role="menu"] {
background-color: #1f2937 !important;
border-color: #374151 !important;
}
/* Dark mode for badges and pills */
.dark .bg-green-100 {
background-color: rgba(34, 197, 94, 0.2) !important;
}
.dark .bg-red-100 {
background-color: rgba(239, 68, 68, 0.2) !important;
}
.dark .bg-yellow-100,
.dark .bg-amber-100 {
background-color: rgba(245, 158, 11, 0.2) !important;
}
.dark .bg-blue-100 {
background-color: rgba(59, 130, 246, 0.2) !important;
}
.dark .bg-purple-100 {
background-color: rgba(147, 51, 234, 0.2) !important;
}
.dark .bg-indigo-100 {
background-color: rgba(99, 102, 241, 0.2) !important;
}
/* Dark mode for status indicators */
.dark .text-green-600,
.dark .text-green-700,
.dark .text-green-800 {
color: #4ade80 !important;
}
.dark .text-red-600,
.dark .text-red-700,
.dark .text-red-800 {
color: #f87171 !important;
}
.dark .text-yellow-600,
.dark .text-yellow-700,
.dark .text-yellow-800,
.dark .text-amber-600,
.dark .text-amber-700,
.dark .text-amber-800 {
color: #fbbf24 !important;
}
.dark .text-blue-600,
.dark .text-blue-700,
.dark .text-blue-800 {
color: #60a5fa !important;
}
/* Dark mode for charts and stats */
.dark .recharts-wrapper {
background-color: transparent !important;
}
.dark .recharts-text {
fill: #9ca3af !important;
}
.dark .recharts-cartesian-grid line {
stroke: #374151 !important;
}
/* Dark mode for scrollbars */
.dark ::-webkit-scrollbar {
width: 8px;
height: 8px;
}
.dark ::-webkit-scrollbar-track {
background: #1f2937;
}
.dark ::-webkit-scrollbar-thumb {
background: #4b5563;
border-radius: 4px;
}
.dark ::-webkit-scrollbar-thumb:hover {
background: #6b7280;
}
/* Dark mode for toasts */
.dark [data-sonner-toast] {
background-color: #1f2937 !important;
border-color: #374151 !important;
color: #f9fafb !important;
}
/* Dark mode for calendar/date picker */
.dark .react-datepicker {
background-color: #1f2937 !important;
border-color: #374151 !important;
border-radius: 0.75rem !important;
}
.dark .react-datepicker__header {
background-color: #374151 !important;
border-color: #4b5563 !important;
border-radius: 0.75rem 0.75rem 0 0 !important;
}
.dark .react-datepicker__day {
color: #e5e7eb !important;
border-radius: 0.375rem !important;
}
.dark .react-datepicker__day:hover {
background-color: #374151 !important;
border-radius: 0.375rem !important;
}
.dark .react-datepicker__day--selected {
border-radius: 0.375rem !important;
}
/* Calendar rounded corners (light mode) */
.react-datepicker {
border-radius: 0.75rem !important;
overflow: hidden;
}
.react-datepicker__header {
border-radius: 0.75rem 0.75rem 0 0 !important;
}
.react-datepicker__day {
border-radius: 0.375rem !important;
}
.react-datepicker__day:hover {
border-radius: 0.375rem !important;
}
.react-datepicker__day--selected,
.react-datepicker__day--keyboard-selected {
border-radius: 0.375rem !important;
}
/* Tabs rounded corners - detail pages */
[role="tablist"] button,
.tab-button,
button[class*="border-b-2"],
button[class*="border-b-4"] {
border-radius: 0.5rem 0.5rem 0 0 !important;
}
/* Tab containers */
[role="tablist"],
.tabs-container {
border-radius: 0.75rem !important;
}
/* Rounded tabs for detail pages */
.detail-tabs button,
nav[class*="flex"][class*="gap"] button[class*="pb-"],
.flex.gap-1 > button,
.flex.gap-2 > button {
border-radius: 0.5rem !important;
}
/* Active tab indicator with rounded corners */
button[class*="border-b-2"][class*="border-blue"],
button[class*="border-b-4"][class*="border-blue"] {
border-radius: 0.5rem 0.5rem 0 0 !important;
}
/* Settings page tabs */
.settings-tabs button,
[class*="bg-white"][class*="rounded"] button[class*="px-4"][class*="py-2"] {
border-radius: 0.5rem !important;
}
/* Generic tab styling improvements */
button[class*="transition-colors"][class*="px-4"][class*="py-2"]:not([class*="rounded-lg"]):not([class*="rounded-full"]) {
border-radius: 0.5rem !important;
}
/* Work order and detail page tabs - more specific selectors */
.flex.items-center.gap-1 > button,
.flex.items-center.gap-2 > button,
.flex.gap-4 > button[class*="py-3"],
.flex.gap-6 > button[class*="py-3"],
nav.flex > button,
div.flex.border-b > button {
border-radius: 0.5rem 0.5rem 0 0 !important;
}
/* Tab pill style - rounded on all sides */
button[class*="rounded-t-"],
.tab-pill {
border-radius: 0.5rem 0.5rem 0 0 !important;
}
/* Full rounded tabs for some areas */
.rounded-tabs button,
button[class*="bg-gray-100"][class*="text-gray-600"],
button[class*="bg-blue-100"][class*="text-blue-600"] {
border-radius: 0.5rem !important;
}
/* Specific fix for detail page navigation tabs */
nav[class*="flex"][class*="items-center"] button[class*="px-4"],
.detail-page-tabs button,
[class*="border-b"][class*="border-gray"] > button {
border-radius: 0.5rem 0.5rem 0 0 !important;
margin-bottom: -1px;
}
/* Fix for work order and detail page tabs - target the common pattern */
button.px-4.py-2\.5,
button[class*="px-4"][class*="py-2"][class*="border-b-2"],
button[class*="px-4"][class*="py-3"][class*="border-b-2"],
button[class*="whitespace-nowrap"][class*="border-b-2"] {
border-radius: 0.5rem 0.5rem 0 0 !important;
}
/* Make all tabs with border-b pattern have rounded top corners */
button[class*="border-b-"][class*="text-sm"],
button[class*="border-b-"][class*="font-medium"] {
border-radius: 0.5rem 0.5rem 0 0 !important;
}
/* Rounded corners for flex container tab buttons */
.flex.items-center.border-b button,
div[class*="flex"][class*="border-b"] > button,
nav[class*="flex"][class*="border-b"] > button {
border-radius: 0.5rem 0.5rem 0 0 !important;
}
/* Universal tab rounding - targets buttons with common tab patterns */
button.border-b-2,
button.border-b-4 {
border-radius: 0.5rem 0.5rem 0 0 !important;
}
/* Custom class for tabs - add this to components */
.tab-rounded {
border-radius: 0.5rem 0.5rem 0 0 !important;
}
/* Dark mode tab styling */
.dark [role="tablist"] button,
.dark .tab-button {
border-radius: 0.5rem 0.5rem 0 0 !important;
}
.dark button[class*="border-b-2"],
.dark button[class*="border-b-4"],
.dark button.border-b-2,
.dark button.border-b-4 {
border-radius: 0.5rem 0.5rem 0 0 !important;
}
/* Dark mode for specific page backgrounds */
.dark .min-h-screen.bg-gray-50,
.dark .min-h-screen.bg-gray-100,
.dark .app-container {
background-color: #111827 !important;
}
/* Dark mode ring/focus colors */
.dark .ring-gray-200,
.dark .ring-gray-300 {
--tw-ring-color: #374151 !important;
}
/* Dark mode transitions */
html, body, .bg-white, .bg-gray-50, .bg-gray-100, .text-gray-900 {
transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, border-color 0.2s ease-in-out;
}
/* Adaptive Platform Styles */
/* Safe area padding for mobile devices (notch support) */
.safe-area-inset-bottom {
padding-bottom: env(safe-area-inset-bottom, 0px);
}
.safe-area-inset-top {
padding-top: env(safe-area-inset-top, 0px);
}
/* Convenient safe area classes */
.safe-area-top {
padding-top: env(safe-area-inset-top, 0px);
}
.safe-area-bottom {
padding-bottom: env(safe-area-inset-bottom, 0px);
}
/* PWA Standalone Mode Styles */
@media all and (display-mode: standalone) {
/* Ensure proper safe area handling in PWA mode */
html, body {
min-height: 100vh;
min-height: -webkit-fill-available;
overscroll-behavior: none;
}
/* Fix header in PWA mode */
.pwa-header {
padding-top: env(safe-area-inset-top, 20px);
}
/* Fix bottom nav in PWA mode */
.pwa-bottom-nav {
padding-bottom: env(safe-area-inset-bottom, 20px);
}
}
/* iOS PWA specific fixes */
@supports (-webkit-touch-callout: none) {
/* iOS safe areas - use for notch and home indicator */
.ios-safe-area-top {
padding-top: env(safe-area-inset-top, 0px);
}
.ios-safe-area-bottom {
padding-bottom: env(safe-area-inset-bottom, 0px);
}
}
/* PWA Standalone Mode on iOS */
@media all and (display-mode: standalone) {
@supports (-webkit-touch-callout: none) {
/* Prevent overscroll bounce in PWA mode */
html {
overscroll-behavior: none;
-webkit-overflow-scrolling: touch;
}
}
}
/* Mobile-first layout adjustments */
@media (max-width: 768px) {
/* Add bottom padding to content when bottom nav is present */
.mobile-layout {
padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px)) !important;
}
/* Hide desktop elements on mobile */
.desktop-only {
display: none !important;
}
/* Adjust main content for bottom nav */
main {
padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px));
}
/* ═══ RESPONSIVE DETAIL PAGES ON MOBILE ═══ */
/* NOTE: Removed the blanket .grid-cols-N → 1fr override that was clobbering
intentional multi-column layouts on mobile (login keypad, dashboard buttons,
stats cards, etc.). Use Tailwind's mobile-first responsive variants
(e.g., grid-cols-1 sm:grid-cols-2 md:grid-cols-3) on individual elements
when you need them to stack on mobile. */
/* Reduce padding in detail page containers */
.p-6 { padding: 1rem !important; }
.p-8 { padding: 1rem !important; }
.px-6 { padding-left: 1rem !important; padding-right: 1rem !important; }
.px-8 { padding-left: 1rem !important; padding-right: 1rem !important; }
/* Make tables horizontally scrollable */
table { display: block; overflow-x: auto; }
/* Reduce font sizes on dense pages */
.text-2xl { font-size: 1.25rem !important; }
.text-3xl { font-size: 1.5rem !important; }
/* Stack flex containers that should be side-by-side on desktop */
.detail-header { flex-direction: column !important; }
/* Make buttons full-width on mobile for easier touch targets */
.action-buttons-row { flex-wrap: wrap !important; }
.action-buttons-row > button { flex: 1 1 calc(50% - 0.5rem) !important; min-width: 120px; }
/* Ensure modal content doesn't overflow */
[role="dialog"] { max-width: 95vw !important; max-height: 90vh !important; }
[role="dialog"] > div { max-height: 85vh !important; overflow-y: auto !important; }
}
/* Tablet layout — body gets .tablet-layout class from AdaptiveProvider */
@media (min-width: 768px) and (max-width: 1366px) {
.mobile-only {
display: none !important;
}
}
/* ═══ TABLET LAYOUT ENHANCEMENTS ═══ */
/* When .tablet-layout is on body, mobile components get wider treatment */
.tablet-layout {
/* Give mobile content more breathing room */
--mobile-padding: 1.5rem;
}
/* Make mobile pages use wider max-width on tablet */
.tablet-layout .p-4 {
padding: 1.5rem;
}
/* Tablet: 2-column grids for card layouts */
.tablet-layout .space-y-3 > button,
.tablet-layout .space-y-3 > a,
.tablet-layout .space-y-3 > div[class*="rounded"] {
/* Let items be wider */
}
/* Tablet: Customer/Site/WO detail header — use wider layout */
.tablet-layout .bg-gradient-to-r {
max-width: 100%;
}
/* Tablet: Stats/financial cards in a row */
.tablet-layout .grid.grid-cols-2 {
grid-template-columns: repeat(3, 1fr);
}
.tablet-layout .grid.grid-cols-3 {
grid-template-columns: repeat(4, 1fr);
}
/* Tablet: Wider tab buttons */
.tablet-layout .overflow-x-auto button {
padding-left: 1.25rem;
padding-right: 1.25rem;
}
/* Tablet: Make list items taller for better touch targets */
.tablet-layout .space-y-2 > button,
.tablet-layout .space-y-2 > a,
.tablet-layout .space-y-3 > button,
.tablet-layout .space-y-3 > a {
min-height: 64px;
}
/* Tablet: Widen text content */
.tablet-layout h1 {
font-size: 1.5rem;
}
/* Tablet: Bottom navigation gets bigger icons and labels */
.tablet-layout nav[class*="bottom"],
.tablet-layout .bottom-navigation {
height: 72px;
}
/* Tablet: Search inputs get bigger */
.tablet-layout input[type="search"],
.tablet-layout input[type="text"][placeholder*="Search"] {
height: 48px;
font-size: 1rem;
}
/* Desktop layout */
@media (min-width: 1024px) {
.mobile-only {
display: none !important;
}
}
/* Touch-friendly targets */
.touch-device button,
.touch-device a {
min-height: 44px;
min-width: 44px;
}
/* Smooth transitions for adaptive elements */
.adaptive-transition {
transition: all 0.3s ease-in-out;
}
/* Primary action button emphasis */
.emphasize-primary {
transform: scale(1.1);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
/* ====== Google Maps InfoWindow: Clean fence measurement labels ====== */
/* CRITICAL: measurement labels MUST be click-through. Google Maps
InfoWindows are DOM overlays that capture pointer events by
default. When drawing a fence, users would click near a length
label to place the next point and the label would eat the click,
making drawing feel broken. `pointer-events: none` on the whole
InfoWindow container (positioning wrapper + bubble + content) fixes
this — clicks fall through to the map. */
.gm-style .gm-style-iw-a:has(.fence-measure-label),
.gm-style .gm-style-iw-a:has(.fence-measure-label) *,
.gm-style .gm-style-iw-c:has(.fence-measure-label),
.gm-style .gm-style-iw-c:has(.fence-measure-label) * {
pointer-events: none !important;
}
/* Remove the default white bubble container for fence labels only */
.gm-style .gm-style-iw-c:has(.fence-measure-label) {
background: transparent !important;
box-shadow: none !important;
padding: 0 !important;
border-radius: 0 !important;
max-width: none !important;
}
.gm-style .gm-style-iw-c:has(.fence-measure-label) .gm-style-iw-d {
overflow: hidden !important;
padding: 0 !important;
max-height: none !important;
}
/* Hide the tail/arrow below the InfoWindow */
.gm-style .gm-style-iw-c:has(.fence-measure-label) + .gm-style-iw-tc,
.gm-style .gm-style-iw-c:has(.fence-measure-label) + div {
display: none !important;
}
/* Hide the close button on measurement labels */
.gm-style .gm-style-iw-c:has(.fence-measure-label) button.gm-ui-hover-effect,
.gm-style .gm-style-iw-c:has(.fence-measure-label) > button {
display: none !important;
}
/* ============================================================
GLOBAL ROUNDED CORNERS — Consistent rounded aesthetic
============================================================ */
/* All modals, dialogs, and floating panels get generous rounding */
[role="dialog"],
[role="alertdialog"] {
border-radius: 1rem !important;
}
/* Tooltip and popover containers */
[role="tooltip"],
[data-radix-popper-content-wrapper] > div {
border-radius: 0.75rem;
}
/* Form inputs, selects, textareas — consistent rounded-lg */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
select,
textarea {
border-radius: 0.75rem;
}
/* Notification toasts */
[data-sonner-toaster] [data-sonner-toast] {
border-radius: 0.875rem !important;
}
/* Table containers get softer corners */
table {
border-radius: 0.75rem;
overflow: hidden;
}
/* Image thumbnails and avatars within lists */
.rounded-lg img,
.rounded-xl img {
border-radius: inherit;
}
/* ============================================================
RESPONSIVE PAGE HEADERS — Auto-size based on screen width
Applies to detail page gradient headers (sites, customers, etc.)
============================================================ */
/* Header containers: enforce single-row on wide screens, wrap on narrow */
.page-detail-header,
div[class*="text-white"][class*="rounded-lg"][class*="shadow-lg"][class*="p-4"] {
container-type: inline-size;
}
/* Stat number sizing: scale down on smaller containers */
@container (max-width: 900px) {
div[class*="text-2xl"][class*="font-bold"] {
font-size: 1.125rem !important; /* text-lg */
}
}
/* On screens < 1280px, make stat cards more compact */
@media (max-width: 1279px) {
div[class*="text-white"][class*="rounded-lg"][class*="shadow-lg"][class*="p-4"] div[class*="bg-white/10"][class*="px-2.5"][class*="py-1.5"] {
padding: 0.25rem 0.5rem !important;
}
div[class*="text-white"][class*="rounded-lg"][class*="shadow-lg"][class*="p-4"] div[class*="text-2xl"][class*="font-bold"] {
font-size: 1.25rem !important;
}
}
/* On screens < 1024px, hide center-right number stats */
@media (max-width: 1023px) {
div[class*="text-white"][class*="rounded-lg"][class*="shadow-lg"][class*="p-4"] div[class*="border-l"][class*="border-r"][class*="border-white/20"] {
display: none !important;
}
}
/* ============================================================
ACTION BUTTONS — Pill-shaped for consistency across the app
Targets action-style buttons (with padding + font-medium)
Excludes tab buttons, nav items, and structural elements
============================================================ */
/* Primary, secondary, and outline action buttons get pill rounding */
button[class*="px-"][class*="py-"][class*="font-medium"]:not([class*="rounded-full"]):not([class*="rounded-none"]):not([class*="w-full"]):not([class*="rounded-t"]):not([class*="rounded-b"]),
a[class*="px-"][class*="py-"][class*="font-medium"]:not([class*="rounded-full"]):not([class*="rounded-none"]):not([class*="w-full"]):not([class*="rounded-t"]):not([class*="rounded-b"]) {
border-radius: 9999px !important;
}
/* ===== COMPACT LIST / TABLE STYLING (Global) ===== */
/* Reduce padding on all data-table header cells */
table thead th {
padding: 0.375rem 0.5rem !important; /* py-1.5 px-2 */
font-size: 0.625rem !important; /* text-[10px] */
}
/* Reduce padding on all data-table body cells */
table tbody td {
padding: 0.375rem 0.5rem !important; /* py-1.5 px-2 */
font-size: 0.8125rem !important; /* text-[13px] */
}
/* Reduce row height by ensuring vertical alignment */
table tbody tr {
line-height: 1.3;
}
/* ═══════════════════════════════════════════════════════════
CREW TABLET MODE — Hide mobile-specific elements inside tablet layout
═══════════════════════════════════════════════════════════ */
.crew-tablet-mode .mobile-page-header {
display: none !important;
}
/* Hide fixed bottom nav bars from mobile pages when in tablet mode */
.crew-tablet-mode > div > nav[class*="fixed bottom"],
.crew-tablet-mode [data-mobile-nav],
.crew-tablet-mode > div > div[class*="fixed bottom-0"] {
display: none !important;
}
/* Adjust page content to fill tablet content area (no safe-area padding needed) */
.crew-tablet-mode > div {
padding-top: 0 !important;
padding-bottom: 0 !important;
min-height: 100%;
overflow-y: auto;
}
/* Remove safe-area insets inside tablet mode */
.crew-tablet-mode [style*="safe-area"] {
padding-top: 0 !important;
padding-bottom: 0 !important;
}
/* Messages page in tablet mode - override fixed positioning to work within layout */
.crew-tablet-messages-wrapper > div[class*="fixed"] {
position: absolute !important;
height: 100% !important;
}
/* Override height calculations for messages in tablet mode */
.crew-tablet-messages-wrapper {
--mobile-vh: 100%;
}
/* Hide scrollbar utility for horizontal tab pill rows on mobile */
.no-scrollbar {
-ms-overflow-style: none;
scrollbar-width: none;
}
.no-scrollbar::-webkit-scrollbar {
display: none;
}
/* ==========================================================
Clipboard Wizard — printed-form aesthetic for the paper area
Scoped under .wiz-clip-paper so we never touch other UIs.
========================================================== */
.wiz-clip-paper label {
font-size: 11px;
letter-spacing: 0.06em;
text-transform: uppercase;
color: #4a3f30;
font-weight: 600;
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.wiz-clip-paper .text-sm.font-medium.text-gray-700,
.wiz-clip-paper .text-sm.font-semibold.text-gray-700,
.wiz-clip-paper .block.text-sm.font-medium {
font-size: 11px;
letter-spacing: 0.06em;
text-transform: uppercase;
color: #4a3f30;
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
/* Inputs — keep functional but warm them up for the paper */
.wiz-clip-paper input:not([type='checkbox']):not([type='radio']):not([type='range']),
.wiz-clip-paper textarea,
.wiz-clip-paper select {
background-color: rgba(255, 253, 247, 0.85);
border-color: #c9bf9f;
}
.wiz-clip-paper input:not([type='checkbox']):not([type='radio']):not([type='range']):focus,
.wiz-clip-paper textarea:focus,
.wiz-clip-paper select:focus {
background-color: #ffffff;
border-color: #8a7a55;
box-shadow: 0 0 0 3px rgba(138, 122, 85, 0.15);
}
/* Section-style headings inside wizards (h3/h4) get a printed feel */
.wiz-clip-paper h3,
.wiz-clip-paper h4 {
font-family: ui-serif, Georgia, 'Times New Roman', serif;
color: #1c1209;
letter-spacing: 0.02em;
}
/* Soft divider lines feel like printed rules */
.wiz-clip-paper hr,
.wiz-clip-paper .border-t,
.wiz-clip-paper .border-b {
border-color: #d8cfb6;
}
/* Subtle paper grain noise via SVG-data background — additive over base color */
.wiz-clip-paper::before {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
opacity: 0.04;
background-image: url("data:image/svg+xml;utf8,");
mix-blend-mode: multiply;
}
/* ==========================================================
Clipboard Wizard — option-tile (selection cards) refinements
Targets buttons/divs styled with the common "border-2 rounded-lg"
pattern used across wizard option pickers.
========================================================== */
/* Default (unselected) option tiles — warm paper tone */
.wiz-clip-paper button.border-2.border-gray-200,
.wiz-clip-paper button.border-2.border-gray-300,
.wiz-clip-paper div.border-2.border-gray-200,
.wiz-clip-paper div.border-2.border-gray-300 {
border-color: #c9bf9f !important;
background-color: rgba(255, 253, 247, 0.6);
}
.wiz-clip-paper button.border-2.border-gray-200:hover,
.wiz-clip-paper button.border-2.border-gray-300:hover,
.wiz-clip-paper div.border-2.border-gray-200:hover,
.wiz-clip-paper div.border-2.border-gray-300:hover,
.wiz-clip-paper button.hover\:border-gray-300:hover,
.wiz-clip-paper button.hover\:border-gray-400:hover {
border-color: #9b8d72 !important;
background-color: rgba(255, 253, 247, 0.9);
}
/* Inactive icon containers — replace flat gray pad with cream tile */
.wiz-clip-paper .bg-gray-100,
.wiz-clip-paper .bg-gray-50 {
background-color: rgba(245, 238, 220, 0.85);
}
.wiz-clip-paper .text-gray-500,
.wiz-clip-paper .text-gray-400 {
color: #7a6a4f;
}
.wiz-clip-paper .text-gray-700 {
color: #4a3f30;
}
/* Selected blue tiles — keep blue but tone down so it feels like a stamp */
.wiz-clip-paper button.border-blue-500,
.wiz-clip-paper div.border-blue-500 {
border-color: #2c5d8a !important;
box-shadow: 0 0 0 1px rgba(44, 93, 138, 0.15);
}
.wiz-clip-paper button.bg-blue-50,
.wiz-clip-paper div.bg-blue-50 {
background-color: rgba(207, 226, 240, 0.55) !important;
}
/* Selected green tiles — same treatment */
.wiz-clip-paper button.border-green-500,
.wiz-clip-paper div.border-green-500 {
border-color: #3a7a3a !important;
box-shadow: 0 0 0 1px rgba(58, 122, 58, 0.15);
}
.wiz-clip-paper button.bg-green-50,
.wiz-clip-paper div.bg-green-50 {
background-color: rgba(214, 232, 214, 0.55) !important;
}
/* Selected indigo / purple / amber */
.wiz-clip-paper button.border-indigo-500,
.wiz-clip-paper div.border-indigo-500,
.wiz-clip-paper button.border-purple-500,
.wiz-clip-paper div.border-purple-500 {
border-color: #5a4e8a !important;
box-shadow: 0 0 0 1px rgba(90, 78, 138, 0.15);
}
.wiz-clip-paper button.bg-indigo-50,
.wiz-clip-paper div.bg-indigo-50,
.wiz-clip-paper button.bg-purple-50,
.wiz-clip-paper div.bg-purple-50 {
background-color: rgba(218, 213, 235, 0.55) !important;
}
/* "Check" badge in selected tile — make it look like a stamped check */
.wiz-clip-paper .ml-auto .lucide-check,
.wiz-clip-paper .ml-auto svg.lucide-check {
filter: contrast(0.9);
}
/* Card-like containers (Card / .rounded-lg + .border) inside the paper */
.wiz-clip-paper .border.rounded-lg,
.wiz-clip-paper .border.border-gray-200,
.wiz-clip-paper .border.border-gray-300 {
border-color: #d3c7a8;
}
/* Section subtitles ("text-xs text-gray-500") — feel like a printed hint */
.wiz-clip-paper p.text-xs.text-gray-500,
.wiz-clip-paper span.text-xs.text-gray-500 {
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
letter-spacing: 0.04em;
}
/* Badges/Pills inside wizards keep their colors but get a subtle paper border */
.wiz-clip-paper .rounded-full.bg-blue-100,
.wiz-clip-paper .rounded-full.bg-green-100,
.wiz-clip-paper .rounded-full.bg-amber-100,
.wiz-clip-paper .rounded-full.bg-purple-100 {
border: 1px dashed rgba(74, 63, 48, 0.3);
}
/* ==========================================================
RUGGED / UTILITY CONTRACTOR THEME (Feb 2026)
--------------------------------------------------------
Industrial palette and typography that feels like a
work-site clipboard, safety signage, and steel hardware
instead of generic high-tech SaaS blue.
Applied automatically via `body.theme-rugged` (set in
/app/app/layout.js so every authenticated page picks it
up). To opt out, remove the class or override the CSS
vars at a deeper scope.
========================================================== */
:root {
/* Industrial palette tokens — usable from inline styles */
--rugged-orange: #F15A24; /* safety orange — primary action */
--rugged-orange-deep: #C13F11; /* hover/active */
--rugged-yellow: #FFC700; /* safety yellow — warning/highlight */
--rugged-yellow-deep: #D9A700;
--rugged-charcoal: #1F2126; /* dark surface (steel) */
--rugged-steel: #3A3F47; /* secondary dark */
--rugged-iron: #5A6068; /* mid */
--rugged-zinc: #8B9098; /* muted text */
--rugged-concrete: #E8E6E1; /* neutral surface */
--rugged-canvas: #F5EFE0; /* paper / cream */
--rugged-shadow: rgba(0, 0, 0, 0.18);
}
body.theme-rugged {
/* Re-map brand tokens to the industrial palette so EVERY
branded button, link, badge etc. picks the new look up
without touching individual components. */
--brand-primary: var(--rugged-orange);
--brand-secondary: var(--rugged-charcoal);
--brand-accent: var(--rugged-yellow);
/* Bolder, condensed feel for headings — uses common stack;
falls back to Inter if Roboto Condensed isn't installed. */
--font-heading: 'Roboto Condensed', 'Oswald', 'Bebas Neue',
'Inter', system-ui, -apple-system, sans-serif;
background-color: #F2EFE8;
}
/* Headings get a stamped, uppercase, slightly tracked feel */
body.theme-rugged h1:not([class*="text-white"]):not([class*="text-amber"]):not([class*="text-blue"]):not([class*="text-emerald"]):not([class*="text-rose"]):not([class*="text-orange"]):not([class*="text-violet"]):not([class*="text-sky"]):not([class*="text-gray-100"]):not([class*="text-gray-50"]),
body.theme-rugged h2:not([class*="text-white"]):not([class*="text-amber"]):not([class*="text-blue"]):not([class*="text-emerald"]):not([class*="text-rose"]):not([class*="text-orange"]):not([class*="text-violet"]):not([class*="text-sky"]):not([class*="text-gray-100"]):not([class*="text-gray-50"]),
body.theme-rugged h3:not([class*="text-white"]):not([class*="text-amber"]):not([class*="text-blue"]):not([class*="text-emerald"]):not([class*="text-rose"]):not([class*="text-orange"]):not([class*="text-violet"]):not([class*="text-sky"]):not([class*="text-gray-100"]):not([class*="text-gray-50"]) {
letter-spacing: 0.01em;
font-weight: 800;
color: var(--rugged-charcoal);
}
/* Cards / panels: matte, sturdy 2px borders, no glossy shadows */
body.theme-rugged .bg-white,
body.theme-rugged .bg-gray-50 {
/* Keep the existing surface, but firm up edges */
border-color: #C9C5BB !important;
}
/* Sturdy, no-gloss buttons that look like stamped steel labels.
We target the common branded button patterns without
reaching into individual components. */
body.theme-rugged .bg-blue-600,
body.theme-rugged .bg-blue-700,
body.theme-rugged .bg-indigo-600,
body.theme-rugged .bg-indigo-700 {
background-color: var(--rugged-orange) !important;
background-image: none !important;
}
body.theme-rugged .hover\:bg-blue-700:hover,
body.theme-rugged .hover\:bg-indigo-700:hover {
background-color: var(--rugged-orange-deep) !important;
}
body.theme-rugged .from-blue-500,
body.theme-rugged .from-blue-600,
body.theme-rugged .from-indigo-500,
body.theme-rugged .from-indigo-600 {
--tw-gradient-from: var(--rugged-orange) !important;
}
body.theme-rugged .to-blue-600,
body.theme-rugged .to-blue-700,
body.theme-rugged .to-indigo-600,
body.theme-rugged .to-indigo-700 {
--tw-gradient-to: var(--rugged-orange-deep) !important;
}
/* Primary anchor / link color */
body.theme-rugged .text-blue-600,
body.theme-rugged .text-blue-700,
body.theme-rugged .text-indigo-600,
body.theme-rugged .text-indigo-700 {
color: var(--rugged-orange-deep) !important;
}
/* Tab/active indicator strokes — use safety orange */
body.theme-rugged .border-blue-500,
body.theme-rugged .border-blue-600,
body.theme-rugged .border-indigo-500,
body.theme-rugged .border-indigo-600 {
border-color: var(--rugged-orange) !important;
}
/* Dashboard top nav gets a stamped-steel feel.
In LIGHT mode keep the rugged warm canvas background.
In DARK mode drop down to a charcoal so the rest of the dark UI
reads as one cohesive piece.
IMPORTANT: must respond to the user's dark/light toggle — do not
pin it to charcoal in light mode. */
body.theme-rugged nav[aria-label="Main navigation"] {
background-color: #FFFDF8 !important;
background-image:
linear-gradient(180deg, rgba(0,0,0,0.02) 0%, rgba(0,0,0,0.05) 100%) !important;
border-bottom: 2px solid var(--rugged-charcoal) !important;
color: var(--rugged-charcoal);
}
body.theme-rugged nav[aria-label="Main navigation"] a,
body.theme-rugged nav[aria-label="Main navigation"] button {
color: var(--rugged-charcoal) !important;
}
body.theme-rugged nav[aria-label="Main navigation"] a:hover,
body.theme-rugged nav[aria-label="Main navigation"] button:hover {
color: var(--rugged-orange-deep) !important;
}
/* Dark mode override — return to the charcoal stamped-steel look */
.dark body.theme-rugged nav[aria-label="Main navigation"] {
background-color: var(--rugged-charcoal) !important;
background-image:
linear-gradient(180deg, rgba(255,255,255,0.04) 0%, rgba(0,0,0,0.10) 100%) !important;
border-bottom: 2px solid #000 !important;
color: #F5EFE0;
}
.dark body.theme-rugged nav[aria-label="Main navigation"] a,
.dark body.theme-rugged nav[aria-label="Main navigation"] button {
color: #F5EFE0 !important;
}
.dark body.theme-rugged nav[aria-label="Main navigation"] a:hover,
.dark body.theme-rugged nav[aria-label="Main navigation"] button:hover {
color: var(--rugged-yellow) !important;
}
/* Utility helper classes — use these in new components */
.rugged-card {
background-color: #FFFDF8;
border: 2px solid var(--rugged-charcoal);
border-radius: 6px;
box-shadow: 0 2px 0 var(--rugged-charcoal), 0 6px 12px var(--rugged-shadow);
}
.rugged-pill {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 10px;
border: 2px solid var(--rugged-charcoal);
border-radius: 999px;
background-color: var(--rugged-yellow);
color: var(--rugged-charcoal);
font-weight: 700;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.08em;
}
.rugged-stamp {
display: inline-block;
padding: 4px 10px;
border: 2px solid var(--rugged-orange);
color: var(--rugged-orange-deep);
font-weight: 800;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.12em;
transform: rotate(-3deg);
border-radius: 4px;
background: rgba(255, 199, 0, 0.08);
}
.rugged-btn-primary {
background-color: var(--rugged-orange);
color: #fff;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
padding: 10px 18px;
border-radius: 6px;
border: 2px solid var(--rugged-orange-deep);
box-shadow: 0 2px 0 var(--rugged-orange-deep);
transition: transform 0.05s ease, box-shadow 0.05s ease;
}
.rugged-btn-primary:hover {
background-color: var(--rugged-orange-deep);
}
.rugged-btn-primary:active {
transform: translateY(1px);
box-shadow: 0 1px 0 var(--rugged-orange-deep);
}
.rugged-btn-secondary {
background-color: #FFFDF8;
color: var(--rugged-charcoal);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
padding: 10px 18px;
border-radius: 6px;
border: 2px solid var(--rugged-charcoal);
}
/* Diagonal warning stripe (for danger zones / alerts) */
.rugged-warning-bar {
background-image: repeating-linear-gradient(
-45deg,
#FFC700 0,
#FFC700 14px,
#1F2126 14px,
#1F2126 28px
);
height: 8px;
border-radius: 2px;
}
/* SHEET — single page Smart-Form clipboard surface
Used by SmartEstimateInvoiceForm. Lighter than the modal
clipboard so it can occupy the full screen comfortably. */
.rugged-sheet {
background-color: #FDFBF4;
background-image:
repeating-linear-gradient(0deg, rgba(31,33,38,0.05) 0px, rgba(31,33,38,0.05) 1px, transparent 1px, transparent 32px);
border: 2px solid var(--rugged-charcoal);
border-radius: 10px;
box-shadow: 0 4px 0 var(--rugged-charcoal), 0 12px 24px var(--rugged-shadow);
position: relative;
}
.rugged-sheet::before {
/* Red margin line, like a school exercise book */
content: '';
position: absolute;
left: 60px;
top: 0;
bottom: 0;
width: 1px;
background-color: rgba(241, 90, 36, 0.30);
pointer-events: none;
}
.rugged-sheet-section-label {
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.14em;
color: var(--rugged-iron);
border-bottom: 2px solid var(--rugged-charcoal);
padding-bottom: 4px;
margin-bottom: 12px;
display: flex;
align-items: baseline;
justify-content: space-between;
}
.rugged-sheet-section-label .num {
background-color: var(--rugged-charcoal);
color: var(--rugged-yellow);
padding: 2px 8px;
border-radius: 3px;
font-weight: 800;
font-size: 11px;
}
.rugged-sheet-field-label {
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--rugged-steel);
font-weight: 700;
}
.rugged-sheet input,
.rugged-sheet textarea,
.rugged-sheet select {
background-color: rgba(255, 253, 247, 0.85) !important;
border-color: var(--rugged-iron) !important;
border-width: 1px !important;
border-radius: 4px !important;
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.rugged-sheet input:focus,
.rugged-sheet textarea:focus,
.rugged-sheet select:focus {
background-color: #ffffff !important;
border-color: var(--rugged-orange) !important;
box-shadow: 0 0 0 3px rgba(241, 90, 36, 0.15) !important;
}
/* Dark mode: keep palette but darken the canvas */
.dark body.theme-rugged {
background-color: #14161A;
}
.dark body.theme-rugged .rugged-card,
.dark body.theme-rugged .rugged-sheet {
background-color: #1F2126;
color: #F5EFE0;
}
/* ─────────────────────────────────────────────────────────────────────
* BRAND-COLOR OVERRIDE LAYER
*
* Background:
* Large parts of the app use hardcoded Tailwind colors (bg-blue-600,
* text-blue-600, bg-purple-600, bg-indigo-600) as the visual "primary
* action" color. A file-by-file sweep is hundreds of files and risky.
*
* Instead we override those specific Tailwind classes to point at the
* brand CSS variables (--primary / --primary-foreground) set by
* BrandingContext from the tenant→platform→default cascade.
*
* Scope guarantees:
* - We REMAP only colors used as "primary action" in this codebase:
* blue-{500,600,700}, indigo-{500,600,700}, purple-{500,600,700}
* - We DO NOT touch semantic colors used for status:
* emerald/green (success), amber/yellow (warning), red/rose (danger)
* - We DO NOT touch the navy palette used by sidebar chrome (slate).
*
* Toggling:
* The remap is gated on `body[data-brand-override="true"]` so admins
* can disable it from /master/branding if they ever want raw Tailwind
* back. BrandingContext sets the attribute on mount.
* ───────────────────────────────────────────────────────────────────── */
body[data-brand-override="true"] {
/* Primary action backgrounds — all remap to brand primary */
.bg-blue-500,
.bg-blue-600,
.bg-blue-700,
.bg-indigo-500,
.bg-indigo-600,
.bg-indigo-700,
.bg-purple-500,
.bg-purple-600,
.bg-purple-700 {
background-color: hsl(var(--primary)) !important;
color: hsl(var(--primary-foreground)) !important;
}
/* Hover states — softly dim instead of jumping to a different blue */
.hover\:bg-blue-700:hover,
.hover\:bg-blue-600:hover,
.hover\:bg-indigo-700:hover,
.hover\:bg-indigo-600:hover,
.hover\:bg-purple-700:hover,
.hover\:bg-purple-600:hover {
background-color: hsl(var(--primary)) !important;
filter: brightness(0.92);
}
/* Link / icon text */
.text-blue-500,
.text-blue-600,
.text-blue-700,
.text-indigo-500,
.text-indigo-600,
.text-indigo-700,
.text-purple-500,
.text-purple-600,
.text-purple-700 {
color: hsl(var(--primary)) !important;
}
.hover\:text-blue-700:hover,
.hover\:text-blue-800:hover,
.hover\:text-indigo-700:hover,
.hover\:text-purple-700:hover {
color: hsl(var(--primary)) !important;
filter: brightness(0.85);
}
/* Light tinted backgrounds (badges / cards) — use a brand tint */
.bg-blue-50,
.bg-indigo-50,
.bg-purple-50 {
background-color: color-mix(in srgb, hsl(var(--primary)) 8%, transparent) !important;
}
.bg-blue-100,
.bg-indigo-100,
.bg-purple-100 {
background-color: color-mix(in srgb, hsl(var(--primary)) 16%, transparent) !important;
}
/* Borders + focus rings */
.border-blue-200,
.border-indigo-200,
.border-purple-200 {
border-color: color-mix(in srgb, hsl(var(--primary)) 35%, transparent) !important;
}
.border-blue-300,
.border-blue-400,
.border-blue-500,
.border-indigo-300,
.border-indigo-400,
.border-indigo-500,
.border-purple-300,
.border-purple-400,
.border-purple-500 {
border-color: hsl(var(--primary)) !important;
}
.ring-blue-500,
.ring-blue-600,
.ring-indigo-500,
.ring-purple-500,
.focus\:ring-blue-500:focus,
.focus\:ring-indigo-500:focus,
.focus\:ring-purple-500:focus {
--tw-ring-color: hsl(var(--primary)) !important;
}
/* Gradients used in hero / login / kpi cards. We swap the blue/indigo
stops to the brand color while leaving the secondary stop alone so
the gradient still has visual depth. */
.from-blue-500,
.from-blue-600,
.from-indigo-500,
.from-indigo-600,
.from-purple-500,
.from-purple-600 {
--tw-gradient-from: hsl(var(--primary)) !important;
--tw-gradient-to: color-mix(in srgb, hsl(var(--primary)) 0%, transparent) !important;
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}
.to-blue-500,
.to-blue-600,
.to-indigo-500,
.to-indigo-600,
.to-purple-500,
.to-purple-600 {
--tw-gradient-to: hsl(var(--primary)) !important;
}
}
/* ─────────────────────────────────────────────────────────────────────
Compact-density overrides for admin pages (Feb 2026).
Scope: any subtree wrapped in `data-density="compact"`. Used by the
Inventory Detail "Overview" tab to tighten the default shadcn spacing
without rewriting hundreds of //