/* ============================================ SAHAJ COOLING ERP — Design System Light sidebar, Shadcn/Radix-inspired layout ============================================ */ :root { /* shadcn CSS variables (used by login page) */ --radius: 0.65rem; --background: hsl(0 0% 100%); --foreground: hsl(222.2 84% 4.9%); --primary: hsl(221.2 83.2% 53.3%); --primary-foreground: hsl(210 40% 98%); --muted-foreground: hsl(215.4 16.3% 46.9%); --accent: hsl(210 40% 96.1%); --accent-foreground: hsl(222.2 47.4% 11.2%); --destructive: hsl(0 84.2% 60.2%); --border: hsl(214.3 31.8% 91.4%); --input: hsl(214.3 31.8% 91.4%); --ring: hsl(221.2 83.2% 53.3%); /* Brand Colors */ --s-primary: #2C4190; --s-primary-light: #3a56b0; --s-primary-dark: #1e2d66; --s-accent: #E42626; --s-accent-light: #ff4444; --s-accent-dark: #b81e1e; /* Semantic Colors */ --s-success: #2e7d32; --s-success-light: #e8f5e9; --s-warning: #ed6c02; --s-warning-light: #fff3e0; --s-error: #d32f2f; --s-error-light: #ffebee; --s-info: #0288d1; --s-info-light: #e1f5fe; /* Neutrals */ --s-bg: #f5f5f5; --s-surface: #ffffff; --s-border: #e0e0e0; --s-text: #212121; --s-text-secondary: #666666; --s-text-disabled: #9e9e9e; --s-hover: #f0f0f0; --s-selected: #e8eaf6; /* Sidebar — light theme tokens */ --s-sidebar-width: 16rem; --s-sidebar-collapsed: 3rem; --s-sidebar-bg: #E3F2FD; --s-sidebar-text: #222222; --s-sidebar-text-muted: rgba(34,34,34,0.5); --s-sidebar-accent: #d6e4f0; --s-sidebar-accent-fg: #1e3a5f; --s-sidebar-border: #e8e8e8; --s-sidebar-ring: rgba(44,65,144,0.3); --s-header-height: 4rem; /* Spacing */ --s-xs: 4px; --s-sm: 8px; --s-md: 16px; --s-lg: 24px; --s-xl: 32px; --s-2xl: 48px; /* ---- Safe area and the end-of-page gutter ---- --s-safe-bottom is whatever the device reserves at the bottom of the screen: the home indicator on an iPhone, the gesture bar on Android. It reads 0 on a desktop and on any phone without one, so everything built on it is inert there. It only reports a real value because App.razor asks for viewport-fit=cover. --s-page-bottom-gutter is the single place the "room after the last thing on the page" is set. .s-content spends it, the phone breakpoint below raises it, and any future scroll container that ends a page should use it rather than inventing its own number. Deliberately *not* spacing between components — only after the whole page. */ --s-safe-bottom: env(safe-area-inset-bottom, 0px); --s-page-bottom-gutter: calc(var(--s-md) + var(--s-safe-bottom)); /* Typography */ --s-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --s-font-mono: 'JetBrains Mono', 'Consolas', monospace; /* Shadows */ --s-shadow-sm: 0 1px 2px rgba(0,0,0,0.05); --s-shadow: 0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06); --s-shadow-md: 0 4px 6px rgba(0,0,0,0.1); --s-shadow-lg: 0 10px 15px rgba(0,0,0,0.1); --s-shadow-inset: 0 1px 3px rgba(0,0,0,0.06), 0 0 0 1px rgba(0,0,0,0.04); /* Radius */ --s-radius: 0.625rem; --s-radius-sm: 0.375rem; --s-radius-md: 0.625rem; --s-radius-lg: 0.75rem; --s-radius-xl: 1rem; } /* ---- Reset ---- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html, body { margin: 0; height: 100%; overflow: hidden; } html { font-size: 16px; -webkit-tap-highlight-color: transparent; } body { font-family: var(--s-font); color: var(--s-text); background: var(--s-bg); line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } a { color: var(--s-primary); text-decoration: none; transition: color 0.15s ease; } a:hover { text-decoration: underline; } /* ---- Typography ---- */ h1 { font-size: 1.75rem; font-weight: 600; } h2 { font-size: 1.5rem; font-weight: 600; } h3 { font-size: 1.25rem; font-weight: 600; } h4 { font-size: 1.125rem; font-weight: 600; } h5 { font-size: 1rem; font-weight: 600; } h6 { font-size: 0.875rem; font-weight: 600; } .text-caption { font-size: 0.75rem; color: var(--s-text-secondary); } .text-body2 { font-size: 0.875rem; } .text-overline { font-size: 0.625rem; text-transform: uppercase; letter-spacing: 1px; color: var(--s-text-secondary); } /* ---- Grid System (12-col) ---- */ .s-grid { display: grid; gap: var(--s-md); } .s-grid-2 { grid-template-columns: repeat(2, 1fr); } .s-grid-3 { grid-template-columns: repeat(3, 1fr); } .s-grid-4 { grid-template-columns: repeat(4, 1fr); } .s-grid-6 { grid-template-columns: repeat(6, 1fr); } .s-grid-12 { grid-template-columns: repeat(12, 1fr); } .s-col-1 { grid-column: span 1; } .s-col-2 { grid-column: span 2; } .s-col-3 { grid-column: span 3; } .s-col-4 { grid-column: span 4; } .s-col-6 { grid-column: span 6; } .s-col-8 { grid-column: span 8; } .s-col-12 { grid-column: span 12; } @media (max-width: 768px) { .s-grid-2, .s-grid-3, .s-grid-4, .s-grid-6 { grid-template-columns: 1fr; } .s-col-1, .s-col-2, .s-col-3, .s-col-4, .s-col-6, .s-col-8 { grid-column: span 1; } } /* ---- Flex Utilities ---- */ .s-stack { display: flex; flex-direction: column; gap: var(--s-md); } .s-row { display: flex; flex-direction: row; gap: var(--s-md); align-items: center; } .s-row-between { display: flex; justify-content: space-between; align-items: center; } .s-gap-sm { gap: var(--s-sm); } .s-gap-xs { gap: var(--s-xs); } .s-wrap { flex-wrap: wrap; } /* ---- Spacing ---- */ .s-p-sm { padding: var(--s-sm); } .s-p-md { padding: var(--s-md); } .s-p-lg { padding: var(--s-lg); } .s-p-xl { padding: var(--s-xl); } .s-mb-sm { margin-bottom: var(--s-sm); } .s-mb-md { margin-bottom: var(--s-md); } .s-mb-lg { margin-bottom: var(--s-lg); } .s-mt-md { margin-top: var(--s-md); } /* ---- Buttons ---- */ .s-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border: 1px solid transparent; font-family: var(--s-font); font-size: 0.875rem; font-weight: 500; cursor: pointer; transition: background 0.15s, color 0.15s; line-height: 1.4; background: var(--s-primary); color: #fff; border-radius: var(--s-radius); } .s-btn:hover { background: var(--s-primary-light); } .s-btn:disabled { opacity: 0.5; cursor: not-allowed; } .s-btn--outline { background: transparent; color: var(--s-primary); border-color: var(--s-primary); } .s-btn--outline:hover { background: var(--s-selected); } .s-btn--text { background: transparent; color: var(--s-primary); border: none; padding: 8px 12px; } .s-btn--text:hover { background: var(--s-hover); } .s-btn--danger { background: var(--s-error); } .s-btn--danger:hover { background: var(--s-accent-dark); } .s-btn--text.s-btn--danger { background: transparent; color: var(--s-error); } .s-btn--text.s-btn--danger:hover { background: color-mix(in srgb, var(--s-error) 10%, transparent); color: var(--s-error); } .s-btn--success { background: var(--s-success); } .s-btn--sm { padding: 4px 10px; font-size: 0.8125rem; } .s-btn--icon { padding: 6px; min-width: 32px; justify-content: center; } /* ---- Autocomplete ---- */ .s-autocomplete { position: relative; } .s-autocomplete-dropdown { position: absolute; top: 100%; left: 0; right: 0; z-index: 1050; max-height: 220px; overflow-y: auto; background: #fff; border: 1px solid var(--s-border); border-radius: var(--s-radius); box-shadow: var(--s-shadow-md); margin-top: 2px; } .s-autocomplete-option { padding: 8px 12px; font-size: 0.84rem; cursor: pointer; transition: background 0.1s ease; background: #fff; } .s-autocomplete-option:hover, .s-autocomplete-option--active { background: #e8f0fe; } /* Allow dropdowns/autocomplete to escape parent clipping — only when open */ td:has(.s-autocomplete), td:has(.s-multiselect), td:has(.s-custom-date) { overflow: visible !important; } .s-table:has(.s-autocomplete), .s-table-edit:has(.s-autocomplete), .s-table:has(.s-multiselect), .s-table-edit:has(.s-multiselect) { overflow: visible !important; } /* SSelect (`.s-custom-select-*`) renders its dropdown as position:fixed with JS-computed coordinates, so it doesn't need overflow:visible on ancestors. Removing the s-custom-select-backdrop entries here keeps the list page's sticky pagination contained when an inline status SSelect opens in a row. */ /* SAutocomplete now positions its list the same way, so .s-autocomplete-dropdown is deliberately NOT in the two rules below any more. Flipping a scroll pane to overflow:visible resets its scrollLeft to 0. On a phone that was a real bug: swipe a BOD line grid right to reach the IDU picker, tap it, and the pane jumped back to column one — carrying the list that had just opened off screen with it (measured: scrollLeft 220 → 0, dropdown at left 452 in a 360px viewport). Harmless on a desktop only because the grid fits and there is no scroll position to lose. .s-multiselect stays: its dropdown is still absolutely positioned, and it is the same trap waiting for whoever puts one in a wide grid. */ .s-table-wrap:has(.s-multiselect-backdrop) { overflow: visible !important; } .s-card:has(.s-multiselect-backdrop) { overflow: visible !important; } .lead-panel:has(.s-autocomplete), .lead-panel:has(.s-multiselect), .lead-panel:has(.s-custom-date) { overflow: visible !important; } .lead-panel-body:has(.s-autocomplete), .lead-panel-body:has(.s-multiselect), .lead-panel-body:has(.s-custom-date) { overflow: visible !important; } /* ---- Custom Themed Dropdowns ---- */ /* The scrollbar is hidden three ways because no single property covers every engine: scrollbar-width (Firefox, and Safari 18.2+), -ms-overflow-style (legacy Edge) and the ::-webkit-scrollbar rule below (Chrome, older Safari, Samsung Internet). Linters flag scrollbar-width as unsupported in Safari — the webkit rule is what covers it there, so don't drop either one. */ .s-multiselect, .s-custom-select { position: relative; } .s-multiselect-dropdown, .s-custom-select-dropdown { position: absolute; top: 100%; left: 0; right: 0; z-index: 1050; max-height: 200px; overflow-y: auto; background: #fff; border: 1px solid var(--s-border); border-radius: var(--s-radius); box-shadow: var(--s-shadow-md); margin-top: 2px; padding: 0; scrollbar-width: none; -ms-overflow-style: none; } .s-multiselect-dropdown::-webkit-scrollbar, .s-custom-select-dropdown::-webkit-scrollbar { display: none; } .s-multiselect-backdrop, .s-custom-select-backdrop { position: fixed; inset: 0; z-index: 1049; } .s-custom-select-trigger { display: flex; align-items: center; justify-content: space-between; gap: 6px; cursor: pointer; padding: 8px 12px; border: 1px solid var(--s-border); font-family: var(--s-font); font-size: 0.875rem; background: var(--s-surface); color: var(--s-text); border-radius: var(--s-radius); transition: border-color 0.15s, box-shadow 0.15s; width: 100%; -webkit-user-select: none; user-select: none; min-height: 38px; } .s-custom-select-trigger > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .s-custom-select-trigger:hover { border-color: #bbb; } .s-custom-select-trigger.open { border-color: var(--s-primary); box-shadow: 0 0 0 2px rgba(44,65,144,0.15); } .s-custom-select-trigger svg { width: 14px; height: 14px; color: var(--s-text-secondary); flex-shrink: 0; transition: transform 0.15s; } .s-custom-select-trigger.open svg { transform: rotate(180deg); } .s-custom-select-option { display: flex; align-items: center; gap: 8px; padding: 7px 12px; cursor: pointer; font-size: 0.84rem; color: var(--s-text); transition: background 0.1s; } .s-custom-select-option:hover { background: var(--s-hover); } .s-custom-select-option.selected { background: var(--s-selected); color: var(--s-primary); font-weight: 500; } .s-custom-select-option .check-icon { width: 14px; height: 14px; color: var(--s-primary); } /* ---- Custom Themed Date Picker ---- */ .s-custom-date { position: relative; } .s-custom-date-trigger { display: flex; align-items: center; gap: 8px; cursor: pointer; padding: 8px 12px; border: 1px solid var(--s-border); font-family: var(--s-font); font-size: 0.875rem; background: var(--s-surface); color: var(--s-text); border-radius: var(--s-radius); transition: border-color 0.15s, box-shadow 0.15s; width: 100%; -webkit-user-select: none; user-select: none; } .s-custom-date-trigger:hover { border-color: #bbb; } .s-custom-date-trigger.open { border-color: var(--s-primary); box-shadow: 0 0 0 2px rgba(44,65,144,0.15); } .s-custom-date-trigger svg { width: 16px; height: 16px; color: var(--s-text-secondary); flex-shrink: 0; } .s-custom-date-trigger .date-text { flex: 1; } .s-custom-date-trigger .date-placeholder { color: var(--s-text-disabled); } .s-custom-date-popup { position: absolute; top: 100%; left: 0; z-index: 1050; background: #fff; border: 1px solid var(--s-border); border-radius: var(--s-radius); box-shadow: var(--s-shadow-md); margin-top: 2px; padding: 12px; min-width: 280px; } .s-cal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; } .s-cal-header span { font-size: 0.875rem; font-weight: 600; color: var(--s-text); } .s-cal-nav { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: none; background: none; cursor: pointer; border-radius: var(--s-radius-sm); color: var(--s-text-secondary); font-size: 16px; } .s-cal-nav:hover { background: var(--s-hover); color: var(--s-text); } /* Month + year as dropdowns between the arrows. Native : the native control follows the OS locale and renders 24-hour on many machines, and no CSS reaches it. */ /* Three rules that have to be read together, because fixing one alone breaks another. min-width:0 -- this is routinely a grid or flex item, and such an item defaults to min-width:auto: it refuses to shrink below its content and overflows its track instead. The row only exceeds its track once the clear button appears, so that overflow shows on a time that has been filled in and not on an empty one. flex:0 0 auto on the selects -- min-width:0 alone just moves the damage. The row then shrinks the dropdowns below the width their own text needs and the browser clips it, so PM renders as PN and a minute loses a digit. A clipped time is worse than an overflowing box: it is still readable, just wrong. The selects therefore never shrink. flex-wrap -- with the selects fixed, a track too narrow for the row has to give somewhere. Wrapping drops the clear button to a second line, which stays inside the box. Nothing here relies on it at the sizes we ship; it is the floor under an unusually wide font. The width the row needs is font-dependent -- the stack falls back to Segoe UI off Inter, which is wider -- so leave real headroom rather than tuning to the pixel. */ .s-time-picker { display: flex; align-items: center; gap: 4px; min-width: 0; flex-wrap: wrap; } .s-time-picker select.s-input { width: auto; min-width: 62px; flex: 0 0 auto; padding-left: 8px; padding-right: 22px; font-variant-numeric: tabular-nums; } .s-time-picker__meridiem { margin-left: 4px; } .s-time-picker__sep { color: var(--s-text-secondary); font-weight: 600; } /* Narrower than the 32px .s-btn--icon default: inline in the row, that width is space the dropdowns beside it need more than a times glyph does. */ .s-time-picker__clear { color: var(--s-text-secondary); min-width: 24px; padding: 4px; } .s-datetime-picker { display: flex; align-items: flex-end; gap: 8px; flex-wrap: wrap; } .s-datetime-picker .s-custom-date { min-width: 150px; } .s-datetime-picker .s-field { margin-bottom: 0; } @media (max-width: 640px) { .s-time-picker select.s-input { min-width: 58px; padding-right: 18px; } .s-datetime-picker { width: 100%; } .s-datetime-picker > * { flex: 1 1 auto; } } /* ---- Shared Panel / Form Layout ---- */ .lead-form { display: flex; flex-direction: column; gap: 12px; } .lead-panel { margin-bottom: 6px; background: #fff; border: 1px solid var(--s-border); border-radius: 8px; overflow: hidden; } .lead-panel-head { background: #f8f9fb; padding: 8px 16px; border-bottom: 1px solid var(--s-border); font-size: 0.8rem; font-weight: 600; color: var(--s-primary); text-transform: uppercase; letter-spacing: 0.4px; } .lead-panel-body { padding: 12px 16px; } .lead-panel-body .s-grid { gap: 8px 12px; } .lead-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .lead-actions { display: flex; justify-content: flex-end; gap: 10px; padding: 10px 16px; background: #f8f9fb; border: 1px solid var(--s-border); border-radius: 8px; } .detail-row { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; border-bottom: 1px solid #f0f1f3; font-size: 0.85rem; } .detail-label { color: var(--s-text-secondary); font-weight: 500; } .detail-value { color: var(--s-text); font-weight: 600; text-align: right; } @media (max-width: 900px) { .lead-two-col { grid-template-columns: 1fr; } } /* ---- Form Controls ---- */ .s-field { display: flex; flex-direction: column; gap: 6px; } .s-label { font-size: 0.8125rem; font-weight: 500; color: var(--s-text-secondary); } .s-input, .s-select, .s-textarea { padding: 8px 12px; border: 1px solid var(--s-border); font-family: var(--s-font); font-size: 0.875rem; background: var(--s-surface); color: var(--s-text); transition: border-color 0.15s, box-shadow 0.15s; width: 100%; border-radius: var(--s-radius); } input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } input[type="number"] { -moz-appearance: textfield; appearance: textfield; } .s-input:focus, .s-select:focus, .s-textarea:focus { outline: none; border-color: var(--s-primary); box-shadow: 0 0 0 2px rgba(44,65,144,0.15); } .s-input:disabled, .s-select:disabled, .s-textarea:disabled { background: #fff; cursor: not-allowed; color: var(--s-text-disabled); } .s-input:read-only, .s-textarea:read-only { background: #fff; cursor: default; } .s-btn:focus-visible, .s-tab:focus-visible, .s-pagination button:focus-visible, .s-nav-link:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--s-surface), 0 0 0 4px rgba(44,65,144,0.3); transition: box-shadow 0.15s; } @keyframes s-shake { 0%, 100% { transform: translateX(0); } 20%, 60% { transform: translateX(-4px); } 40%, 80% { transform: translateX(4px); } } .s-input--error { border-color: var(--s-error); animation: s-shake 0.3s ease; } .s-input--changed { background-color: #fef3c7; border-color: #f59e0b; font-weight: 800; color: #78350f; letter-spacing: 0.01em; } .s-helper { font-size: 0.75rem; color: var(--s-text-secondary); } .s-error-text { font-size: 0.75rem; color: var(--s-error); } .s-textarea { min-height: 80px; resize: vertical; } .s-checkbox-row { display: flex; align-items: center; gap: 8px; } .s-section-title { font-size: 0.9375rem; font-weight: 600; color: var(--s-text); margin: 0; padding-bottom: 0.25rem; } .s-switch { position: relative; width: 40px; height: 22px; } /* ---- Cards / Paper ---- */ .s-card, .s-paper { background: var(--s-surface); border: 1px solid var(--s-border); padding: var(--s-md); box-shadow: var(--s-shadow-sm); border-radius: var(--s-radius); transition: box-shadow 0.2s ease, transform 0.2s ease; } .s-card--elevated { box-shadow: var(--s-shadow); } .s-card--elevated:hover { box-shadow: var(--s-shadow-md); transform: translate3d(0, -1px, 0); } .s-card--form { padding: var(--s-lg); } .s-list-page > .s-card { padding: 0; border-radius: var(--s-radius); } /* ---- Editable Table (Excel-like) ---- */ .s-table-edit { width: 100%; border-collapse: collapse; font-size: 0.82rem; table-layout: auto; } .s-table-edit th { padding: 10px 10px; background: #f0f0f0; border: 1px solid #d0d0d0; font-weight: 600; font-size: 0.75rem; color: var(--s-text-secondary); text-align: center; white-space: nowrap; -webkit-user-select: none; user-select: none; } .s-table-edit td { padding: 4px 6px; border: 1px solid #d0d0d0; vertical-align: middle; position: relative; text-align: center; min-height: 40px; } .s-table-edit td .s-input, .s-table-edit td .s-textarea, .s-table-edit td input, .s-table-edit td textarea { border: none; border-radius: 0; background: transparent; padding: 8px 10px; width: 100%; font-size: 0.82rem; outline: none; box-shadow: none; text-align: center; } .s-table-edit td .s-select, .s-table-edit td select { border: none; border-radius: 0; background: #fff; padding: 8px 10px; width: 100%; font-size: 0.82rem; outline: none; box-shadow: none; text-align: center; -webkit-appearance: menulist; appearance: menulist; } .s-table-edit td select option { background: #fff; color: #333; } .s-table-edit td input:focus, .s-table-edit td select:focus, .s-table-edit td .s-input:focus { background: #e8f0fe; outline: 2px solid var(--s-primary); outline-offset: -2px; } .s-table-edit td .s-field { gap: 0; } .s-table-edit td .s-label { display: none; } .s-table-edit td .s-custom-select-trigger { min-height: unset; padding: 4px 8px; font-size: 0.82rem; border: none; border-radius: 0; box-shadow: none; } .s-table-edit td .s-custom-select-trigger:hover { border: none; } .s-table-edit td .s-custom-select-trigger.open { border: none; box-shadow: none; outline: none; } .s-table-edit td span { padding: 8px 10px; display: block; font-size: 0.82rem; } .s-table-edit td .s-autocomplete { position: relative; } .s-table-edit td .s-autocomplete .s-input { border: none; border-radius: 0; } .s-table-edit td input[type="checkbox"] { width: 16px; height: 16px; cursor: pointer; accent-color: var(--s-primary); } .s-table-edit td .s-btn--icon { padding: 4px; } .s-table-edit tbody tr:hover { background: #f8f9fa; } .s-table-edit tbody tr:nth-child(even) { background: #fafbfc; } .s-table-edit tbody tr:nth-child(even):hover { background: #f0f1f2; } .s-table-edit tfoot td { background: #f0f0f0; font-weight: 600; padding: 6px 8px; text-align: center; } .s-table-edit--hs th { background: #E3F2FD; color: #1565C0; } .s-table-edit--hs tfoot td { background: #E3F2FD; } .s-table-edit--ls th { background: #FFF3E0; color: #E65100; } .s-table-edit--ls tfoot td { background: #FFF3E0; } /* ---- Tables ---- */ .s-table-wrap { overflow-x: auto; } /* ---- Wide grids: horizontal scrolling only ---- The BOM grid runs to thirteen columns, wider than any laptop, so it scrolls sideways inside its own box — the page body must never scroll horizontally. `scroll` rather than `auto` keeps the bar drawn instead of fading out when idle, and it is deliberately fatter than the 6px global one because here it is signposting that more columns exist, not just scrolling. Vertically the box is not capped at all: it grows to its full height and the *page* scrolls, so every row is reachable by scrolling the window like any other page. It used to carry a `calc(100dvh - 180px)` cap, which put the horizontal bar at the bottom of the visible box but cost a second, nested scrollbar for the rows. overflow-y is `hidden` rather than `visible` because a box that scrolls on one axis cannot be visible on the other — with the height left to the content there is nothing to clip. */ .s-table-wrap--wide { overflow-x: scroll; overflow-y: hidden; } /* Chrome/Edge/Safari. Setting `scrollbar-color` or `scrollbar-width` on this element would make Chrome ignore every rule below and fall back to a thin overlay bar that reserves no space and is invisible until you already know to scroll — which is the whole problem. So the standard properties are kept off this selector and applied to Firefox on its own, further down. */ .s-table-wrap--wide::-webkit-scrollbar { height: 9px; width: 9px; } .s-table-wrap--wide::-webkit-scrollbar-track { background: #f1f3f7; border-radius: 999px; } .s-table-wrap--wide::-webkit-scrollbar-thumb { background: #b3bac7; border-radius: 999px; } .s-table-wrap--wide::-webkit-scrollbar-thumb:hover { background: #8b94a5; } .s-table-wrap--wide::-webkit-scrollbar-corner { background: transparent; } /* Firefox has no ::-webkit-scrollbar; the standard properties are all it understands, and they are safe to set here because this block never reaches Chrome. */ @supports (-moz-appearance: none) { .s-table-wrap--wide { scrollbar-width: thin; scrollbar-color: #b3bac7 #f1f3f7; } } /* The header row used to be `position: sticky` against this box. With the height cap gone the box no longer scrolls vertically, so sticky here would resolve against a scrollport that never moves and do nothing — and it cannot be made to follow the window instead, because an ancestor that scrolls on any axis becomes the scrollport. The rules are dropped rather than left in as a no-op. Opaque header backgrounds stay on .s-table th / .s-table-edit th below. */ .s-table { width: 100%; border-collapse: collapse; font-size: 0.84rem; table-layout: auto; border: 1px solid var(--s-border); } .s-table th { text-align: center; padding: 9px 12px; background: #fafafa; border: 1px solid var(--s-border); font-weight: 700; color: #000000; font-size: 0.8rem; white-space: nowrap; cursor: default; -webkit-user-select: none; user-select: none; } .s-table td { padding: 8px 12px; border: 1px solid var(--s-border); text-align: center; vertical-align: middle; color: var(--s-text); font-size: 0.78rem; font-weight: 400; } /* Actions column (last) centered */ .s-table th:last-child, .s-table td:last-child { text-align: center; } .s-table tbody tr { transition: background 0.15s ease; cursor: pointer; } .s-table tbody tr:hover { background: var(--s-hover); } .s-table tbody tr.selected { background: var(--s-selected); } .s-table--empty { padding: 40px; text-align: center; color: var(--s-text-secondary); } .s-table .s-actions { display: flex; flex-direction: row; align-items: center; gap: var(--s-xs); justify-content: center; } /* ---- Row actions ---- Icon-only View / Edit / Delete on a single line. See RowActions.razor for why icons. The nowrap rule below is the blunt half of the fix and it is deliberate: action buttons are scattered through ~40 list pages as bare children of a , so a cell with three of them wrapped and one row of data rendered three rows tall. Every one of those cells is now a single line without touching a single page. Pages that adopt RowActions get the icons as well. */ .s-row-actions { display: flex; flex-direction: row; align-items: center; gap: 4px; justify-content: center; white-space: nowrap; } .s-table td:last-child { white-space: nowrap; } .s-table td:last-child > .s-btn + .s-btn { margin-left: 4px; } .s-icon-btn { display: inline-flex; align-items: center; justify-content: center; /* 30px, not the 44px touch minimum: a data grid is a pointer surface and three 44px targets in a cell is taller than the row. The phone layouts stack these pages into cards instead. */ width: 30px; height: 30px; padding: 0; flex-shrink: 0; border: 1px solid var(--s-border); border-radius: 6px; background: var(--s-surface, #fff); color: var(--s-text-secondary); cursor: pointer; text-decoration: none; transition: background 0.12s, color 0.12s, border-color 0.12s; } .s-icon-btn:hover { background: var(--s-hover); color: var(--s-primary); border-color: var(--s-primary); } .s-icon-btn:disabled { opacity: 0.45; cursor: not-allowed; } .s-icon-btn:disabled:hover { background: var(--s-surface, #fff); color: var(--s-text-secondary); border-color: var(--s-border); } /* Colour only on the one action that cannot be undone. */ .s-icon-btn--danger:hover { background: var(--s-error-light); color: var(--s-error); border-color: var(--s-error); } /* ---- Pagination ---- */ .s-pagination { display: flex; align-items: center; gap: 4px; justify-content: center; padding: var(--s-sm) 0; } .s-pagination button { min-width: 32px; height: 32px; border: 1px solid var(--s-border); background: var(--s-surface); cursor: pointer; font-size: 0.8125rem; display: flex; align-items: center; justify-content: center; border-radius: var(--s-radius); transition: background 0.15s ease, color 0.15s ease; } .s-pagination button:hover { background: var(--s-hover); } .s-pagination button.active { background: var(--s-primary); color: #fff; border-color: var(--s-primary); } .s-pagination button:disabled { opacity: 0.4; cursor: not-allowed; } /* ---- Badges / Chips ---- */ .s-badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px; font-size: 0.75rem; font-weight: 600; border-radius: var(--s-radius-sm); text-transform: uppercase; letter-spacing: 0.5px; } .s-badge--success { background: var(--s-success-light); color: var(--s-success); } .s-badge--warning { background: var(--s-warning-light); color: var(--s-warning); } .s-badge--error { background: var(--s-error-light); color: var(--s-error); } .s-badge--info { background: var(--s-info-light); color: var(--s-info); } .s-badge--default { background: #f5f5f5; color: var(--s-text-secondary); } .s-badge--primary { background: var(--s-selected); color: var(--s-primary); } /* ---- Tabs ---- */ .s-tabs { display: flex; flex-direction: column; } .s-tabs-header { display: flex; border-bottom: 2px solid var(--s-border); gap: 0; } .s-tab-btn { padding: 10px 20px; cursor: pointer; font-size: 0.875rem; font-weight: 500; color: var(--s-text-secondary); border: none; background: none; border-bottom: 2px solid transparent; margin-bottom: -2px; transition: background 0.15s, color 0.15s, border-color 0.15s; font-family: var(--s-font); white-space: nowrap; } .s-tab-btn:hover { color: var(--s-primary); background: #f5f5f5; } .s-tab-btn--active { color: var(--s-primary); border-bottom-color: var(--s-primary); font-weight: 600; } .s-tabs-content { padding: var(--s-md) 0; } /* ---- Dialogs / Modals ---- */ .s-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; z-index: 1000; animation: fadeIn 0.2s ease-out; overflow: hidden; } .s-dialog { background: var(--s-surface); min-width: 400px; max-width: 90vw; max-height: 90vh; max-height: 90dvh; display: flex; flex-direction: column; box-shadow: var(--s-shadow-lg); border-radius: var(--s-radius-lg); animation: zoomIn 0.2s cubic-bezier(0.16, 1, 0.3, 1); /* Note: do NOT add `will-change: transform` or `transform` here — it would turn .s-dialog into the containing block for position:fixed children (e.g. SSelect dropdowns), pinning their popovers to the dialog corner. */ } .s-dialog-title { padding: 16px 20px; font-size: 1.125rem; font-weight: 600; border-bottom: 1px solid var(--s-border); } /* Size modifiers. .s-dialog is shrink-to-fit with only a 90vw ceiling, so a dialog holding a 12-column grid stretches to fill the screen: the New Employee form measured 1145px on a 1366px viewport, which put ~530px behind every half-width control and left "Gender" and a 10-digit mobile marooned in whitespace. --lg was already being asked for in the markup and had never been defined anywhere, so it was inert. 820px is a two-column form: ~370px per field, wide enough for the helper lines under Role and Work Location without turning a short input into a runway. */ .s-dialog--sm { width: 460px; max-width: 94vw; } .s-dialog--md { width: 640px; max-width: 94vw; } .s-dialog--lg { width: 820px; max-width: 94vw; } .s-dialog--xl { width: 1100px; max-width: 94vw; } /* Grouped form sections inside a dialog — "Role", "Contact", "Login", "Shift & leave". These were bold text floating in whitespace, which is what made a busy form read as sparse: with nothing dividing them the eye cannot tell a heading from a field label. The rule does the grouping so the gaps do not have to, which buys back vertical space too. */ .s-form-section { margin-top: 2px; padding-top: 10px; border-top: 1px solid var(--s-border); } .s-form-section:first-child { margin-top: 0; padding-top: 0; border-top: none; } .s-form-section-title { font-size: 0.875rem; font-weight: 600; color: var(--s-text); } .s-form-section-hint { font-size: 0.75rem; color: var(--s-text-secondary); margin-top: 2px; } /* Tighter rows inside a dialog than on a full page. The column gap stays at 16px — that one separates two controls sitting side by side and still has to. */ .s-dialog-content .s-grid, .s-dialog-body .s-grid { gap: 12px 16px; } /* Confirmation dialogs (SConfirmDialog, ~101 of the hosted dialogs in the app). The component renders inside the host's .s-dialog-content, so its actions bar has to be pulled back out to the dialog edges for its top rule to actually divide the question from the answer. */ /* ---- Card header: tabs + toolbar as one band ---- A tabbed list page used to stack three separate strips down the screen — a tab row, a toolbar row, then the table card — so the controls read as floating debris above the content rather than as part of it. This makes them the card's own header: tabs on the left, search and column controls on the right, one rule under both, and the table directly beneath. The tab strip keeps its own border off; .s-card-head carries it, and .s-tab-btn's existing -2px margin lets the active underline sit on top of it. */ .s-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; flex-shrink: 0; /* Vertical padding, not zero: the tabs are outlined chips now, and a chip touching the table's grey header below it is what made them look like they were sliding under the table. */ padding: 8px 12px; background: var(--s-surface); border-bottom: 1px solid var(--s-border); border-top-left-radius: var(--s-radius); border-top-right-radius: var(--s-radius); } .s-card-head > .s-tabs-header { border-bottom: none; gap: 6px; } /* The open tab is outlined, not merely underlined. On an approval queue the tab you are on decides what Approve and Reject will act on, so which one is open has to be unmistakable rather than a two-pixel colour change. It is a self-contained chip with a border on all four sides, NOT a folder tab. The folder trick — paint the bottom edge in the surface colour and pull it down over the header rule — needs the panel directly beneath to be that colour, and here it is the table's grey sticky header. The tab read as though it were sliding underneath the table. A closed shape has nothing to blend into and cannot go wrong whatever sits below it. Scoped to .s-card-head on purpose: nine other screens use .s-tab-btn and were not part of this change. Any page adopting the card-head pattern gets this for free. */ .s-card-head .s-tab-btn { border: 1px solid transparent; border-radius: var(--s-radius-sm); margin-bottom: 0; padding: 7px 16px; } .s-card-head .s-tab-btn:hover { background: var(--s-hover); } .s-card-head .s-tab-btn--active { border-color: var(--s-primary); background: var(--s-selected); color: var(--s-primary); font-weight: 600; } .s-card-head__tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .s-card-head__tools .s-toolbar { margin-bottom: 0; } /* The table is no longer the top of the card, so it must not round its top corners or the header above it would appear to float on a notched edge. */ .s-list-page > .s-card > .s-card-head ~ .s-table-wrap { border-top-left-radius: 0; border-top-right-radius: 0; } .s-list-page > .s-card > .s-card-head ~ .s-table-wrap > .s-table thead tr:first-child th:first-child, .s-list-page > .s-card > .s-card-head ~ .s-table-wrap > .s-table thead tr:first-child th:last-child { border-radius: 0; } @media (max-width: 720px) { /* The search has a 250px floor, so on a phone the tools drop to their own full-width line under the tabs rather than squeezing the tab labels to nothing. */ .s-card-head { padding: 0 10px; } .s-card-head__tools { width: 100%; padding-bottom: 10px; } .s-card-head__tools .s-search { flex: 1 1 0; min-width: 0; } } /* A table whose declared column widths are binding. Auto layout treats a th width as a suggestion and lets cell content override it, which is how the approval queues ended up 35–94px wider than their own scroll container and clipped the Approve/Reject column off the right edge — the widest offender being the Decision cell, whose reviewer name and timestamp simply refused to shrink. With fixed layout the widths hold and the text wraps instead. Columns left without a width share whatever is left, so exactly one free column (the remark/reason) absorbs the slack. overflow-wrap is the necessary companion: a single long unbroken token would otherwise still spill out of its cell. */ .s-table--fixed { table-layout: fixed; width: 100%; } .s-table--fixed td, .s-table--fixed th { overflow-wrap: anywhere; } /* The base sheet sets `white-space: nowrap` on the last cell and on every th, which suits a row of action buttons and short headers. It does not suit a Decision cell carrying a reviewer's name, a timestamp and a quoted note: that is one unbreakable line, and it was the whole reason only the Reviewed tab overflowed while Pending sat exactly on the container width. Let both wrap here. */ .s-table--fixed td:last-child, .s-table--fixed th { white-space: normal; } /* ...but a button label is not prose. Letting the cell wrap made "Approve" break as "Approv e", which is worse than the overflow it was fixing. Text wraps, controls do not. */ .s-table--fixed td:last-child .s-btn { white-space: nowrap; } /* ---- Frozen actions column (pointer screens only) ---- The last column is the actions column by convention across ~40 list pages — the base sheet already assumes it, with `td:last-child { white-space: nowrap }` and the button-spacing rule beside it. On a wide table the reader scrolls right to read the data and loses View / Edit / Delete off the left, or scrolls back to reach them. Pinning that column keeps the actions under the cursor at every scroll position. Desktop only, deliberately: the phone layout already pins the FIRST column (see the mobile block near the end of this file) so the row stays identifiable while scrolling, and pinning both edges of a 360px screen would leave almost nothing between them. The pattern mirrors that mobile rule exactly, because the same three things have to be true: an opaque background, the row's hover/selected state repainted on the pinned cell (its own background would otherwise cut the row's short), and an edge line saying the table continues. `.s-list-page` carries it automatically because that convention holds there. A report page has no such guarantee — its last column is usually data (Vehicles, Locations, a note) and pinning that would be nonsense — so those opt in per table with `.s-table--sticky-actions`. */ @media (min-width: 1024px) { .s-list-page .s-table tbody td:last-child, .s-table--sticky-actions tbody td:last-child { position: sticky; right: 0; z-index: 2; background: var(--s-surface); box-shadow: -1px 0 0 var(--s-border); } /* Above the sticky thead's z-index: 50, which is declared !important. */ .s-list-page .s-table thead th:last-child, .s-table--sticky-actions thead th:last-child { position: sticky !important; right: 0; z-index: 51 !important; box-shadow: inset 0 -1px 0 var(--s-border), inset 0 1px 0 var(--s-border), -1px 0 0 var(--s-border) !important; } .s-list-page .s-table tbody tr:hover td:last-child, .s-table--sticky-actions tbody tr:hover td:last-child { background: var(--s-hover); } .s-list-page .s-table tbody tr.selected td:last-child, .s-table--sticky-actions tbody tr.selected td:last-child { background: var(--s-selected); } /* The "nothing matched" row spans every column, so pinning it would park the message on the right-hand edge instead of across the table. */ .s-list-page .s-table tbody td.s-table--empty, .s-table--sticky-actions tbody td.s-table--empty { position: static; box-shadow: none; } } /* Empty state for a list/queue with nothing in it. Distinct from .s-table--empty, which is the "nothing matched your filter" row *inside* a table — an empty queue and a filtered-out one are different facts and the reader has to be able to tell which they are looking at. */ .s-empty-state { padding: 2.5rem 1.5rem; text-align: center; } .s-empty-state__icon { font-size: 1.75rem; line-height: 1; margin-bottom: 10px; opacity: 0.75; } .s-empty-state__title { font-size: 0.95rem; font-weight: 600; color: var(--s-text); margin-bottom: 4px; } .s-empty-state__hint { font-size: 0.8125rem; color: var(--s-text-secondary); max-width: 46ch; margin: 0 auto; line-height: 1.5; } .s-confirm-message { margin: 0; line-height: 1.55; color: var(--s-text); font-size: 0.9rem; } .s-confirm-actions { margin: 20px -20px -20px; } @media (max-width: 640px) { .s-confirm-actions { margin: 16px -16px -16px; } } .s-dialog-inner { display: flex; flex-direction: column; max-height: 90vh; max-height: 90dvh; } .s-dialog-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--s-border); } /* min-height:0 is load-bearing, not decoration: a flex child defaults to min-height:auto, which refuses to shrink below its content, so `flex: 1; overflow-y: auto` alone lets a tall form push the dialog past its max-height instead of scrolling inside it. Pages were each patching this with an inline style; it belongs here. */ .s-dialog-body { padding: 20px; overflow-y: auto; flex: 1; min-height: 0; } .s-dialog-content { padding: 20px; overflow-y: auto; flex: 1; min-height: 0; } .s-dialog-actions { padding: 12px 20px; display: flex; gap: 8px; justify-content: flex-end; border-top: 1px solid var(--s-border); } /* ---- Utility ---- */ .s-form { width: 100%; } .text-danger { color: var(--s-error); } /* ---- Toasts (Sonner richColors) ---- */ .s-toast-container { position: fixed; bottom: 32px; right: 32px; z-index: 2000; display: flex; flex-direction: column; gap: 14px; width: 356px; max-width: calc(100vw - 32px); /* The container is a 356px-wide fixed box pinned to the bottom-right corner at z-index 2000 — exactly where every form page puts its save button (.lead-actions, .prof-panel-actions and the dialog action rows are all bottom-right). Without this it stays in the hit-test tree even while empty of anything the user wants to click, so any click landing inside those 356px is swallowed by the container instead of reaching the button underneath. That made the commonest recovery in the app silently fail: get a validation error, fix the field, click Save again while the error toast is still on screen — and nothing happens. The button looks fine and answers no clicks, which reads as a dead form rather than a covered one. pointer-events:none lets clicks fall straight through the container; .s-toast puts them back on for the toasts themselves, so their own dismiss button still works. */ pointer-events: none; } .s-toast { position: relative; pointer-events: auto; display: flex; align-items: flex-start; gap: 10px; padding: 16px; padding-right: 36px; width: 100%; border-radius: 8px; border: 1px solid; font-family: var(--s-font); font-size: 13px; line-height: 1.5; box-shadow: 0 4px 12px rgba(0,0,0,0.12); animation: s-toast-in 0.35s cubic-bezier(0.21,1.02,0.73,1) forwards; will-change: transform, opacity; } .s-toast--exiting { animation: s-toast-out 0.2s ease-in forwards; } /* richColors per severity */ .s-toast--success { background: #fff; border-color: hsl(0 0% 89.8%); color: #0a0a0a; } .s-toast--error { background: hsl(359, 100%, 97%); border-color: hsl(359, 100%, 94%); color: hsl(360, 100%, 45%); } .s-toast--warning { background: hsl(49, 100%, 97%); border-color: hsl(49, 91%, 91%); color: hsl(31, 92%, 45%); } .s-toast--info { background: hsl(208, 100%, 97%); border-color: hsl(221, 91%, 91%); color: hsl(210, 92%, 45%); } /* Icon */ .s-toast__icon { flex-shrink: 0; width: 16px; height: 16px; display: flex; align-items: center; justify-content: center; margin-top: 1px; } .s-toast__icon svg { display: block; } /* Content */ .s-toast__content { flex: 1; min-width: 0; } .s-toast__title { font-size: 13px; font-weight: 600; } .s-toast__desc { font-size: 13px; font-weight: 400; opacity: 0.9; margin-top: 2px; } /* Action button */ .s-toast__action { flex-shrink: 0; padding: 2px 10px; height: 24px; font-size: 12px; font-weight: 500; font-family: var(--s-font); background: rgba(0,0,0,0.15); color: inherit; border: none; border-radius: 6px; cursor: pointer; transition: background 0.15s; white-space: nowrap; align-self: center; } .s-toast__action:hover { background: rgba(0,0,0,0.25); } /* Close button — always visible, top-right */ .s-toast__close { position: absolute; top: 50%; right: 8px; transform: translateY(-50%); display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; border: none; background: transparent; color: inherit; cursor: pointer; border-radius: 50%; opacity: 0.5; transition: opacity 0.15s; padding: 0; } .s-toast__close:hover { opacity: 1; } /* Loading spinner */ .s-toast__spinner { width: 16px; height: 16px; animation: spin 0.8s linear infinite; } .s-toast__spinner circle { stroke: currentColor; stroke-width: 2.5; fill: none; stroke-dasharray: 40; stroke-dashoffset: 12; stroke-linecap: round; } /* Animations */ @keyframes s-toast-in { from { opacity: 0; transform: translateY(100%) scale(0.96); } to { opacity: 1; transform: translateY(0) scale(1); } } @keyframes s-toast-out { from { opacity: 1; transform: translateY(0) scale(1); } to { opacity: 0; transform: translateY(100%) scale(0.96); } } @media (max-width: 600px) { .s-toast-container { bottom: 16px; right: 16px; left: 16px; width: auto; } } /* ---- Alerts ---- */ .s-alert { padding: 12px 16px; display: flex; align-items: flex-start; gap: 10px; font-size: 0.875rem; border-left: 4px solid; border-radius: var(--s-radius); } .s-alert--success { background: var(--s-success-light); border-left-color: var(--s-success); } .s-alert--error { background: var(--s-error-light); border-left-color: var(--s-error); } .s-alert--warning { background: var(--s-warning-light); border-left-color: var(--s-warning); } .s-alert--info { background: var(--s-info-light); border-left-color: var(--s-info); } /* ---- Progress ---- */ .s-progress { height: 6px; background: var(--s-border); overflow: hidden; border-radius: var(--s-radius); } .s-progress-bar { height: 100%; background: var(--s-primary); transition: width 0.3s; } .s-progress-bar--success { background: var(--s-success); } /* ---- Spinner ---- */ .s-spinner { width: 24px; height: 24px; border: 3px solid var(--s-border); border-top-color: var(--s-primary); border-radius: 50%; animation: spin 0.7s linear infinite; will-change: transform; } .s-spinner--lg { width: 40px; height: 40px; border-width: 4px; } .s-spinner-center { display: flex; justify-content: center; padding: var(--s-xl); } /* ---- Divider ---- */ .s-divider { border: none; border-top: 1px solid var(--s-border); margin: var(--s-md) 0; } /* ---- Tooltip ---- */ .s-tooltip { position: relative; display: inline-block; } .s-tooltip::after { content: attr(data-tooltip); position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); padding: 4px 8px; background: #333; color: #fff; font-size: 0.75rem; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 0.15s; border-radius: var(--s-radius-sm); } .s-tooltip:hover::after { opacity: 1; } /* ============================================ App Shell — Inset Sidebar Layout All collapse/expand driven by .s-collapsed on .s-app ============================================ */ .s-app { display: flex; /* dvh, not vh. On a phone browser 100vh is the *large* viewport — the height the page would have if the URL bar were retracted — so the app was laid out ~110px taller than the screen actually showed. html/body are overflow:hidden and the shell owns the only scroll container, so that bottom strip could not be scrolled to by any means: the pagination footer, the Save row at the end of a form and the last dashboard card were simply gone. vh stays first as the fallback for browsers without dvh; on a desktop the two are identical, which is why this never showed up there. */ height: 100vh; height: 100dvh; overflow: hidden; background: var(--s-sidebar-bg); } /* ---- Sidebar ---- */ .s-sidebar { width: var(--s-sidebar-width); background: var(--s-sidebar-bg); color: var(--s-sidebar-text); display: flex; flex-direction: column; position: fixed; top: 0; left: 0; bottom: 0; z-index: 100; overflow: hidden; transition: width 200ms cubic-bezier(0.4, 0, 0.2, 1); will-change: width; } .s-collapsed .s-sidebar { width: var(--s-sidebar-collapsed); } /* Sidebar Header (logo area) */ .s-sidebar-header { display: flex; align-items: center; justify-content: center; padding: 0.5rem 0.75rem; min-height: var(--s-header-height); flex-shrink: 0; } .s-sidebar-logo-img { max-height: calc(var(--s-header-height) - 16px); max-width: 100%; width: auto; height: auto; object-fit: contain; display: block; transition: max-width 200ms cubic-bezier(0.4, 0, 0.2, 1); } .s-collapsed .s-sidebar-header { padding: 0.5rem 0.25rem; } .s-collapsed .s-sidebar-logo-img { max-height: calc(var(--s-header-height) - 18px); max-width: calc(var(--s-sidebar-collapsed) - 16px); object-fit: contain; object-position: center; } .s-collapsed .s-sidebar-content { padding: 0.25rem 0; } /* Sidebar Content (scrollable nav area — hidden scrollbar like Ticket-Final) */ .s-sidebar-content { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 0.25rem 0.5rem; /* Three properties for one effect — see the note above .s-custom-select. Dropping scrollbar-width because a linter calls it Safari-only would un-hide it on Firefox. */ -ms-overflow-style: none; /* legacy Edge */ scrollbar-width: none; /* Firefox, Safari 18.2+ */ } .s-sidebar-content::-webkit-scrollbar { display: none; /* Chrome, older Safari, Samsung Internet */ } /* Nav Sections */ .s-nav-section { padding: 0.25rem 0; } .s-nav-section-title { padding: 0.375rem 0.5rem; font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.05em; color: #1e3a5f; font-weight: 600; white-space: nowrap; overflow: hidden; height: auto; transition: opacity 200ms, height 200ms, padding 200ms; cursor: pointer; display: flex; align-items: center; justify-content: space-between; -webkit-user-select: none; user-select: none; } .s-nav-section-title:hover { background: rgba(0,0,0,0.06); border-radius: var(--s-radius-sm); color: #0d2340; } .s-nav-section-title .s-chevron { width: 12px; height: 12px; transition: transform 200ms; flex-shrink: 0; } .s-nav-section.s-section-collapsed .s-chevron { transform: rotate(-90deg); } .s-nav-section.s-section-collapsed .s-nav-link { display: none; } .s-collapsed .s-nav-section-title { display: none; } /* Nav Links */ .s-nav-link { display: flex; align-items: center; gap: 0.5rem; padding: 0 0.5rem; height: 2rem; color: var(--s-sidebar-text); font-size: 0.875rem; transition: background 0.15s, color 0.15s, padding 200ms; cursor: pointer; text-decoration: none; border-radius: var(--s-radius-sm); white-space: nowrap; overflow: hidden; } .s-nav-link:hover { background: var(--s-sidebar-accent); color: var(--s-sidebar-accent-fg); text-decoration: none; } .s-nav-link.active { background: var(--s-sidebar-accent); color: var(--s-sidebar-accent-fg); font-weight: 500; } .s-nav-link svg { width: 1rem; height: 1rem; flex-shrink: 0; } /* Shown in place of the sidebar when a role can open nothing, so an empty sidebar always explains itself instead of looking broken. See NavMenu. */ .s-nav-notice { padding: 0.85rem 1rem; font-size: 0.78rem; color: var(--s-text-secondary); line-height: 1.55; } .s-nav-link span { overflow: hidden; opacity: 1; transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1); backface-visibility: hidden; } /* ---- The collapsed rail was completely empty ---- Two rules that are each correct on their own cancelled the sidebar out entirely: .s-nav-section.s-section-collapsed .s-nav-link { display: none } (accordion) .s-collapsed .s-nav-section-title { display: none } (icon rail) Every section renders collapsed to begin with, so all 61 links are hidden and the expanded sidebar shows just the 10 section titles you click to open. Collapse the rail and those titles are hidden too — leaving 0 of 61 links and 0 of 10 titles visible, i.e. a blank 48px strip with nothing in it and no way to navigate. In the rail there is no section header to click, so a section's accordion state is meaningless there and must not suppress its links: the icons *are* the navigation. */ .s-collapsed .s-nav-section.s-section-collapsed .s-nav-link { display: flex; } .s-collapsed .s-nav-link { justify-content: center; padding: 0; gap: 0; width: 100%; position: relative; } .s-collapsed .s-nav-link span { display: none; } .s-collapsed .s-nav-link:hover::after { content: attr(title); position: absolute; left: calc(100% + 0.5rem); top: 50%; transform: translateY(-50%); background: var(--s-text); color: var(--s-surface); padding: 0.25rem 0.5rem; border-radius: var(--s-radius-sm); font-size: 0.75rem; white-space: nowrap; z-index: 300; pointer-events: none; opacity: 1; } /* Sidebar Footer */ .s-sidebar-footer { padding: 0.5rem; border-top: 1px solid var(--s-sidebar-border); flex-shrink: 0; } /* ---- Sidebar Inset (main content wrapper) ---- */ .s-sidebar-inset { margin-left: var(--s-sidebar-width); margin-top: 0.5rem; margin-right: 0.5rem; margin-bottom: 0.5rem; flex: 1; display: flex; flex-direction: column; /* Must track .s-app's unit exactly — see the note there. Left at vh this stayed the taller of the two and re-created the unreachable strip on its own. */ height: calc(100vh - 1rem); height: calc(100dvh - 1rem); transition: margin-left 200ms cubic-bezier(0.4, 0, 0.2, 1); will-change: margin-left; background: var(--s-surface); border-radius: var(--s-radius-xl); border: 1px solid var(--s-border); box-shadow: 0 1px 2px rgba(0,0,0,0.05); overflow: hidden; } .s-collapsed .s-sidebar-inset { margin-left: calc(var(--s-sidebar-collapsed) + 0.5rem); } /* ---- Header ---- */ .s-header { height: var(--s-header-height); background: #ffffff; display: flex; align-items: center; justify-content: space-between; padding: 0 var(--s-lg); position: sticky; top: 0; /* Must be ABOVE sticky table thead (z-index 50) so the notification panel descending from the header stacks above tables on every page. */ z-index: 200; transition: box-shadow 200ms; border-bottom: 1px solid transparent; } .s-header.scrolled { box-shadow: 0 1px 3px rgba(0,0,0,0.06); border-bottom-color: var(--s-border); } /* Toggle Button */ .s-toggle-btn { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border: none; background: transparent; color: var(--s-text); cursor: pointer; border-radius: var(--s-radius-sm); transition: background 0.15s; } .s-toggle-btn:hover { background: var(--s-hover); } .s-toggle-btn svg { width: 1.125rem; height: 1.125rem; } /* ---- Content Area ---- */ .s-content { /* The app's only page-level scroll container — html/body are overflow:hidden and every route renders inside this one
. That makes it the right and the *only* place to put the end-of-page gutter: set it here and every current and future page inherits it with no per-page markup. Do not push this onto individual pages. The bottom is a token rather than var(--s-md) so the phone breakpoint can raise it and the device's safe-area inset can ride along. On a desktop the inset is 0 and this computes to exactly the 16px it always was. */ padding: var(--s-md); padding-bottom: var(--s-page-bottom-gutter); /* Landscape notch: viewport-fit=cover lets content sit under a display cutout on the long edge. Both are 0 in portrait and on every desktop. */ padding-left: calc(var(--s-md) + env(safe-area-inset-left, 0px)); padding-right: calc(var(--s-md) + env(safe-area-inset-right, 0px)); flex: 1; display: flex; flex-direction: column; overflow-y: auto; overflow-x: hidden; } /* ---- Full-height list page layout ---- */ .s-list-page { display: flex; flex-direction: column; flex: 1; min-height: 0; } .s-list-page > .s-card { position: relative; display: flex; flex-direction: column; flex: 1; min-height: 0; } /* .s-list-page IS FOR ONE CARD. It exists so a single .s-card can grow to fill the viewport and scroll its own table, and it does that by making every direct .s-card child `flex: 1; min-height: 0`. Give it four cards and they become four equal-height flex siblings: each crushed to a quarter of the viewport, clipping whatever does not fit, with no scrollbar to reach it. On a phone the overflow then draws straight over the card below. That is what the Work Order view and Reserve Stock did until 2026-08-26 — 434px of content in a 114px card at 360px wide. A page that is a COLUMN OF CARDS — a detail view, a form — uses .lead-form / .lead-panel instead (see above), which is what every other view and form page in this app already does. */ /* ---- A table that stops being a table on a phone ---- Add .s-table--stack to an .s-table and give every a data-label. Below 640px each row becomes a labelled card. Same shape as .bom-receipt__table, which proved it at a site gate: a sideways scroll on a narrow screen means half the row is simply never read. */ @media (max-width: 640px) { .s-table--stack thead { display: none; } .s-table--stack, .s-table--stack tbody, .s-table--stack tr, .s-table--stack td { display: block; width: 100%; } .s-table--stack tfoot, .s-table--stack tfoot tr, .s-table--stack tfoot td { display: block; width: 100%; } .s-table--stack tr { border: 1px solid var(--s-border); border-radius: 8px; margin-bottom: 10px; padding: 6px 10px; background: var(--s-surface, #fff); } .s-table--stack td { display: flex; align-items: center; justify-content: space-between; gap: 10px; text-align: right; border: none; padding: 7px 2px; min-height: 38px; } .s-table--stack td::before { content: attr(data-label); font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; color: var(--s-text-secondary); flex-shrink: 0; text-align: left; } /* A cell with nothing to say is noise once it is a labelled line of its own. */ .s-table--stack td[data-label=""]::before { content: none; } /* The empty-state row is a message, not a field: no label, and centred across the card. Without this it draws an empty ::before box and shoves the text to the right. */ .s-table--stack td.s-table--empty { display: block; text-align: center; min-height: 0; } .s-table--stack td.s-table--empty::before { content: none; } .s-table--stack td .s-input, .s-table--stack td .s-select, .s-table--stack td .s-autocomplete { max-width: 62%; } } .s-list-page > .s-card > .s-table-wrap { overflow-x: auto; flex: 1; border-top-left-radius: var(--s-radius); border-top-right-radius: var(--s-radius); } /* Match the rounded card on the sticky thead so its grey background doesn't square off the card's rounded top corners. */ .s-list-page > .s-card > .s-table-wrap > .s-table thead tr:first-child th:first-child { border-top-left-radius: var(--s-radius); } .s-list-page > .s-card > .s-table-wrap > .s-table thead tr:first-child th:last-child { border-top-right-radius: var(--s-radius); } /* Solid sticky header — applies to every list-page table */ .s-table thead, .s-table thead tr { background: #dde3eb !important; } .s-table thead th { position: sticky !important; top: 0 !important; z-index: 50 !important; background: #dde3eb !important; box-shadow: inset 0 -1px 0 var(--s-border), inset 0 1px 0 var(--s-border) !important; } /* Report pages: the .s-card directly wraps the with no .s-table-wrap, so the page itself is the scroll container and the sticky thead has no close scrolling ancestor to attach to. Adding overflow + max-height here turns the card into the scroll region; the .s-table thead th sticky rule above then keeps the header pinned to the top of the card while rows scroll. */ .s-card.s-card--scroll { overflow: auto; max-height: calc(100vh - 240px); max-height: calc(100dvh - 240px); } /* Center the filter header divs */ .s-table th > div { justify-content: center; } /* The master pages carry no pagination — they load every row and the table scrolls — so .s-list-count is all that sits in the footer slot there. Both stick to the bottom of the card so the footer stays put while the rows scroll under it. */ .s-list-page > .s-card > .s-pagination, .s-list-page > .s-card > .s-list-count { position: sticky; bottom: 0; z-index: 3; border-top: 1px solid var(--s-border); margin: 0 -0px; padding: 8px 12px; background: #fff; box-shadow: 0 -2px 6px rgba(0,0,0,0.04); border-bottom-left-radius: var(--s-radius); border-bottom-right-radius: var(--s-radius); } .s-list-count { font-size: 12.5px; color: #6b7280; font-family: var(--s-font); } /* ---- Header popup backdrop ---- Invisible click-catcher behind the notification panel and the profile menu, so a click anywhere outside them dismisses them. Deliberately transparent: these are menus, not modals, and a dimmed page would read as "the app is blocked". It must out-rank the sticky table thead (z-index 30) and the sidebar (200) but stay under its own panel. */ .s-menu-backdrop { position: fixed; inset: 0; z-index: 99998; background: transparent; } /* ---- Mobile Overlay ---- */ .s-sidebar-backdrop { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 150; opacity: 0; transition: opacity 200ms; pointer-events: none; } /* ---- Mobile Responsive ---- */ @media (max-width: 768px) { .s-sidebar { transform: translateX(-100%); width: var(--s-sidebar-width); z-index: 200; box-shadow: var(--s-shadow-lg); transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1), width 200ms cubic-bezier(0.4, 0, 0.2, 1); } .s-collapsed .s-sidebar { width: var(--s-sidebar-width); transform: translateX(-100%); } .s-mobile-open .s-sidebar { transform: translateX(0); } .s-mobile-open .s-sidebar-backdrop { display: block; opacity: 1; pointer-events: auto; } .s-sidebar-inset, .s-collapsed .s-sidebar-inset { margin-left: 0; margin-top: 0; margin-right: 0; margin-bottom: 0; border-radius: 0; /* ---- THE bottom-of-every-page bug ---- This rule used to say `min-height: 100vh`, and that one declaration cut the bottom off every page in the app on every phone. On a phone `vh` is the *large* viewport — the height the page would have if the browser retracted its URL bar — so 100vh is roughly the visible height PLUS the URL bar, about 110px more than you can actually see. `.s-sidebar-inset` already sets `height: calc(100dvh - 1rem)` and `dvh` is the correct, currently-visible height. But a min-height floor always beats height, so the correct dvh height was overridden and the main content wrapper was laid out ~110px taller than the screen. Nothing could reach that strip. `.s-app` is `height: 100dvh; overflow: hidden` and this element is `overflow: hidden` too, so the extra height was clipped rather than scrolled — and `.s-content`, which is `flex: 1` inside here, inherited the overshoot. Scrolling .s-content to its very end therefore parked the last card, the pagination footer, the Save row and the end-of-page gutter inside a region below the visible screen. Every page, every module, and no amount of padding could fix it: the padding was landing in the clipped strip too, which is exactly why raising it changed nothing. No desktop browser can reproduce this — with no retractable URL bar `vh == dvh`, the floor equals the height and nothing overflows. That is why it survived the emulated 360px checks and only ever showed up on real devices. The margins above are zeroed here, so the inset should simply be the full shell height. vh first as the fallback for browsers without dvh, matching .s-app and the base rule. */ height: 100vh; height: 100dvh; } } /* ---- Page Header ---- */ .s-page-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--s-lg); } .s-page-title { font-size: 1.5rem; font-weight: 600; border: none; outline: none; } .s-page-subtitle { font-size: 0.875rem; color: var(--s-text-secondary); } /* ---- Toolbar ---- */ .s-toolbar { display: flex; gap: var(--s-sm); flex-wrap: nowrap; align-items: center; margin-bottom: var(--s-md); } .s-toolbar .s-select { width: auto; min-width: 0; padding: 6px 8px; font-size: 0.8125rem; } /* ---- Search Box ---- */ .s-search { position: relative !important; display: inline-flex !important; align-items: center; min-width: 250px; } .s-search .s-input { padding-left: 36px !important; width: 100% !important; } .s-search > svg { position: absolute !important; left: 10px !important; top: 50% !important; transform: translateY(-50%) !important; color: var(--s-text-secondary); pointer-events: none; z-index: 1; width: 16px !important; height: 16px !important; overflow: visible !important; } /* ---- Currency ---- */ .s-currency { font-variant-numeric: tabular-nums; } .s-currency::before { content: '\20B9'; } /* ---- Dropdown ---- */ .s-dropdown { position: relative; display: inline-block; } .s-dropdown-menu { position: absolute; top: 100%; right: 0; min-width: 180px; background: var(--s-surface); border: 1px solid var(--s-border); box-shadow: var(--s-shadow-md); z-index: 500; display: none; border-radius: var(--s-radius); } .s-dropdown.open .s-dropdown-menu { display: block; animation: zoomIn 0.15s cubic-bezier(0.16, 1, 0.3, 1); } .s-dropdown-item { padding: 8px 16px; cursor: pointer; font-size: 0.875rem; display: flex; align-items: center; gap: 8px; transition: background 0.15s ease; } .s-dropdown-item:hover { background: var(--s-hover); } /* ---- Animations (GPU-accelerated with translate3d/scale3d) ---- */ @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } } @keyframes slideInRight { from { transform: translate3d(100%, 0, 0); opacity: 0; } to { transform: translate3d(0, 0, 0); opacity: 1; } } @keyframes zoomIn { from { opacity: 0; transform: scale3d(0.95, 0.95, 1); } to { opacity: 1; transform: scale3d(1, 1, 1); } } @keyframes zoomOut { from { opacity: 1; transform: scale3d(1, 1, 1); } to { opacity: 0; transform: scale3d(0.95, 0.95, 1); } } @keyframes spin { to { transform: rotate(360deg); } } @keyframes s-filter-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } } /* ---- Scrollbar ---- */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: #ccc; border-radius: 3px; transition: background 0.2s; } ::-webkit-scrollbar-thumb:hover { background: #aaa; } .s-sidebar::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.12); } /* ---- Login Page ---- */ .login-page, .login-page *, .login-page *::before, .login-page *::after { box-sizing: border-box; } .login-page h1, .login-page h2, .login-page h3, .login-page p { margin: 0; } .login-page a { color: inherit; text-decoration: none; transition: none; } .login-page a:hover { text-decoration: none; } .login-page { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100svh; gap: 1.5rem; background: var(--background); color: var(--foreground); padding: 1.5rem; font-family: var(--s-font); } @media (min-width: 768px) { .login-page { padding: 2.5rem; } } .login-container { width: 100%; max-width: 24rem; } .login-form-wrapper { display: flex; flex-direction: column; gap: 1.5rem; } .login-fieldgroup { display: flex; flex-direction: column; gap: 1.5rem; } .login-header { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; text-align: center; } .login-logo-link { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; font-weight: 500; text-decoration: none; color: var(--foreground); } .login-logo-link:hover { text-decoration: none; } .login-logo { display: flex; width: 2rem; height: 2rem; align-items: center; justify-content: center; border-radius: calc(var(--radius) - 2px); color: var(--foreground); } .login-logo svg { width: 1.5rem; height: 1.5rem; } .login-logo img { height: 2.5rem; width: auto; } .login-title { font-size: 1.25rem; font-weight: 700; letter-spacing: -0.025em; color: var(--foreground); margin: 0; } .login-description { font-size: 0.875rem; color: var(--muted-foreground); margin: 0; text-align: center; } .login-description a { color: var(--foreground) !important; font-weight: 500; text-decoration: underline !important; text-underline-offset: 4px; } .login-description a:hover { text-decoration: underline !important; } .login-field { display: flex; flex-direction: column; gap: 0.375rem; } .login-label { font-size: 0.875rem; font-weight: 500; line-height: 1; color: var(--foreground); } .login-label-row { display: flex; align-items: center; justify-content: space-between; } .login-forgot { font-size: 0.8125rem; color: var(--foreground) !important; text-decoration: underline !important; text-underline-offset: 4px; } .login-forgot:hover { color: var(--foreground) !important; text-decoration: underline !important; } .login-input { display: flex; height: 2.25rem; width: 100%; border-radius: calc(var(--radius) - 2px); border: 1px solid var(--input); background: transparent; padding: 0.375rem 0.75rem; font-size: 0.875rem; font-family: var(--s-font); color: var(--foreground); box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); transition: border-color 0.15s, box-shadow 0.15s; outline: none; box-sizing: border-box; } .login-input::placeholder { color: var(--muted-foreground); } .login-input:focus { border-color: var(--ring); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ring) 15%, transparent); } .login-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; white-space: nowrap; border-radius: calc(var(--radius) - 2px); font-size: 0.875rem; font-weight: 500; font-family: var(--s-font); height: 2.25rem; padding: 0.375rem 1rem; cursor: pointer; transition: background 0.15s, color 0.15s, border-color 0.15s; text-decoration: none; box-sizing: border-box; line-height: 1.25rem; } .login-btn svg { width: 1rem; height: 1rem; flex-shrink: 0; } .login-btn--primary { width: 100%; background: var(--primary); color: var(--primary-foreground); border: none; box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); } .login-btn--primary:hover { background: color-mix(in srgb, var(--primary) 90%, black); } .login-btn--outline { width: 100%; background: var(--background); color: var(--foreground); border: 1px solid var(--input); box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); } .login-btn--outline:hover { background: var(--accent); color: var(--accent-foreground); } .login-separator { display: flex; align-items: center; gap: 0.5rem; font-size: 0.75rem; color: var(--muted-foreground); text-transform: uppercase; } .login-separator::before, .login-separator::after { content: ''; flex: 1; height: 1px; background: var(--border); } .login-social-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; } @media (min-width: 640px) { .login-social-grid { grid-template-columns: 1fr 1fr; } } .login-password-wrapper { position: relative; } .login-password-wrapper .login-input { padding-right: 2.5rem; } .login-password-toggle { position: absolute; right: 0.75rem; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; color: var(--muted-foreground); padding: 0; display: flex; align-items: center; justify-content: center; } .login-password-toggle:hover { color: var(--foreground); } .login-password-toggle svg { width: 1rem; height: 1rem; } .login-terms { padding: 0 1.5rem; text-align: center; font-size: 0.75rem; color: var(--muted-foreground); text-wrap: balance; margin: 0; line-height: 1.6; } .login-terms a { color: var(--foreground) !important; text-decoration: underline !important; text-underline-offset: 4px; } .login-terms a:hover { color: var(--foreground) !important; } .login-alert { border-radius: calc(var(--radius) - 2px); padding: 0.625rem 0.75rem; font-size: 0.875rem; } .login-alert--error { background: color-mix(in srgb, var(--destructive) 10%, transparent); color: var(--destructive); border: 1px solid color-mix(in srgb, var(--destructive) 20%, transparent); } .login-alert--success { background: color-mix(in srgb, hsl(142 76% 36%) 10%, transparent); color: hsl(142 76% 36%); border: 1px solid color-mix(in srgb, hsl(142 76% 36%) 20%, transparent); } /* ---- Auth Pages (Login / Register) ---- */ .s-auth-page { /* Same trap as .s-sidebar-inset above, on the one page that does not use the app shell: html/body are overflow:hidden, so a 100vh floor on a phone puts ~110px of this page below the visible screen with no way to scroll to it — enough to hide the sign-in button on a short handset. dvh is the visible height; vh stays first as the fallback. */ min-height: 100vh; min-height: 100dvh; display: flex; align-items: center; justify-content: center; background: linear-gradient(to bottom, #eff6ff, #f3f4f6); padding: var(--s-md); } .s-auth-card { background: var(--s-surface); width: 100%; max-width: 28rem; border-radius: var(--s-radius-lg); box-shadow: var(--s-shadow-lg); overflow: hidden; } .s-auth-card-header { background: var(--s-primary-dark, #1e2d66); color: white; text-align: center; padding: 1.5rem; } .s-auth-card-header .s-auth-icon { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; margin: 0 auto 12px; color: white; background: none; border-radius: 0; } .s-auth-card-header .s-auth-icon svg { width: 48px; height: 48px; } .s-auth-card-header .s-auth-heading { font-size: 1.5rem; font-weight: 700; text-align: center; margin: 0 0 var(--s-xs); color: white; } .s-auth-card-header .s-auth-subtitle { font-size: 0.875rem; text-align: center; color: rgba(255,255,255,0.7); margin: 0; } .s-auth-card-body { padding: 2rem; } .s-auth-heading { font-size: 1.5rem; font-weight: 700; text-align: center; margin: 0 0 var(--s-xs); color: var(--s-text); } .s-auth-subtitle { font-size: 0.875rem; text-align: center; color: var(--s-text-secondary); margin: 0 0 var(--s-lg); } /* Password show/hide toggle */ .s-password-wrapper { position: relative; } .s-password-wrapper .s-input { padding-right: 40px; } .s-password-toggle { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; color: #9ca3af; padding: 0; display: flex; align-items: center; justify-content: center; } .s-password-toggle:hover { color: #4b5563; } .s-password-toggle svg { width: 16px; height: 16px; } .s-auth-forgot { display: block; text-align: center; margin-top: var(--s-md); font-size: 0.8125rem; color: var(--s-primary); text-decoration: none; } .s-auth-forgot:hover { text-decoration: underline; } .s-auth-divider { display: flex; align-items: center; gap: var(--s-md); margin: var(--s-lg) 0; font-size: 0.8125rem; color: var(--s-text-secondary); text-transform: uppercase; letter-spacing: 0.04em; } .s-auth-divider::before, .s-auth-divider::after { content: ''; flex: 1; border-top: 1px solid var(--s-border); } .s-auth-footer { text-align: center; margin-top: var(--s-lg); font-size: 0.875rem; color: var(--s-text-secondary); } .s-auth-footer a { color: var(--s-primary); font-weight: 600; text-decoration: none; } .s-auth-footer a:hover { text-decoration: underline; } .s-auth-name-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-md); } .s-btn--block { width: 100%; justify-content: center; } .s-btn--outline { background: var(--s-surface); color: var(--s-text); border: 1px solid var(--s-border); } .s-btn--outline:hover { background: var(--s-hover); } .s-btn--outline:disabled { opacity: 0.5; cursor: not-allowed; } @media (max-width: 480px) { .s-auth-card-body { padding: 1.5rem; } } /* ===== Reports module ===== */ .s-report-hero { background: linear-gradient(135deg, var(--s-primary) 0%, var(--s-primary-light) 60%, #5468c7 100%); color: #fff; border-radius: var(--s-radius-lg); padding: 1.75rem 2rem; margin-bottom: 1.25rem; position: relative; overflow: hidden; box-shadow: 0 12px 28px -16px rgba(44,65,144,0.55); } .s-report-hero::after { content: ""; position: absolute; right: -70px; top: -70px; width: 280px; height: 280px; border-radius: 50%; background: radial-gradient(circle at center, rgba(228,38,38,0.35), transparent 70%); pointer-events: none; } .s-report-hero__inner { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } .s-report-hero h1 { font-size: 1.5rem; font-weight: 700; margin: 0 0 0.35rem; letter-spacing: -0.01em; color: #fff; } .s-report-hero h1:focus, .s-report-hero h1:focus-visible { outline: none; box-shadow: none; background: transparent; } .s-report-hero p { margin: 0; opacity: 0.9; font-size: 0.9rem; } .s-report-hero__meta { display: flex; gap: 1rem; font-size: 0.78rem; opacity: 0.9; align-items: center; } .s-report-hero__meta b { font-weight: 600; } .s-kpi-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-bottom: 1.25rem; } .s-kpi { background: var(--s-surface); border: 1px solid var(--s-border); border-radius: var(--s-radius-md); padding: 1rem 1.1rem; position: relative; overflow: hidden; transition: transform 160ms ease, box-shadow 160ms ease; } .s-kpi:hover { transform: translateY(-2px); box-shadow: 0 10px 22px -12px rgba(0,0,0,0.18); } .s-kpi::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--s-primary); } .s-kpi--accent::before { background: var(--s-accent); } .s-kpi--success::before { background: #2e7d32; } .s-kpi--warn::before { background: #ed6c02; } .s-kpi--info::before { background: #0288d1; } /* --danger was already being written on tiles by ManagerDashboard before it existed here, so "Overdue" and "Critical" drew the default blue bar of an ordinary tile — the one accent that most needed to be different was the one that was not. */ .s-kpi--danger::before { background: #E42626; } /* A KPI that drills into the rows behind its number. It is a real
makes the table box itself the scroll container while its rows still lay out as a table. It is the one way to give a table a pane without wrapping it in new markup. Any unwrapped table, not only .s-table: the quotation's Pricing Summary is a bare
inside a panel that sets overflow:hidden explicitly, and it clipped too. */ :not(.s-table-wrap) > table { display: block; overflow-x: auto; max-width: 100%; } } @media (max-width: 768px) { /* ---- Room at the end of a page ---- There is deliberately NO phone-specific number here. The gutter is `var(--s-md) + env(safe-area-inset-bottom)` at every width — see the token in :root. This block used to raise it to 40px, and that was compensation for a bug rather than a layout decision: `min-height: 100vh` on .s-sidebar-inset was pushing the foot of every page below the screen, and padding was the wrong lever for it — the padding landed in the clipped strip too. With the shell fixed, the extra was pure white band, and on a list page it never scrolled away: .s-list-page is `flex: 1`, so the card always stretches to the padding edge and the gap sits under it permanently. Measured ~56px on a gesture-nav phone (40 + a 16px inset). What is left is the two things that are actually part of the layout: --s-md, the same 16px this page already uses for its other gutters, and the device's own reserved strip, which is not breathing room but compensation and is 0 where there is none. Nothing else is anchored to the bottom of the viewport — this app has no bottom navigation and no fixed footer, and the header is a flex sibling above .s-content rather than an overlay, so neither needs paying for. */ /* The list page hands its height to the card, so the gutter has to come off the card rather than after it — otherwise the sticky pagination footer is what sits against the edge. */ .s-list-page { padding-bottom: 0; } /* The drawer is fixed to bottom:0, so its last nav link is the one thing the gutter above cannot reach. */ .s-sidebar-content { padding-bottom: calc(0.25rem + var(--s-safe-bottom)); } /* Toasts and dialogs are the other two boxes anchored near the bottom edge. */ .s-toast-container { bottom: calc(32px + var(--s-safe-bottom)); } .s-dialog-actions { padding-bottom: calc(12px + var(--s-safe-bottom)); } } @media (max-width: 560px) { /* Reclaim the gutter — 8px per side is a 5% wider table on a 360px screen. */ .s-content { padding: 12px 10px var(--s-page-bottom-gutter); padding-left: calc(10px + env(safe-area-inset-left, 0px)); padding-right: calc(10px + env(safe-area-inset-right, 0px)); } /* ---- Dashboard / report hero ---- Sized for a laptop: 2rem padding, a 132px floor and a row that refuses to wrap until 720px. On a phone that leaves the greeting fighting the date chip for 270px. */ .s-report-hero { padding: 1.25rem 1.1rem; } .s-dash-hero { padding: 1.25rem 1.1rem; min-height: 0; } .s-dash-hero .s-report-hero__inner { flex-wrap: wrap; gap: 0.85rem; } .s-dash-hero__avatar { width: 44px; height: 44px; font-size: 1rem; border-radius: 12px; } .s-dash-hero__id { gap: 0.7rem; } .s-dash-hero__id h1 { font-size: 1.1rem; } .s-dash-hero__id p { font-size: 0.8rem; } .s-report-hero h1 { font-size: 1.25rem; } /* Stat and KPI strips: one 180px floor is wider than half a phone, so the tiles were already stacking one-up and wasting the row. 150px gives two. */ .s-kpi-strip { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; } .s-kpi { padding: 0.8rem 0.85rem; } .s-kpi__value { font-size: 1.3rem; } /* The icon is absolutely positioned in the tile's corner — free space at 240px, directly on top of the label at 150px. Reserving the corner instead only moved the problem: "PENDING QUOTATIONS" and "OPEN SERVICE CALLS" then wrapped to two lines, which made every tile in that row taller and left the short-labelled ones half empty. So the icon goes at phone width. It is decoration that repeats what the label already says, and the coloured bar down the left edge still tells the tiles apart. Every label fits one line with it gone. */ .s-kpi__icon { display: none; } .s-kpi__label { font-size: 0.68rem; } .s-kpi__sub { font-size: 0.72rem; } .s-stat-grid { grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 0.5rem; } /* Fixed label columns inside cards — 120px of a 300px card left the value with no room, so long values wrapped under a half-empty label. */ .s-funnel__row { grid-template-columns: 92px 1fr 46px; gap: 0.45rem; font-size: 0.78rem; } .s-bucket__row { grid-template-columns: 76px 1fr 46px; gap: 0.45rem; font-size: 0.78rem; } } /* ============================================================================ In-page camera (sahajCamera.capture) ---------------------------------------------------------------------------- A live getUserMedia viewfinder, used everywhere a photo is taken: check-in odometer, site-visit odometers, expense receipts, vehicle number plate, site photos. It replaced as the primary path because a picked file arrives in the vendor's format — an iPhone hands over HEIC, which no engine decodes through an tag, and the odometer preview silently never appeared. A frame off the video stream is drawn to a canvas and encoded by us, so every device produces the same JPEG. Built in plain DOM on document.body, outside Blazor's render tree: it must open on the tap without a circuit round-trip, and a re-render must not be able to detach the node the shutter handler is bound to. ========================================================================= */ .scam { display: none; position: fixed; inset: 0; z-index: 3000; background: #000; flex-direction: column; align-items: stretch; } .scam--on { display: flex; } .scam-video { flex: 1 1 auto; width: 100%; min-height: 0; /* contain, not cover: cropping a viewfinder hides the edge of the odometer the employee is trying to frame. */ object-fit: contain; background: #000; } .scam-msg { color: #fff; font-family: var(--s-font); font-size: 0.875rem; text-align: center; padding: 0.75rem 1.25rem; min-height: 1.25rem; } .scam-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.25rem; /* The home indicator sits over the bottom strip on an iPhone, and the shutter is exactly what lands under it. */ padding-bottom: calc(1rem + var(--s-safe-bottom)); background: #000; } .scam-btn { background: transparent; border: 1px solid rgba(255, 255, 255, 0.4); color: #fff; font-family: var(--s-font); font-size: 0.8125rem; border-radius: 999px; padding: 0.5rem 1rem; cursor: pointer; /* 44px is the smallest target a thumb hits reliably on a phone. */ min-height: 44px; min-width: 72px; } .scam-shutter { width: 68px; height: 68px; border-radius: 50%; background: #fff; border: 4px solid rgba(255, 255, 255, 0.35); background-clip: padding-box; cursor: pointer; flex: 0 0 auto; } .scam-shutter:active { opacity: 0.7; } /* The escape hatch: shown only when the stream will not start (permission refused, no camera, or a plain-HTTP origin where getUserMedia is blocked). A real label wrapping a real input, so the tap is a genuine user gesture — a programmatic click after an awaited rejection is not, and iOS blocks it. */ .scam-file { display: none; margin: 0 1.25rem 1.5rem; padding: 0.875rem 1rem; text-align: center; border: 1px dashed rgba(255, 255, 255, 0.5); border-radius: var(--s-radius); color: #fff; font-family: var(--s-font); font-size: 0.875rem; cursor: pointer; } .scam--failed .scam-file { display: block; } .scam--failed .scam-shutter { opacity: 0.35; pointer-events: none; } .scam-file input { display: none; } /* Landscape on a phone leaves almost no vertical room — put the controls beside the viewfinder rather than stealing half the height from it. */ @media (max-height: 480px) and (orientation: landscape) { .scam { flex-direction: row; } .scam-video { order: 1; } .scam-bar { order: 2; flex-direction: column-reverse; padding: 1rem; padding-bottom: 1rem; padding-right: calc(1rem + env(safe-area-inset-right, 0px)); } .scam-msg { display: none; } .scam-shutter { width: 56px; height: 56px; } } /* ============================================================================ Machine filter bar (MachineFilterBar.razor) ---------------------------------------------------------------------------- Sits above a service call's machine table on the job sheet and the call view. One AMC contract on a hotel puts every unit in the building on one call, so the strip is what turns "read down 32 rows" into "3rd floor, room 204". ========================================================================= */ .mfb { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--s-border); background: var(--s-surface-variant, #fafbfc); } /* The search box takes the slack; the pickers stay at a readable fixed width so a long product name cannot push the row into a second line on a laptop. */ .mfb-search { flex: 1 1 220px; min-width: 0; } .mfb-pick { flex: 0 1 160px; min-width: 0; } .mfb-count { font-size: 0.75rem; color: var(--s-text-secondary); white-space: nowrap; } .mfb-clear { flex-shrink: 0; } /* On a phone the four controls stack rather than shrink to unusable widths — this strip is most useful in the field, on the smallest screen. */ @media (max-width: 640px) { .mfb { gap: 6px; } .mfb-search { flex: 1 1 100%; } .mfb-pick { flex: 1 1 calc(50% - 3px); } } /* ── BOM material flow: dispatch selection, receipt panel, returns ────────────── Here rather than in a .razor.css because App.razor does not include the scoped styles bundle — every .razor.css in this project is inert. */ /* Select and Dispatch scroll with the rest of the grid. They used to be pinned — select to the left edge, Dispatch to the right above 900px — so a line could still be ticked with the costing columns scrolled past. Unpinned on request: a pinned pair costs roughly a fifth of the width permanently, the two frozen edges made the middle of the grid feel narrower than it is, and the columns sat over the data rather than beside it. The opaque backgrounds went with them; they only existed because a sticky cell lets scrolled columns show through. Keep the width so the tick box still has a column of its own. */ .bom-col-select { width: 44px; } /* Deliberately outside .s-table-wrap--wide — that box scrolls on x, which makes it the scrollport, so a sticky bar inside it slides away sideways with the columns. */ .bom-dispatch-bar { position: sticky; bottom: 0; z-index: 5; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 14px; margin-top: 8px; background: var(--s-surface, #fff); border: 1px solid var(--s-border); border-radius: 8px; box-shadow: 0 -4px 14px rgba(0, 0, 0, 0.08); font-size: 0.82rem; } .bom-receipt { padding: 12px 14px; } .bom-receipt__notice, .bom-receipt__meta { font-size: 0.76rem; padding: 8px 10px; border-radius: 6px; margin-bottom: 10px; } .bom-receipt__notice { background: #fffbeb; color: #92400e; } .bom-receipt__meta { background: var(--s-surface-variant); color: var(--s-text-secondary); } .bom-receipt__foot { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 12px; } .bom-receipt__actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 12px; } /* A document preview beside its print-time controls — the shape the quotation download has always used, now shared by the challan and the return receipt. They previously stacked the controls above the page inside an 820px dialog, which shrank an A4 sheet to about 70% and left the print unreadable. The page gets the room; the fields sit alongside it. */ /* Flush to the dialog edges: the preview is the content, and 20px of surface around a rendered page just eats height the page could have used. .s-dialog caps at 90vh, so the 70vh below plus the title and the actions bar is what keeps the whole thing on screen without an outer scroll. */ .s-dialog--xl .s-dialog-content { padding: 0; } .s-dialog--xl .s-dialog-actions { margin-top: 0; } .pdf-doc-body { display: flex; min-height: 0; } .pdf-doc-preview { flex: 6; min-width: 0; } .pdf-doc-preview iframe { display: block; width: 100%; height: 70vh; border: none; background: #e5e7eb; } .pdf-doc-preview__empty { height: 70vh; display: flex; align-items: center; justify-content: center; background: #f8f9fb; color: var(--s-text-muted); } .pdf-doc-side { flex: 4; min-width: 0; border-left: 1px solid var(--s-border); padding: 16px; display: flex; flex-direction: column; gap: 12px; overflow-y: auto; } .pdf-doc-side__head { font-size: 0.78rem; font-weight: 600; color: var(--s-primary); text-transform: uppercase; letter-spacing: 0.4px; padding-bottom: 4px; border-bottom: 1px solid var(--s-border); } .pdf-doc-side__hint { font-size: 0.72rem; color: var(--s-text-secondary); } /* Below this the two panes cannot both be useful side by side, so the page goes on top and the fields underneath — the same breakpoint the quotation dialog uses. */ @media (max-width: 900px) { .pdf-doc-body { flex-direction: column; } .pdf-doc-side { flex: none; width: 100%; border-left: none; border-top: 1px solid var(--s-border); max-height: 34vh; } .pdf-doc-preview iframe, .pdf-doc-preview__empty { height: 46vh; } } /* The serial picker's dropdown on a dispatch note. It replaced a native , which Chrome gives no caret and only opens once you type — fifty units in stock and the control read as an empty text box. Rows are clickable and the panel stays open, because picking five units for one line is the normal case. */ .dmn-serial-panel { border: 1px solid var(--s-border); border-radius: 6px; max-height: 150px; overflow-y: auto; background: var(--s-surface); margin-bottom: 4px; box-shadow: var(--s-shadow-sm, 0 2px 6px rgba(0, 0, 0, 0.08)); } .dmn-serial-option { padding: 5px 10px; cursor: pointer; font-family: 'JetBrains Mono', monospace; font-size: 0.74rem; border-bottom: 1px solid var(--s-border); } .dmn-serial-option:last-child { border-bottom: none; } .dmn-serial-option:hover { background: var(--s-primary); color: #fff; } .dmn-serial-empty { padding: 6px 10px; font-size: 0.74rem; color: var(--s-text-secondary); } /* A dispatch row opens the note's own receipt page. It has to look clickable across the whole row, not just on the number — the number alone is a small target and nothing else hinted at it. */ .dmn-row { cursor: pointer; } .dmn-row:hover { background: var(--s-surface-variant); } .dmn-row__link { color: var(--s-primary); font-weight: 600; } .dmn-row:hover .dmn-row__link { text-decoration: underline; } .bom-returns__zone { padding: 4px 0 14px; } .bom-returns__head { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; color: var(--s-primary); padding: 10px 12px 6px; } .bom-returns__actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 10px 12px; } /* At phone width the receipt becomes one card per line. It is used one-handed at a gate, where a sideways scroll means half the row is simply never read — so the table stops being a table rather than being made narrower. Targets stay at 44px. */ @media (max-width: 560px) { .bom-receipt__table thead { display: none; } .bom-receipt__table, .bom-receipt__table tbody, .bom-receipt__table tr, .bom-receipt__table td { display: block; width: 100%; } .bom-receipt__table tr { border: 1px solid var(--s-border); border-radius: 8px; margin-bottom: 10px; padding: 6px 8px; } .bom-receipt__table td { display: flex; align-items: center; justify-content: space-between; gap: 10px; text-align: left !important; border: none; padding: 7px 2px; min-height: 44px; } .bom-receipt__table td::before { content: attr(data-label); font-size: 0.74rem; font-weight: 600; color: var(--s-text-secondary); flex-shrink: 0; } .bom-receipt__table td .s-input { max-width: 60%; } } /* ============================================================================ Dynamic project-phase questionnaire (.pq-*) ---------------------------------------------------------------------------- Lives here rather than in a page