/* NEXAR Experience 4.0 · Stage 04
   Production-quality record grid, filters, forms and dialogs.
   Pure presentation: no API, authorization or mutation logic lives here. */

/* Data work surfaces */
.nx4-workspace .nx4-records{
  --nx4-grid-divider:var(--nx4-line-light);
  background:var(--nx4-panel);border:1px solid var(--nx4-grid-divider);
  border-radius:16px;box-shadow:var(--nx4-elevate);overflow:hidden;
}
.nx4-workspace .nx4-records .records-toolbar{
  background:linear-gradient(180deg,color-mix(in srgb,var(--app-accent) 4%,var(--nx4-panel)),var(--nx4-panel));
  border-bottom:1px solid var(--nx4-grid-divider);
  padding:15px 16px;display:flex;gap:12px;align-items:flex-end;justify-content:space-between;
}
.nx4-workspace .nx4-records .records-toolbar-main{
  display:flex;align-items:flex-end;gap:9px;flex-wrap:wrap;min-width:0;flex:1;
}
.nx4-workspace .nx4-records .records-toolbar-actions{
  display:flex;gap:7px;align-items:flex-end;justify-content:flex-end;flex-wrap:wrap;
  flex:0 1 auto;min-width:0;
}
.nx4-workspace .nx4-records .records-search{
  position:relative;display:flex;align-items:center;flex:1 1 230px;min-width:170px;
}
.nx4-workspace .nx4-records .records-search svg{
  position:absolute;z-index:1;inset-inline-start:13px;width:18px;height:18px;
  flex:none;color:var(--nx4-muted);
}
.nx4-workspace .nx4-records .records-search .input{
  width:100%;height:39px;min-height:39px;min-width:0!important;
  padding-inline-start:42px;padding-inline-end:13px;
  border:1px solid var(--nx4-grid-divider);border-radius:10px;
  background:var(--nx4-panel);font-size:11px;
}
.nx4-workspace .nx4-records .records-search .input:focus{
  border-color:var(--app-accent);outline:0;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--app-accent) 13%,transparent);
}
.nx4-workspace .nx4-records .record-select-label{
  display:flex;flex-direction:column;gap:4px;min-width:104px;flex:0 1 auto;
  color:var(--nx4-muted);font-size:9px;font-weight:800;line-height:1.5;
}
.nx4-workspace .nx4-records .record-select-label .input{
  height:39px;min-height:39px;width:100%;min-width:0;
  font-size:11px;padding:7px 9px;border:1px solid var(--nx4-grid-divider);
  color:var(--nx4-text);background:var(--nx4-panel);border-radius:10px;
}
.nx4-workspace .nx4-records .record-select-label .input:focus{
  outline:0;border-color:var(--app-accent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--app-accent) 12%,transparent);
}
.nx4-workspace .nx4-records .nx4-column-select{min-width:91px;width:100px}
.nx4-workspace .nx4-records .records-toolbar-main>.badge{
  align-self:flex-end;min-height:39px;display:flex;align-items:center;
  border:1px solid color-mix(in srgb,var(--app-accent) 19%,var(--nx4-grid-divider));
  background:color-mix(in srgb,var(--app-accent) 7%,var(--nx4-panel));
  color:var(--app-accent);border-radius:9px;font-size:10px;font-weight:900;padding:7px 10px;
  white-space:nowrap;
}
.nx4-workspace .nx4-records .records-toolbar-actions .button,
.nx4-workspace .nx4-records .nx4-clear-filters{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  min-height:39px;height:39px;padding:7px 12px;border-radius:10px;
  font:800 10px var(--nx4-font);white-space:nowrap;flex:none;
}
.nx4-workspace .nx4-records .records-toolbar-actions .button:not(.ghost){
  color:white;background:var(--app-accent);
  border-color:color-mix(in srgb,var(--app-accent) 85%,#334057);
}
.nx4-workspace .nx4-records .records-toolbar-actions .button.ghost,
.nx4-workspace .nx4-records .nx4-clear-filters{
  border-color:var(--nx4-grid-divider);background:var(--nx4-panel);
  color:var(--nx4-text);
}
.nx4-workspace .nx4-records .nx4-density-toggle[aria-pressed="true"]{
  color:var(--app-accent)!important;
  background:color-mix(in srgb,var(--app-accent) 9%,var(--nx4-panel))!important;
  border-color:color-mix(in srgb,var(--app-accent) 27%,var(--nx4-grid-divider))!important;
}
.nx4-workspace .nx4-records .nx4-clear-filters{color:var(--app-accent)!important}
.nx4-workspace .nx4-records .table-scroll{
  width:100%;overflow-x:auto;overscroll-behavior-x:contain;
  scrollbar-width:thin;scrollbar-color:var(--nx4-grid-divider) transparent;
}
.nx4-workspace .nx4-records .table-scroll table{
  width:100%;border-collapse:separate;border-spacing:0;
  font-size:11px;line-height:1.65;table-layout:auto;color:var(--nx4-text);
}
.nx4-workspace .nx4-records .table-scroll thead{position:sticky;top:0;z-index:2}
.nx4-workspace .nx4-records .table-scroll thead th{
  background:var(--nx4-paper);
  border-bottom:1px solid var(--nx4-grid-divider);
  height:45px;min-width:110px;padding:10px 14px;
  color:var(--nx4-muted);font-size:10px;font-weight:900;white-space:nowrap;
}
.nx4-workspace .nx4-records .table-scroll thead th:last-child{min-width:110px;width:130px}
.nx4-workspace .nx4-records .table-scroll tbody td{
  height:55px;vertical-align:middle;padding:11px 14px;
  border-bottom:1px solid var(--nx4-grid-divider);
  color:var(--nx4-text);font-size:11px;font-weight:600;
  max-width:280px;overflow:hidden;text-overflow:ellipsis;
}
.nx4-workspace .nx4-records .table-scroll tbody tr:last-child td{border-bottom:0}
.nx4-workspace .nx4-records .table-scroll tbody tr{
  transition:background var(--nx4-motion-fast) ease;
  background:var(--nx4-panel);
}
.nx4-workspace .nx4-records .table-scroll tbody tr:hover{
  background:color-mix(in srgb,var(--app-accent) 4%,var(--nx4-panel));
}
.nx4-workspace .nx4-records .table-scroll tbody .row-id{
  color:var(--nx4-text);font-weight:900;
}
.nx4-workspace .nx4-records .table-status{
  display:inline-flex;align-items:center;gap:6px;
  min-height:25px;border-radius:7px;padding:5px 9px;
  font-size:10px;font-weight:800;white-space:nowrap;
}
.nx4-workspace .nx4-records .table-actions{display:inline-flex;gap:5px;align-items:center;justify-content:flex-start}
.nx4-workspace .nx4-records .table-actions .icon-btn{
  flex:none;height:32px;width:32px;border:1px solid var(--nx4-grid-divider);
  border-radius:9px;background:var(--nx4-panel);color:var(--nx4-muted);
}
.nx4-workspace .nx4-records .table-actions .icon-btn:hover{
  color:var(--app-accent);
  border-color:color-mix(in srgb,var(--app-accent) 27%,var(--nx4-grid-divider));
  background:color-mix(in srgb,var(--app-accent) 8%,var(--nx4-panel));
}
.nx4-workspace .nx4-records .table-actions .hr-view-record{
  color:var(--nx-hr-accent);
  background:color-mix(in srgb,var(--nx-hr-accent) 8%,var(--nx4-panel));
}
.nx4-workspace .nx4-records--compact .table-scroll tbody td{
  height:39px;padding:5px 11px;font-size:10px;
}
.nx4-workspace .nx4-records--compact .table-scroll thead th{
  height:38px;padding:7px 11px;
}
.nx4-workspace .nx4-records--compact .table-actions .icon-btn{
  width:27px;height:27px;border-radius:7px;
}
.nx4-workspace .nx4-records--compact .table-status{
  min-height:22px;padding:3px 7px;font-size:9px;
}
.nx4-workspace .nx4-records .records-pagination{
  background:var(--nx4-panel);border-top:1px solid var(--nx4-grid-divider);
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:10px 16px;font-size:10px;color:var(--nx4-muted);
}
.nx4-workspace .nx4-records .records-pager-controls{
  display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap;
}
.nx4-workspace .nx4-records .records-pagination .record-page-size .input{
  min-height:32px;height:32px;max-width:76px;border:1px solid var(--nx4-grid-divider);
  background:var(--nx4-panel);border-radius:8px;font-size:10px;
}
.nx4-workspace .nx4-records .page-nav{
  width:32px;height:32px;border-radius:8px;
  border:1px solid var(--nx4-grid-divider);background:var(--nx4-panel);color:var(--nx4-text);
}
.nx4-workspace .nx4-records .page-nav:disabled{opacity:.4;cursor:not-allowed}
.nx4-workspace .nx4-records .page-nav:hover:not(:disabled){
  border-color:var(--app-accent);color:var(--app-accent);
}
.nx4-workspace .nx4-records .page-number{white-space:nowrap;font-weight:800;color:var(--nx4-text)}
.nx4-workspace .nx4-records .record-mobile{
  background:var(--nx4-paper);padding:10px;
}
.nx4-workspace .nx4-records .record-card{
  padding:14px;border:1px solid var(--nx4-grid-divider);
  border-radius:12px;background:var(--nx4-panel);margin-bottom:9px;
  box-shadow:0 5px 12px #0A183708;
}
.nx4-workspace .nx4-records .record-card-icon{
  width:40px;height:40px;border-radius:10px;
  background:color-mix(in srgb,var(--app-accent) 10%,var(--nx4-panel));
  color:var(--app-accent);
}
.nx4-workspace .nx4-records .record-card-headline strong{
  font-size:12px;color:var(--nx4-text);font-weight:900;
}
.nx4-workspace .nx4-records .record-card-headline small{color:var(--nx4-muted);font-size:10px}
.nx4-workspace .nx4-records .record-card-status{font-weight:800}
.nx4-workspace .nx4-records .record-card-actions{
  border-top:1px solid var(--nx4-grid-divider);padding-top:9px;margin-top:11px;
}

/* Shared form/dialog language used by CRUD and HR records */
.nx4-dialog-backdrop{
  background:color-mix(in srgb,#061126 70%,transparent);
  backdrop-filter:blur(7px);
}
.dialog.nx4-dialog,.dialog.hr-editor{
  --nx4-dialog-accent:var(--app-accent,var(--nx-hr-accent));
  width:min(94vw,680px);max-width:680px;
  border:1px solid color-mix(in srgb,var(--nx4-dialog-accent) 17%,var(--nx4-line-light));
  border-radius:17px;box-shadow:0 28px 95px #070E2654;
  background:var(--nx4-panel);color:var(--nx4-text);overflow:auto;
  max-height:91dvh;
}
.dialog.nx4-dialog .dialog-head,.dialog.hr-editor .dialog-head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:19px 23px;border-bottom:1px solid var(--nx4-line-light);
  background:linear-gradient(110deg,color-mix(in srgb,var(--nx4-dialog-accent) 6%,var(--nx4-panel)),var(--nx4-panel));
}
.nx4-dialog-heading{display:flex;align-items:center;gap:11px;min-width:0}
.nx4-dialog-mark,.nx4-dialog .nx4-delete-target>span{
  display:grid;place-items:center;flex:none;width:42px;height:42px;
  border-radius:12px;color:var(--nx4-dialog-accent);
  background:color-mix(in srgb,var(--nx4-dialog-accent) 11%,var(--nx4-panel));
  border:1px solid color-mix(in srgb,var(--nx4-dialog-accent) 24%,var(--nx4-line-light));
}
.nx4-dialog-mark svg,.nx4-dialog .nx4-delete-target>span svg{width:21px;height:21px}
.nx4-dialog-mark--danger{
  color:var(--nx-danger)!important;
  background:color-mix(in srgb,var(--nx-danger) 9%,var(--nx4-panel))!important;
  border-color:color-mix(in srgb,var(--nx-danger) 25%,var(--nx4-line-light))!important;
}
.nx4-dialog-eyebrow{
  display:block;font-size:9px;letter-spacing:.03em;
  color:var(--nx4-dialog-accent);font-weight:800;
}
.dialog.nx4-dialog .dialog-head h2,.dialog.hr-editor .dialog-head h2{
  font:900 17px/1.55 var(--nx4-font);color:var(--nx4-text);margin:2px 0;
}
.dialog.nx4-dialog .dialog-head>.icon-btn,.dialog.hr-editor .dialog-head>.icon-btn{
  width:33px;height:33px;flex:none;border-radius:9px;
  border:1px solid var(--nx4-line-light);background:var(--nx4-panel);color:var(--nx4-muted);
}
.dialog.nx4-dialog .dialog-head>.icon-btn:hover,.dialog.hr-editor .dialog-head>.icon-btn:hover{
  color:var(--nx4-dialog-accent);
}
.dialog.nx4-dialog .dialog-content,.dialog.hr-editor .dialog-content{
  padding:19px 23px 23px;
}
.nx4-dialog-caption{
  padding:10px 12px;background:var(--nx4-paper);
  color:var(--nx4-muted);border:1px solid var(--nx4-line-light);
  border-radius:9px;font-size:11px;margin:0 0 18px;line-height:1.8;
}
.dialog.nx4-dialog .form-grid,.dialog.hr-editor .form-grid{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 13px;
}
.dialog.nx4-dialog .form-label,.dialog.hr-editor .form-label{
  font-size:11px;font-weight:800;color:var(--nx4-text);gap:7px;min-width:0;
}
.nx4-field-label{display:flex;align-items:center;gap:4px;min-width:0;font-size:11px;line-height:1.4}
.nx4-required{color:var(--nx-danger);font-size:14px}
.nx4-optional{
  font-size:9px;margin-inline-start:auto;color:var(--nx4-muted);
  font-weight:500;
}
.dialog.nx4-dialog .input,.dialog.hr-editor .input{
  border:1px solid var(--nx4-line-light);
  background:var(--nx4-panel);color:var(--nx4-text);
  min-height:42px;border-radius:10px;padding:9px 12px;font-size:11px;
  transition:box-shadow .16s,border-color .16s;
}
.dialog.nx4-dialog .input:focus,.dialog.hr-editor .input:focus{
  outline:0;border-color:var(--nx4-dialog-accent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--nx4-dialog-accent) 12%,transparent);
}
.dialog.nx4-dialog .form-field-wide,.dialog.hr-editor .hr-field-wide{grid-column:1/-1}
.dialog.nx4-dialog textarea,.dialog.hr-editor textarea{resize:vertical;min-height:84px}
.dialog.nx4-dialog .dialog-actions,.dialog.hr-editor .dialog-actions{
  display:flex;align-items:center;justify-content:flex-end;gap:9px;
  background:var(--nx4-paper);border-top:1px solid var(--nx4-line-light);
  padding:13px 23px;
}
.dialog.nx4-dialog .dialog-actions .button,.dialog.hr-editor .dialog-actions .button{
  min-height:41px;padding:9px 18px;font-size:11px;font-weight:800;border-radius:10px;
}
.dialog.nx4-dialog .dialog-actions .button:not(.ghost):not(.danger),
.dialog.hr-editor .dialog-actions .button:not(.ghost):not(.danger){
  background:var(--nx4-dialog-accent);color:white;border-color:var(--nx4-dialog-accent);
}
.dialog.nx4-delete-dialog{max-width:515px}
.dialog.nx4-delete-dialog .nx4-dialog-eyebrow{color:var(--nx-danger)}
.dialog.nx4-delete-dialog .nx4-delete-target{
  display:flex;gap:12px;align-items:center;margin-top:15px;
  border:1px solid var(--nx4-line-light);padding:12px;border-radius:11px;background:var(--nx4-paper);
}
.dialog.nx4-delete-dialog .nx4-delete-target>div{display:flex;flex-direction:column;gap:3px;min-width:0}
.dialog.nx4-delete-dialog .nx4-delete-target strong{font-size:12px;font-weight:900;overflow-wrap:anywhere}
.dialog.nx4-delete-dialog .nx4-delete-target small{font-size:10px;color:var(--nx4-muted)}
.dialog.nx4-delete-dialog .nx4-delete-warning{
  color:var(--nx-danger);font-size:10px;font-weight:700;margin:14px 0 0;
}
.dialog.nx4-delete-dialog .dialog-content>p:first-child{color:var(--nx4-muted);font-size:11px;line-height:2;margin:0}
.dialog.nx4-delete-dialog .dialog-actions .button.danger{
  background:var(--nx-danger);border-color:var(--nx-danger);color:white;
}
@media(max-width:1120px){
 .nx4-workspace .nx4-records .records-toolbar{align-items:stretch;flex-direction:column}
 .nx4-workspace .nx4-records .records-toolbar-actions{justify-content:flex-start}
 .nx4-workspace .nx4-records .records-toolbar-main{flex:1 1 auto}
}
@media(max-width:700px){
 .nx4-workspace .nx4-records .records-toolbar{padding:11px}
 .nx4-workspace .nx4-records .records-toolbar-main{gap:8px}
 .nx4-workspace .nx4-records .records-search{flex:1 1 100%}
 .nx4-workspace .nx4-records .record-select-label{flex:1 1 calc(50% - 7px);min-width:115px}
 .nx4-workspace .nx4-records .record-select-label .input{width:100%}
 .nx4-workspace .nx4-records .records-toolbar-main>.badge{min-height:36px}
 .nx4-workspace .nx4-records .records-toolbar-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
 .nx4-workspace .nx4-records .records-toolbar-actions .nx4-column-select{width:100%;grid-column:1/-1}
 .nx4-workspace .nx4-records .records-toolbar-actions .button{width:100%;min-width:0;white-space:normal}
 .nx4-workspace .nx4-records .records-pagination{flex-direction:column;justify-content:center;text-align:center;gap:9px;padding:12px 8px}
 .nx4-workspace .nx4-records .records-pager-controls{justify-content:center;width:100%}
 .dialog.nx4-dialog,.dialog.hr-editor{align-self:end;width:100%;max-width:100%;max-height:94dvh;border-radius:18px 18px 0 0;margin:0}
 .dialog.nx4-dialog .dialog-head,.dialog.hr-editor .dialog-head{padding:15px 16px}
 .dialog.nx4-dialog .dialog-content,.dialog.hr-editor .dialog-content{padding:14px 16px 18px}
 .dialog.nx4-dialog .form-grid,.dialog.hr-editor .form-grid{grid-template-columns:1fr}
 .dialog.nx4-dialog .dialog-actions,.dialog.hr-editor .dialog-actions{padding:12px 16px;flex-wrap:wrap}
 .dialog.nx4-dialog .dialog-actions .button,.dialog.hr-editor .dialog-actions .button{flex:1;justify-content:center}
}
@media(prefers-reduced-motion:reduce){
 .nx4-workspace .nx4-records .table-scroll tbody tr{transition:none}
 .dialog.nx4-dialog .input,.dialog.hr-editor .input{transition:none}
}