/* NEXAR Ultimate Experience 5.0 · Stage 05 · shared component foundation.
   Incremental refinements only: preserve all existing click handlers, form names,
   RLS, data records, page layouts and per-module --app-accent. */
:root{
 --nx5-control-radius:11px;
 --nx5-card-radius:16px;
 --nx5-control-height:44px;
 --nx5-touch-target:44px;
 --nx5-focus-ring:0 0 0 3px color-mix(in srgb,var(--app-accent,#008FCB) 20%,transparent);
 --nx5-control-transition:140ms cubic-bezier(.2,.75,.25,1);
}
.nx4-workspace .button,.nx4-hub .button{
 border-radius:var(--nx5-control-radius);
 font-weight:800;letter-spacing:0;
 transition:background-color var(--nx5-control-transition),border-color var(--nx5-control-transition),box-shadow var(--nx5-control-transition),transform var(--nx5-control-transition);
}
.nx4-workspace .button:not(.tiny),.nx4-hub .button:not(.tiny){min-height:var(--nx5-control-height);font-size:14px;padding-inline:15px}
.nx4-workspace .button:hover:not(:disabled),.nx4-hub .button:hover:not(:disabled){transform:translateY(-1px)}
.nx4-workspace .button:active:not(:disabled),.nx4-hub .button:active:not(:disabled){transform:translateY(0)}
.nx4-workspace .button:disabled,.nx4-hub .button:disabled{opacity:.55;cursor:not-allowed;transform:none}
.nx4-workspace .button.ghost:not(.danger){background:var(--nx4-panel);border:1px solid color-mix(in srgb,var(--app-accent,#5379AC) 20%,var(--nx4-line-light));color:var(--app-accent,var(--nx5-tone-action))}
.nx4-workspace .button.ghost:hover:not(:disabled){background:color-mix(in srgb,var(--app-accent,#5379AC) 7%,var(--nx4-panel));border-color:color-mix(in srgb,var(--app-accent,#5379AC) 33%,var(--nx4-line-light))}
.nx4-workspace .button.danger{background:color-mix(in srgb,var(--nx5-tone-critical) 9%,var(--nx4-panel));color:var(--nx5-tone-critical);border:1px solid color-mix(in srgb,var(--nx5-tone-critical) 30%,var(--nx4-line-light))}
.nx4-workspace .button.danger:hover:not(:disabled){background:color-mix(in srgb,var(--nx5-tone-critical) 15%,var(--nx4-panel))}
.nx4-workspace .icon-btn,.nx4-hub .icon-btn{min-width:36px;min-height:36px;border-radius:10px}
.nx4-workspace .icon-btn:focus-visible,.nx4-hub .icon-btn:focus-visible{outline:2px solid var(--app-accent,#008FCB);outline-offset:2px}
/* Shared field states retain existing validation and focus handlers. */
.nx4-workspace .input:not([type="checkbox"]):not([type="radio"]),.nx4-workspace textarea.input,.nx4-workspace select.input{
 border-radius:var(--nx5-control-radius);
 border-color:var(--nx4-line-light);
 background:var(--nx4-panel);
 color:var(--nx4-text);
}
.nx4-workspace .input:disabled,.nx4-workspace textarea:disabled,.nx4-workspace select:disabled{cursor:not-allowed;opacity:.62;background:var(--nx4-paper)}
.nx4-workspace .input[aria-invalid="true"]{border-color:color-mix(in srgb,var(--nx5-tone-critical) 65%,var(--nx4-line-light))}
.nx4-workspace .input:focus-visible,.nx4-workspace textarea:focus-visible,.nx4-workspace select:focus-visible{border-color:var(--app-accent,#008FCB);box-shadow:var(--nx5-focus-ring);outline:0}
.nx4-workspace .input::placeholder{color:var(--nx5-tone-support);opacity:1}
/* Surface hierarchy and metric clarity are compatible with density options. */
.nx4-workspace .panel,.nx4-workspace .metric,.nx4-workspace .table-panel{
 border-radius:var(--nx5-card-radius);
 border-color:var(--nx4-line-light);
 background:var(--nx4-panel);
 box-shadow:0 8px 26px -21px color-mix(in srgb,var(--nx5-primary-ink) 32%,transparent);
}
.nx4-workspace .metric{position:relative;overflow:hidden}
.nx4-workspace .metric::before{content:"";position:absolute;inset-block-start:0;inset-inline-start:16px;width:32px;height:3px;border-radius:0 0 6px 6px;background:var(--metric-accent,var(--app-accent,#008FCB));opacity:.7}
.nx4-workspace .metric strong{font-variant-numeric:tabular-nums}
/* Data tables: align core interactions, not the data content. */
.nx4-workspace .nx4-records{border-radius:var(--nx5-card-radius)}
.nx4-workspace .nx4-records .table-scroll{max-width:100%;overscroll-behavior-x:contain}
.nx4-workspace .nx4-records .table-scroll thead th{font-size:12px;font-weight:900;line-height:1.7}
.nx4-workspace .nx4-records .table-scroll tbody tr:hover{background:color-mix(in srgb,var(--app-accent,#008FCB) 4%,var(--nx4-panel))}
.nx4-workspace .nx4-records .table-scroll tbody tr:focus-within{background:color-mix(in srgb,var(--app-accent,#008FCB) 6%,var(--nx4-panel))}
.nx4-workspace .nx4-records .table-scroll tbody td{line-height:1.8}
.nx4-workspace .nx4-records .table-actions .icon-btn{border-color:var(--nx4-line-light)}
.nx4-workspace .nx4-records .table-actions .icon-btn:focus-visible{outline:2px solid var(--app-accent,#008FCB);outline-offset:2px}
/* Product-wide reusable primitives for later phase pages. */
.nx5-card{background:var(--nx4-panel);border:1px solid var(--nx4-line-light);border-radius:var(--nx5-card-radius);padding:clamp(14px,1.7vw,24px)}
.nx5-card-header{display:flex;justify-content:space-between;align-items:start;gap:12px}
.nx5-card-title{font-weight:900;font-size:clamp(15px,1.3vw,19px);color:var(--nx5-tone-primary);line-height:1.6}
.nx5-card-subtitle{color:var(--nx5-tone-secondary);font-size:13px;line-height:1.8}
.nx5-number{font-size:var(--nx5-type-display);font-weight:900;font-variant-numeric:tabular-nums;line-height:1.25}
.nx5-chip{display:inline-flex;align-items:center;gap:7px;min-height:28px;padding:4px 10px;border:1px solid currentColor;border-radius:999px;font-size:12px;line-height:1.6;font-weight:800;color:var(--nx5-tone-secondary)}
.nx5-chip[data-tone="info"]{color:var(--nx5-tone-action);background:color-mix(in srgb,var(--nx5-tone-action) 7%,var(--nx4-panel))}
.nx5-chip[data-tone="warning"]{color:var(--nx5-tone-warning);background:color-mix(in srgb,var(--nx5-tone-warning) 8%,var(--nx4-panel))}
.nx5-chip[data-tone="error"],.nx5-chip[data-tone="danger"]{color:var(--nx5-tone-critical);background:color-mix(in srgb,var(--nx5-tone-critical) 8%,var(--nx4-panel))}
.nx5-chip[data-tone="positive"]{color:var(--nx5-tone-positive);background:color-mix(in srgb,var(--nx5-tone-positive) 8%,var(--nx4-panel))}
@media(max-width:700px){
 .nx4-workspace .workspace-actions .button,.nx4-workspace .dialog .button{min-height:var(--nx5-touch-target)}
 .nx4-workspace .records-toolbar .icon-btn,.nx4-workspace .table-actions .icon-btn{min-width:40px;min-height:40px}
 .nx4-workspace .nx4-records .table-scroll{scrollbar-width:thin}
 .nx4-workspace .panel,.nx4-workspace .metric{border-radius:13px}
}
@media(max-width:359px){
 .nx4-workspace .button:not(.tiny){padding-inline:10px}
 .nx5-card{padding:13px}
}
@media(prefers-reduced-motion:reduce){
 .nx4-workspace .button,.nx4-hub .button{transition:none!important;transform:none!important}
}