/* =================================================================== Nexus Desk — brand-aligned design system Layered on top of Tailwind (CDN). Uses the teal → orange gradient from the logo as the signature brand accent. Responsive tiers (use DOM order for layout — avoid Tailwind order-*): narrow ≤320px ultra-tight padding, full-width controls phone ≤375px safe-area footer links, compact cards phone ≤640px full-sheet modals, stacked tables (nd-stack-mobile) large-phone 641–767px drawer nav, compact filters tablet 768–1023px nd-stack-tablet, 2-col cards desktop ≥1024px full data tables =================================================================== */ :root { /* Core brand hues lifted from the logo. */ --nd-ink: #0f172a; /* primary dark - navy/slate */ --nd-ink-soft: #1e293b; --nd-teal: #0ea5e9; --nd-teal-2: #14b8a6; --nd-orange: #f97316; --nd-orange-2: #fb923c; --nd-success: #22c55e; --nd-warning: #f59e0b; --nd-danger: #ef4444; --nd-surface: #f6f8fb; --nd-surface-2: #eef2f7; --nd-line: #e2e8f0; --nd-line-2: #cbd5e1; --nd-text: #0f172a; --nd-muted: #64748b; /* Signature brand gradient (used sparingly: accents, logo text, CTA hovers, hero headers). */ --nd-gradient: linear-gradient(90deg, #0ea5e9 0%, #14b8a6 45%, #f97316 100%); --nd-gradient-soft: linear-gradient(135deg, rgba(14,165,233,.12), rgba(249,115,22,.12)); /* Shadows */ --nd-shadow-sm: 0 1px 2px rgba(15, 23, 42, .06); --nd-shadow-md: 0 10px 25px -10px rgba(15, 23, 42, .18); --nd-shadow-lg: 0 25px 50px -12px rgba(15, 23, 42, .25); /* Radii */ --nd-r-sm: .375rem; --nd-r-md: .5rem; --nd-r-lg: .75rem; --nd-r-xl: 1rem; /* Dashboard data views: tables, grids, filters, pagination (see § Data typography). */ --nd-data-font-size: 12px; --nd-data-line-height: 1.4; --nd-font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; --nd-font-family-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; --nd-form-font-family: var(--nd-font-family); --nd-body-font-size: 15px; } /* Typography cascade — UI only (shell, portaled overlays, modals, toasts). */ html, body { font-family: var(--nd-font-family); font-size: var(--nd-body-font-size); } .nd-shell, .nd-sidebar, .nd-topbar, .nd-topbar-title, .nd-nav-label, #nd-ui-root, .nd-toast, .nd-modal, .nd-modal-header, .nd-modal-body, .nd-modal-fields, .nd-modal-footer, .nd-sheet-card, .nd-select-pop, .nd-select-item, .nd-select-trigger, .nd-date-pop, .nd-date-display, .nd-date-portal, .nd-bell-panel, .nd-bell-item, .nd-bell-title, .nd-choice-field, .nd-choice-card, .nd-choice-card-title, .nd-choice-group-heading, .nd-form-stepper, .nd-form-stepper-pill, .ql-editor, .ql-toolbar { font-family: var(--nd-font-family); } .font-mono, .nd-mono, [class*="font-mono"] { font-family: var(--nd-font-family-mono); } input, select, textarea, button, optgroup, option { font-family: inherit; } /* Site-wide form + heading consistency (dashboard content). */ #nd-content .nd-form-step label, #nd-content .nd-input, #nd-content .nd-select, #nd-content .nd-textarea, #nd-content .text-xs.text-slate-500, #nd-content .nd-table, #nd-content .nd-table th, #nd-content .nd-table td, #nd-content .nd-activity-table, #nd-content .nd-btn, #nd-content .nd-icon-btn, #nd-content .nd-filter-bar, #nd-content .nd-filter-row, #nd-content .nd-list-footer, #nd-content .nd-toast { font-family: var(--nd-form-font-family); } #nd-content h1, #nd-content h2, #nd-content h3, #nd-content .font-semibold.text-lg, #nd-content .text-xl.font-semibold { font-family: var(--nd-form-font-family); letter-spacing: 0.01em; } #nd-content .nd-form-step label { text-transform: none; font-weight: 500; } .sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } * { box-sizing: border-box; } html { scrollbar-gutter: stable; } html, body { margin: 0; max-width: 100%; overflow-x: clip; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { background: var(--nd-surface); color: var(--nd-text); line-height: 1.5; } /* ------------------------------------------------------------------- Brand marks ------------------------------------------------------------------- */ .nd-brand-wordmark { background: var(--nd-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 800; letter-spacing: -.01em; } .nd-logo-img { display: block; object-fit: contain; } /* ------------------------------------------------------------------- Icons (Lucide via CDN) Lucide replaces every with an on load. Depending on the Lucide build the data-lucide attribute is either preserved or stripped, so every sizing rule must target BOTH selectors to survive the swap. ------------------------------------------------------------------- */ [data-lucide], svg.lucide, .nd-icon, .nd-icon svg, [data-lucide] svg { width: 1em; height: 1em; flex: none; stroke-width: 1.75; } .nd-icon-sm { font-size: .95rem; } .nd-icon-md { font-size: 1.1rem; } .nd-icon-lg { font-size: 1.5rem; } /* Universal click-target fix. Any Lucide icon (or its inner svg parts) sitting inside a clickable element should never absorb the click -- it must pass straight through to the surrounding and the post-swap so the leading icon is always anchored to the left edge regardless of which Lucide build is loaded. */ .nd-input-wrap { position: relative; } .nd-input-wrap > [data-lucide], .nd-input-wrap > svg.lucide, .nd-input-wrap > .nd-icon { position: absolute; left: .75rem; top: 50%; transform: translateY(-50%); color: var(--nd-muted); font-size: 1.05rem; pointer-events: none; } .nd-input-wrap > .nd-input { padding-left: 2.3rem; } /* Show/hide password toggle. Sits inside an .nd-input-wrap on the right edge. The wrap may or may not also have a leading lucide icon -- the toggle is positioned independently. The button is sized to fill the full vertical height of the input (top + bottom pinned) rather than using a small fixed 1.85rem box centred on the input. The reason: some browsers (Chrome in particular) were only registering the click in the top ~half of a small fixed-height box because the icon SVG's rendered bounds were drifting a couple of pixels below the button's clickable rectangle. Pinning the button to the input's full height makes the entire right-edge column clickable so the user can never "miss" the icon. */ .nd-input-with-toggle { padding-right: 2.75rem !important; } .nd-input-toggle { position: absolute; top: 0; bottom: 0; right: 0; width: 2.75rem; display: inline-flex; align-items: center; justify-content: center; color: var(--nd-muted); background: transparent; border: 0; cursor: pointer; padding: 0; border-radius: 0 var(--nd-r-md) var(--nd-r-md) 0; z-index: 2; } .nd-input-toggle:hover { background: var(--nd-line-1); color: var(--nd-ink); } .nd-input-toggle:focus-visible { outline: 2px solid var(--nd-brand); outline-offset: -2px; } .nd-input-toggle [data-lucide], .nd-input-toggle svg.lucide { width: 1.05rem; height: 1.05rem; } /* The icon wrappers: Alpine drives visibility via x-show on these s (Lucide never touches them -- it only replaces the inner with an ). pointer-events:none guarantees every click lands on the -to- swap doesn't desync state. ------------------------------------------------------------------- */ .nd-max-btn { display: none !important; align-items: center; justify-content: center; width: 2rem; height: 2rem; border: 0; background: transparent; color: var(--nd-muted); cursor: pointer; border-radius: .4rem; padding: 0; } .nd-max-btn:hover { background: var(--nd-line-1); color: var(--nd-ink); } .nd-max-btn:focus-visible{ outline: 2px solid var(--nd-brand); outline-offset: 2px; } .nd-max-btn [data-lucide], .nd-max-btn svg.lucide { width: 1.1rem; height: 1.1rem; } .nd-max-btn .nd-max-on { display: block; } .nd-max-btn .nd-max-off { display: none; } .nd-max-btn.is-on .nd-max-on { display: none; } .nd-max-btn.is-on .nd-max-off { display: block; } /* Sidebar brand strip on fullscreen / maximized modals and sheets. */ .nd-modal-brand-bar { display: none; flex-shrink: 0; align-items: center; gap: .65rem; padding: .65rem 1rem; border-bottom: 1px solid var(--nd-border, #e2e8f0); background: #fff; } .nd-modal.is-maximized > .nd-modal-brand-bar, .nd-sheet-card.is-maximized > .nd-modal-brand-bar { display: flex; } @media (max-width: 767px) { .nd-modal > .nd-modal-brand-bar, .nd-sheet-card > .nd-modal-brand-bar { display: flex; } .nd-modal > .nd-modal-brand-bar, .nd-sheet-card > .nd-modal-brand-bar { padding-top: max(.65rem, env(safe-area-inset-top)); } .nd-modal:has(> .nd-modal-brand-bar) .nd-modal-header { padding-top: .35rem; } .nd-sheet-card:has(> .nd-modal-brand-bar) { padding-top: 0; } } @media (min-width: 641px) { .nd-max-btn { display: inline-flex !important; } } /* Maximized sheet-card: fill the viewport edge-to-edge, drop rounded corners so it reads as a genuine full-screen workspace. Backdrop padding is removed so the card really does hit the edges. */ .nd-sheet-backdrop.has-maximized { padding: 0; } .nd-modal-backdrop.has-maximized { padding: 0; align-items: stretch; } .nd-sheet-card.is-maximized { width: 100vw !important; max-width: 100vw !important; height: 100vh !important; height: 100dvh !important; max-height: 100vh !important; max-height: 100dvh !important; min-height: 100vh !important; min-height: 100dvh !important; border-radius: 0 !important; } .nd-modal.is-maximized { width: 100vw !important; max-width: 100vw !important; height: 100vh !important; height: 100dvh !important; max-height: 100vh !important; max-height: 100dvh !important; min-height: 100vh !important; min-height: 100dvh !important; border-radius: 0 !important; } .nd-modal.is-maximized .nd-modal-body { flex: 1; min-height: 0; } .nd-modal--large { max-width: 42rem; min-width: min(100%, 22rem); } .nd-modal--large .nd-modal-body { min-height: 8rem; } /* Bell panel maximized on desktop: break out of the anchored dropdown position and become a centred workspace-style panel so the user can browse a long notifications feed comfortably. */ .nd-bell-panel.is-maximized { position: fixed !important; top: 2vh !important; bottom: 2vh !important; left: 2vw !important; right: 2vw !important; width: auto !important; max-width: none !important; max-height: none !important; border-radius: var(--nd-r-xl) !important; } /* ------------------------------------------------------------------- Badges ------------------------------------------------------------------- */ .nd-badge { display: inline-flex; align-items: center; gap: .3rem; font-size: .7rem; font-weight: 600; padding: .2rem .55rem; border-radius: 9999px; line-height: 1; } .nd-badge-ok { background: #dcfce7; color: #166534; } .nd-badge-warn { background: #fef3c7; color: #92400e; } .nd-badge-bad { background: #fee2e2; color: #991b1b; } .nd-badge-muted { background: #e2e8f0; color: #334155; } .nd-badge-brand { background: rgba(14,165,233,.12); color: #0369a1; } /* Compact company identity chip used across admin tables/lists. */ .nd-company-ident { display: inline-flex; align-items: center; gap: .45rem; min-width: 0; } .nd-company-avatar { width: 1.15rem; height: 1.15rem; border-radius: 9999px; border: 1px solid #cbd5e1; background-color: #e2e8f0; background-position: center; background-repeat: no-repeat; background-size: cover; color: #334155; font-size: .6rem; font-weight: 700; line-height: 1; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; text-transform: uppercase; } .nd-company-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ------------------------------------------------------------------- Progress bar ------------------------------------------------------------------- */ .nd-progress { height: 8px; background: #e2e8f0; border-radius: 9999px; overflow: hidden; } .nd-progress > span { display: block; height: 100%; background: var(--nd-gradient); transition: width .3s ease; } .nd-progress.nd-progress-sm { height: 6px; } /* ------------------------------------------------------------------- Upload dropzone + queue ------------------------------------------------------------------- */ .nd-dropzone { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem; padding: 1.5rem 1rem; border: 2px dashed #cbd5e1; border-radius: var(--nd-r-xl, 14px); background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%); text-align: center; color: #475569; cursor: pointer; transition: border-color .15s ease, background .15s ease, transform .15s ease; } .nd-dropzone:hover { border-color: #94a3b8; } .nd-dropzone.is-dragover { border-color: #0ea5e9; background: #f0f9ff; transform: scale(1.005); } .nd-dropzone input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; } .nd-dropzone-icon { width: 44px; height: 44px; border-radius: 9999px; background: rgba(14,165,233,.12); color: #0369a1; display: inline-flex; align-items: center; justify-content: center; } .nd-dropzone-title { font-weight: 600; color: #0f172a; font-size: .95rem; } .nd-dropzone-hint { font-size: .78rem; color: #64748b; } .nd-upload-queue { display: flex; flex-direction: column; gap: .5rem; } .nd-upload-item { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .75rem; padding: .65rem .75rem; background: #fff; border: 1px solid var(--nd-line, #e2e8f0); border-radius: var(--nd-r, 10px); } .nd-upload-item-icon { width: 32px; height: 32px; border-radius: 8px; background: rgba(14,165,233,.1); color: #0369a1; display: inline-flex; align-items: center; justify-content: center; } .nd-upload-item-meta { min-width: 0; } .nd-upload-item-name { font-weight: 600; font-size: .85rem; color: #0f172a; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .nd-upload-item-sub { font-size: .7rem; color: #64748b; margin-top: .1rem; } .nd-upload-item .nd-progress { width: 100%; margin-top: .35rem; } .nd-upload-item.is-done { border-color: rgba(16,185,129,.4); background: #f0fdf4; } .nd-upload-item.is-error { border-color: rgba(239,68,68,.4); background: #fef2f2; } .nd-upload-item.is-cancelled{ border-color: #cbd5e1; opacity: .7; } .nd-upload-cancel { background: transparent; border: 0; color: #64748b; cursor: pointer; padding: .25rem .4rem; border-radius: 6px; font-size: .75rem; } .nd-upload-cancel:hover { background: #f1f5f9; color: #0f172a; } /* Quota meter */ .nd-quota { display: flex; flex-direction: column; gap: .35rem; padding: .65rem .85rem; background: #f8fafc; border: 1px solid var(--nd-line, #e2e8f0); border-radius: var(--nd-r, 10px); } .nd-quota-top { display: flex; align-items: center; justify-content: space-between; font-size: .8rem; color: #334155; } .nd-quota-top strong { color: #0f172a; } .nd-quota.is-near span { background: linear-gradient(90deg,#f59e0b,#f97316); } .nd-quota.is-full span { background: linear-gradient(90deg,#ef4444,#b91c1c); } /* ------------------------------------------------------------------- Layout shell (dashboards) ------------------------------------------------------------------- */ .nd-shell { min-height: 100vh; min-width: 0; overflow-x: clip; } #nd-content { min-width: 0; overflow-x: clip; overflow-y: visible; } .nd-sidebar { display: flex; flex-direction: column; padding: 1rem; background: #fff; border-right: 1px solid var(--nd-line); } .nd-sidebar-brand { display: flex; align-items: center; gap: .6rem; padding: .25rem .25rem 1rem; border-bottom: 1px solid var(--nd-line); margin-bottom: .75rem; } a.nd-sidebar-brand-link { text-decoration: none; color: inherit; border-radius: var(--nd-r-md); transition: background .15s ease; } a.nd-sidebar-brand-link:hover { background: var(--nd-surface-2); } .nd-sidebar-brand .nd-logo-img { width: 32px; height: 32px; } .nd-sidebar-brand .nd-brand-name { font-weight: 700; font-size: .95rem; color: var(--nd-ink); } .nd-sidebar-brand .nd-brand-sub { font-size: .7rem; color: var(--nd-muted); text-transform: capitalize; } .nd-sidebar a { display: flex; align-items: center; gap: .65rem; padding: .55rem .7rem; border-radius: var(--nd-r-md); font-size: .875rem; color: #475569; text-decoration: none; transition: background .15s ease, color .15s ease; } .nd-sidebar a:hover { background: var(--nd-surface-2); color: var(--nd-ink); } .nd-sidebar a [data-lucide], .nd-sidebar a svg.lucide, .nd-sidebar a .nd-icon { font-size: 1.05rem; color: #94a3b8; transition: color .15s ease; } .nd-sidebar a:hover [data-lucide], .nd-sidebar a:hover svg.lucide, .nd-sidebar a:hover .nd-icon { color: var(--nd-teal); } .nd-sidebar a.active { background: rgba(14,165,233,.1); color: var(--nd-teal); font-weight: 600; } .nd-sidebar a.active [data-lucide], .nd-sidebar a.active svg.lucide, .nd-sidebar a.active .nd-icon { color: var(--nd-teal); } .nd-sidebar a .nd-nav-label { flex: 1 1 auto; min-width: 0; } .nd-nav-badge { margin-left: auto; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; min-width: 1.125rem; height: 1.125rem; padding: 0 .35rem; border-radius: 9999px; background: #f97316; color: #fff; font-size: .625rem; font-weight: 700; line-height: 1; letter-spacing: .01em; box-shadow: 0 0 0 1px rgba(255,255,255,.85); } .nd-sidebar a.active .nd-nav-badge { background: #ea580c; } .nd-sidebar-account-toggle, .nd-sidebar-account-link { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: .65rem; padding: .55rem .7rem; border-radius: var(--nd-r-md); font-size: .875rem; text-decoration: none; transition: background .15s ease, color .15s ease, border-color .15s ease; border: 1px solid transparent; } .nd-sidebar-account-toggle { background: #f8fafc; color: var(--nd-ink); cursor: pointer; font-weight: 600; } .nd-sidebar-account-toggle:hover { background: var(--nd-surface-2); } .nd-sidebar-account-toggle [data-lucide], .nd-sidebar-account-toggle svg.lucide, .nd-sidebar-account-link [data-lucide], .nd-sidebar-account-link svg.lucide { font-size: 1.05rem; color: #94a3b8; transition: color .15s ease, transform .15s ease; flex: none; } .nd-sidebar-account-toggle:hover [data-lucide], .nd-sidebar-account-toggle:hover svg.lucide, .nd-sidebar-account-link:hover [data-lucide], .nd-sidebar-account-link:hover svg.lucide { color: var(--nd-teal); } .nd-account-chevron { transition: transform .15s ease; } .nd-sidebar-account-toggle[aria-expanded="true"] .nd-account-chevron { transform: rotate(180deg); } .nd-sidebar-account-menu { margin-top: .4rem; padding-left: .55rem; display: flex; flex-direction: column; gap: .35rem; } .nd-sidebar-account-menu[hidden] { display: none !important; } .nd-sidebar-account-link { background: #fff; color: #475569; padding-left: .9rem; padding-right: .8rem; justify-content: flex-start; } .nd-sidebar-account-link span { text-align: left; } .nd-sidebar-account-link:hover { background: var(--nd-surface-2); color: var(--nd-ink); } .nd-sidebar-account-link.active { background: rgba(14,165,233,.1); color: var(--nd-teal); font-weight: 600; } .nd-sidebar-account-link.active [data-lucide], .nd-sidebar-account-link.active svg.lucide { color: var(--nd-teal); } .nd-sidebar-account-link--button { text-align: left; cursor: pointer; background: #fff1f2; color: #be123c; } .nd-sidebar-account-link--button:hover { background: #ffe4e6; color: #9f1239; } .nd-sidebar-account-link--button [data-lucide], .nd-sidebar-account-link--button svg.lucide { color: #f43f5e; } .nd-sidebar-account-link--icon-only { justify-content: center; width: auto; min-width: 2.75rem; padding: .55rem; } .nd-sidebar a.nd-nav-danger { color: #be123c; } .nd-sidebar a.nd-nav-danger [data-lucide], .nd-sidebar a.nd-nav-danger svg.lucide { color: #f43f5e; } .nd-sidebar a.nd-nav-danger:hover { background: #fff1f2; color: #9f1239; } @media (min-width: 768px) { .nd-shell.nd-sidebar-collapsed .nd-sidebar { width: 4.75rem !important; padding-left: .5rem; padding-right: .5rem; } .nd-shell.nd-sidebar-collapsed .nd-sidebar-brand { justify-content: center; padding-left: .1rem; padding-right: .1rem; } .nd-shell.nd-sidebar-collapsed .nd-sidebar-brand .min-w-0 { display: none; } .nd-shell.nd-sidebar-collapsed .nd-sidebar nav a { position: relative; justify-content: center; padding-left: .5rem; padding-right: .5rem; } .nd-shell.nd-sidebar-collapsed .nd-sidebar nav a span:not(.nd-nav-badge) { display: none; } .nd-shell.nd-sidebar-collapsed .nd-sidebar nav a .nd-nav-badge { position: absolute; top: .15rem; right: .1rem; min-width: .95rem; height: .95rem; padding: 0 .2rem; font-size: .55rem; margin-left: 0; } .nd-shell.nd-sidebar-collapsed .nd-sidebar nav a [data-lucide], .nd-shell.nd-sidebar-collapsed .nd-sidebar nav a svg.lucide { margin: 0; font-size: 1.1rem; } .nd-shell.nd-sidebar-collapsed .nd-sidebar-account-toggle { justify-content: center; padding-left: .45rem; padding-right: .45rem; } .nd-shell.nd-sidebar-collapsed .nd-sidebar-account-toggle > span { min-width: auto; } .nd-shell.nd-sidebar-collapsed #nd-account-group { position: relative; } .nd-shell.nd-sidebar-collapsed .nd-sidebar-account-toggle > span > span, .nd-shell.nd-sidebar-collapsed .nd-sidebar-account-toggle .nd-account-chevron { display: none !important; } .nd-shell.nd-sidebar-collapsed .nd-sidebar-account-menu:not([hidden]) { display: flex !important; position: absolute; left: calc(100% + 0.35rem); bottom: 0; min-width: 11rem; z-index: 50; padding: .45rem; background: #fff; border: 1px solid var(--nd-line-2); border-radius: var(--nd-r-md); box-shadow: 0 8px 24px -8px rgba(15, 23, 42, .25); margin-top: 0; padding-left: .45rem; } } .nd-hr-timecard-list-filters { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr) auto; gap: .5rem; align-items: center; } /* Shared compact list/sheet pagination footer (rows + pager + jump on one row). */ .nd-list-footer { border-top: 1px solid #e2e8f0; padding-top: .75rem; } .nd-list-footer__controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: .5rem; } .nd-list-footer__label { font-size: var(--nd-data-font-size); line-height: var(--nd-data-line-height); color: #64748b; white-space: nowrap; flex: 0 0 auto; } .nd-list-footer__rows, .nd-list-footer .nd-select-wrap { width: auto !important; min-width: 4.25rem; max-width: 5rem; flex: 0 0 auto; } .nd-list-footer select.nd-select, .nd-list-footer .nd-select-trigger { width: 100%; min-width: 4.25rem; max-width: 5rem; } .nd-list-footer__jump, .nd-list-footer input[type="number"].nd-input { width: 4.25rem; max-width: 5rem; flex: 0 0 auto; } .nd-list-footer__controls .nd-btn, .nd-list-footer__controls label, .nd-list-footer__controls span, .nd-list-footer__controls select, .nd-list-footer__controls input { flex: 0 0 auto; white-space: nowrap; } /* Legacy aliases — prefer nd-list-footer in new markup. */ .nd-hr-timecard-pager { border-top: 1px solid #e2e8f0; } .nd-hr-timecard-pager .nd-hr-timecard-pager-controls, .nd-list-footer.nd-hr-timecard-pager .nd-list-footer__controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: .5rem; } @media (max-width: 767px) { .nd-mobile-inline-actions { flex-wrap: nowrap !important; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .nd-mobile-inline-actions::-webkit-scrollbar { display: none; } .nd-mobile-inline-actions .nd-btn { flex: 0 0 auto; white-space: nowrap; } .nd-mobile-inline-actions [data-lucide], .nd-mobile-inline-actions svg.lucide { display: none; } .nd-mobile-inline-actions .nd-btn, .nd-mobile-inline-actions .nd-btn-sm { padding-left: .75rem; padding-right: .75rem; } .nd-hr-timecard-list-filters { grid-template-columns: 1fr !important; gap: .5rem; } .nd-hr-timecard-filters:not(.is-open), .nd-hr-timecard-list-filters:not(.is-open) { display: none !important; } .nd-hr-payslip-filters:not(.is-open) { display: none !important; } .nd-hr-leave-filters:not(.is-open) { display: none !important; } .nd-hr-timecard-filters .nd-input, .nd-hr-timecard-filters .nd-btn:not(.nd-btn-reset-filters) { min-height: 2.25rem; } .nd-hr-timecard-list-filters .nd-input, .nd-hr-timecard-list-filters .nd-btn:not(.nd-btn-reset-filters) { min-height: 2.25rem; width: 100%; } .nd-list-footer__controls, .nd-hr-timecard-pager .nd-hr-timecard-pager-controls { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; justify-content: flex-start; padding-bottom: .15rem; scrollbar-width: none; } .nd-list-footer__controls::-webkit-scrollbar, .nd-hr-timecard-pager .nd-hr-timecard-pager-controls::-webkit-scrollbar { display: none; } .nd-hr-timecard-list-filters .nd-btn-reset-filters { width: 2.25rem !important; min-width: 2.25rem !important; max-width: 2.25rem !important; } .nd-hr-timecard-actions { gap: .25rem; } .nd-hr-timecard-actions .nd-btn.nd-btn-sm { padding-left: .45rem; padding-right: .45rem; } .nd-hr-timecard-actions .nd-btn.nd-btn-sm [data-lucide], .nd-hr-timecard-actions .nd-btn.nd-btn-sm svg.lucide { width: 1rem; height: 1rem; } .nd-hr-staff-actions { gap: .35rem; } .nd-hr-staff-actions .nd-btn.nd-btn-sm { min-width: 2.75rem; min-height: 2.75rem; padding-left: .55rem; padding-right: .55rem; } .nd-hr-staff-actions .nd-btn.nd-btn-sm [data-lucide], .nd-hr-staff-actions .nd-btn.nd-btn-sm svg.lucide { width: 1.4rem; height: 1.4rem; } .nd-hr-staff-filters .nd-input, .nd-hr-staff-filters .nd-btn, .nd-hr-staff-toolbar .nd-input, .nd-hr-staff-toolbar .nd-btn { min-height: 2.25rem; } .nd-hr-staff-filter-chip { min-height: 2.25rem; padding-top: .35rem; padding-bottom: .35rem; } } .nd-hr-staff-actions { gap: .35rem; } .nd-hr-staff-actions .nd-btn.nd-btn-sm { min-width: 2.5rem; min-height: 2.5rem; padding-left: .5rem; padding-right: .5rem; } .nd-hr-staff-actions .nd-btn.nd-btn-sm [data-lucide], .nd-hr-staff-actions .nd-btn.nd-btn-sm svg.lucide { width: 1.125rem; height: 1.125rem; } .nd-hr-staff-card { border-color: #c7d2fe; box-shadow: 0 16px 36px -24px rgba(79, 70, 229, .35); } .nd-hr-staff-toolbar { border: 1px solid #e2e8f0; background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%); box-shadow: 0 12px 28px -24px rgba(15, 23, 42, .55); border-top: 0; border-image: none; } .nd-hr-staff-toolbar-inline { display: flex; flex-wrap: wrap; align-items: stretch; gap: .5rem .75rem; padding: .5rem .75rem; width: 100%; } .nd-hr-staff-toolbar-primary { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem .55rem; flex: 1 1 16rem; min-width: 0; } .nd-hr-staff-toolbar-filters { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .65rem; flex: 1 1 20rem; min-width: 0; } .nd-hr-staff-toolbar-search { flex: 1 1 10rem; min-width: 8rem; max-width: none; } .nd-hr-staff-toolbar-actions { display: inline-flex; align-items: center; gap: .35rem; flex-shrink: 0; } .nd-hr-staff-filter-group { display: inline-flex; align-items: center; gap: .32rem; flex-wrap: wrap; min-width: 0; padding-left: .5rem; border-left: 1px solid #e2e8f0; } .nd-hr-staff-filter-group + .nd-hr-staff-filter-group { margin-left: 0; } .nd-hr-staff-filter-label { font-size: .7rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: #64748b; flex-shrink: 0; white-space: nowrap; } .nd-hr-staff-filters .nd-input, .nd-hr-staff-toolbar .nd-input { min-height: 2.25rem; } .nd-hr-staff-filter-chip { display: inline-flex; align-items: center; border: 1px solid #e2e8f0; border-radius: 9999px; background: #fff; color: #475569; font-size: .625rem; font-weight: 600; line-height: 1.2; padding: .16rem .45rem; min-height: 1.55rem; cursor: pointer; transition: border-color .15s ease, background .15s ease, color .15s ease, box-shadow .15s ease, transform .15s ease; } .nd-hr-staff-filter-chip:hover { transform: translateY(-1px); } .nd-hr-staff-filter-chip.is-tone-indigo { border-color: #c7d2fe; background: linear-gradient(180deg, #eef2ff 0%, #e0e7ff 100%); color: #4338ca; } .nd-hr-staff-filter-chip.is-tone-indigo.is-selected { border-color: #6366f1; background: linear-gradient(135deg, #818cf8 0%, #6366f1 100%); color: #fff; box-shadow: 0 6px 14px -8px rgba(99, 102, 241, .65); } .nd-hr-staff-filter-chip.is-tone-emerald { border-color: #a7f3d0; background: linear-gradient(180deg, #ecfdf5 0%, #d1fae5 100%); color: #047857; } .nd-hr-staff-filter-chip.is-tone-emerald.is-selected { border-color: #10b981; background: linear-gradient(135deg, #34d399 0%, #059669 100%); color: #fff; box-shadow: 0 6px 14px -8px rgba(16, 185, 129, .55); } .nd-hr-staff-filter-chip.is-tone-amber { border-color: #fde68a; background: linear-gradient(180deg, #fffbeb 0%, #fef3c7 100%); color: #b45309; } .nd-hr-staff-filter-chip.is-tone-amber.is-selected { border-color: #f59e0b; background: linear-gradient(135deg, #fcd34d 0%, #d97706 100%); color: #fff; box-shadow: 0 6px 14px -8px rgba(245, 158, 11, .55); } .nd-hr-staff-filter-chip.is-tone-orange { border-color: #fdba74; background: linear-gradient(180deg, #fff7ed 0%, #ffedd5 100%); color: #c2410c; } .nd-hr-staff-filter-chip.is-tone-orange.is-selected { border-color: #f97316; background: linear-gradient(135deg, #fb923c 0%, #ea580c 100%); color: #fff; box-shadow: 0 6px 14px -8px rgba(249, 115, 22, .55); } .nd-hr-staff-filter-chip.is-tone-rose { border-color: #fecdd3; background: linear-gradient(180deg, #fff1f2 0%, #ffe4e6 100%); color: #be123c; } .nd-hr-staff-filter-chip.is-tone-rose.is-selected { border-color: #f43f5e; background: linear-gradient(135deg, #fb7185 0%, #e11d48 100%); color: #fff; box-shadow: 0 6px 14px -8px rgba(244, 63, 94, .55); } .nd-hr-staff-filter-chip.is-tone-sky { border-color: #bae6fd; background: linear-gradient(180deg, #f0f9ff 0%, #e0f2fe 100%); color: #0369a1; } .nd-hr-staff-filter-chip.is-tone-sky.is-selected { border-color: #0ea5e9; background: linear-gradient(135deg, #38bdf8 0%, #0284c7 100%); color: #fff; box-shadow: 0 6px 14px -8px rgba(14, 165, 233, .55); } .nd-hr-staff-filter-chip.is-tone-teal { border-color: #99f6e4; background: linear-gradient(180deg, #f0fdfa 0%, #ccfbf1 100%); color: #0f766e; } .nd-hr-staff-filter-chip.is-tone-teal.is-selected { border-color: #14b8a6; background: linear-gradient(135deg, #2dd4bf 0%, #0d9488 100%); color: #fff; box-shadow: 0 6px 14px -8px rgba(20, 184, 166, .55); } .nd-hr-staff-filter-chip.is-tone-slate { border-color: #cbd5e1; background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%); color: #475569; } .nd-hr-staff-filter-chip.is-tone-slate.is-selected { border-color: #64748b; background: linear-gradient(135deg, #94a3b8 0%, #475569 100%); color: #fff; box-shadow: 0 6px 14px -8px rgba(100, 116, 139, .55); } @media (max-width: 640px) { .nd-hr-staff-toolbar-primary { flex: 1 1 100%; } .nd-hr-staff-toolbar-search { flex: 1 1 100%; max-width: none; } .nd-hr-staff-toolbar-actions { width: auto; justify-content: flex-end; margin-left: auto; } .nd-hr-staff-toolbar-filters { width: 100%; flex: 1 1 100%; padding-top: .15rem; border-top: 1px solid #e2e8f0; } .nd-hr-staff-toolbar-filters:not(.is-open) { display: none; } .nd-hr-staff-filter-group { width: 100%; border-left: 0; padding-left: 0; } .nd-hr-staff-filter-chip { min-height: 2rem; padding-top: .28rem; padding-bottom: .28rem; } } @media (min-width: 641px) { .nd-hr-staff-toolbar-filters { justify-content: space-between; } .nd-hr-staff-toolbar-filters .nd-hr-staff-filter-group { flex: 1 1 0; min-width: 7rem; border-left: 0; padding-left: 0; } .nd-hr-staff-filter-group { display: inline-flex; } } .nd-hr-staff-views { background: radial-gradient(circle at 1px 1px, rgba(99, 102, 241, .05) 1px, transparent 0) 0 0 / 22px 22px, linear-gradient(180deg, #fafaff 0%, #ffffff 100%); } .nd-hr-staff-list { border-top: 1px solid rgba(99, 102, 241, .1); } .nd-hr-staff-table tbody tr { transition: background .15s ease; } .nd-hr-staff-table tbody tr:hover { background: linear-gradient(90deg, rgba(238, 242, 255, .65) 0%, rgba(255, 255, 255, .2) 100%); } .nd-hr-staff-table tbody tr td:first-child { box-shadow: inset 3px 0 0 #6366f1; } .nd-hr-staff-table tbody tr.is-status-active td:first-child { box-shadow: inset 3px 0 0 #059669; } .nd-hr-staff-table tbody tr.is-status-leave td:first-child { box-shadow: inset 3px 0 0 #d97706; } .nd-hr-staff-table tbody tr.is-status-suspended td:first-child { box-shadow: inset 3px 0 0 #ea580c; } .nd-hr-staff-table tbody tr.is-status-terminated td:first-child { box-shadow: inset 3px 0 0 #e11d48; } .nd-hr-staff-row { position: relative; transition: background .15s ease, box-shadow .15s ease; } .nd-hr-staff-row::before { content: ''; position: absolute; left: 0; top: .65rem; bottom: .65rem; width: 3px; border-radius: 9999px; background: #6366f1; } .nd-hr-staff-row.is-status-active::before { background: linear-gradient(180deg, #34d399 0%, #059669 100%); } .nd-hr-staff-row.is-status-leave::before { background: linear-gradient(180deg, #fcd34d 0%, #d97706 100%); } .nd-hr-staff-row.is-status-suspended::before { background: linear-gradient(180deg, #fb923c 0%, #ea580c 100%); } .nd-hr-staff-row.is-status-terminated::before { background: linear-gradient(180deg, #fb7185 0%, #e11d48 100%); } .nd-hr-staff-row:hover { background: linear-gradient(90deg, rgba(238, 242, 255, .65) 0%, rgba(255, 255, 255, .2) 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8); } .nd-hr-staff-avatar { width: 2.25rem; height: 2.25rem; border-radius: .65rem; display: inline-flex; align-items: center; justify-content: center; font-size: .78rem; font-weight: 800; color: #312e81; background: linear-gradient(135deg, #e0e7ff 0%, #c7d2fe 100%); border: 1px solid #a5b4fc; box-shadow: 0 4px 10px -6px rgba(99, 102, 241, .45); flex-shrink: 0; } .nd-hr-staff-avatar--lg { width: 2.5rem; height: 2.5rem; font-size: .85rem; } .nd-hr-staff-grid-card { border: 1px solid #c7d2fe; background: linear-gradient(165deg, #ffffff 0%, #f5f3ff 100%); box-shadow: 0 10px 24px -16px rgba(99, 102, 241, .35); transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; } .nd-hr-staff-grid-card:hover { transform: translateY(-2px); box-shadow: 0 16px 30px -14px rgba(99, 102, 241, .4); border-color: #a5b4fc; } .nd-hr-staff-grid-card.is-status-active { border-color: #6ee7b7; background: linear-gradient(165deg, #ffffff 0%, #ecfdf5 100%); } .nd-hr-staff-grid-card.is-status-leave { border-color: #fcd34d; background: linear-gradient(165deg, #ffffff 0%, #fffbeb 100%); } .nd-hr-staff-grid-card.is-status-suspended { border-color: #fdba74; background: linear-gradient(165deg, #ffffff 0%, #fff7ed 100%); } .nd-hr-staff-grid-card.is-status-terminated { border-color: #fda4af; background: linear-gradient(165deg, #ffffff 0%, #fff1f2 100%); } /* Safety file list: scrollable action row on phones */ .nd-safety-view .nd-safety-actions { gap: .35rem; } .nd-safety-view .nd-safety-actions .nd-btn.nd-btn-sm { min-width: 2.5rem; min-height: 2.5rem; padding-left: .5rem; padding-right: .5rem; } @media (max-width: 767px) { .nd-safety-view .nd-safety-row { align-items: stretch; } .nd-safety-view .nd-safety-actions { display: flex; flex-wrap: nowrap; align-items: center; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; width: 100%; max-width: 100%; padding-bottom: .1rem; } .nd-safety-view .nd-safety-actions::-webkit-scrollbar { display: none; } .nd-safety-view .nd-safety-actions .nd-btn { flex: 0 0 auto; white-space: nowrap; } .nd-safety-view .nd-safety-actions .nd-btn.nd-btn-sm { min-width: 2.75rem; min-height: 2.75rem; } } /* Safety files list — spreadsheet-style table */ .nd-safety-sheet-wrap { overflow-x: auto; overflow-y: visible; -webkit-overflow-scrolling: touch; } .nd-safety-sheet { width: max-content; min-width: 100%; border-collapse: separate; border-spacing: 0; } .nd-safety-sheet thead th { background: linear-gradient(180deg, #fffbeb 0%, #fef3c7 100%); border-bottom: 2px solid #fcd34d; color: #b45309; font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: .55rem .65rem; white-space: nowrap; box-shadow: 0 1px 0 #fde68a; } .nd-safety-sheet tbody td { border-bottom: 1px solid #e2e8f0; border-right: 1px solid #f1f5f9; vertical-align: middle; padding: .5rem .6rem; background: #fff; } .nd-safety-sheet tbody tr:nth-child(even) td { background: #fffbeb; } .nd-safety-sheet tbody tr:hover td { background: #fef3c7; } .nd-safety-sheet tbody tr.is-status-complete td:first-child { box-shadow: inset 3px 0 0 #059669; } .nd-safety-sheet tbody tr.is-status-progress td:first-child { box-shadow: inset 3px 0 0 #d97706; } .nd-safety-sheet tbody tr.is-status-alert td:first-child { box-shadow: inset 3px 0 0 #94a3b8; } .nd-safety-sheet-title { min-width: 10rem; max-width: 16rem; } .nd-hr-signed-chip { display: inline-flex; align-items: center; gap: .35rem; max-width: 100%; border: 1px solid #cbd5e1; background: #f8fafc; border-radius: 9999px; padding: .18rem .55rem; } .nd-hr-signed-chip [data-lucide], .nd-hr-signed-chip svg.lucide { color: #64748b; width: .85rem; height: .85rem; } .nd-hr-timecard-filters .nd-input:focus-visible, .nd-hr-timecard-filters .nd-btn:focus-visible, .nd-hr-timecard-list-filters .nd-input:focus-visible, .nd-hr-timecard-list-filters .nd-btn:focus-visible, .nd-hr-timecard-actions .nd-btn:focus-visible { outline: 2px solid #0ea5e9; outline-offset: 2px; } .nd-hr-timecard-digital-grid th, .nd-hr-timecard-digital-grid td { white-space: nowrap; } .nd-hr-timecard-digital-grid { width: max-content; min-width: 100%; } .nd-hr-timecard-digital-grid thead th { font-weight: 600; } .nd-hr-timecard-date-head { min-width: 4.5rem; line-height: 1.25; } .nd-hr-timecard-rate-legend summary { list-style: none; } .nd-hr-timecard-rate-legend summary::-webkit-details-marker { display: none; } .nd-hr-timecard-rate-legend summary::before { content: '▸ '; display: inline-block; transition: transform 0.15s ease; } .nd-hr-timecard-rate-legend[open] summary::before { transform: rotate(90deg); } .nd-hr-timecard-rate-legend__list { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.35rem; } @media (min-width: 768px) { .nd-hr-timecard-rate-legend summary { pointer-events: none; } .nd-hr-timecard-rate-legend summary::before { display: none; } } .nd-bundles-table { width: max-content; min-width: 100%; } .nd-bundles-view .nd-card-hover { transition: border-color .15s ease, box-shadow .15s ease; } .nd-bundles-view .nd-card-hover:hover { border-color: #99f6e4; box-shadow: 0 8px 24px -16px rgba(13, 148, 136, .35); } /* ------------------------------------------------------------------- Compliance cards — premium checklist rows (Slack/Asana-style density) ------------------------------------------------------------------- */ .nd-compliance-view { background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%); gap: 0.875rem; } .nd-compliance-sheet-wrap { overflow-x: auto; overflow-y: visible; -webkit-overflow-scrolling: touch; } .nd-compliance-sheet { width: max-content; min-width: 100%; border-collapse: separate; border-spacing: 0; } .nd-compliance-sheet thead th { background: linear-gradient(180deg, #f0fdfa 0%, #ecfeff 100%); border-bottom: 2px solid #99f6e4; color: #0f766e; font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: .55rem .65rem; white-space: nowrap; box-shadow: 0 1px 0 #ccfbf1; } .nd-compliance-sheet tbody td { border-bottom: 1px solid #e2e8f0; border-right: 1px solid #f1f5f9; vertical-align: middle; padding: .45rem .55rem; background: #fff; } .nd-compliance-sheet tbody tr:nth-child(even) td { background: #fafefe; } .nd-compliance-sheet tbody tr:hover td { background: #f0fdfa; } .nd-compliance-sheet tbody tr.is-status-complete td:first-child { box-shadow: inset 3px 0 0 #059669; } .nd-compliance-sheet tbody tr.is-status-progress td:first-child { box-shadow: inset 3px 0 0 #d97706; } .nd-compliance-sheet tbody tr.is-status-alert td:first-child { box-shadow: inset 3px 0 0 #e11d48; } .nd-compliance-sheet-item { min-width: 10rem; } /* Tickets list — spreadsheet-style table (matches compliance list vibe) */ .nd-ticket-sheet-wrap { overflow-x: auto; overflow-y: visible; -webkit-overflow-scrolling: touch; } .nd-ticket-sheet { width: max-content; min-width: 100%; border-collapse: separate; border-spacing: 0; } .nd-ticket-sheet thead th { background: linear-gradient(180deg, #f0f9ff 0%, #eff6ff 100%); border-bottom: 2px solid #93c5fd; color: #1d4ed8; font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: .55rem .65rem; white-space: nowrap; box-shadow: 0 1px 0 #dbeafe; } .nd-ticket-sheet tbody td { border-bottom: 1px solid #e2e8f0; border-right: 1px solid #f1f5f9; vertical-align: middle; padding: .5rem .6rem; background: #fff; } .nd-ticket-sheet tbody tr:nth-child(even) td { background: #f8fafc; } .nd-ticket-sheet tbody tr:hover td { background: #eff6ff; } .nd-ticket-sheet tbody tr.is-status-complete td:first-child { box-shadow: inset 3px 0 0 #059669; } .nd-ticket-sheet tbody tr.is-status-progress td:first-child { box-shadow: inset 3px 0 0 #d97706; } .nd-ticket-sheet tbody tr.is-status-alert td:first-child { box-shadow: inset 3px 0 0 #e11d48; } .nd-ticket-sheet-subject { min-width: 10rem; max-width: 18rem; } /* Tender listings — spreadsheet-style table (orange accent) */ .nd-tender-sheet-wrap { overflow-x: auto; overflow-y: visible; -webkit-overflow-scrolling: touch; scrollbar-gutter: stable; max-width: 100%; width: 100%; min-width: 0; } .nd-card:has(.nd-tender-sheet-wrap) { max-width: 100%; min-width: 0; overflow-x: auto; overflow-y: visible; } .nd-tender-sheet { width: max-content; min-width: max(100%, 1180px); border-collapse: separate; border-spacing: 0; } .nd-tender-sheet thead th { background: linear-gradient(180deg, #fff7ed 0%, #ffedd5 100%); border-bottom: 2px solid #fdba74; color: #c2410c; font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: .55rem .65rem; white-space: nowrap; box-shadow: 0 1px 0 #fed7aa; } .nd-tender-sheet tbody td { border-bottom: 1px solid #e2e8f0; border-right: 1px solid #f1f5f9; vertical-align: middle; padding: .5rem .6rem; background: #fff; } .nd-tender-sheet tbody tr:nth-child(even) td { background: #fffaf5; } .nd-tender-sheet tbody tr:hover td { background: #fff7ed; } .nd-tender-sheet-title { min-width: 12rem; max-width: 22rem; } /* Tender list: chip cells stay on one line so the table scrolls sideways instead of stacking rows. */ .nd-tender-sheet-chips { display: inline-flex; flex-wrap: nowrap !important; align-items: center; gap: .25rem; max-width: none !important; white-space: nowrap; } .nd-tender-sheet-chips > * { flex: 0 0 auto; white-space: nowrap; max-width: none !important; } .nd-tender-sheet .nd-tender-col-type { min-width: 5.5rem; white-space: nowrap; } .nd-tender-sheet .nd-tender-col-provinces { min-width: 10rem; white-space: nowrap; } .nd-tender-sheet .nd-tender-col-areas { min-width: 12rem; white-space: nowrap; } .nd-tender-sheet .nd-tender-col-closing { min-width: 6.5rem; white-space: nowrap; } .nd-tender-sheet .nd-tender-col-cidb { min-width: 12rem; white-space: nowrap; } .nd-tender-sheet .nd-tender-col-status { min-width: 7.5rem; white-space: nowrap; } .nd-tender-sheet .nd-tender-col-actions { min-width: 8.5rem; white-space: nowrap; } /* Market filter panel: match TYPE (nd-input-sm) — compact font + padding */ #market-filters-panel .nd-input, #market-filters-panel .nd-select, #market-filters-panel .nd-select-trigger, #market-filters-panel .nd-date-display, #market-filters-panel .nd-date-display .nd-date-label, #market-filters-panel input[type="date"].nd-input, #admin-market-filters-panel .nd-input, #admin-market-filters-panel .nd-select, #admin-market-filters-panel .nd-select-trigger, #admin-market-filters-panel .nd-date-display, #admin-market-filters-panel .nd-date-display .nd-date-label, #admin-market-filters-panel input[type="date"].nd-input, #nd-content #market-filters-panel .nd-input, #nd-content #market-filters-panel .nd-select, #nd-content #market-filters-panel .nd-select-trigger, #nd-content #market-filters-panel .nd-date-display, #nd-content #market-filters-panel .nd-date-display .nd-date-label, #nd-content #market-filters-panel input[type="date"].nd-input, #nd-content #admin-market-filters-panel .nd-input, #nd-content #admin-market-filters-panel .nd-select, #nd-content #admin-market-filters-panel .nd-select-trigger, #nd-content #admin-market-filters-panel .nd-date-display, #nd-content #admin-market-filters-panel .nd-date-display .nd-date-label, #nd-content #admin-market-filters-panel input[type="date"].nd-input { font-size: .8125rem !important; line-height: 1.25 !important; font-family: var(--nd-form-font-family) !important; padding: .35rem .65rem !important; min-height: 0 !important; height: auto !important; box-sizing: border-box; } #market-filters-panel .nd-date-display, #admin-market-filters-panel .nd-date-display, #nd-content #market-filters-panel .nd-date-display, #nd-content #admin-market-filters-panel .nd-date-display { display: flex !important; align-items: center !important; gap: .4rem !important; } #market-filters-panel .nd-date-display .nd-date-icon, #admin-market-filters-panel .nd-date-display .nd-date-icon, #nd-content #market-filters-panel .nd-date-display .nd-date-icon, #nd-content #admin-market-filters-panel .nd-date-display .nd-date-icon { font-size: .9rem !important; line-height: 1 !important; } #market-filters-panel .nd-date-display .nd-date-icon [data-lucide], #market-filters-panel .nd-date-display .nd-date-icon svg.lucide, #admin-market-filters-panel .nd-date-display .nd-date-icon [data-lucide], #admin-market-filters-panel .nd-date-display .nd-date-icon svg.lucide, #nd-content #market-filters-panel .nd-date-display .nd-date-icon [data-lucide], #nd-content #market-filters-panel .nd-date-display .nd-date-icon svg.lucide, #nd-content #admin-market-filters-panel .nd-date-display .nd-date-icon [data-lucide], #nd-content #admin-market-filters-panel .nd-date-display .nd-date-icon svg.lucide { width: .9rem !important; height: .9rem !important; } #market-filters-panel .nd-select-trigger .nd-select-chev [data-lucide], #market-filters-panel .nd-select-trigger .nd-select-chev svg.lucide, #admin-market-filters-panel .nd-select-trigger .nd-select-chev [data-lucide], #admin-market-filters-panel .nd-select-trigger .nd-select-chev svg.lucide, #nd-content #market-filters-panel .nd-select-trigger .nd-select-chev [data-lucide], #nd-content #market-filters-panel .nd-select-trigger .nd-select-chev svg.lucide, #nd-content #admin-market-filters-panel .nd-select-trigger .nd-select-chev [data-lucide], #nd-content #admin-market-filters-panel .nd-select-trigger .nd-select-chev svg.lucide { width: .9rem; height: .9rem; } /* Tender detail modal — table badge colours + labelled icons */ .nd-tender-detail__head { background: linear-gradient(180deg, #fff7ed 0%, #ffffff 100%); } .nd-tender-detail__title { color: #0f172a; line-height: 1.35; } .nd-tender-detail__title-icon { width: 1.15rem; height: 1.15rem; margin-top: .15rem; color: #c2410c; stroke-width: 2; flex-shrink: 0; } .nd-tender-detail__body { padding: .75rem 1rem; border-radius: var(--nd-r-md); border: 1px solid #fed7aa; background: #fffaf5; color: #334155; } .nd-tender-detail__meta { display: grid; grid-template-columns: 1fr; gap: .85rem; } @media (min-width: 640px) { .nd-tender-detail__meta { grid-template-columns: 1fr 1fr; } .nd-tender-detail__field--wide { grid-column: 1 / -1; } } .nd-tender-detail__label { display: flex; align-items: center; gap: .35rem; font-size: .68rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #9a3412; margin-bottom: .35rem; } .nd-tender-detail__label svg { width: .85rem; height: .85rem; stroke-width: 2.25; color: #ea580c; flex-shrink: 0; } .nd-tender-detail__chips { display: flex; flex-wrap: wrap; gap: .35rem; } .nd-tender-detail__value { font-size: .8125rem; color: #334155; } .nd-tender-detail__value-row { display: flex; align-items: center; gap: .4rem; font-size: .8125rem; color: #334155; } .nd-tender-detail__inline-icon { width: .9rem; height: .9rem; color: #64748b; stroke-width: 2; flex-shrink: 0; } .nd-tender-detail__contact .nd-tender-detail__label { margin-bottom: 0; } .nd-tender-detail-page { max-width: 100%; } /* Homepage + related-tender continuous marquee (no visible scrollbar). */ .nd-home-tender-marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent); mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent); } .nd-home-tender-marquee-track { display: flex; gap: 1rem; width: max-content; will-change: transform; } .nd-home-tender-marquee-track.is-animated { animation: nd-home-tender-glide var(--nd-tender-glide-duration, 48s) linear infinite; } .nd-home-tender-marquee:hover .nd-home-tender-marquee-track.is-animated { animation-play-state: paused; } @keyframes nd-home-tender-glide { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } } .nd-home-tender-card-link { display: block; text-decoration: none; color: inherit; flex: 0 0 min(88vw, 320px); width: min(88vw, 320px); } .nd-home-tender-slide { flex: 0 0 min(88vw, 320px); width: min(88vw, 320px); } @media (min-width: 768px) { .nd-home-tender-card-link, .nd-home-tender-slide { flex: 0 0 340px; width: 340px; } } @media (min-width: 1280px) { .nd-home-tender-card-link, .nd-home-tender-slide { flex: 0 0 360px; width: 360px; } } @media (prefers-reduced-motion: reduce) { .nd-home-tender-marquee { overflow-x: auto; -webkit-mask-image: none; mask-image: none; scrollbar-width: none; -ms-overflow-style: none; } .nd-home-tender-marquee::-webkit-scrollbar { display: none; } .nd-home-tender-marquee-track.is-animated { animation: none; } } .nd-public-back-link { display: inline-flex; align-items: center; gap: .375rem; font-size: .875rem; line-height: 1.25rem; color: #64748b; text-decoration: none; margin-bottom: 1rem; } .nd-public-back-link:hover { color: #0369a1; } .nd-public-back-link [data-lucide], .nd-public-back-link svg { width: 1rem; height: 1rem; flex-shrink: 0; } /* Tasks list — spreadsheet-style table */ .nd-tasks-sheet-wrap { overflow-x: auto; overflow-y: visible; -webkit-overflow-scrolling: touch; } .nd-tasks-sheet { width: max-content; min-width: 100%; border-collapse: separate; border-spacing: 0; } .nd-tasks-sheet thead th { background: linear-gradient(180deg, #f0f9ff 0%, #ecfeff 100%); border-bottom: 2px solid #7dd3fc; color: #0369a1; font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: .55rem .65rem; white-space: nowrap; box-shadow: 0 1px 0 #bae6fd; } .nd-tasks-sheet tbody td { border-bottom: 1px solid #e2e8f0; border-right: 1px solid #f1f5f9; vertical-align: middle; padding: .5rem .6rem; background: #fff; } .nd-tasks-sheet tbody tr:nth-child(even) td { background: #f8fafc; } .nd-tasks-sheet tbody tr:not(.nd-tasks-sheet-section-row):hover td { background: #f0f9ff; } .nd-tasks-sheet tbody tr.is-overdue td:first-child { box-shadow: inset 3px 0 0 #e11d48; } .nd-tasks-sheet tbody tr.is-highlighted td { background: linear-gradient(90deg, #f5f3ff 0%, #ffffff 100%); } .nd-tasks-sheet tbody tr.is-highlighted td:first-child { box-shadow: inset 3px 0 0 #8b5cf6; } .nd-tasks-sheet-section-row td { padding: .6rem .75rem; font-size: .7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; border-bottom: 1px solid transparent; } .nd-tasks-sheet-section-row.is-overdue td { background: linear-gradient(90deg, #fff1f2 0%, #ffe4e6 100%); border-top: 2px solid #fda4af; border-bottom: 1px solid #fecdd3; color: #be123c; box-shadow: inset 4px 0 0 #f43f5e; } .nd-tasks-sheet-section-row.is-overdue .nd-tasks-section-count { background: #fecdd3; color: #9f1239; } .nd-tasks-sheet-section-row.is-today td { background: linear-gradient(90deg, #fffbeb 0%, #fef3c7 100%); border-top: 2px solid #fcd34d; border-bottom: 1px solid #fde68a; color: #b45309; box-shadow: inset 4px 0 0 #f59e0b; } .nd-tasks-sheet-section-row.is-today .nd-tasks-section-count { background: #fde68a; color: #92400e; } .nd-tasks-sheet-section-row.is-upcoming td { background: linear-gradient(90deg, #eff6ff 0%, #dbeafe 100%); border-top: 2px solid #93c5fd; border-bottom: 1px solid #bfdbfe; color: #1d4ed8; box-shadow: inset 4px 0 0 #3b82f6; } .nd-tasks-sheet-section-row.is-upcoming .nd-tasks-section-count { background: #bfdbfe; color: #1e40af; } .nd-tasks-sheet-section-row.is-nodate td, .nd-tasks-sheet-section-row.is-all td { background: linear-gradient(90deg, #f8fafc 0%, #f1f5f9 100%); border-top: 2px solid #cbd5e1; border-bottom: 1px solid #e2e8f0; color: #475569; box-shadow: inset 4px 0 0 #94a3b8; } .nd-tasks-sheet-section-row.is-nodate .nd-tasks-section-count, .nd-tasks-sheet-section-row.is-all .nd-tasks-section-count { background: #e2e8f0; color: #334155; } .nd-tasks-sheet-section-row:hover td { filter: brightness(0.98); } .nd-tasks-sheet-task { min-width: 10rem; max-width: 18rem; } /* Spreadsheet first column: sticky on horizontal scroll — tablet/desktop only. On phones the whole table scrolls sideways together (payslip-list pattern). */ @media (min-width: 641px) { .nd-compliance-sheet tbody td.nd-compliance-sheet-item, .nd-ticket-sheet tbody td.nd-ticket-sheet-subject, .nd-tasks-sheet tbody td.nd-tasks-sheet-task, .nd-safety-sheet tbody td.nd-safety-sheet-title, .nd-tender-sheet tbody td.nd-tender-sheet-title { position: sticky; left: 0; z-index: 1; } .nd-compliance-sheet thead th.nd-compliance-sheet-sticky, .nd-ticket-sheet thead th.nd-ticket-sheet-sticky, .nd-tasks-sheet thead th.nd-tasks-sheet-sticky, .nd-safety-sheet thead th.nd-safety-sheet-sticky, .nd-tender-sheet thead th.nd-tender-sheet-sticky { position: sticky; left: 0; z-index: 4; } .nd-hr-timecard-digital-grid .nd-hr-timecard-sticky-num { position: sticky; left: 0; z-index: 2; } .nd-hr-timecard-digital-grid .nd-hr-timecard-sticky-emp { position: sticky; left: 4.5rem; z-index: 2; } } .nd-compliance-cell-input { min-width: 6.5rem; padding: .32rem .45rem; font-size: .8rem; border-radius: .4rem; border-color: #cbd5e1; background: #fff; } .nd-compliance-cell-input:focus { border-color: #14b8a6; box-shadow: 0 0 0 2px rgba(20, 184, 166, .18); background: #fff; } .nd-compliance-card { position: relative; overflow: visible; border: 1px solid #e2e8f0; border-radius: 1rem; background: #fff; padding: 1rem 1rem 1.125rem 1.25rem; box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 10px 28px -18px rgba(15, 23, 42, .18); transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease; } .nd-compliance-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; } .nd-compliance-card__identity { display: flex; align-items: flex-start; gap: 0.75rem; min-width: 0; flex: 1; } .nd-compliance-card__icon { width: 2.5rem; height: 2.5rem; border-radius: 0.75rem; border: 1px solid #e2e8f0; background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%); color: #64748b; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .nd-compliance-card__icon [data-lucide], .nd-compliance-card__icon svg.lucide { width: 1rem; height: 1rem; } .nd-compliance-card__title-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem; min-width: 0; } .nd-compliance-card__title { margin: 0; font-size: 0.98rem; font-weight: 600; color: #0f172a; line-height: 1.35; } .nd-compliance-status-pill, .nd-compliance-required-pill { display: inline-flex; align-items: center; border-radius: 999px; border: 1px solid #e2e8f0; background: #f8fafc; color: #475569; padding: 0.12rem 0.55rem; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.02em; text-transform: lowercase; } .nd-compliance-status-pill.is-complete { border-color: #a7f3d0; background: #ecfdf5; color: #047857; } .nd-compliance-status-pill.is-progress { border-color: #fde68a; background: #fffbeb; color: #b45309; } .nd-compliance-status-pill.is-alert { border-color: #fecaca; background: #fff1f2; color: #be123c; } .nd-compliance-required-pill { border-color: #e2e8f0; background: #fff; color: #64748b; } .nd-compliance-card__desc { margin: 0.35rem 0 0; font-size: 0.78rem; line-height: 1.45; color: #64748b; } .nd-compliance-card__delete { color: #94a3b8; flex-shrink: 0; } .nd-compliance-card__delete:hover { color: #e11d48; background: #fff1f2; } .nd-compliance-fields { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.875rem; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid #f1f5f9; } @media (min-width: 640px) { .nd-compliance-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1024px) { .nd-compliance-view:not(.grid) .nd-compliance-fields { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .nd-compliance-field { display: flex; flex-direction: column; gap: 0.35rem; min-width: 0; } .nd-compliance-field > label { display: block; margin: 0; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: #64748b; } .nd-compliance-field--attach { grid-column: 1 / -1; } .nd-compliance-attach-panel { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; padding: 0.65rem 0.85rem; border-radius: 0.75rem; border: 1px dashed #dbe5f0; background: linear-gradient(180deg, #fbfdff 0%, #f8fafc 100%); } .nd-compliance-attach-main { flex: 1 1 12rem; } .nd-compliance-attach-file { display: inline-flex; align-items: center; gap: 0.4rem; max-width: 100%; font-size: 0.82rem; font-weight: 500; color: #047857; } .nd-compliance-attach-file [data-lucide], .nd-compliance-attach-file svg.lucide { width: 0.9rem; height: 0.9rem; flex-shrink: 0; } .nd-compliance-attach-empty { font-size: 0.82rem; color: #94a3b8; } .nd-compliance-attach-actions { display: inline-flex; align-items: center; gap: 0.35rem; flex-shrink: 0; } .nd-compliance-card:hover { transform: translateY(-1px); box-shadow: 0 2px 6px rgba(15, 23, 42, .05), 0 16px 34px -20px rgba(15, 23, 42, .22); border-color: #cbd5e1; } .nd-compliance-card::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 4px; border-radius: 1rem 0 0 1rem; background: linear-gradient(180deg, rgba(14,165,233,.9), rgba(20,184,166,.85), rgba(249,115,22,.85)); } .nd-compliance-card.is-status-complete::before { background: linear-gradient(180deg, #34d399, #10b981); } .nd-compliance-card.is-status-progress::before { background: linear-gradient(180deg, #fbbf24, #f59e0b); } .nd-compliance-card.is-status-alert::before { background: linear-gradient(180deg, #fb7185, #e11d48); } .nd-compliance-card .nd-input { background: #fff; min-height: 2.35rem; } .nd-compliance-card .nd-input:focus { box-shadow: 0 0 0 3px rgba(14,165,233,.12); } .nd-compliance-card .nd-compliance-attach .nd-btn, .nd-compliance-attach-actions .nd-btn { min-width: 0; } .nd-vault-form-attach { width: 100%; } .nd-vault-form-attach .nd-compliance-attach-panel { margin-top: 0.25rem; } .nd-vault-picker-kicker { line-height: 1.3; margin-bottom: 0.1rem; } .nd-compliance-card .line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* Keep date picker popovers above adjacent compliance cards. */ .nd-compliance-card .flatpickr-calendar, .nd-compliance-card .datepicker-dropdown { z-index: 10050; } /* Compliance inline toolbar (business dashboard) */ .nd-compliance-toolbar { border: 1px solid #e2e8f0; background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%); box-shadow: 0 12px 28px -24px rgba(15, 23, 42, .55); } .nd-compliance-toolbar-inline { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem .55rem; padding: .5rem .75rem; } .nd-compliance-toolbar-search { flex: 1 1 auto; min-width: 0; max-width: none; } .nd-compliance-toolbar-actions { display: inline-flex; align-items: center; gap: .35rem; flex-shrink: 0; } .nd-compliance-filter-group { display: inline-flex; align-items: center; gap: .35rem; flex-wrap: wrap; min-width: 0; padding-left: .55rem; border-left: 1px solid #e2e8f0; } .nd-compliance-filter-label { font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #64748b; flex-shrink: 0; white-space: nowrap; } .nd-compliance-chip { display: inline-flex; align-items: center; border-radius: 9999px; border: 1px solid #e2e8f0; padding: .2rem .55rem; font-size: .68rem; font-weight: 600; cursor: pointer; transition: background .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease; } .nd-compliance-filter-hint { margin: 0; padding: 0 .75rem .45rem; font-size: .68rem; line-height: 1.35; color: #64748b; } .nd-compliance-chip-row { width: 100%; flex-wrap: wrap; gap: 0.5rem; } @media (max-width: 640px) { .nd-compliance-toolbar-search { flex: 1 1 100%; max-width: none; } .nd-compliance-toolbar-actions { width: 100%; justify-content: flex-end; } .nd-compliance-filter-group { width: 100%; border-left: 0; padding-left: 0; padding-top: .15rem; border-top: 1px solid #eef2f7; } .nd-compliance-filter-group:not(.is-open) { display: none; } .nd-compliance-chip { min-height: 2rem; padding-top: .28rem; padding-bottom: .28rem; } } @media (min-width: 641px) { .nd-compliance-filter-group { display: inline-flex; } } @media (max-width: 767px) { .nd-compliance-view { padding: .85rem !important; } .nd-compliance-card { padding: 1rem 1rem 1rem 1.2rem !important; border-radius: 1rem; } .nd-compliance-attach-panel { align-items: stretch; flex-direction: column; } .nd-compliance-attach-actions { width: 100%; justify-content: flex-end; } .nd-compliance-chip-row { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; padding-bottom: .15rem; } .nd-compliance-filter-bar .nd-compliance-chip-row, .nd-compliance-filter-group { overflow-x: visible; flex-wrap: wrap; padding-bottom: 0; } .nd-compliance-chip-row > *, .nd-compliance-filter-group > * { flex-shrink: 1; } .nd-compliance-view .nd-filter-bar .nd-input-wrap, .nd-compliance-filter-bar .nd-input-wrap, .nd-compliance-toolbar-search { width: 100%; } } /* ------------------------------------------------------------------- Vault block view ------------------------------------------------------------------- */ .nd-vault-grid { align-items: stretch; } .nd-vault-card { position: relative; overflow: hidden; border-radius: 1.1rem; background: radial-gradient(circle at 0 0, rgba(14,165,233,.08), transparent 35%), radial-gradient(circle at 100% 0, rgba(249,115,22,.07), transparent 32%), #fff; transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease; } .nd-vault-card::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 4px; background: linear-gradient(180deg, rgba(14,165,233,.9), rgba(20,184,166,.85), rgba(249,115,22,.85)); } .nd-vault-card:hover { transform: translateY(-2px); box-shadow: 0 18px 38px -24px rgba(15, 23, 42, .32); border-color: #cbd5e1; } .nd-vault-card-icon { width: 2.5rem; height: 2.5rem; border-radius: .85rem; border: 1px solid #dbeafe; background: linear-gradient(180deg, #f8fbff 0%, #eef6ff 100%); color: #0ea5e9; display: inline-flex; align-items: center; justify-content: center; flex: none; box-shadow: inset 0 1px 0 rgba(255,255,255,.9); } .nd-vault-card-icon [data-lucide], .nd-vault-card-icon svg.lucide { width: 1.05rem; height: 1.05rem; } .nd-vault-card .nd-btn { border-color: #dbe5f0; } .nd-vault-card .nd-btn-secondary { background: #fff; } .nd-vault-card .nd-btn-secondary:hover:not(:disabled) { background: #f8fbff; } .nd-vault-card .nd-btn.text-red-600 { border-color: #fecdd3; background: #fff1f2; } .nd-vault-card .nd-btn.text-red-600:hover:not(:disabled) { background: #ffe4e6; border-color: #fda4af; } @media (max-width: 767px) { .nd-vault-grid { gap: .85rem; } .nd-vault-card { padding: .9rem !important; border-radius: .95rem; } .nd-vault-card .nd-btn { flex: 1 1 auto; justify-content: center; } .nd-vault-card .nd-btn [data-lucide], .nd-vault-card .nd-btn svg.lucide { display: none; } } .nd-topbar { position: sticky; top: 0; z-index: 40; flex-shrink: 0; overflow: visible; background: rgba(255, 255, 255, 0.92); backdrop-filter: saturate(180%) blur(8px); -webkit-backdrop-filter: saturate(180%) blur(8px); border-bottom: 1px solid var(--nd-line); display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .75rem 1rem; /* Room for bell badge + iOS safe area so notification pill is not clipped */ padding-top: max(.85rem, calc(.65rem + env(safe-area-inset-top, 0px))); } #nd-topbar-actions { overflow: visible; flex-shrink: 0; align-items: center; } .nd-shell > main { overflow: visible; min-width: 0; } @media (min-width: 768px) { .nd-topbar { padding: .85rem 1.5rem; } } /* Topbar height token — used for viewport-fill layouts, not in-page sticky chrome. */ :root { --nd-sticky-topbar-height: 3.5rem; } @media (min-width: 768px) { :root { --nd-sticky-topbar-height: 3.9rem; } } @media (max-width: 768px) { :root { --nd-data-font-size: 12px; } } #nd-content .nd-section-head { padding-top: .35rem; padding-bottom: .5rem; margin-bottom: .25rem; } #nd-content .nd-card > .nd-section-head, #nd-content .nd-card .nd-section-head { background: #fff; } /* Sheet tables: parent cards often use overflow-hidden for radius clipping, which breaks position:sticky on thead — keep scroll containment on *-sheet-wrap. Tender sheets stay overflow-x:auto so chips never squash the page width. */ .nd-card:has([class*="-sheet-wrap"]):not(:has(.nd-tender-sheet-wrap)) { overflow: visible; } .nd-card:has(.nd-tender-sheet-wrap) { overflow-x: auto; overflow-y: visible; max-width: 100%; min-width: 0; } .nd-safety-sheet-wrap, .nd-compliance-sheet-wrap, .nd-ticket-sheet-wrap, .nd-tender-sheet-wrap, .nd-tasks-sheet-wrap { overscroll-behavior-x: contain; overscroll-behavior-y: auto; touch-action: pan-x pan-y; -webkit-overflow-scrolling: touch; border-bottom-left-radius: var(--nd-r-lg); border-bottom-right-radius: var(--nd-r-lg); } @media (max-width: 640px) { /* Full-table horizontal scroll on phones — no pinned first column. */ .nd-safety-sheet-wrap, .nd-compliance-sheet-wrap, .nd-ticket-sheet-wrap, .nd-tender-sheet-wrap, .nd-tasks-sheet-wrap, .nd-hr-staff-views .nd-table-wrap, .nd-hr-payslip-table-wrap, .nd-hr-timecard-table-wrap, .nd-hr-leave-table-wrap { overflow-x: auto; overflow-y: visible; max-width: 100%; } .nd-hr-timecard-digital-grid th.sticky, .nd-hr-timecard-digital-grid td.sticky { position: static !important; left: auto !important; z-index: auto !important; } } .nd-dashboard-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; padding: 0.75rem 1rem; border-top: 1px solid var(--nd-line); background: #fff; font-size: 0.75rem; color: var(--nd-muted); margin-top: auto; } @media (min-width: 768px) { .nd-dashboard-footer { padding: 0.85rem 1.5rem; font-size: 0.8125rem; } } .nd-dashboard-footer-copy { margin: 0; } .nd-dashboard-footer-guide { color: var(--nd-teal); font-weight: 500; text-decoration: underline; text-underline-offset: 2px; } .nd-dashboard-footer-guide:hover { color: var(--nd-navy); text-decoration: none; } /* Help hub — workspace guide HTML imported from dashboard user guides */ .nd-help-guide { color: #334155; line-height: 1.65; } .nd-help-guide h1 { font-size: 1.75rem; font-weight: 700; color: #0f172a; margin: 0 0 .5rem; } .nd-help-guide h2 { font-size: 1.25rem; font-weight: 700; color: #0f172a; margin: 1.5rem 0 .5rem; padding-bottom: .35rem; border-bottom: 2px solid rgba(13, 148, 136, 0.2); } .nd-help-guide h3 { font-size: 1.05rem; font-weight: 600; color: #0c4a6e; margin: 1rem 0 .35rem; } .nd-help-guide p { margin-bottom: .75rem; } .nd-help-guide ul, .nd-help-guide ol { margin: 0 0 .85rem 1.25rem; } .nd-help-guide li { margin-bottom: .35rem; } .nd-help-guide a { color: #0d9488; text-decoration: underline; } .nd-help-guide .nd-guide-subtitle { color: #64748b; margin-bottom: 1.25rem; } .nd-help-toc { background: #fff; border: 1px solid #e2e8f0; border-radius: 10px; padding: 1rem 1.15rem; margin: 1rem 0 1.25rem; } .nd-help-toc h2 { margin: 0 0 .65rem; font-size: 1rem; border: 0; padding: 0; } .nd-help-toc ul { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 1.25rem; } .nd-help-toc li { break-inside: avoid; margin: 0; } .nd-help-toc a { display: inline-flex; flex-direction: row; flex-wrap: nowrap; align-items: center; gap: 0.4em; padding: .45rem .15rem; font-weight: 500; line-height: 1.35; } .nd-help-toc a [data-lucide], .nd-help-toc a svg.lucide { display: inline-block; width: 1em; height: 1em; flex: none; stroke-width: 1.75; color: currentColor; pointer-events: none; vertical-align: middle; } .nd-help-callout { border-radius: 10px; padding: .85rem 1rem; margin: 1rem 0; font-size: .95rem; } .nd-help-callout--note { background: #f0f9ff; border-left: 4px solid #0ea5e9; } .nd-help-callout--tip { background: rgba(13, 148, 136, 0.08); border: 1px solid rgba(13, 148, 136, 0.25); } .nd-help-callout--card { background: #fff; border: 1px solid #e2e8f0; box-shadow: 0 2px 12px rgba(15, 23, 42, 0.06); } .nd-help-guide-link { margin-top: 1rem; font-size: .9rem; } @media (max-width: 640px) { .nd-help-toc ul { columns: 1; } } @media (max-width: 767px) { .nd-dashboard-footer { justify-content: center; text-align: center; padding-bottom: max(0.75rem, env(safe-area-inset-bottom)); } .nd-dashboard-footer-guide { display: inline-flex; align-items: center; justify-content: center; min-height: 2.75rem; padding: .35rem .65rem; } .nd-sidebar a, .nd-sidebar-account-toggle, .nd-sidebar-account-link { min-height: 2.75rem; } #nd-workspace-switcher-slot { max-width: 100%; flex: 1 1 8rem; } .nd-workspace-switcher, .nd-workspace-switcher .nd-select { width: 100%; min-width: 0; } } @media (max-width: 375px) { #nd-content { padding-left: .75rem; padding-right: .75rem; } .nd-topbar { padding-left: .75rem; padding-right: .75rem; } .nd-dashboard-footer { padding-left: .75rem; padding-right: .75rem; } } @media (max-width: 320px) { #nd-content { padding-left: .65rem; padding-right: .65rem; } .nd-topbar { padding-left: .65rem; padding-right: .65rem; } .nd-card.p-5, .nd-card.p-6, .nd-card.md\:p-5, .nd-card.md\:p-6 { padding: .85rem; } .nd-topbar-title { font-size: .9rem; } } @media (max-width: 767px) { .nd-topbar { flex-wrap: nowrap; align-items: center; } .nd-topbar > :first-child { flex: 1 1 auto; min-width: 0; } #nd-user-slot { width: auto; flex: 0 0 auto; justify-content: flex-end; gap: .5rem; } .nd-topbar-title { max-width: 100%; } .nd-sidebar-account-menu { min-width: 0; } .nd-sidebar-account-toggle, .nd-sidebar-account-link { min-width: 0; } } .nd-topbar-title { font-weight: 600; color: var(--nd-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Compact dashboard density mode (toggle in shared topbar). */ .nd-shell.nd-density-compact .nd-topbar { padding-top: .6rem; padding-bottom: .6rem; } .nd-shell.nd-density-compact #nd-content { padding: .75rem; } @media (min-width: 768px) { .nd-shell.nd-density-compact #nd-content { padding: .9rem 1rem; } } @media (min-width: 1024px) { .nd-shell.nd-density-compact #nd-content { padding: 1rem 1.1rem; } } .nd-shell.nd-density-compact .nd-card.p-5, .nd-shell.nd-density-compact .nd-card.p-6, .nd-shell.nd-density-compact .nd-card.p-4, .nd-shell.nd-density-compact .nd-card.md\:p-5, .nd-shell.nd-density-compact .nd-card.md\:p-6 { padding: .85rem; } .nd-shell.nd-density-compact .nd-table th { padding-top: .45rem; padding-bottom: .45rem; } .nd-shell.nd-density-compact .nd-table td { padding-top: .5rem; padding-bottom: .5rem; } .nd-shell.nd-density-compact .nd-btn.nd-btn-sm { padding: .3rem .55rem; } /* ------------------------------------------------------------------- Mobile drawer ------------------------------------------------------------------- */ .nd-drawer-backdrop { display: none; } html.nd-drawer-scroll-lock, body.nd-drawer-scroll-lock { overflow: hidden; } html.nd-drawer-scroll-lock #nd-content, body.nd-drawer-scroll-lock #nd-content { overflow: hidden; } @media (max-width: 767px) { /* Keep bell trigger under the mobile drawer backdrop/sidebar layers. */ .nd-bell { z-index: auto; } /* Never show desktop sidebar collapse on phones (Tailwind md:hidden backup). */ #nd-sidebar-toggle { display: none !important; } .nd-sidebar { position: fixed; top: 0; bottom: 0; left: 0; width: 16rem; z-index: 50; max-height: 100dvh; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; transform: translateX(-100%); transition: transform .22s ease; box-shadow: var(--nd-shadow-lg); } .nd-sidebar-open .nd-sidebar { transform: none; } .nd-drawer-backdrop { position: fixed; inset: 0; background: rgba(15,23,42,.5); z-index: 40; display: none; animation: nd-fade-in .18s ease-out; } .nd-sidebar-open .nd-drawer-backdrop { display: block; } /* Prevent topbar controls from floating above the drawer overlay. */ .nd-sidebar-open #nd-user-slot { opacity: 0; pointer-events: none; } } @media (min-width: 768px) { /* Hamburger is mobile-only (Tailwind md:hidden backup). */ #nd-nav-toggle { display: none !important; } } /* ------------------------------------------------------------------- Tables (responsive horizontal scroll already handled by Tailwind `overflow-x-auto`; this adds the polish.) ------------------------------------------------------------------- */ .nd-table { width: 100%; border-collapse: collapse; font-size: var(--nd-data-font-size); line-height: var(--nd-data-line-height); } .nd-table th { text-align: left; font-size: var(--nd-data-font-size); font-weight: 600; color: var(--nd-muted); text-transform: uppercase; letter-spacing: .05em; padding: .65rem .9rem; border-bottom: 1px solid var(--nd-line); } .nd-table th.nd-col-num, .nd-table td.nd-col-num, .nd-table th.nd-col-actions, .nd-table td.nd-col-actions { text-align: right; } .nd-table.nd-billing-invoices-table { table-layout: fixed; } .nd-table.nd-billing-invoices-table col.col-number { width: 26%; } .nd-table.nd-billing-invoices-table col.col-issued { width: 16%; } .nd-table.nd-billing-invoices-table col.col-for { width: 22%; } .nd-table.nd-billing-invoices-table col.col-total { width: 18%; } .nd-table.nd-billing-invoices-table col.col-status { width: 12%; } .nd-table.nd-billing-invoices-table col.col-actions { width: 6%; } .nd-table td { padding: .75rem .9rem; border-bottom: 1px solid #f1f5f9; vertical-align: middle; } .nd-table tr:last-child td { border-bottom: 0; } /* Activity hub tables: keep heading and body columns aligned. */ .nd-activity-table { border-collapse: collapse; width: 100%; } .nd-activity-table thead th { text-align: left; vertical-align: middle; padding: .65rem .9rem; white-space: nowrap; } .nd-activity-table tbody td { vertical-align: middle; padding: .65rem .9rem; text-align: left; } /* Accounts ledger table: desktop polish (tablet/phone use stack rules). */ @media (min-width: 901px) { .nd-accounts-view .nd-accounts-table { border-collapse: separate; border-spacing: 0; table-layout: fixed; } .nd-accounts-view .nd-accounts-assets-table { border-collapse: separate; border-spacing: 0; table-layout: fixed; } .nd-accounts-view .nd-accounts-table thead th { padding: .78rem .85rem; font-size: var(--nd-data-font-size); font-weight: 700; letter-spacing: .045em; text-transform: uppercase; color: #64748b; border-bottom: 1px solid #dbe5f0; background: linear-gradient(180deg, #f8fbff 0%, #f3f7fc 100%); border-right: 1px solid #e2e8f0; } .nd-accounts-view .nd-accounts-assets-table thead th { padding: .72rem .75rem; font-size: var(--nd-data-font-size); font-weight: 700; letter-spacing: .045em; text-transform: uppercase; color: #64748b; border-bottom: 1px solid #dbe5f0; background: linear-gradient(180deg, #f8fbff 0%, #f3f7fc 100%); border-right: 1px solid #e2e8f0; } .nd-accounts-view .nd-accounts-assets-table thead th:last-child { border-right: 0; } .nd-accounts-view .nd-accounts-assets-table tbody td { border-bottom: 1px solid #edf2f8; border-right: 1px solid #f1f5f9; } .nd-accounts-view .nd-accounts-assets-table tbody td:last-child { border-right: 0; } .nd-accounts-view .nd-accounts-assets-table tbody tr:hover { background: #f8fbff; box-shadow: inset 0 0 0 1px #e2e8f0; } /* Sticky filter toolbars already pin below the topbar; avoid stacking thead on the same offset. */ .nd-accounts-view .nd-accounts-table thead th, .nd-accounts-view .nd-accounts-assets-table thead th { position: static; z-index: auto; } .nd-accounts-view .nd-accounts-table thead th::after, .nd-accounts-view .nd-accounts-assets-table thead th::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: #dbe5f0; } .nd-accounts-view .nd-accounts-table thead th:last-child { border-right: 0; } .nd-accounts-view .nd-accounts-table thead th:first-child { border-top-left-radius: .65rem; padding-left: .95rem; } .nd-accounts-view .nd-accounts-table thead th:last-child { border-top-right-radius: .65rem; padding-right: .95rem; } .nd-accounts-view .nd-accounts-table tbody tr { transition: background .14s ease, box-shadow .14s ease; } .nd-accounts-view .nd-accounts-table tbody tr:hover { background: #f8fbff; box-shadow: inset 0 0 0 1px #e2e8f0; } .nd-accounts-view .nd-accounts-table tbody td { padding: .76rem .85rem; border-bottom: 1px solid #edf2f8; vertical-align: middle; border-right: 1px solid #f1f5f9; overflow: hidden; text-overflow: ellipsis; } .nd-accounts-view .nd-accounts-table tbody td:last-child { border-right: 0; } .nd-accounts-view .nd-accounts-actions { display: inline-flex; flex-wrap: nowrap; align-items: center; justify-content: flex-end; gap: .45rem; white-space: nowrap; } .nd-accounts-view .nd-accounts-table tbody td:first-child { padding-left: .95rem; } .nd-accounts-view .nd-accounts-table tbody td:last-child { padding-right: .95rem; } .nd-accounts-view .nd-accounts-table tbody td .font-medium { color: #0f172a; font-weight: 600; } .nd-accounts-view .nd-accounts-table tbody td > .text-xs.rounded-full { display: inline-flex; align-items: center; border: 1px solid #dbe5f0; background: #f8fafc; color: #334155; font-weight: 500; } .nd-accounts-view .nd-accounts-table tbody td:last-child .nd-btn { width: 1.9rem; height: 1.9rem; padding: 0; border-radius: .55rem; border: 1px solid #dbe5f0; background: #ffffff; color: #64748b; } .nd-accounts-view .nd-accounts-table tbody td:last-child .nd-btn:hover { background: #f8fafc; border-color: #cbd5e1; color: #0f172a; } .nd-accounts-view .nd-accounts-table tbody td:last-child .nd-btn.text-rose-600 { border-color: #fecdd3; color: #e11d48; background: #fff1f2; } .nd-accounts-view .nd-accounts-table tbody td:last-child .nd-btn.text-rose-600:hover { border-color: #fda4af; background: #ffe4e6; color: #be123c; } } /* Accounts actions should stay on one line at all sizes. On narrow viewports we allow horizontal scroll inside the action cell rather than wrapping buttons onto a second line. */ .nd-accounts-view .nd-accounts-actions { flex-wrap: nowrap; white-space: nowrap; } /* Generic row action clusters (tasks, tickets, compliance, etc.) */ td.nd-row-actions { display: table-cell; vertical-align: middle; text-align: right; } .nd-row-actions:not(td), .nd-accounts-actions { display: flex; align-items: center; gap: .35rem; flex-wrap: nowrap; } .nd-row-actions .nd-btn.nd-btn-sm, .nd-accounts-actions .nd-btn.nd-btn-sm { min-width: 2.25rem; min-height: 2.25rem; } .nd-row-actions .nd-icon-btn, .nd-accounts-actions .nd-icon-btn { flex-shrink: 0; } @media (max-width: 767px) { .nd-row-actions .nd-btn.nd-btn-sm, .nd-accounts-actions .nd-btn.nd-btn-sm { min-width: 2.25rem; min-height: 2.25rem; } .nd-row-actions .nd-btn.nd-btn-sm [data-lucide], .nd-row-actions .nd-btn.nd-btn-sm svg.lucide, .nd-accounts-actions .nd-btn.nd-btn-sm [data-lucide], .nd-accounts-actions .nd-btn.nd-btn-sm svg.lucide { width: 1.125rem; height: 1.125rem; } } .nd-accounts-view .nd-accounts-assets-table tbody td, .nd-accounts-view .nd-accounts-table tbody td { line-height: 1.35; } .nd-accounts-view .nd-accounts-assets-table tbody td:last-child .nd-btn, .nd-accounts-view .nd-accounts-table tbody td:last-child .nd-btn { min-width: 1.95rem; min-height: 1.95rem; } @media (min-width: 901px) { .nd-accounts-view .nd-accounts-table.nd-accounts-table-compact thead th { padding-top: .56rem; padding-bottom: .56rem; } .nd-accounts-view .nd-accounts-table.nd-accounts-table-compact tbody td { padding-top: .5rem; padding-bottom: .5rem; } .nd-accounts-view .nd-accounts-table.nd-accounts-table-compact tbody td:last-child .nd-btn { min-width: 1.72rem; min-height: 1.72rem; } } @media (max-width: 900px) { .nd-accounts-view .nd-accounts-chip-row { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .nd-accounts-view .nd-accounts-chip-row::-webkit-scrollbar { display: none; } .nd-accounts-view .nd-accounts-chip-row > * { flex: 0 0 auto; white-space: nowrap; } } .nd-accounts-view .nd-assets-filter-bar { width: 100%; } .nd-accounts-view .nd-assets-filter-stack { width: 100%; } .nd-accounts-view .nd-assets-filter-bar .nd-accounts-chip-row { width: 100%; flex-wrap: wrap; gap: 0.5rem; } .nd-accounts-view .nd-assets-filter-bar .nd-input-wrap { width: 100%; min-width: 0; } @media (min-width: 641px) { .nd-accounts-view .nd-assets-filter-bar .nd-input-wrap { flex: 1 1 14rem; width: auto; max-width: 36rem; } } @media (max-width: 640px) { .nd-accounts-view .nd-assets-filter-bar .nd-btn { flex: 1 1 calc(50% - 0.25rem); justify-content: center; } .nd-accounts-view .nd-assets-filter-bar .nd-input-wrap { flex: 1 1 100%; max-width: none; } .nd-accounts-view .nd-assets-filter-bar .nd-accounts-chip-row { overflow-x: visible; flex-wrap: wrap; } .nd-accounts-view .nd-assets-filter-bar .nd-accounts-chip-row > * { flex-shrink: 1; } } .nd-accounts-view .nd-assets-table-wrap { width: 100%; max-width: 100%; min-width: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; } .nd-accounts-view .nd-accounts-assets-table { width: max-content; min-width: 100%; } .nd-accounts-view.nd-accounts-mode-assets { min-width: 0; max-width: 100%; } .nd-accounts-view .nd-accounts-subtabs { width: fit-content; max-width: 100%; } .nd-accounts-view .nd-accounts-subtabs .nd-btn { border-radius: .65rem; } .nd-section-mode-badge { display: inline-flex; align-items: center; gap: .35rem; font-size: .72rem; line-height: 1; font-weight: 600; border-radius: 9999px; padding: .32rem .55rem; border: 1px solid #dbe5f0; background: #f8fafc; color: #475569; } .nd-section-mode-badge [data-lucide], .nd-section-mode-badge svg.lucide { width: .78rem; height: .78rem; } .nd-subcard-badge { display: inline-flex; align-items: center; gap: .3rem; font-size: .68rem; line-height: 1; font-weight: 600; border-radius: 9999px; padding: .25rem .5rem; border: 1px solid #dbe5f0; background: #f8fafc; color: #64748b; } .nd-subcard-badge [data-lucide], .nd-subcard-badge svg.lucide { width: .72rem; height: .72rem; } .nd-accounts-view.nd-accounts-mode-entries .nd-accounts-subtabs .nd-btn-brand { background: #0f4c81; border-color: #0f4c81; } .nd-accounts-view.nd-accounts-mode-entries .nd-section-mode-badge { border-color: #bfdbfe; background: #eff6ff; color: #1e40af; } .nd-accounts-view.nd-accounts-mode-assets .nd-accounts-subtabs .nd-btn-brand { background: #0f766e; border-color: #0f766e; } .nd-accounts-view.nd-accounts-mode-assets .nd-section-mode-badge { border-color: #99f6e4; background: #f0fdfa; color: #115e59; } .nd-accounts-view.nd-accounts-mode-entries .nd-filter-bar { border-color: #d7e6f5; box-shadow: 0 8px 20px -16px rgba(15, 76, 129, .45); } .nd-accounts-view.nd-accounts-mode-entries .nd-subcard-badge { border-color: #bfdbfe; background: #eff6ff; color: #1e40af; } .nd-accounts-view.nd-accounts-mode-assets .nd-filter-bar { border-color: #cfe9e5; box-shadow: 0 8px 20px -16px rgba(15, 118, 110, .45); } .nd-accounts-view.nd-accounts-mode-assets .nd-assets-filter-bar { border-color: #cfe9e5; box-shadow: 0 8px 20px -16px rgba(15, 118, 110, .45); } .nd-accounts-view.nd-accounts-mode-assets .nd-subcard-badge { border-color: #99f6e4; background: #f0fdfa; color: #115e59; } .nd-accounts-view.nd-accounts-mode-assets .nd-assets-filter-bar { border-top: 2px solid #99f6e4; } .nd-hr-subtabs { width: fit-content; max-width: 100%; } .nd-hr-subtabs .nd-btn { border-radius: .65rem; } .nd-hr-mode-staff .nd-hr-subtabs .nd-btn-brand { background: #1d4ed8; border-color: #1d4ed8; } .nd-hr-mode-staff .nd-section-mode-badge { border-color: #bfdbfe; background: #eff6ff; color: #1e40af; } .nd-hr-mode-staff .nd-subcard-badge { border-color: #bfdbfe; background: #eff6ff; color: #1e40af; } .nd-hr-mode-payroll .nd-hr-subtabs .nd-btn-brand { background: #0f766e; border-color: #0f766e; } .nd-hr-mode-payroll .nd-section-mode-badge { border-color: #99f6e4; background: #f0fdfa; color: #115e59; } .nd-hr-mode-payroll .nd-subcard-badge { border-color: #99f6e4; background: #f0fdfa; color: #115e59; } .nd-hr-mode-staff .nd-filter-bar { border-color: #d9e7ff; box-shadow: 0 8px 20px -16px rgba(29, 78, 216, .35); } .nd-hr-mode-payroll .nd-filter-bar { border-color: #ccebe5; box-shadow: 0 8px 20px -16px rgba(15, 118, 110, .35); } .nd-hr-mode-payroll .nd-hr-timecard-filters { border-top: 2px solid #99f6e4; } .nd-hr-payslip-list { display: grid; gap: .85rem; padding: .85rem; background: linear-gradient(180deg, #f8fafc 0%, #fff 100%); } .nd-hr-payslip-table-wrap { width: 100%; } .nd-hr-timecard-table-wrap { width: 100%; } .nd-hr-payslip-table { width: 100%; min-width: 100%; } .nd-hr-payslip-table .nd-hr-payslip-card__avatar { width: 1.75rem; height: 1.75rem; font-size: .68rem; } .nd-hr-payslip-card { position: relative; display: grid; grid-template-columns: auto 1fr; gap: .75rem 1rem; padding: 1rem 1rem 1rem 1.15rem; border: 1px solid #dbeafe; border-radius: 1rem; background: radial-gradient(circle at 0 0, rgba(20, 184, 166, .09), transparent 38%), radial-gradient(circle at 100% 0, rgba(14, 165, 233, .08), transparent 34%), #fff; box-shadow: 0 10px 28px -22px rgba(15, 23, 42, .28); transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease; overflow: hidden; } .nd-hr-payslip-card::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 4px; background: linear-gradient(180deg, rgba(20, 184, 166, .95), rgba(14, 165, 233, .9), rgba(99, 102, 241, .75)); } .nd-hr-payslip-card:hover { transform: translateY(-1px); border-color: #bae6fd; box-shadow: 0 18px 36px -24px rgba(15, 23, 42, .34); } .nd-hr-payslip-card.is-selected { border-color: #7dd3fc; box-shadow: 0 0 0 1px rgba(14, 165, 233, .18), 0 16px 34px -24px rgba(14, 165, 233, .35); } .nd-hr-payslip-card__select { display: inline-flex; align-items: flex-start; padding-top: .2rem; } .nd-hr-payslip-card__main { min-width: 0; grid-column: 2; } .nd-hr-payslip-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } .nd-hr-payslip-card__identity { display: flex; align-items: center; gap: .75rem; min-width: 0; } .nd-hr-payslip-card__avatar { width: 2.75rem; height: 2.75rem; border-radius: .9rem; border: 1px solid #99f6e4; background: linear-gradient(180deg, #f0fdfa 0%, #ecfeff 100%); color: #0f766e; font-size: .78rem; font-weight: 700; letter-spacing: .04em; display: inline-flex; align-items: center; justify-content: center; flex: none; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95); } .nd-hr-payslip-card__name { font-size: .98rem; font-weight: 700; color: #0f172a; line-height: 1.25; } .nd-hr-payslip-card__period { display: inline-flex; align-items: center; gap: .35rem; margin-top: .25rem; font-size: .72rem; color: #64748b; } .nd-hr-payslip-card__period [data-lucide], .nd-hr-payslip-card__period svg.lucide { width: .85rem; height: .85rem; color: #14b8a6; } .nd-hr-payslip-card__period-sep { color: #94a3b8; } .nd-hr-payslip-card__hero { text-align: right; margin-left: auto; } .nd-hr-payslip-card__hero-label { font-size: .62rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #0f766e; } .nd-hr-payslip-card__hero-amount { margin-top: .15rem; font-size: 1.35rem; font-weight: 800; letter-spacing: -.02em; color: #0f172a; font-variant-numeric: tabular-nums; } .nd-hr-payslip-card__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .55rem; margin-top: .85rem; } .nd-hr-payslip-stat { border: 1px solid #e2e8f0; border-radius: .75rem; padding: .55rem .65rem; background: rgba(255, 255, 255, .82); } .nd-hr-payslip-stat__label { display: block; font-size: .58rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: #64748b; } .nd-hr-payslip-stat__value { display: block; margin-top: .2rem; font-size: .82rem; font-weight: 700; color: #0f172a; font-variant-numeric: tabular-nums; } .nd-hr-payslip-card__lines { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .75rem; } .nd-hr-payslip-line-chip { display: inline-flex; align-items: center; gap: .25rem; border: 1px solid #e2e8f0; border-radius: 999px; padding: .18rem .55rem; font-size: .68rem; color: #64748b; background: #f8fafc; } .nd-hr-payslip-line-chip strong { font-weight: 700; color: #334155; } .nd-hr-payslip-card__actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: .45rem; justify-content: flex-end; padding-top: .75rem; margin-top: .15rem; border-top: 1px solid #eef2f7; } .nd-hr-payslip-actions .nd-btn.nd-btn-sm { min-height: 2.1rem; } .nd-hr-payslip-actions .nd-btn-primary { box-shadow: 0 8px 18px -12px rgba(15, 23, 42, .55); } @media (max-width: 767px) { .nd-hr-payslip-list { padding: .65rem; gap: .65rem; } .nd-hr-payslip-card { grid-template-columns: 1fr; padding: .85rem; } .nd-hr-payslip-card__select { position: absolute; top: .75rem; right: .75rem; padding-top: 0; } .nd-hr-payslip-card__main { grid-column: 1; padding-right: 1.75rem; } .nd-hr-payslip-card__head { flex-direction: column; align-items: stretch; } .nd-hr-payslip-card__hero { text-align: left; margin-left: 0; padding: .65rem .75rem; border-radius: .75rem; border: 1px solid #ccfbf1; background: linear-gradient(180deg, #f0fdfa 0%, #ecfeff 100%); } .nd-hr-payslip-card__stats { grid-template-columns: 1fr; } .nd-hr-payslip-card__actions { justify-content: stretch; } .nd-hr-payslip-card__actions .nd-btn { flex: 1 1 calc(50% - .25rem); justify-content: center; } } /* Leave register — filters, table, grid cards (amber/calendar accent) */ .nd-hr-leave-card { border-color: #e2e8f0; } .nd-hr-leave-toolbar { padding: .75rem 1rem; background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%); } .nd-hr-leave-toolbar-inline { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; } .nd-hr-leave-toolbar-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: .35rem; } .nd-hr-leave-filters .nd-btn-reset-filters, .nd-hr-leave-toolbar .nd-btn-reset-filters { flex-shrink: 0; } .nd-hr-leave-filters .nd-input, .nd-hr-leave-filters .nd-btn { min-height: 2.25rem; } .nd-leave-sheet thead { background: #f8fafc; } .nd-leave-sheet tbody tr:hover { background: rgba(241, 245, 249, .7); } .nd-hr-leave-table-wrap { width: 100%; } .nd-hr-leave-grid { display: grid; gap: .85rem; padding: .85rem; background: linear-gradient(180deg, #fffbeb 0%, #fff 100%); } .nd-hr-leave-grid-card { position: relative; display: grid; grid-template-columns: auto 1fr; gap: .75rem 1rem; padding: 1rem 1rem 1rem 1.15rem; border: 1px solid #fde68a; border-radius: 1rem; background: radial-gradient(circle at 0 0, rgba(251, 191, 36, .12), transparent 38%), radial-gradient(circle at 100% 0, rgba(245, 158, 11, .08), transparent 34%), #fff; box-shadow: 0 10px 28px -22px rgba(146, 64, 14, .22); transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease; overflow: hidden; } .nd-hr-leave-grid-card::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 4px; background: linear-gradient(180deg, rgba(251, 191, 36, .95), rgba(245, 158, 11, .9), rgba(217, 119, 6, .75)); } .nd-hr-leave-grid-card:hover { transform: translateY(-1px); border-color: #fcd34d; box-shadow: 0 18px 36px -24px rgba(146, 64, 14, .28); } .nd-hr-leave-grid-card.is-selected { border-color: #fbbf24; box-shadow: 0 0 0 1px rgba(245, 158, 11, .18), 0 16px 34px -24px rgba(245, 158, 11, .28); } .nd-hr-leave-grid-card__select { display: inline-flex; align-items: flex-start; padding-top: .2rem; } .nd-hr-leave-grid-card__main { min-width: 0; grid-column: 2; } .nd-hr-leave-grid-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; } .nd-hr-leave-grid-card__identity { display: flex; align-items: center; gap: .75rem; min-width: 0; } .nd-hr-leave-grid-card__avatar { width: 2.75rem; height: 2.75rem; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; font-size: .78rem; font-weight: 700; letter-spacing: .02em; color: #92400e; background: linear-gradient(145deg, #fef3c7 0%, #fde68a 100%); border: 1px solid #fcd34d; flex-shrink: 0; } .nd-leave-sheet .nd-hr-leave-grid-card__avatar { width: 1.75rem; height: 1.75rem; font-size: .68rem; } .nd-hr-leave-grid-card__name { font-weight: 600; color: #78350f; line-height: 1.25; } .nd-hr-leave-grid-card__type { font-size: .78rem; color: #b45309; } .nd-hr-leave-grid-card__dates { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; margin-top: .65rem; font-size: .82rem; color: #92400e; } .nd-hr-leave-grid-card__dates [data-lucide], .nd-hr-leave-grid-card__dates svg.lucide { width: .95rem; height: .95rem; color: #d97706; } .nd-hr-leave-grid-card__dates-sep { color: #d97706; } .nd-hr-leave-grid-card__days { color: #b45309; } .nd-hr-leave-grid-card__reason { margin-top: .55rem; font-size: .82rem; color: #57534e; line-height: 1.4; } .nd-hr-leave-grid-card__actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: .35rem; padding-top: .5rem; border-top: 1px solid #fef3c7; } .nd-hr-leave-actions { gap: .25rem; } .nd-hr-leave-actions .nd-btn.nd-btn-sm { padding-left: .45rem; padding-right: .45rem; } @media (max-width: 640px) { .nd-hr-leave-toolbar-inline { flex-direction: column; align-items: stretch; } .nd-hr-leave-toolbar-actions { width: 100%; justify-content: flex-start; } .nd-hr-leave-grid { grid-template-columns: 1fr; } .nd-hr-leave-grid-card { grid-template-columns: 1fr; } .nd-hr-leave-grid-card__select { position: absolute; top: .85rem; right: .85rem; } .nd-hr-leave-grid-card__main { grid-column: 1; } .nd-hr-leave-grid-card__actions { justify-content: stretch; } .nd-hr-leave-grid-card__actions .nd-btn { flex: 1 1 calc(50% - .25rem); justify-content: center; } } .nd-accounts-view .nd-filter-bar .nd-filter-row > div { min-width: max-content; } @media (min-width: 1024px) { .nd-accounts-view .nd-assets-filter-bar .nd-input-wrap { margin-left: auto; } } @media (max-width: 900px) { .nd-accounts-view .nd-accounts-subtabs { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: .35rem; } .nd-accounts-view .nd-accounts-subtabs .nd-btn { width: 100%; justify-content: center; } .nd-accounts-view .nd-accounts-actions .nd-btn.nd-btn-sm { min-width: 2.25rem; min-height: 2.25rem; } .nd-accounts-view .nd-accounts-actions .nd-btn.nd-btn-sm [data-lucide], .nd-accounts-view .nd-accounts-actions .nd-btn.nd-btn-sm svg.lucide { width: 1.125rem; height: 1.125rem; } .nd-hr-subtabs { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: .35rem; } .nd-hr-subtabs .nd-btn { width: 100%; justify-content: center; } } @media (max-width: 900px) { .nd-accounts-view .nd-accounts-table td[data-stack-full] .nd-accounts-actions { display: flex; flex-wrap: nowrap; gap: .45rem; overflow-x: auto; overflow-y: hidden; padding-bottom: .15rem; -webkit-overflow-scrolling: touch; } .nd-accounts-view .nd-accounts-table td[data-stack-full] .nd-accounts-actions::-webkit-scrollbar { height: 6px; } .nd-accounts-view .nd-accounts-table td[data-stack-full] .nd-accounts-actions::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 999px; } } /* ------------------------------------------------------------------- Public landing page chrome ------------------------------------------------------------------- */ .nd-public-header { position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, 0.94); backdrop-filter: saturate(180%) blur(10px); -webkit-backdrop-filter: saturate(180%) blur(10px); border-bottom: 1px solid var(--nd-line); } /* Active public-nav section: body.nd-public-nav--{tenders|help|contact} or .is-nav-active (home scroll-spy) */ body.nd-public-nav--tenders .nd-public-header a[href="/tenders"], body.nd-public-nav--help .nd-public-header a[href="/help"], body.nd-public-nav--contact .nd-public-header a[href="/contact"], .nd-public-header a.is-nav-active { color: #c2410c; font-weight: 600; } body.nd-public-nav--tenders .nd-public-header a[href="/tenders"]:hover, body.nd-public-nav--help .nd-public-header a[href="/help"]:hover, body.nd-public-nav--contact .nd-public-header a[href="/contact"]:hover, .nd-public-header a.is-nav-active:hover { color: #9a3412; } body.nd-public-nav--tenders .nd-public-header a[href="/tenders"] i, body.nd-public-nav--help .nd-public-header a[href="/help"] i, body.nd-public-nav--contact .nd-public-header a[href="/contact"] i, .nd-public-header a.is-nav-active i { color: #f97316; } .nd-public-header .nd-public-brand-link { display: flex; align-items: center; gap: 0.625rem; text-decoration: none; color: inherit; } .nd-public-header .nd-public-brand-logo { width: 36px; height: 36px; flex-shrink: 0; } .nd-public-header .nd-public-brand-text { font-size: 1.125rem; line-height: 1; font-weight: 800; letter-spacing: -0.025em; } .nd-public-footer { padding: 2.5rem 0; border-top: 1px solid #e2e8f0; font-size: 0.875rem; line-height: 1.25rem; color: #64748b; } .nd-public-footer a { color: inherit; text-decoration: none; } .nd-public-footer a:hover { color: #334155; } .nd-hero { background: radial-gradient(circle at 15% 15%, rgba(14,165,233,.12), transparent 55%), radial-gradient(circle at 85% 85%, rgba(249,115,22,.12), transparent 55%), #fff; } .nd-hero-card { background: linear-gradient(135deg, #0f172a 0%, #0b3a5c 50%, #164e63 100%); color: #fff; border: 1px solid #1e293b; } .nd-hero-card .nd-hero-kicker { color: #7dd3fc; } /* Mobile / tablet nav for public landing. At 1023px and below we collapse to the burger menu. The full inline nav (6 links + 2 CTAs) only fits cleanly from lg+. */ .nd-public-nav-mobile { display: none; } @media (max-width: 1023px) { .nd-public-nav-desktop { display: none !important; } .nd-public-nav-mobile { display: flex; } } /* Prose blocks on privacy / terms / POPIA */ .nd-prose { color: var(--nd-ink); line-height: 1.7; } .nd-prose h1 { font-size: 2rem; font-weight: 800; margin: 0 0 1rem; letter-spacing: -.01em; } .nd-prose h2 { font-size: 1.25rem; font-weight: 700; margin: 1.75rem 0 .5rem; color: var(--nd-ink); } .nd-prose p { color: #334155; margin: 0 0 1rem; } .nd-prose ul { margin: 0 0 1rem 1.25rem; } .nd-prose li { margin-bottom: .4rem; } .nd-prose a { color: var(--nd-teal); text-decoration: underline; } /* ------------------------------------------------------------------- Auth page (login, change-password, forgot) chrome ------------------------------------------------------------------- */ .nd-auth-bg { min-height: 100vh; background: radial-gradient(circle at 10% 10%, rgba(14,165,233,.18), transparent 55%), radial-gradient(circle at 90% 90%, rgba(249,115,22,.18), transparent 55%), var(--nd-surface); display: flex; align-items: center; justify-content: center; padding: 1rem; } .nd-auth-card { width: 100%; max-width: 26rem; } /* ------------------------------------------------------------------- Custom UI: toasts, modals, prompts, forms (replaces browser-native alert()/confirm()/prompt() app-wide.) ------------------------------------------------------------------- */ #nd-ui-root { position: fixed; inset: 0; pointer-events: none; z-index: 10070; } #nd-ui-root > * { pointer-events: auto; } body.nd-modal-layer-open #nd-ui-root { z-index: 10070; } /* Toasts — must stack above sheet backdrops (10035) and in-root modals (10040+) */ .nd-toast-stack { position: fixed; right: 1rem; bottom: 1rem; display: flex; flex-direction: column; gap: .5rem; max-width: calc(100% - 2rem); width: 22rem; z-index: 10090; } .nd-toast { background: var(--nd-ink); color: #f8fafc; padding: .75rem 1rem; border-radius: .625rem; font-size: .875rem; line-height: 1.4; box-shadow: var(--nd-shadow-lg); display: flex; align-items: flex-start; gap: .6rem; animation: nd-toast-in .18s ease-out; border-left: 3px solid #64748b; } .nd-toast.nd-toast-leaving { animation: nd-toast-out .18s ease-in forwards; } .nd-toast-success { border-left-color: var(--nd-success); } .nd-toast-error { border-left-color: var(--nd-danger); } .nd-toast-warn { border-left-color: var(--nd-warning); } .nd-toast-info { border-left-color: var(--nd-teal); } .nd-toast-close { background: transparent; border: 0; color: #94a3b8; cursor: pointer; font-size: 1.1rem; line-height: 1; padding: 0 .15rem; } .nd-toast-close:hover { color: #fff; } @keyframes nd-toast-in { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } } @keyframes nd-toast-out { from { opacity: 1; } to { transform: translateY(8px); opacity: 0; } } body.nd-modal-layer-open .nd-sheet-backdrop:not(.nd-pdf-preview-backdrop):not(.nd-sheet-top), body.nd-modal-layer-open .nd-command-center-backdrop { z-index: 10020; pointer-events: none; opacity: 0.35; } body.nd-modal-layer-open .nd-sheet-backdrop.nd-sheet-top:not(.nd-pdf-preview-backdrop):not(.nd-hr-contract-sheet-backdrop):not(:has(.nd-drive-picker)), body.nd-modal-layer-open .nd-hr-docs-picker-backdrop:not(.nd-hr-contract-sheet-backdrop) { z-index: 10060; pointer-events: auto; opacity: 1; } body.nd-modal-layer-open .nd-hr-contract-sheet-backdrop { z-index: 10061; pointer-events: auto; opacity: 1; } body.nd-modal-layer-open .nd-modal-backdrop { z-index: 10072; } /* PDF preview is a top-layer sheet; never dim or disable pointer events on it. */ body.nd-modal-layer-open .nd-pdf-preview-backdrop { z-index: 10075; } /* Vault / drive pickers opened from Nexus.form must sit above form modals (10072). */ body.nd-modal-layer-open .nd-sheet-backdrop.nd-sheet-top:has(.nd-drive-picker):not(.nd-pdf-preview-backdrop), body.nd-modal-layer-open .nd-vault-picker-backdrop { z-index: 10076; pointer-events: auto; opacity: 1; } /* Portaled selects/calendars inside Nexus.form must sit above form modals (10072). */ body.nd-modal-layer-open .nd-select-pop.is-portaled, body.nd-modal-layer-open .nd-date-pop.is-portaled { z-index: 10074; } .nd-pdf-preview-backdrop { z-index: 10055; opacity: 1; pointer-events: auto; } /* Modals */ .nd-modal-backdrop { position: fixed; top: 0; right: 0; bottom: 0; left: 0; inset: 0; width: 100vw; max-width: none; height: 100%; min-height: 100vh; min-height: 100dvh; overflow: hidden; overscroll-behavior: none; background: rgba(15, 23, 42, .55); display: flex; align-items: center; justify-content: center; padding: 1rem; z-index: 10040; animation: nd-fade-in .15s ease-out; } @keyframes nd-fade-in { from { opacity: 0; } to { opacity: 1; } } .nd-modal { background: #fff; border-radius: var(--nd-r-xl); width: 100%; max-width: 28rem; box-shadow: var(--nd-shadow-lg); overflow: hidden; animation: nd-modal-in .18s ease-out; max-height: calc(100vh - 2rem); display: flex; flex-direction: column; } @keyframes nd-modal-in { from { transform: translateY(8px) scale(.98); opacity: 0; } to { transform: none; opacity: 1; } } .nd-modal-header { padding: 1rem 1.25rem .25rem; font-weight: 600; font-size: 1rem; color: var(--nd-ink); } .nd-modal-header--with-close { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; } .nd-modal-title { flex: 1; min-width: 0; line-height: 1.35; } .nd-modal-close { flex-shrink: 0; width: 2rem; height: 2rem; margin: -.25rem -.35rem 0 0; border: none; border-radius: .375rem; background: transparent; color: #64748b; font-size: 1.35rem; line-height: 1; cursor: pointer; } .nd-modal-close:hover { background: #f1f5f9; color: #0f172a; } .nd-modal-body { padding: .25rem 1.25rem 1rem; color: #334155; font-size: .875rem; line-height: 1.5; white-space: pre-wrap; overflow-y: auto; } .nd-modal-body .nd-input, .nd-modal-body .nd-select, .nd-modal-body .nd-textarea { margin-top: .5rem; } .nd-modal-fields { display: flex; flex-direction: column; gap: .75rem; margin-top: .75rem; } .nd-modal-fields label { font-size: .7rem; color: var(--nd-muted); font-weight: 600; display: block; margin-bottom: .25rem; text-transform: uppercase; letter-spacing: .04em; } .nd-modal-footer { padding: .75rem 1.25rem; border-top: 1px solid var(--nd-line); background: var(--nd-surface); display: flex; gap: .5rem; justify-content: flex-end; flex-wrap: wrap; } .nd-modal-danger .nd-modal-header { color: #991b1b; } .nd-modal-error { margin-top: .5rem; font-size: .8rem; color: #991b1b; background: #fef2f2; padding: .5rem .75rem; border-radius: .375rem; display: none; } .nd-modal-error.show { display: block; } .nd-line-grid-label { font-size: .7rem; color: var(--nd-muted); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; margin-bottom: .35rem; } .nd-line-grid { display: flex; flex-direction: column; gap: .5rem; } .nd-line-grid-body { display: flex; flex-direction: column; gap: .35rem; } .nd-line-grid-head { display: grid; gap: .35rem; font-size: .65rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: #64748b; padding: 0 .15rem; } .nd-line-grid-head--money { grid-template-columns: minmax(0, 1fr) 7rem 2.25rem; } .nd-line-grid-head--leave { grid-template-columns: minmax(0, 1.2fr) repeat(4, 4rem) 2.25rem; } .nd-line-grid-row { display: grid; gap: .35rem; align-items: center; } .nd-line-grid--money-lines .nd-line-grid-row { grid-template-columns: minmax(0, 1fr) 7rem 2.25rem; } .nd-line-grid--leave-lines .nd-line-grid-row { grid-template-columns: minmax(0, 1.2fr) repeat(4, 4rem) 2.25rem; } .nd-line-grid--text-lines .nd-line-grid-row { grid-template-columns: minmax(0, 1fr) 2.25rem; } .nd-line-grid-remove { width: 2.25rem; height: 2.25rem; flex-shrink: 0; } .nd-line-grid-add { align-self: flex-start; } @media (max-width: 640px) { .nd-line-grid-head { display: none; } .nd-line-grid-row { grid-template-columns: 1fr 2.25rem !important; padding: .5rem 0; border-bottom: 1px solid #e2e8f0; } .nd-line-grid--leave-lines .nd-line-grid-row input, .nd-line-grid--money-lines .nd-line-grid-row input { grid-column: 1 / -1; width: 100%; } .nd-line-grid-row .nd-line-grid-remove { grid-column: 2; grid-row: 1 / span 6; align-self: start; } } .nd-form-stepper { display: flex; flex-wrap: wrap; gap: .35rem; margin: .5rem 0 .25rem; padding-bottom: .75rem; border-bottom: 1px solid var(--nd-line); } .nd-form-stepper-pill { display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .65rem; border-radius: 999px; font-size: .72rem; font-weight: 600; color: var(--nd-muted); background: var(--nd-surface-2); border: 1px solid var(--nd-line); } .nd-form-stepper-pill.is-active { color: #fff; background: var(--nd-gradient); border-color: transparent; } .nd-form-stepper-pill.is-done { color: var(--nd-teal); border-color: rgba(13, 148, 136, .35); background: rgba(13, 148, 136, .08); } .nd-form-step { display: flex; flex-direction: column; gap: .75rem; } .nd-form-step[hidden] { display: none !important; } .nd-form-step-intro { font-size: .8125rem; color: #475569; line-height: 1.45; margin-bottom: .15rem; } .nd-form-step .nd-form-lifecycle-row--status, .nd-form-step .nd-form-lifecycle-row--rev { margin-bottom: 0; } .nd-form-lifecycle-doc-name { font-size: .8125rem; font-weight: 600; color: #334155; margin: .75rem 0 .25rem; padding-top: .5rem; border-top: 1px solid #e2e8f0; } .nd-form-lifecycle-doc-name:first-of-type { margin-top: .25rem; padding-top: 0; border-top: 0; } .nd-payslip-manual-field { display: none; } @media (min-width: 640px) { .nd-form-step .nd-form-lifecycle-row--status { display: inline-block; vertical-align: top; width: calc(62% - .35rem); margin-right: .5rem; } .nd-form-step .nd-form-lifecycle-row--rev { display: inline-block; vertical-align: top; width: calc(38% - .35rem); margin-bottom: .65rem; } .nd-form-step .nd-form-lifecycle-row--rev label { font-size: .7rem; color: #64748b; } } .nd-checkbox-group { overflow-y: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--nd-border, #e2e8f0); border-radius: .5rem; padding: .5rem .65rem; background: #fff; } .nd-checkbox-group-heading { font-size: .75rem; font-weight: 600; color: #64748b; margin-top: .5rem; margin-bottom: .25rem; text-transform: uppercase; letter-spacing: .04em; } .nd-checkbox-group-heading:first-child { margin-top: 0; } .nd-checkbox-group-row { display: flex; align-items: center; gap: .5rem; font-size: .875rem; min-height: 2.75rem; padding: .2rem .15rem; border-radius: .375rem; cursor: pointer; user-select: none; } .nd-checkbox-group-row:hover { background: var(--nd-surface-2); } .nd-checkbox-group-row input[type="checkbox"] { width: 1.1rem; height: 1.1rem; flex-shrink: 0; accent-color: var(--nd-teal); } .nd-checkbox-group-meta { font-size: .75rem; color: var(--nd-muted); margin-top: .35rem; } /* Single-select choice cards (tender wizard, premium pickers) */ .nd-choice-field { display: flex; flex-direction: column; gap: .65rem; } .nd-choice-search-wrap { margin-bottom: .15rem; } .nd-choice-search { width: 100%; } .nd-choice-grid { display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); gap: .5rem; } @media (min-width: 520px) { .nd-choice-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .nd-choice-group-heading { grid-column: 1 / -1; font-size: .72rem; font-weight: 600; color: #64748b; text-transform: uppercase; letter-spacing: .05em; margin-top: .25rem; } .nd-choice-card { display: flex; flex-direction: column; align-items: flex-start; gap: .2rem; text-align: left; width: 100%; padding: .75rem .85rem; border: 1.5px solid var(--nd-border, #e2e8f0); border-radius: .65rem; background: #fff; cursor: pointer; transition: border-color .15s, background .15s, box-shadow .15s; } .nd-choice-card:hover { border-color: #94a3b8; background: #f8fafc; } .nd-choice-card.is-selected { border-color: var(--nd-teal, #0d9488); background: #f0fdfa; box-shadow: 0 0 0 1px rgba(13, 148, 136, .15); } .nd-choice-card-title { font-size: .9rem; font-weight: 600; color: #0f172a; line-height: 1.3; } .nd-choice-card-desc { font-size: .78rem; color: #64748b; line-height: 1.35; } .nd-choice-meta { font-size: .75rem; color: var(--nd-muted); } .nd-choice-empty { grid-column: 1 / -1; font-size: .875rem; color: #64748b; padding: .75rem; border: 1px dashed #cbd5e1; border-radius: .5rem; text-align: center; } .nd-choice-clear { align-self: flex-start; } /* ------------------------------------------------------------------- Sheet-style modal shell for dashboards. The programmatic modals from openModal() in assets/app.js use .nd-modal. This pair is for bespoke Alpine-driven dialogs that need richer inner markup (tables, tabs, grids). Mirrors the same z-index + mobile full-sheet behaviour so there is never a translucent gap that lets the dashboard topbar show through. ------------------------------------------------------------------- */ .nd-sheet-backdrop { position: fixed; top: 0; right: 0; bottom: 0; left: 0; inset: 0; width: 100vw; max-width: none; height: 100%; min-height: 100vh; min-height: 100dvh; overflow: hidden; overscroll-behavior: none; background: rgba(15, 23, 42, .55); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); z-index: 10030; display: flex; align-items: center; justify-content: center; padding: 1rem; animation: nd-fade-in .15s ease-out; } .nd-command-center-backdrop { padding: 0 !important; align-items: stretch !important; justify-content: stretch !important; } .nd-command-center-backdrop .nd-project-command-center.nd-sheet-card { width: 100vw !important; max-width: 100vw !important; height: 100vh !important; height: 100dvh !important; max-height: 100dvh !important; min-height: 100dvh !important; border-radius: 0 !important; } .nd-command-center-backdrop .nd-project-command-center.nd-sheet-card .nd-project-command-center__header { border-radius: 0; } html.nd-sheet-open, body.nd-sheet-open { overflow: hidden !important; overflow-x: clip !important; overscroll-behavior: none; scrollbar-gutter: auto; } /* When scrollbar hides on lock, keep sticky topbar from shifting horizontally. */ html.nd-sheet-open .nd-topbar, body.nd-sheet-open .nd-topbar { padding-right: var(--nd-scrollbar-width, 0px); } .nd-sheet-card { background: #fff; border-radius: var(--nd-r-xl); box-shadow: var(--nd-shadow-lg); width: 100%; max-height: calc(100vh - 2rem); max-height: calc(100dvh - 2rem); overflow-y: auto; animation: nd-modal-in .18s ease-out; } /* For modals that manage their own internal scroll regions (sticky header / search + scrollable body): opt-in modifier to become a flex-column with hidden outer overflow. */ .nd-sheet-card--flex { display: flex; flex-direction: column; overflow: hidden; max-height: calc(100vh - 2rem); max-height: calc(100dvh - 2rem); min-height: min(55vh, calc(100dvh - 2rem)); } .nd-sheet-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; } .nd-sheet-card--flex > .flex-1, .nd-sheet-card--flex > .nd-sheet-scroll { min-height: 0; } .nd-sheet-foot { flex-shrink: 0; } .nd-hr-docs-picker-backdrop { z-index: 10035; } .nd-hr-contract-sheet-backdrop { z-index: 10036; } .nd-hr-docs-picker-card { width: min(100%, 42rem); max-width: 42rem; } @media (min-width: 768px) { .nd-hr-docs-picker-backdrop .nd-hr-docs-picker-card.nd-sheet-card--flex { min-height: 0; height: auto; max-height: calc(100dvh - 2rem); } } .nd-hr-docs-picker-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-shrink: 0; } .nd-hr-docs-picker-head-actions { display: flex; align-items: center; gap: .25rem; flex-shrink: 0; } .nd-hr-docs-picker-row td { vertical-align: middle; } .nd-hr-docs-picker-table thead th { font-size: .68rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: #64748b; background: #f8fafc; } .nd-hr-docs-picker-table tbody tr:hover { background: #f8fafc; } .nd-hr-docs-picker-filename { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 14rem; } .nd-hr-docs-picker-actions { display: inline-flex; flex-wrap: nowrap; align-items: center; justify-content: flex-end; gap: .25rem; } .nd-hr-docs-picker-actions .nd-icon-btn { flex-shrink: 0; } @media (max-width: 640px) { .nd-hr-docs-picker-table { min-width: 0; } .nd-hr-docs-picker-table thead { display: none; } .nd-hr-docs-picker-table tbody tr { display: block; border-bottom: 1px solid #e2e8f0; } .nd-hr-docs-picker-table tbody tr:last-child { border-bottom: 0; } .nd-hr-docs-picker-table tbody td { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .45rem .75rem; border: 0; } .nd-hr-docs-picker-table tbody td::before { content: attr(data-label); flex: 0 0 auto; font-size: .68rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: #64748b; } .nd-hr-docs-picker-table tbody td[data-label="Document"] { padding-top: .75rem; font-size: .875rem; } .nd-hr-docs-picker-table tbody td[data-label="Document"]::before { display: none; } .nd-hr-docs-picker-table tbody td[data-label="Actions"] { justify-content: flex-end; padding-bottom: .75rem; } .nd-hr-docs-picker-table tbody td[data-label="Actions"]::before { display: none; } .nd-hr-docs-picker-filename { max-width: none; text-align: right; } } .nd-pdf-preview-card { width: min(96vw, 64rem); height: min(92vh, calc(100dvh - 2rem)); max-height: calc(100vh - 2rem); max-height: calc(100dvh - 2rem); min-height: min(70vh, calc(100dvh - 2rem)); } .nd-pdf-preview-body { flex: 1 1 auto; min-height: 0; overflow: hidden; display: flex; flex-direction: column; } .nd-pdf-preview-frame { flex: 1 1 auto; min-height: 0; width: 100%; height: 100%; border: 0; background: #fff; } @media (max-width: 640px) { .nd-pdf-preview-backdrop { padding: 0; align-items: stretch; } .nd-pdf-preview-card { width: 100%; height: 100vh; height: 100dvh; max-height: 100vh; max-height: 100dvh; min-height: 100vh; min-height: 100dvh; border-radius: 0; } } @media (max-width: 767px) { .nd-sheet-backdrop { padding: 0; align-items: stretch; } .nd-sheet-card { max-height: 100vh; max-height: 100dvh; min-height: 100vh; min-height: 100dvh; border-radius: 0; padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); box-sizing: border-box; } /* Flex sheets: height must include safe-area padding or footers clip off-screen. */ .nd-sheet-card.nd-sheet-card--flex { height: 100dvh; max-height: 100dvh; min-height: 0; } } /* Segmented tab control (Policy pages: Privacy / Terms / POPIA) */ .nd-tab-btn { padding: .55rem .9rem; border-radius: .375rem; min-height: 2.75rem; font-size: .8rem; font-weight: 500; color: var(--nd-muted); background: transparent; border: 0; cursor: pointer; transition: all .15s ease; white-space: nowrap; } .nd-tab-btn:hover { color: var(--nd-ink); } .nd-tab-active { background: #fff; color: var(--nd-ink); box-shadow: 0 1px 2px rgba(15, 23, 42, .08); } /* Quill WYSIWYG (policy editors) */ .nd-quill { min-height: 260px; } .nd-quill + .ql-toolbar, .ql-toolbar.ql-snow { border-top-left-radius: .5rem; border-top-right-radius: .5rem; border-color: var(--nd-line-2); } .ql-container.ql-snow { border-bottom-left-radius: .5rem; border-bottom-right-radius: .5rem; border-color: var(--nd-line-2); min-height: 240px; font-size: .9rem; background: #fff; } .ql-editor { min-height: 240px; } /* ------------------------------------------------------------------- Utility: responsive data tables that collapse to card rows on phones (opt-in via class="nd-stack-mobile" on the ). Each
should carry a data-label="..." -- that becomes the field label in the stacked card view. Use data-stack-full on cells that should occupy the full row width (e.g. action button groups). ------------------------------------------------------------------- */ @media (max-width: 640px) { .nd-stack-mobile { display: block; width: 100%; min-width: 0 !important; } .nd-stack-mobile thead { display: none; } .nd-stack-mobile tbody, .nd-stack-mobile tfoot { display: block; width: 100%; } .nd-stack-mobile tr { display: block; padding: .9rem 1rem; border: 0; border-bottom: 1px solid var(--nd-line); background: #fff; } .nd-stack-mobile tr:last-child { border-bottom: 0; } .nd-stack-mobile tr:nth-child(even) { background: #fafbfc; } .nd-stack-mobile td { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: .3rem 0; border: 0 !important; text-align: right; min-width: 0; white-space: normal !important; } .nd-stack-mobile td > * { max-width: 100%; } .nd-stack-mobile td::before { content: attr(data-label); font-weight: 600; color: var(--nd-muted); text-transform: uppercase; font-size: .62rem; letter-spacing: .06em; flex: 0 0 auto; text-align: left; padding-top: .15rem; white-space: nowrap; } .nd-stack-mobile td[data-label=""]::before, .nd-stack-mobile td:not([data-label])::before { content: none; } /* Full-width cells (e.g. action button rows) */ .nd-stack-mobile td[data-stack-full] { display: block; text-align: left; padding-top: .5rem; } .nd-stack-mobile td[data-stack-full]::before { display: block; margin-bottom: .25rem; } /* Wrapper hint: turn off the horizontal scroll on phones once the table has collapsed to card rows. */ .nd-stack-wrap { overflow-x: visible !important; } } /* Optional tablet collapse for dense tables that would otherwise clip. Opt-in via class="nd-stack-tablet" on table elements. */ @media (max-width: 900px) { .nd-stack-tablet { display: block; width: 100%; min-width: 0 !important; } .nd-stack-tablet thead { display: none; } .nd-stack-tablet tbody, .nd-stack-tablet tfoot { display: block; width: 100%; } .nd-stack-tablet tr { display: block; padding: .9rem 1rem; border: 0; border-bottom: 1px solid var(--nd-line); background: #fff; } .nd-stack-tablet tr:last-child { border-bottom: 0; } .nd-stack-tablet tr:nth-child(even) { background: #fafbfc; } .nd-stack-tablet td { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: .3rem 0; border: 0 !important; text-align: right; min-width: 0; white-space: normal !important; } .nd-stack-tablet td > * { max-width: 100%; } .nd-stack-tablet td::before { content: attr(data-label); font-weight: 600; color: var(--nd-muted); text-transform: uppercase; font-size: .62rem; letter-spacing: .06em; flex: 0 0 auto; text-align: left; padding-top: .15rem; white-space: nowrap; } .nd-stack-tablet td[data-label=""]::before, .nd-stack-tablet td:not([data-label])::before { content: none; } .nd-stack-tablet td[data-stack-full] { display: block; text-align: left; padding-top: .5rem; } .nd-stack-tablet td[data-stack-full]::before { display: block; margin-bottom: .25rem; } .nd-stack-wrap { overflow-x: visible !important; } } /* Shared horizontal scroll wrapper for wide tables/grids. Pair with nd-stack-wrap when the table also uses nd-stack-mobile. */ .nd-table-wrap { width: 100%; max-width: 100%; min-width: 0; overflow-x: auto; overflow-y: visible; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; overscroll-behavior-y: auto; touch-action: pan-x pan-y; } @media (max-width: 640px) { .nd-table-wrap.nd-stack-wrap, .nd-stack-wrap.nd-table-wrap { overflow-x: visible !important; } } /* Scrollable tables: keep tabular layout inside nd-table-wrap (no card stacking). */ .nd-table-wrap:not(.nd-stack-wrap) .nd-stack-mobile, .nd-table-wrap:not(.nd-stack-wrap) .nd-stack-tablet { display: table !important; width: max-content; min-width: 100%; border-collapse: collapse; } .nd-table-wrap:not(.nd-stack-wrap) .nd-stack-mobile thead, .nd-table-wrap:not(.nd-stack-wrap) .nd-stack-tablet thead { display: table-header-group !important; } .nd-table-wrap:not(.nd-stack-wrap) .nd-stack-mobile tbody, .nd-table-wrap:not(.nd-stack-wrap) .nd-stack-tablet tbody, .nd-table-wrap:not(.nd-stack-wrap) .nd-stack-mobile tfoot, .nd-table-wrap:not(.nd-stack-wrap) .nd-stack-tablet tfoot { display: table-row-group !important; } .nd-table-wrap:not(.nd-stack-wrap) .nd-stack-mobile tr, .nd-table-wrap:not(.nd-stack-wrap) .nd-stack-tablet tr { display: table-row !important; padding: 0 !important; border: 0 !important; background: transparent !important; } .nd-table-wrap:not(.nd-stack-wrap) .nd-stack-mobile td, .nd-table-wrap:not(.nd-stack-wrap) .nd-stack-tablet td, .nd-table-wrap:not(.nd-stack-wrap) .nd-stack-mobile th, .nd-table-wrap:not(.nd-stack-wrap) .nd-stack-tablet th { display: table-cell !important; align-items: initial !important; justify-content: initial !important; gap: 0 !important; text-align: inherit; white-space: nowrap; } .nd-table-wrap:not(.nd-stack-wrap) .nd-stack-mobile td::before, .nd-table-wrap:not(.nd-stack-wrap) .nd-stack-tablet td::before { content: none !important; } .nd-table-wrap:not(.nd-stack-wrap) .nd-stack-mobile td[data-stack-full], .nd-table-wrap:not(.nd-stack-wrap) .nd-stack-tablet td[data-stack-full] { display: table-cell !important; text-align: inherit; padding-top: inherit; } /* Stack card value column: flex growth, company chips, dense admin tables. */ @media (max-width: 900px) { .nd-stack-wrap .nd-stack-mobile td > *:not(.nd-btn):not(.nd-icon-btn), .nd-stack-wrap .nd-stack-tablet td > *:not(.nd-btn):not(.nd-icon-btn) { flex: 1 1 auto; min-width: 0; text-align: right; } .nd-stack-wrap .nd-stack-mobile .nd-company-ident, .nd-stack-wrap .nd-stack-tablet .nd-company-ident { justify-content: flex-end; flex-wrap: wrap; } .nd-stack-wrap .nd-stack-mobile .nd-company-label, .nd-stack-wrap .nd-stack-tablet .nd-company-label { white-space: normal; overflow: visible; text-overflow: clip; } .nd-stack-wrap .nd-activity-table.nd-stack-mobile tbody td, .nd-stack-wrap .nd-activity-table.nd-stack-tablet tbody td { padding-left: 0; padding-right: 0; } .nd-stack-wrap .nd-stack-mobile td .nd-select, .nd-stack-wrap .nd-stack-tablet td .nd-select { width: 100%; max-width: 14rem; margin-left: auto; } } /* Scroll tables: keep left alignment when not using card stack mode. */ .nd-table-wrap:not(.nd-stack-wrap) .nd-stack-mobile .nd-company-ident, .nd-table-wrap:not(.nd-stack-wrap) .nd-stack-tablet .nd-company-ident { justify-content: flex-start; } /* Ticket list filters (intern + contractor support tabs). */ .nd-ticket-filter-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; } @media (max-width: 640px) { .nd-ticket-filter-bar { flex-direction: column; align-items: stretch; } .nd-ticket-filter-bar .nd-input, .nd-ticket-filter-bar .nd-select, .nd-ticket-filter-bar .nd-input-wrap { width: 100%; max-width: none; min-width: 0; } .nd-ticket-filter-bar .nd-btn { min-height: 2.75rem; } .nd-ticket-filter-bar [role="group"]:not(.nd-view-toggle) { display: flex; width: 100%; gap: .35rem; } .nd-ticket-filter-bar [role="group"]:not(.nd-view-toggle) .nd-btn { flex: 1 1 auto; justify-content: center; } } /* ------------------------------------------------------------------- Mobile-first polish for modals, Quill editor toolbar, and safe-area insets so the app really does feel like a mobile app on phones. ------------------------------------------------------------------- */ @media (max-width: 640px) { /* Full-screen modals on small screens — edge-to-edge, no rounded corners, filling the whole viewport. Uses dvh so the browser's dynamic chrome (URL bar on scroll) doesn't cause the sheet to overflow. Matches the .nd-sheet-card pattern used by Alpine dialogs for a consistent feel across every modal surface. */ .nd-modal-backdrop { padding: 0; align-items: stretch; } .nd-modal { max-width: 100%; width: 100%; border-radius: 0; max-height: 100vh; max-height: 100dvh; min-height: 100vh; min-height: 100dvh; } .nd-modal-footer { flex-direction: column-reverse; align-items: stretch; } .nd-modal-footer .nd-btn { width: 100%; } .nd-modal-body { padding-bottom: max(1rem, env(safe-area-inset-bottom)); flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; } .nd-modal-header { padding-top: max(1rem, env(safe-area-inset-top)); } .nd-modal.nd-modal--large { display: flex; flex-direction: column; } .nd-modal .nd-checkbox-group { max-height: min(40vh, 280px); overflow-y: auto; -webkit-overflow-scrolling: touch; } /* Bigger finger-friendly tap targets for the tiny "X" close buttons that sit in modal / sheet headers. 44x44 is Apple's recommended minimum; anything smaller is hard to hit on a full-screen sheet. */ .nd-icon-btn { width: 2.75rem; height: 2.75rem; } .nd-icon-btn [data-lucide], .nd-icon-btn svg.lucide { width: 1.25rem; height: 1.25rem; } /* Date pop-over scales nicely on narrow screens */ .nd-date-pop { width: 15.5rem; } /* Toasts full bleed */ .nd-toast-stack { right: .5rem; left: .5rem; bottom: .5rem; width: auto; } /* Quill toolbar wraps instead of overflowing the card */ .ql-toolbar.ql-snow { flex-wrap: wrap; } .ql-toolbar.ql-snow .ql-formats { margin-right: 8px; margin-bottom: 4px; } /* Breathing room for cards on phones */ .nd-card.p-5, .nd-card.p-6, .nd-card.md\:p-5, .nd-card.md\:p-6 { padding: 1rem; } } /* Safe-area insets for iOS notch / home indicator */ @supports (padding: env(safe-area-inset-bottom)) { .nd-toast-stack { padding-bottom: env(safe-area-inset-bottom); } .nd-sidebar { padding-bottom: max(1rem, env(safe-area-inset-bottom)); } } /* ------------------------------------------------------------------- Tablet tier (iPad portrait + small tablets, 641-1023px). Trims chrome so dashboards have more usable content room without collapsing to the phone drawer pattern. ------------------------------------------------------------------- */ @media (min-width: 641px) and (max-width: 1023px) { /* Sidebar: slim padding, smaller link size; matches md:w-52 width */ .nd-sidebar { padding: .75rem; } .nd-sidebar-brand { padding: .15rem .15rem .75rem; gap: .5rem; } .nd-sidebar-brand .nd-logo-img { width: 28px; height: 28px; } .nd-sidebar-brand .nd-brand-name { font-size: .85rem; } .nd-sidebar-brand .nd-brand-sub { font-size: .65rem; } .nd-sidebar a { padding: .45rem .55rem; font-size: .8125rem; gap: .55rem; } /* Topbar a touch tighter so the title doesn't have to truncate as aggressively. */ .nd-topbar { padding: .7rem .9rem; } /* Cards/tables: keep some breathing room but allow tighter rhythm. */ .nd-card { border-radius: var(--nd-r-lg); } /* Accounts tablet polish: richer hierarchy and cleaner card rhythm. */ .nd-accounts-view { gap: .95rem; } .nd-accounts-view .nd-filter-bar { border: 1px solid #dbe5f0; border-radius: .85rem; background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%); box-shadow: 0 6px 18px -14px rgba(15, 23, 42, .55); } .nd-accounts-view .nd-filter-row { padding: .45rem; gap: .45rem; } .nd-accounts-view .nd-filter-row > .nd-btn { border-radius: .7rem; } .nd-accounts-view .nd-filter-row .rounded-lg { border-color: #d6e0eb; border-radius: .75rem; background: #ffffff; } .nd-accounts-view .nd-filter-row .rounded-full { border-radius: .75rem; } .nd-accounts-kpis .nd-card { border-color: #dbe5f0; border-radius: .9rem; background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%); box-shadow: 0 10px 20px -18px rgba(2, 132, 199, .6); } .nd-accounts-kpis .text-xl { letter-spacing: -.01em; } .nd-accounts-view .nd-stack-wrap { padding-left: .8rem; padding-right: .8rem; margin-left: 0; margin-right: 0; } .nd-accounts-view .nd-accounts-table.nd-stack-tablet, .nd-accounts-view .nd-accounts-assets-table.nd-stack-tablet { border-collapse: separate; border-spacing: 0 .6rem; } .nd-accounts-view .nd-accounts-table.nd-stack-tablet tr, .nd-accounts-view .nd-accounts-assets-table.nd-stack-tablet tr { margin: 0; padding: .75rem .9rem; border: 1px solid #dbe5f0; border-radius: .85rem; background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%); box-shadow: 0 12px 24px -22px rgba(15, 23, 42, .8); } .nd-accounts-view .nd-accounts-table.nd-stack-tablet td, .nd-accounts-view .nd-accounts-assets-table.nd-stack-tablet td { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); align-items: start; gap: .75rem; padding: .24rem 0; text-align: left; } .nd-accounts-view .nd-accounts-table.nd-stack-tablet td::before, .nd-accounts-view .nd-accounts-assets-table.nd-stack-tablet td::before { font-size: .6rem; color: #64748b; letter-spacing: .07em; padding-top: .25rem; } .nd-accounts-view .nd-accounts-table.nd-stack-tablet td.text-right > *, .nd-accounts-view .nd-accounts-assets-table.nd-stack-tablet td.text-right > * { margin-left: auto; text-align: right; } .nd-accounts-view .nd-accounts-table.nd-stack-tablet td[data-stack-full], .nd-accounts-view .nd-accounts-assets-table.nd-stack-tablet td[data-stack-full] { display: block; margin-top: .25rem; padding-top: .55rem; border-top: 1px dashed #e2e8f0; } .nd-accounts-view .nd-accounts-table.nd-stack-tablet td[data-stack-full] .nd-btn, .nd-accounts-view .nd-accounts-assets-table.nd-stack-tablet td[data-stack-full] .nd-btn { border-radius: .65rem; background: #f8fafc; border: 1px solid #dbe5f0; } } /* Subtle scroll affordance: any horizontally-scrollable wrapper gets a soft fade on the right edge so users see there's more to scroll to. Switched off on phones where `nd-stack-mobile` collapses tables to card rows. */ @media (min-width: 641px) { .overflow-x-auto, .nd-stack-wrap { -webkit-overflow-scrolling: touch; scrollbar-width: thin; } .overflow-x-auto::-webkit-scrollbar, .nd-stack-wrap::-webkit-scrollbar { height: 8px; } .overflow-x-auto::-webkit-scrollbar-thumb, .nd-stack-wrap::-webkit-scrollbar-thumb { background: var(--nd-line-2); border-radius: 8px; } } /* ------------------------------------------------------------------- Compact, collapsible filter bars on phones. Opt-in via class="nd-filter-bar nd-filter-collapsible" on the outer card, and class="nd-filter-toggle" on the filters toggle button. Default (no collapsible): just wraps cleanly and each control goes full-width on phones. ------------------------------------------------------------------- */ .nd-filter-bar .nd-input, .nd-filter-bar .nd-select, .nd-filter-bar .nd-select-wrap, .nd-filter-bar .nd-date-wrap, .nd-filter-bar .nd-input-wrap { min-width: 0; } /* Desktop / tablet: let the progressively-enhanced custom selects and date pickers size to their content rather than taking 100% width, so the filter row flows horizontally with flex-wrap. On native ) ------------------------------------------------------------------- */ .nd-date-wrap { position: relative; width: 100%; } .nd-security-expires-row { max-width: 100%; } .nd-security-expires-row .nd-date-wrap { min-width: 0; max-width: 100%; } .nd-security-expires-row .nd-date-display { min-width: 0; max-width: 100%; } .nd-security-expires-row .nd-date-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .nd-date-raw { /* hidden field; kept in DOM for x-model/form posts */ } .nd-date-display { display: flex; align-items: center; gap: .5rem; width: 100%; cursor: pointer; padding: .55rem .8rem; border-radius: var(--nd-r-md); border: 1px solid var(--nd-line-2); background: #fff; font-size: .875rem; color: var(--nd-ink); text-align: left; transition: border-color .15s ease, box-shadow .15s ease; } .nd-date-display:hover { border-color: #94a3b8; } .nd-date-display.is-open, .nd-date-display:focus-visible { outline: none; border-color: var(--nd-teal); box-shadow: 0 0 0 3px rgba(14,165,233,.18); } .nd-date-display .nd-date-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .nd-date-display.is-empty .nd-date-label { color: #94a3b8; } .nd-date-display .nd-date-icon { display: inline-flex; align-items: center; justify-content: center; color: var(--nd-muted); font-size: 1rem; } .nd-date-display .nd-date-clear { display: none; align-items: center; justify-content: center; width: 1.1rem; height: 1.1rem; border-radius: 9999px; background: var(--nd-surface-2); color: var(--nd-muted); font-size: .75rem; line-height: 1; cursor: pointer; } .nd-date-display .nd-date-clear:hover { background: #e2e8f0; color: var(--nd-ink); } .nd-date-display.has-value .nd-date-clear { display: inline-flex; } .nd-date-pop.is-portaled { position: fixed; z-index: 10070; } .nd-date-portal { pointer-events: none; } .nd-date-portal > .nd-date-pop { pointer-events: auto; } .nd-month-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; } .nd-month-cell { background: transparent; border: 0; cursor: pointer; padding: .45rem .2rem; border-radius: .35rem; font-size: .78rem; color: var(--nd-ink); transition: background .12s ease, color .12s ease; } .nd-month-cell:hover { background: var(--nd-surface-2); } .nd-month-cell.is-selected { background: var(--nd-teal); color: #fff; font-weight: 700; } .nd-date-pop { position: absolute; top: calc(100% + 6px); left: 0; z-index: 50; width: 17rem; max-width: calc(100vw - 2rem); background: #fff; border: 1px solid var(--nd-line); border-radius: var(--nd-r-lg); box-shadow: var(--nd-shadow-lg); padding: .6rem; animation: nd-fade-in .12s ease-out; } .nd-date-pop.is-up { top: auto; bottom: calc(100% + 6px); } .nd-date-head { display: flex; align-items: center; gap: .15rem; padding: .1rem 0 .5rem; } .nd-date-head .nd-date-title { flex: 1; text-align: center; font-size: .85rem; font-weight: 600; color: var(--nd-ink); } .nd-date-head .nd-date-nav { background: transparent; border: 0; cursor: pointer; width: 1.6rem; height: 1.6rem; border-radius: .35rem; color: var(--nd-muted); font-size: .9rem; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; } .nd-date-head .nd-date-nav:hover { background: var(--nd-surface-2); color: var(--nd-ink); } .nd-date-head .nd-date-nav:disabled { opacity: .38; cursor: not-allowed; color: #94a3b8; } .nd-date-head .nd-date-nav:disabled:hover { background: transparent; color: #94a3b8; } .nd-date-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; } .nd-date-dow { font-size: .65rem; color: var(--nd-muted); text-align: center; padding: .25rem 0; font-weight: 600; letter-spacing: .04em; } .nd-date-day { background: transparent; border: 0; cursor: pointer; padding: .35rem 0; border-radius: .3rem; font-size: .8rem; color: var(--nd-ink); transition: background .12s ease, color .12s ease; } .nd-date-day:hover { background: var(--nd-surface-2); } .nd-date-day:disabled { opacity: .35; cursor: not-allowed; color: #94a3b8; } .nd-date-day:disabled:hover { background: transparent; } .nd-date-day.is-today { color: var(--nd-teal); font-weight: 700; } .nd-date-day.is-selected { background: var(--nd-teal); color: #fff; font-weight: 700; box-shadow: 0 2px 6px -2px rgba(14,165,233,.7); } .nd-date-day.is-selected.is-today { background: var(--nd-orange); box-shadow: 0 2px 6px -2px rgba(249,115,22,.7); } .nd-date-actions { display: flex; justify-content: space-between; gap: .4rem; padding-top: .5rem; margin-top: .35rem; border-top: 1px solid var(--nd-line); } .nd-date-action { background: transparent; border: 0; cursor: pointer; padding: .3rem .65rem; border-radius: .3rem; font-size: .75rem; font-weight: 500; color: var(--nd-muted); } .nd-date-action:hover { background: var(--nd-surface-2); color: var(--nd-ink); } .nd-date-action.is-primary { color: var(--nd-teal); font-weight: 600; } .nd-date-action.is-primary:hover { background: rgba(14,165,233,.12); } /* ------------------------------------------------------------------- Custom select (replaces native and are progressively enhanced by nd-ui.js into .nd-select-wrap / .nd-date-wrap wrappers that are width:100% by default, so inside a flex toolbar they stack full-width (and push their label above them). Constrain the *wrappers* (and keep the pre- enhancement native selectors as a fallback) so search + dropdowns + dates sit inline, then fall back to full-width stacking only on phones. */ #nd-content .nd-safety-toolbar-inline { display: flex !important; flex-wrap: wrap; align-items: center; gap: .5rem; } #nd-content .nd-safety-toolbar-inline .nd-input-wrap { flex: 1 1 12rem; min-width: 10rem; max-width: 16rem; } #nd-content .nd-safety-toolbar-inline .nd-input-wrap > .nd-input { width: 100% !important; } #nd-content .nd-safety-toolbar-inline > .nd-select-wrap, #nd-content .nd-safety-toolbar-inline > .nd-select { flex: 0 1 13rem !important; width: auto !important; min-width: 9rem; max-width: 15rem; } /* Label + dropdown groups (compliance/tasks/staff/accounts): keep the uppercase label and its control on one line. */ #nd-content .nd-compliance-filter-group, #nd-content .nd-tasks-filter-group, #nd-content .nd-hr-staff-filter-group, #nd-content .nd-accounts-filter-group { flex-wrap: nowrap; } #nd-content .nd-compliance-filter-group .nd-select-wrap, #nd-content .nd-tasks-filter-group .nd-select-wrap, #nd-content .nd-hr-staff-filter-group .nd-select-wrap, #nd-content .nd-accounts-filter-group .nd-select-wrap { width: auto !important; flex: 0 1 9rem; min-width: 6.5rem; max-width: 11rem; } /* Accounts entry/asset dropdown filters + date range in filter groups. */ #nd-content .nd-accounts-filter-group--dates { flex-wrap: nowrap; } #nd-content .nd-accounts-filter-group--dates .nd-vault-date-field { display: inline-flex; align-items: center; gap: .35rem; flex: 0 1 auto; white-space: nowrap; } #nd-content .nd-accounts-filter-group--dates .nd-vault-date-field .nd-vault-date-label { flex: 0 0 auto; } #nd-content .nd-accounts-filter-group--dates .nd-vault-date-field .nd-date-wrap, #nd-content .nd-accounts-filter-group--dates .nd-vault-date-field input[type="date"].nd-input { width: auto !important; flex: 0 1 8rem; min-width: 6.5rem; max-width: 9.5rem; } #nd-content .nd-hr-leave-filters .nd-vault-date-field { display: inline-flex; align-items: center; gap: .35rem; flex: 0 1 auto; white-space: nowrap; } #nd-content .nd-hr-leave-filters .nd-vault-date-field .nd-vault-date-label { flex: 0 0 auto; } #nd-content .nd-hr-leave-filters .nd-vault-date-field .nd-date-wrap, #nd-content .nd-hr-leave-filters .nd-vault-date-field input[type="date"].nd-input { width: auto !important; flex: 0 1 8rem; min-width: 6.5rem; max-width: 9.5rem; } /* Toolbar horizontal distribution: compact search on accounts; staff register uses a two-zone toolbar (primary + filters) that spans full width. */ #nd-content .nd-accounts-toolbar-search { flex: 0 1 12rem !important; min-width: 8rem; max-width: 14rem; } #nd-content .nd-hr-staff-toolbar-search { flex: 1 1 12rem !important; min-width: 8rem; max-width: none !important; } #nd-content .nd-assets-toolbar-inline .nd-accounts-toolbar-actions, #nd-content .nd-hr-staff-toolbar-primary .nd-hr-staff-toolbar-actions { order: unset; margin-left: auto; } #nd-content .nd-hr-staff-toolbar-filters .nd-hr-staff-filter-group .nd-select-wrap, #nd-content .nd-hr-staff-toolbar-filters .nd-hr-staff-filter-group .nd-select { flex: 1 1 auto; min-width: 0; max-width: none !important; width: 100% !important; } @media (min-width: 641px) { .nd-accounts-filter-group--tools { justify-content: flex-start; } } /* Vault filter row: search + Module dropdown + From/To dates on one inline row (the module + dates collapse under "More filters" on phones). */ #nd-content .nd-vault-filter-controls .nd-select-wrap { width: auto !important; flex: 0 1 9.5rem; min-width: 7rem; max-width: 11rem; } #nd-content .nd-vault-filter-controls .nd-vault-filter-label { flex: 0 0 auto; white-space: nowrap; margin-right: .25rem; } #nd-content .nd-vault-filter-controls .nd-vault-inline-field { display: inline-flex; align-items: center; flex: 0 0 auto; gap: .25rem; white-space: nowrap; } #nd-content .nd-vault-filter-controls .nd-select-wrap + .nd-vault-inline-field, #nd-content .nd-vault-filter-controls select.nd-select + .nd-vault-inline-field { margin-left: 1rem; } #nd-content .nd-vault-filter-controls .nd-vault-inline-field .nd-date-wrap, #nd-content .nd-vault-filter-controls .nd-vault-inline-field input[type="date"].nd-input { width: auto !important; flex: 0 0 auto; min-width: 10rem; max-width: none; } #nd-content .nd-vault-filter-controls .nd-vault-inline-field .nd-date-display { min-width: 10rem; } @media (max-width: 640px) { #nd-content .nd-safety-toolbar-inline .nd-input-wrap, #nd-content .nd-safety-toolbar-inline > .nd-select-wrap, #nd-content .nd-safety-toolbar-inline > .nd-select { flex: 1 1 100% !important; max-width: none; min-width: 0; } #nd-content .nd-vault-filter-controls .nd-select-wrap { flex: 1 1 45%; max-width: none; min-width: 0; } #nd-content .nd-vault-filter-controls .nd-vault-inline-field { flex: 1 1 100%; } #nd-content .nd-vault-filter-controls .nd-select-wrap + .nd-vault-inline-field, #nd-content .nd-vault-filter-controls select.nd-select + .nd-vault-inline-field { margin-left: 0; } #nd-content .nd-vault-filter-controls .nd-vault-inline-field .nd-date-wrap, #nd-content .nd-vault-filter-controls .nd-vault-inline-field input[type="date"].nd-input { flex: 1 1 auto; min-width: 0; max-width: none; } #nd-content .nd-vault-filter-controls .nd-vault-inline-field .nd-date-display { min-width: 0; width: 100%; } #nd-content .nd-compliance-filter-group, #nd-content .nd-tasks-filter-group, #nd-content .nd-hr-staff-filter-group, #nd-content .nd-accounts-filter-group { flex-wrap: wrap; } #nd-content .nd-compliance-filter-group .nd-select-wrap, #nd-content .nd-tasks-filter-group .nd-select-wrap, #nd-content .nd-hr-staff-filter-group .nd-select-wrap, #nd-content .nd-accounts-filter-group .nd-select-wrap { flex: 1 1 100%; max-width: none; } #nd-content .nd-hr-staff-toolbar-inline .nd-hr-staff-toolbar-actions, #nd-content .nd-assets-toolbar-inline .nd-accounts-toolbar-actions { order: unset; margin-left: 0; width: 100%; justify-content: flex-end; } #nd-content .nd-accounts-filter-group--dates { flex-wrap: wrap; } #nd-content .nd-accounts-filter-group--dates .nd-vault-date-field { flex: 1 1 100%; } #nd-content .nd-accounts-filter-group--dates .nd-vault-date-field .nd-date-wrap, #nd-content .nd-accounts-filter-group--dates .nd-vault-date-field input[type="date"].nd-input { flex: 1 1 auto; max-width: none; min-width: 0; } #nd-content .nd-hr-leave-filters .nd-vault-date-field { flex: 1 1 100%; } #nd-content .nd-hr-leave-filters .nd-vault-date-field .nd-date-wrap, #nd-content .nd-hr-leave-filters .nd-vault-date-field input[type="date"].nd-input { flex: 1 1 auto; max-width: none; min-width: 0; } } /* 7. Sortable table headers: clickable label + dual-chevron indicator. The indicator is a child span (not th::after) so it never collides with the accounts tables' existing thead th::after, and it uses currentColor so it adapts to both neutral and colored "sheet" headers. Global (not only #nd-content) so public /tenders and other standalone pages show arrows. */ th.nd-th-sort, #nd-content th.nd-th-sort { cursor: pointer; user-select: none; white-space: nowrap; } th.nd-th-sort:hover, #nd-content th.nd-th-sort:hover { color: #334155 !important; } th.nd-th-sort:focus-visible, #nd-content th.nd-th-sort:focus-visible { outline: 2px solid var(--nd-teal); outline-offset: -2px; } .nd-sort-ind, #nd-content .nd-sort-ind { display: inline-flex; flex-direction: column; justify-content: center; gap: 2px; margin-left: .35em; vertical-align: middle; line-height: 0; } .nd-sort-ind::before, .nd-sort-ind::after, #nd-content .nd-sort-ind::before, #nd-content .nd-sort-ind::after { content: ""; display: block; width: 0; height: 0; border-left: 3.5px solid transparent; border-right: 3.5px solid transparent; opacity: .45; } .nd-sort-ind::before, #nd-content .nd-sort-ind::before { border-bottom: 4px solid currentColor; } .nd-sort-ind::after, #nd-content .nd-sort-ind::after { border-top: 4px solid currentColor; } .nd-sort-ind[data-dir="asc"]::before, #nd-content .nd-sort-ind[data-dir="asc"]::before { opacity: 1; } .nd-sort-ind[data-dir="desc"]::after, #nd-content .nd-sort-ind[data-dir="desc"]::after { opacity: 1; } .nd-tender-sheet thead th.nd-th-sort:hover { color: #9a3412 !important; } /* 8. Sheet-style table header + action-cell vertical alignment. Sheet headers (safety/tender/compliance/ticket) had no vertical-align, and row action groups mix bordered + ghost buttons of differing heights, which pushed the ACTIONS header off-centre vs the row icons. Center both. */ #nd-content .nd-safety-sheet thead th, #nd-content .nd-tender-sheet thead th, #nd-content .nd-compliance-sheet thead th, #nd-content .nd-ticket-sheet thead th { vertical-align: middle !important; } #nd-content .nd-safety-sheet tbody td, #nd-content .nd-safety-sheet tbody td.nd-row-actions { vertical-align: middle !important; } #nd-content .nd-row-actions > div, #nd-content .nd-safety-actions, #nd-content .nd-mobile-inline-actions { display: inline-flex; align-items: center; } #nd-content td.nd-row-actions { display: table-cell !important; vertical-align: middle !important; } #nd-content .nd-row-actions .nd-btn-sm, #nd-content .nd-safety-actions .nd-btn { min-height: 1.9rem; line-height: 1; align-items: center; }