/** * Shared styles for Table API pages (Employee, Employee Contact, Employee Contract). * Link once: (from employee* / employeeContact* / employeeContract* folders) * Add class="table-api" to on each table-api page. */ :root { color-scheme: light; /* Table API – Layout & spacing */ --nexus-sys-table-api-container-gap: var(--nexus-ref-spacing-24); --nexus-sys-table-api-header-margin-bottom: var(--nexus-ref-spacing-24); --nexus-sys-table-api-sidebar-width: 220px; --nexus-sys-table-api-sidebar-top: var(--nexus-ref-spacing-24); --nexus-sys-table-api-sidebar-padding: var(--nexus-ref-spacing-16); --nexus-sys-table-api-sidebar-radius: var(--nexus-ref-shape-corner-small); --nexus-sys-table-api-nav-gap: var(--nexus-ref-spacing-2); --nexus-sys-table-api-nav-link-padding: var(--nexus-ref-spacing-8) var(--nexus-ref-spacing-12); --nexus-sys-table-api-nav-link-radius: 6px; --nexus-sys-table-api-drawer-trigger-size: 44px; --nexus-sys-table-api-drawer-trigger-margin-end: var(--nexus-ref-spacing-12); --nexus-sys-table-api-drawer-trigger-radius: var(--nexus-ref-shape-corner-small); --nexus-sys-table-api-sidebar-close-size: 36px; --nexus-sys-table-api-sidebar-close-top: var(--nexus-ref-spacing-12); --nexus-sys-table-api-sidebar-close-end: var(--nexus-ref-spacing-12); --nexus-sys-table-api-drawer-width: min(280px, 85vw); --nexus-sys-table-api-drawer-max-width: 280px; --nexus-sys-table-api-drawer-padding-top: 52px; --nexus-sys-table-api-mobile-container-padding: var(--nexus-ref-spacing-16) var(--nexus-ref-spacing-12); --nexus-sys-table-api-controls-padding: var(--nexus-ref-spacing-16); --nexus-sys-table-api-controls-gap: var(--nexus-ref-spacing-12); --nexus-sys-table-api-controls-margin-bottom: var(--nexus-ref-spacing-24); --nexus-sys-table-api-controls-radius: var(--nexus-ref-shape-corner-small); --nexus-sys-table-api-modal-radius: var(--nexus-ref-shape-corner-medium); --nexus-sys-table-api-modal-padding: var(--nexus-ref-spacing-24); --nexus-sys-table-api-modal-max-width: 600px; --nexus-sys-table-api-modal-narrow-max-width: 420px; --nexus-sys-table-api-modal-actions-gap: var(--nexus-ref-spacing-12); --nexus-sys-table-api-modal-actions-margin-top: var(--nexus-ref-spacing-24); --nexus-sys-table-api-modal-actions-padding-top: var(--nexus-ref-spacing-24); --nexus-sys-table-api-input-group-margin-bottom: var(--nexus-ref-spacing-16); --nexus-sys-table-api-transition-duration: 0.2s; --nexus-sys-table-api-drawer-transition-duration: 0.25s; --nexus-sys-table-api-z-backdrop: 1000; --nexus-sys-table-api-z-drawer: 1001; /* Table API – Colors (sidebar, nav, drawer, controls) */ --nexus-sys-color-table-api-link: var(--nexus-ref-primary-20); --nexus-sys-color-table-api-sidebar-background: var(--nexus-ref-primary-100); --nexus-sys-color-table-api-sidebar-border: var(--nexus-ref-neutral-100); --nexus-sys-color-table-api-sidebar-title: var(--nexus-ref-neutral-30); --nexus-sys-color-table-api-nav-link: var(--nexus-ref-primary-20); --nexus-sys-color-table-api-nav-link-hover-bg: var(--nexus-ref-neutral-100); --nexus-sys-color-table-api-nav-link-active-bg: var(--nexus-ref-primary-20); --nexus-sys-color-table-api-nav-link-active-text: var(--nexus-ref-primary-100); --nexus-sys-color-table-api-drawer-trigger-border: var(--nexus-ref-neutral-100); --nexus-sys-color-table-api-drawer-trigger-bg: var(--nexus-ref-primary-100); --nexus-sys-color-table-api-drawer-trigger-text: var(--nexus-ref-neutral-30); --nexus-sys-color-table-api-drawer-trigger-hover-bg: var(--nexus-ref-neutral-100); --nexus-sys-color-table-api-drawer-trigger-hover-border: var(--nexus-ref-neutral-90); --nexus-sys-color-table-api-sidebar-close-text: var(--nexus-ref-neutral-50); --nexus-sys-color-table-api-sidebar-close-hover-bg: var(--nexus-ref-neutral-100); --nexus-sys-color-table-api-sidebar-close-hover-text: var(--nexus-ref-neutral-30); --nexus-sys-color-table-api-drawer-backdrop: rgba(0, 0, 0, 0.4); --nexus-sys-color-table-api-drawer-shadow: 4px 0 24px rgba(0, 0, 0, 0.12); --nexus-sys-color-table-api-controls-bg: var(--nexus-ref-primary-100); --nexus-sys-color-table-api-controls-border: var(--nexus-ref-neutral-100); --nexus-sys-color-table-api-controls-label: var(--nexus-ref-neutral-30); --nexus-sys-color-table-api-status: var(--nexus-ref-neutral-70); --nexus-sys-color-table-api-status-busy: var(--nexus-ref-neutral-30); --nexus-sys-color-table-api-status-error: var(--nexus-ref-error-30); --nexus-sys-color-table-api-search-clear: var(--nexus-ref-neutral-70); --nexus-sys-color-table-api-search-clear-hover-bg: var(--nexus-ref-neutral-90); --nexus-sys-color-table-api-search-clear-hover-text: var(--nexus-ref-neutral-30); --nexus-sys-color-table-api-search-clear-active-bg: var(--nexus-ref-neutral-80); --nexus-sys-color-table-api-modal-overlay: rgba(0, 0, 0, 0.5); --nexus-sys-color-table-api-modal-bg: var(--nexus-ref-primary-100); --nexus-sys-color-table-api-modal-shadow: 0 8px 32px rgba(0, 0, 0, 0.2); --nexus-sys-color-table-api-modal-title: var(--nexus-ref-neutral-30); --nexus-sys-color-table-api-modal-close: var(--nexus-ref-neutral-70); --nexus-sys-color-table-api-modal-close-hover: var(--nexus-ref-neutral-30); --nexus-sys-color-table-api-modal-message: var(--nexus-ref-neutral-50); --nexus-sys-color-table-api-modal-actions-border: var(--nexus-ref-neutral-90); --nexus-sys-color-table-api-modal-error-bg: var(--nexus-ref-error-100); --nexus-sys-color-table-api-modal-error-border: var(--nexus-ref-error-95); --nexus-sys-color-table-api-modal-error-text: var(--nexus-ref-error-30); --nexus-sys-color-table-api-detail-key: var(--nexus-ref-neutral-50); --nexus-sys-color-table-api-detail-value: var(--nexus-ref-neutral-10); --nexus-sys-color-table-api-detail-empty: var(--nexus-ref-neutral-50); --nexus-sys-color-table-api-detail-table-border: var(--nexus-ref-neutral-100); /* Table API – Typography (from design system) */ --nexus-sys-table-api-sidebar-title-font-size: var(--nexus-sys-typescale-text-sm-font-size); --nexus-sys-table-api-sidebar-title-font-weight: var(--nexus-sys-typescale-font-weight-semibold); --nexus-sys-table-api-nav-link-font-size: var(--nexus-sys-typescale-text-sm-font-size); --nexus-sys-table-api-controls-label-font-size: var(--nexus-sys-typescale-text-sm-font-size); --nexus-sys-table-api-controls-label-font-weight: var(--nexus-sys-typescale-font-weight-medium); --nexus-sys-table-api-modal-title-font-size: var(--nexus-sys-typescale-text-lg-font-size); --nexus-sys-table-api-modal-title-font-weight: var(--nexus-sys-typescale-font-weight-semibold); --nexus-sys-table-api-modal-message-font-size: var(--nexus-sys-typescale-text-md-font-size); --nexus-sys-table-api-hint-font-size: var(--nexus-sys-typescale-text-sm-font-size); --nexus-sys-table-api-detail-key-font-weight: var(--nexus-sys-typescale-font-weight-medium); --nexus-sys-table-api-input-hint-color: var(--nexus-sys-input-hintText-color); --nexus-sys-table-api-input-error-color: var(--nexus-sys-input-hintText-destructive-color); } /* Prevent page-level horizontal scroll; table scrolls inside .table-api-main */ body.table-api { overflow-x: hidden; } /* Page layout */ body.table-api .header { margin-bottom: var(--nexus-sys-table-api-header-margin-bottom); } body.table-api .subtitle { color: var(--doc-text-secondary); margin: 0 auto; } body.table-api.hr-setup-context .header, body.table-api.hr-setup-context .header .subtitle { text-align: center; } body.table-api .doc-link { display: inline-block; margin-bottom: var(--nexus-ref-spacing-16); color: var(--nexus-sys-color-table-api-link); text-decoration: none; } body.table-api .doc-link:hover { text-decoration: underline; } /* Table cell file/download link */ .table-api-file-link { color: var(--nexus-sys-color-table-api-link); text-decoration: none; } .table-api-file-link:hover { text-decoration: underline; cursor: pointer; } /* Table API layout: sidebar + main content */ body.table-api .container { display: flex; gap: var(--nexus-sys-table-api-container-gap); align-items: flex-start; max-width: none; /* width: 100%; */ box-sizing: border-box; min-width: 0; } .table-api-sidebar { flex-shrink: 0; width: var(--nexus-sys-table-api-sidebar-width); position: sticky; top: var(--nexus-sys-table-api-sidebar-top); padding: var(--nexus-sys-table-api-sidebar-padding); background: var(--nexus-sys-color-table-api-sidebar-background); border: 1px solid var(--nexus-sys-color-table-api-sidebar-border); border-radius: var(--nexus-sys-table-api-sidebar-radius); } .table-api-sidebar-title { font-size: var(--nexus-sys-table-api-sidebar-title-font-size); font-weight: var(--nexus-sys-table-api-sidebar-title-font-weight); color: var(--nexus-sys-color-table-api-sidebar-title); margin: 0 0 var(--nexus-ref-spacing-12) 0; text-transform: uppercase; letter-spacing: 0.5px; } .table-api-nav { display: flex; flex-direction: column; gap: var(--nexus-sys-table-api-nav-gap); } .table-api-nav .doc-link { display: block; padding: var(--nexus-sys-table-api-nav-link-padding); margin-bottom: 0; border-radius: var(--nexus-sys-table-api-nav-link-radius); font-size: var(--nexus-sys-table-api-nav-link-font-size); color: var(--nexus-sys-color-table-api-nav-link); text-decoration: none; } .table-api-nav .doc-link:hover { background: var(--nexus-sys-color-table-api-nav-link-hover-bg); text-decoration: none; } .table-api-nav .doc-link.is-active { background: var(--nexus-sys-color-table-api-nav-link-active-bg); color: var(--nexus-sys-color-table-api-nav-link-active-text); font-weight: var(--nexus-sys-typescale-font-weight-semibold); } .table-api-main { flex: 1; min-width: 0; width: 100%; /* horizontal scroll only on .nexus-table-wrapper below the table, not here */ } /* Legacy doc links row (hidden when using sidebar) */ .table-api-doc-links { display: none; } /* Drawer trigger: visible only on mobile */ .table-api-drawer-trigger { display: none; align-items: center; justify-content: center; width: var(--nexus-sys-table-api-drawer-trigger-size); height: var(--nexus-sys-table-api-drawer-trigger-size); padding: 0; margin: 0 var(--nexus-sys-table-api-drawer-trigger-margin-end) 0 0; border: 1px solid var(--nexus-sys-color-table-api-drawer-trigger-border); border-radius: var(--nexus-sys-table-api-drawer-trigger-radius); background: var(--nexus-sys-color-table-api-drawer-trigger-bg); color: var(--nexus-sys-color-table-api-drawer-trigger-text); font-size: 1.25rem; cursor: pointer; flex-shrink: 0; transition: background-color var(--nexus-sys-table-api-transition-duration), border-color var(--nexus-sys-table-api-transition-duration); } .table-api-drawer-trigger:hover { background: var(--nexus-sys-color-table-api-drawer-trigger-hover-bg); border-color: var(--nexus-sys-color-table-api-drawer-trigger-hover-border); } /* Sidebar close button (injected; shown only in mobile drawer) */ .table-api-sidebar-close { display: none; position: absolute; top: var(--nexus-sys-table-api-sidebar-close-top); right: var(--nexus-sys-table-api-sidebar-close-end); width: var(--nexus-sys-table-api-sidebar-close-size); height: var(--nexus-sys-table-api-sidebar-close-size); padding: 0; border: none; border-radius: 6px; background: transparent; color: var(--nexus-sys-color-table-api-sidebar-close-text); font-size: 1.5rem; line-height: 1; cursor: pointer; align-items: center; justify-content: center; transition: background-color var(--nexus-sys-table-api-transition-duration), color var(--nexus-sys-table-api-transition-duration); } .table-api-sidebar-close:hover { background: var(--nexus-sys-color-table-api-sidebar-close-hover-bg); color: var(--nexus-sys-color-table-api-sidebar-close-hover-text); } /* Drawer backdrop (injected; only on mobile when open) */ .table-api-drawer-backdrop { display: none; position: fixed; inset: 0; background: var(--nexus-sys-color-table-api-drawer-backdrop); z-index: var(--nexus-sys-table-api-z-backdrop); opacity: 0; visibility: hidden; transition: opacity var(--nexus-sys-table-api-transition-duration) ease, visibility var(--nexus-sys-table-api-transition-duration) ease; } body.table-api-drawer-open .table-api-drawer-backdrop { opacity: 1; visibility: visible; } body.table-api-drawer-open { overflow: hidden; } @media (max-width: 768px) { body.table-api .container { flex-direction: column; padding: var(--nexus-sys-table-api-mobile-container-padding); } /* Show drawer trigger in header row */ .table-api-drawer-trigger { display: inline-flex; } body.table-api .header { display: flex; align-items: center; flex-wrap: wrap; margin-bottom: 24px; } body.table-api.hr-setup-context .header { justify-content: center; text-align: center; } body.table-api .header .table-api-drawer-trigger { order: -1; } /* Sidebar becomes fixed drawer: off-screen by default */ .table-api-sidebar { position: fixed; left: 0; top: 0; bottom: 0; width: var(--nexus-sys-table-api-drawer-width); max-width: var(--nexus-sys-table-api-drawer-max-width); z-index: var(--nexus-sys-table-api-z-drawer); margin: 0; border-radius: 0; border-left: none; border-top: none; border-bottom: none; box-shadow: var(--nexus-sys-color-table-api-drawer-shadow); transform: translateX(-100%); transition: transform var(--nexus-sys-table-api-drawer-transition-duration) ease-out; overflow-y: auto; padding-top: var(--nexus-sys-table-api-drawer-padding-top); background: var(--nexus-sys-color-table-api-sidebar-background); } body.table-api-drawer-open .table-api-sidebar { transform: translateX(0); } .table-api-sidebar-title { padding-right: 40px; } .table-api-sidebar-close { display: inline-flex; } .table-api-drawer-backdrop { display: block; } .table-api-nav { flex-direction: column; flex-wrap: nowrap; gap: 2px; } .table-api-main { width: 100%; min-width: 0; } } /* Keep table container and wrapper constrained inside sidebar layout */ body.table-api .table-api-main .nexus-table-container, body.table-api .table-api-main .nexus-table-wrapper { min-width: 0; max-width: 100%; } /* API controls (search, buttons, status) */ body.table-api .api-controls { margin: 0 0 var(--nexus-sys-table-api-controls-margin-bottom) 0; padding: var(--nexus-sys-table-api-controls-padding); background: var(--nexus-sys-color-table-api-controls-bg); border-radius: var(--nexus-sys-table-api-controls-radius); border: 1px solid var(--nexus-sys-color-table-api-controls-border); display: flex; gap: var(--nexus-sys-table-api-controls-gap); flex-wrap: wrap; align-items: center; } body.table-api .api-controls-row { display: flex; gap: var(--nexus-sys-table-api-controls-gap); flex-wrap: wrap; align-items: center; flex: 1; min-width: 0; } body.table-api .api-controls label { font-size: var(--nexus-sys-table-api-controls-label-font-size); color: var(--nexus-sys-color-table-api-controls-label); font-weight: var(--nexus-sys-table-api-controls-label-font-weight); } body.table-api .api-status { width: 100%; min-height: 20px; font-size: var(--nexus-sys-typescale-text-sm-font-size); color: var(--nexus-sys-color-table-api-status); margin-top: var(--nexus-ref-spacing-8); flex-basis: 100%; order: 999; } body.table-api .api-status[aria-busy="true"] { color: var(--nexus-sys-color-table-api-status-busy); } body.table-api .api-status.is-error { color: var(--nexus-sys-color-table-api-status-error); } /* Search input wrapper – use class instead of inline style */ .table-api-search-wrap { flex: 1; min-width: 200px; position: relative; } body.table-api .api-search-clear { position: absolute; right: var(--nexus-ref-spacing-8); top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; padding: var(--nexus-ref-spacing-4) var(--nexus-ref-spacing-8); color: var(--nexus-sys-color-table-api-search-clear); font-size: 20px; line-height: 1; display: none; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: var(--nexus-ref-spacing-4); transition: background-color var(--nexus-sys-table-api-transition-duration), color var(--nexus-sys-table-api-transition-duration); } body.table-api .api-search-clear:hover { background: var(--nexus-sys-color-table-api-search-clear-hover-bg); color: var(--nexus-sys-color-table-api-search-clear-hover-text); } body.table-api .api-search-clear:active { background: var(--nexus-sys-color-table-api-search-clear-active-bg); } body.table-api .nexus-input-wrapper:has(#api-search) .nexus-input-component { padding-right: 36px; } /* Pagination container */ .table-api-pagination { margin-top: var(--nexus-ref-spacing-12); } /* Modals (Create, Edit, Delete) */ body.table-api .nexus-modal-overlay { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: var(--nexus-sys-color-table-api-modal-overlay); z-index: var(--nexus-sys-table-api-z-backdrop); align-items: center; justify-content: center; } body.table-api .nexus-modal-overlay.is-open { display: flex; } body.table-api .nexus-modal { background: var(--nexus-sys-color-table-api-modal-bg); border-radius: var(--nexus-sys-table-api-modal-radius); padding: var(--nexus-sys-table-api-modal-padding); max-width: var(--nexus-sys-table-api-modal-max-width); width: 90%; max-height: 90vh; overflow-y: auto; box-shadow: var(--nexus-sys-color-table-api-modal-shadow); /* Custom scrollbar */ scrollbar-width: thin; scrollbar-color: var(--nexus-ref-primary-90, #e0e7ff) transparent; } body.table-api .nexus-modal::-webkit-scrollbar { width: 6px; } body.table-api .nexus-modal::-webkit-scrollbar-track { background: transparent; border-radius: 10px; } body.table-api .nexus-modal::-webkit-scrollbar-thumb { background: var(--nexus-ref-primary-90, #e0e7ff); border-radius: 10px; } body.table-api .nexus-modal::-webkit-scrollbar-thumb:hover { background: var(--nexus-ref-primary-80, #c7d2fe); } body.table-api .nexus-modal--narrow { max-width: var(--nexus-sys-table-api-modal-narrow-max-width); } body.table-api .nexus-modal-header { display: flex; justify-content: space-between; align-items: center; position: sticky; top: calc(-1 * var(--nexus-sys-table-api-modal-padding, 24px)); background: var(--nexus-sys-color-table-api-modal-bg, #fff); z-index: 10; margin-top: calc(-1 * var(--nexus-sys-table-api-modal-padding, 24px)); margin-left: calc(-1 * var(--nexus-sys-table-api-modal-padding, 24px)); margin-right: calc(-1 * var(--nexus-sys-table-api-modal-padding, 24px)); padding: var(--nexus-sys-table-api-modal-padding, 24px); padding-bottom: var(--nexus-ref-spacing-16, 16px); margin-bottom: var(--nexus-ref-spacing-16, 16px); border-bottom: 1px solid var(--nexus-ref-neutral-95, #f3f4f6); } body.table-api .nexus-modal-header-left { display: flex; align-items: center; gap: var(--nexus-ref-spacing-12); flex: 1; } body.table-api .nexus-modal-header-right { display: flex; align-items: center; gap: var(--nexus-ref-spacing-8); } body.table-api .nexus-modal-nav-btn { flex-shrink: 0; min-width: 32px; width: 32px; height: 32px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--nexus-ref-shape-corner-small); font-size: 0; border: 1px solid transparent; background-color: transparent; transition: background-color var(--nexus-sys-table-api-transition-duration), border-color var(--nexus-sys-table-api-transition-duration), opacity var(--nexus-sys-table-api-transition-duration); } body.table-api .nexus-modal-nav-btn:disabled { opacity: 0.3; cursor: not-allowed; pointer-events: none; } body.table-api .nexus-modal-nav-btn:not(:disabled):hover { background-color: var(--nexus-ref-neutral-100); border-color: var(--nexus-ref-neutral-90); } body.table-api .nexus-modal-nav-btn:not(:disabled):active { background-color: var(--nexus-ref-neutral-90); border-color: var(--nexus-ref-neutral-80); } body.table-api .nexus-modal-nav-btn img { width: 16px; height: 16px; opacity: 0.7; transition: opacity var(--nexus-sys-table-api-transition-duration); } body.table-api .nexus-modal-nav-btn:not(:disabled):hover img { opacity: 1; } /* Readonly input styling (exclude date-picker triggers: they are clickable) */ body.table-api .nexus-input-component[readonly]:not([data-date-picker]), body.table-api .nexus-input-component[readonly]:not([data-date-picker]):focus { /* background-color: var(--nexus-ref-neutral-100); */ color: var(--nexus-ref-neutral-50); cursor: not-allowed; border-color: var(--nexus-ref-neutral-90); } /* Date picker trigger: pointer cursor (clickable to open picker) */ body.table-api .nexus-input-wrapper:has(.nexus-input-component[data-date-picker]), body.table-api .nexus-input-wrapper:has(.nexus-input-component[data-date-picker]) .nexus-input-component { cursor: pointer; } /* Date picker disabled: not-allowed cursor */ body.table-api .nexus-input-wrapper:has(.nexus-input-component[data-date-picker][data-date-picker-disabled="true"]), body.table-api .nexus-input-wrapper:has(.nexus-input-component[data-date-picker][data-date-picker-disabled="true"]) .nexus-input-component { cursor: not-allowed; } body.table-api .nexus-modal-title { font-size: var(--nexus-sys-table-api-modal-title-font-size); font-weight: var(--nexus-sys-table-api-modal-title-font-weight); color: var(--nexus-sys-color-table-api-modal-title); margin: 0 0 var(--nexus-ref-spacing-12) 0; } body.table-api .nexus-modal-header .nexus-modal-title { margin: 0; } body.table-api .nexus-modal-close { background: none; border: none; cursor: pointer; padding: var(--nexus-ref-spacing-8); color: var(--nexus-sys-color-table-api-modal-close); font-size: 24px; line-height: 1; } body.table-api .nexus-modal-close:hover { color: var(--nexus-sys-color-table-api-modal-close-hover); } body.table-api .nexus-modal-message { font-size: var(--nexus-sys-table-api-modal-message-font-size); color: var(--nexus-sys-color-table-api-modal-message); margin: 0 0 var(--nexus-sys-table-api-modal-padding) 0; line-height: 1.5; } body.table-api .nexus-modal-actions { display: flex; gap: var(--nexus-sys-table-api-modal-actions-gap); justify-content: flex-end; margin-top: var(--nexus-sys-table-api-modal-actions-margin-top); padding-top: var(--nexus-sys-table-api-modal-actions-padding-top); border-top: 1px solid var(--nexus-sys-color-table-api-modal-actions-border); } body.table-api .nexus-modal-actions .create-modal-next { margin-left: auto; display: flex; gap: var(--nexus-sys-table-api-modal-actions-gap); align-items: center; } body.table-api .nexus-modal-form { display: flex; flex-direction: column; } body.table-api .nexus-modal-form .nexus-input-group { margin-bottom: var(--nexus-sys-table-api-input-group-margin-bottom); } body.table-api .nexus-modal-form .nexus-input-group small.nexus-hint { display: block; margin-top: var(--nexus-ref-spacing-4); font-size: var(--nexus-sys-table-api-hint-font-size); color: var(--nexus-sys-table-api-input-hint-color); } body.table-api .nexus-modal-form .nexus-input-group small.nexus-error, body.table-api .nexus-modal-form #create-group-gender small.nexus-error, body.table-api .nexus-modal-form #create-group-nationalId small.nexus-error { display: block; margin-top: var(--nexus-ref-spacing-4); font-size: var(--nexus-sys-table-api-hint-font-size); color: var(--nexus-sys-table-api-input-error-color); } body.table-api .edit-template-file-note { display: block; margin-top: var(--nexus-ref-spacing-6); font-size: var(--nexus-sys-table-api-hint-font-size); color: var(--doc-text-secondary); } /* Design-system file input: same look as nexus-input-wrapper */ body.table-api .nexus-file-input-wrapper { display: flex; align-items: center; width: 100%; min-height: 44px; position: relative; border-radius: var(--nexus-sys-input-radius, 8px); border: 1px solid var(--nexus-sys-color-input-placeholder-border, var(--nexus-ref-neutral-90)); background: var(--nexus-sys-color-input-placeholder-background, var(--nexus-ref-primary-100)); padding: 0 var(--nexus-sys-input-padding-x, 14px); transition: border-color 0.15s ease, box-shadow 0.15s ease; box-sizing: border-box; gap: 12px; } body.table-api .nexus-file-input-wrapper:focus-within { border-color: var(--nexus-sys-color-input-focused-border, var(--nexus-ref-primary-80)); box-shadow: 0 0 0 3px var(--nexus-sys-color-input-focused-shadow, var(--nexus-ref-primary-90)); } body.table-api .nexus-file-input-native { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; z-index: 2; font-size: 0; } body.table-api .nexus-file-input-display { display: flex; align-items: center; flex: 1; min-width: 0; gap: 12px; pointer-events: none; font-size: var(--nexus-sys-typescale-text-md-font-size, 14px); line-height: var(--nexus-sys-typescale-text-md-line-height, 20px); } body.table-api .nexus-file-input-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--nexus-sys-color-input-placeholder-text, var(--nexus-ref-neutral-80)); } body.table-api .nexus-file-input-wrapper:has(.nexus-file-input-native:not([value=""])) .nexus-file-input-label, body.table-api .nexus-file-input-wrapper.has-file .nexus-file-input-label { color: var(--nexus-sys-color-input-filled-text, var(--nexus-ref-neutral-20)); } body.table-api .nexus-file-input-trigger { display: inline-flex; align-items: center; justify-content: center; padding: 8px 16px; border-radius: var(--nexus-sys-input-radius, 8px); border: 1px solid var(--nexus-sys-color-button-secondary-gray-border-default, var(--nexus-ref-neutral-50)); background: var(--nexus-sys-color-button-secondary-gray-default, var(--nexus-ref-primary-100)); color: var(--nexus-sys-color-button-secondary-gray-text-default, var(--nexus-ref-neutral-50)); font-size: var(--nexus-sys-typescale-text-sm-font-size, 14px); font-weight: 500; white-space: nowrap; flex-shrink: 0; } body.table-api .edit-template-file-remove-wrap { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: var(--nexus-sys-typescale-text-sm-font-size); cursor: pointer; } body.table-api .nexus-modal-loading { text-align: center; padding: 40px; color: var(--nexus-ref-neutral-70); } body.table-api .nexus-modal-loading.table-api-loading-hidden { display: none; } /* Employee create: error block, progress, panels */ body.table-api .nexus-modal-error { padding: var(--nexus-ref-spacing-12); background: var(--nexus-sys-color-table-api-modal-error-bg); border: 1px solid var(--nexus-sys-color-table-api-modal-error-border); border-radius: var(--nexus-ref-shape-corner-small); color: var(--nexus-sys-color-table-api-modal-error-text); margin-bottom: var(--nexus-ref-spacing-16); } body.table-api .nexus-modal-progress-wrap { margin-bottom: 20px; } body.table-api .nexus-modal-panel { display: none; } body.table-api .nexus-modal-panel.is-active { display: block; } .table-api-modal-step-title { margin: 0 0 16px 0; font-size: 1rem; } /* Buttons hidden by default (JS shows when needed) */ body.table-api .create-modal-back.table-api-btn-hidden, body.table-api .create-modal-submit.table-api-btn-hidden, body.table-api #contact-modal-delete.table-api-btn-hidden, body.table-api #contract-modal-delete.table-api-btn-hidden { display: none; } /* Checkbox row in modals (contact create) */ .table-api-checkbox-row { display: flex; align-items: center; gap: 8px; } /* Leave balance (and similar) detail modal content */ .table-api-detail-content { max-height: 60vh; overflow-y: auto; } .table-api-detail-table { width: 100%; border-collapse: collapse; font-size: var(--nexus-sys-table-api-hint-font-size); } .table-api-detail-table td { padding: var(--nexus-ref-spacing-8) var(--nexus-ref-spacing-12); border-bottom: 1px solid var(--nexus-sys-color-table-api-detail-table-border); vertical-align: top; } .table-api-detail-key { color: var(--nexus-sys-color-table-api-detail-key); font-weight: var(--nexus-sys-table-api-detail-key-font-weight); width: 40%; } .table-api-detail-value { color: var(--nexus-sys-color-table-api-detail-value); } .table-api-detail-empty { color: var(--nexus-sys-color-table-api-detail-empty); margin: 0; } /* HR Setup context: no sidebar, breadcrumb back link */ body.table-api.hr-setup-context .container { max-width: 1200px; margin: 0 auto; padding: var(--nexus-ref-spacing-24); } .hr-setup-breadcrumb { margin-bottom: var(--nexus-ref-spacing-16); } .hr-setup-back { font-size: var(--nexus-ref-text-font-size-sm); color: var(--nexus-sys-color-table-api-nav-link); text-decoration: none; } .hr-setup-back:hover { text-decoration: underline; }