/* ============================================================
   NEXUS UI KIT
   Design tokens + component styles for CoMESNexus, replacing
   Microsoft.FluentUI.AspNetCore.Components. See Components/Nexus/
   for the Razor wrappers that emit these classes.
   ============================================================ */

:root{
  /* color -- light (default) */
  --nx-bg: #fafafaf9;
  --nx-surface: #ffffff;
  --nx-surface-2: #f4f5f7;
  --nx-border: #e2e4e9;
  --nx-border-strong: #c9cdd6;
  --nx-text: #1a1d24;
  --nx-text-muted: #6b7280;
  --nx-text-faint: #9ca3af;
  --nx-accent: #0f766e;
  --nx-accent-hover: #0b5c56;
  --nx-accent-soft: #e6f4f2;
  --nx-accent-contrast: #ffffff;
  --nx-focus: #0f766e;
  --nx-success: #15803d;
  --nx-success-soft: #eafbef;
  --nx-warn: #b45309;
  --nx-warn-soft: #fef3e2;
  --nx-danger: #b42318;
  --nx-danger-soft: #fef1f0;
  --nx-info: #1d4ed8;
  --nx-info-soft: #eaf0fe;
  --nx-scrim: rgba(15,17,21,.4);
  --nx-nav-bg: #14161a;
  --nx-nav-text: #c7cad1;
  --nx-nav-text-active: #ffffff;
  --nx-nav-border: #23262d;

  --nx-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --nx-font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --nx-fs-xs: .75rem;
  --nx-fs-sm: .8125rem;
  --nx-fs-base: .875rem;
  --nx-fs-md: 1rem;
  --nx-fs-lg: 1.25rem;
  --nx-fs-xl: 1.625rem;
  --nx-lh: 1.5;

  --nx-s1: .25rem; --nx-s2: .5rem; --nx-s3: .75rem; --nx-s4: 1rem; --nx-s5: 1.25rem; --nx-s6: 1.5rem; --nx-s8: 2rem;

  --nx-radius-sm: 5px; --nx-radius-md: 8px; --nx-radius-lg: 12px;
  --nx-shadow-sm: 0 1px 2px rgba(20,22,26,.06);
  --nx-shadow-md: 0 4px 14px rgba(20,22,26,.08);
  --nx-shadow-pop: 0 8px 28px rgba(20,22,26,.16);

  --nx-sidebar-w: 234px;
  --nx-sidebar-w-collapsed: 60px;
  --nx-topbar-h: 56px;
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --nx-bg: #101114; --nx-surface: #16181c; --nx-surface-2: #1c1f24;
    --nx-border: #262a31; --nx-border-strong: #34383f;
    --nx-text: #e9eaed; --nx-text-muted: #9aa0ab; --nx-text-faint: #6b7280;
    --nx-accent: #2dd4bf; --nx-accent-hover: #5eead4; --nx-accent-soft: #10302c; --nx-accent-contrast: #08211d;
    --nx-focus: #2dd4bf;
    --nx-success: #4ade80; --nx-success-soft: #10301f;
    --nx-warn: #fbbf24; --nx-warn-soft: #332507;
    --nx-danger: #f87171; --nx-danger-soft: #341613;
    --nx-info: #93c5fd; --nx-info-soft: #131f34;
    --nx-scrim: rgba(0,0,0,.6);
    --nx-nav-bg: #0b0c0e; --nx-nav-text: #9aa0ab; --nx-nav-text-active: #ffffff; --nx-nav-border: #1d2026;
  }
}
:root[data-theme="dark"]{
  --nx-bg: #101114; --nx-surface: #16181c; --nx-surface-2: #1c1f24;
  --nx-border: #262a31; --nx-border-strong: #34383f;
  --nx-text: #e9eaed; --nx-text-muted: #9aa0ab; --nx-text-faint: #6b7280;
  --nx-accent: #2dd4bf; --nx-accent-hover: #5eead4; --nx-accent-soft: #10302c; --nx-accent-contrast: #08211d;
  --nx-focus: #2dd4bf;
  --nx-success: #4ade80; --nx-success-soft: #10301f;
  --nx-warn: #fbbf24; --nx-warn-soft: #332507;
  --nx-danger: #f87171; --nx-danger-soft: #341613;
  --nx-info: #93c5fd; --nx-info-soft: #131f34;
  --nx-scrim: rgba(0,0,0,.6);
  --nx-nav-bg: #0b0c0e; --nx-nav-text: #9aa0ab; --nx-nav-text-active: #ffffff; --nx-nav-border: #1d2026;
}

html, body{ background: var(--nx-bg); color: var(--nx-text); font-family: var(--nx-font); font-size: var(--nx-fs-base); line-height: var(--nx-lh); -webkit-font-smoothing:antialiased; }
h1,h2,h3,h4{ font-family: var(--nx-font); margin:0 0 .5rem; letter-spacing:-.01em; }
a{ color: var(--nx-accent); }
button{ font-family: inherit; }

/* ---------- shell: sidebar + topbar ---------- */
.nx-shell{ display:flex; min-height:100vh; }
.nx-sidebar{
  width: var(--nx-sidebar-w); flex:0 0 auto; background: var(--nx-nav-bg); color: var(--nx-nav-text);
  display:flex; flex-direction:column; transition:width .18s ease;
  position: sticky; top:0; height:100vh; overflow:hidden; z-index:30;
}
.nx-shell.is-collapsed .nx-sidebar{ width: var(--nx-sidebar-w-collapsed); }
.nx-brand{ height: var(--nx-topbar-h); display:flex; align-items:center; gap:var(--nx-s3); padding:0 var(--nx-s4); border-bottom:1px solid var(--nx-nav-border); flex:0 0 auto; white-space:nowrap; }
.nx-brand-mark{ height:30px; width:30px; object-fit:contain; flex:0 0 auto; }
.nx-brand-name{ font-weight:600; color:#fff; font-size:var(--nx-fs-md); }
.nx-shell.is-collapsed .nx-brand{ padding:0 var(--nx-s2); justify-content:center; }
.nx-shell.is-collapsed .nx-brand-name,
.nx-shell.is-collapsed .nx-navgroup-label,
.nx-shell.is-collapsed .nx-navlink-label,
.nx-shell.is-collapsed .nx-navlink-badge,
.nx-shell.is-collapsed .nx-navgroup-children,
.nx-shell.is-collapsed .nx-navgroup-toggle > svg{ display:none; }
.nx-shell.is-collapsed .nx-navlink, .nx-shell.is-collapsed .nx-navgroup-toggle{ justify-content:center; padding-left:0; padding-right:0; }

.nx-nav{
  flex:1 1 auto; overflow-y:auto; padding: var(--nx-s3) var(--nx-s2) var(--nx-s4);
  display:flex; flex-direction:column; gap:2px;
  scrollbar-width:thin; scrollbar-color: #3a3f47 transparent;
}
.nx-nav::-webkit-scrollbar{ width:8px; }
.nx-nav::-webkit-scrollbar-track{ background:transparent; }
.nx-nav::-webkit-scrollbar-thumb{ background:#3a3f47; border-radius:999px; border:2px solid var(--nx-nav-bg); background-clip:padding-box; }
.nx-nav::-webkit-scrollbar-thumb:hover{ background:#4b515c; background-clip:padding-box; }
.nx-navgroup-label{ font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:#5c616b; padding: var(--nx-s4) var(--nx-s3) var(--nx-s2); }
.nx-navlink{ display:flex; align-items:center; gap:var(--nx-s3); padding: .6rem var(--nx-s3); border-radius: var(--nx-radius-sm); font-size: var(--nx-fs-sm); color: var(--nx-nav-text); cursor:pointer; text-decoration:none; white-space:nowrap; }
.nx-navlink:hover{ background: rgba(255,255,255,.06); color:#fff; }
.nx-navlink.is-active{ background: var(--nx-accent); color: var(--nx-accent-contrast); font-weight:600; }
.nx-navlink .nx-ico{ width:17px; height:17px; flex:0 0 auto; opacity:.9; }
.nx-navlink-label{ flex:1 1 auto; overflow:hidden; text-overflow:ellipsis; }
.nx-navlink-badge{ font-size:10px; font-weight:700; padding:1px 6px; border-radius:999px; background: rgba(255,255,255,.12); color:#fff; }
.nx-navlink.is-active .nx-navlink-badge{ background: rgba(0,0,0,.18); }
.nx-navgroup{ display:flex; flex-direction:column; }
.nx-navgroup + .nx-navgroup, .nx-navlink:has(+ .nx-navgroup){ margin-top:var(--nx-s1); }
.nx-navgroup-toggle{ display:flex; align-items:center; justify-content:space-between; width:100%; background:none; border:none; cursor:pointer; padding: .6rem var(--nx-s3); color:inherit; font:inherit; text-align:left; }
.nx-navgroup-toggle svg{ width:13px; height:13px; transition:transform .12s; opacity:.6; }
.nx-navgroup.is-open .nx-navgroup-toggle svg{ transform:rotate(90deg); }
.nx-navgroup-children{ display:flex; flex-direction:column; gap:2px; padding: 2px 0 4px calc(var(--nx-s2) + 6px); margin-left:var(--nx-s3); border-left:1px solid var(--nx-nav-border); }

.nx-sidebar-foot{ border-top:1px solid var(--nx-nav-border); padding: var(--nx-s3); flex:0 0 auto; }
.nx-collapse-btn{ width:100%; display:flex; align-items:center; gap:var(--nx-s2); justify-content:center; background:none; border:1px solid var(--nx-nav-border); color:var(--nx-nav-text); border-radius: var(--nx-radius-sm); padding: var(--nx-s2); cursor:pointer; }
.nx-collapse-btn:hover{ color:#fff; border-color:#3a3f47; }

.nx-main{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; }
.nx-topbar{ height: var(--nx-topbar-h); flex:0 0 auto; display:flex; align-items:center; gap:var(--nx-s4); padding:0 var(--nx-s5); background: var(--nx-surface); border-bottom:1px solid var(--nx-border); position:sticky; top:0; z-index:20; }
.nx-topbar-search{ flex:0 1 340px; position:relative; }
.nx-topbar-spacer{ flex:1 1 auto; }
.nx-icon-btn{ width:34px; height:34px; border-radius: var(--nx-radius-md); display:flex; align-items:center; justify-content:center; background:none; border:1px solid transparent; color:var(--nx-text-muted); cursor:pointer; position:relative; }
.nx-icon-btn:hover{ background: var(--nx-surface-2); color:var(--nx-text); }
.nx-avatar{ width:30px; height:30px; border-radius:50%; background: var(--nx-accent-soft); color: var(--nx-accent); display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; flex:0 0 auto; }
.nx-user{ display:flex; align-items:center; gap:var(--nx-s2); padding-left:var(--nx-s3); border-left:1px solid var(--nx-border); cursor:pointer; }
.nx-user-meta{ line-height:1.25; }
.nx-user-name{ font-size:var(--nx-fs-sm); font-weight:600; }
.nx-user-role{ font-size:11px; color:var(--nx-text-muted); }
.nx-content{ padding: var(--nx-s6); flex:1 1 auto; max-width: 1400px; }

.nx-nav-toggle-mobile{ display:none; }
@media (max-width: 860px){
  .nx-sidebar{ position:fixed; z-index:40; left:0; top:0; transform:translateX(-100%); transition:transform .18s ease; }
  .nx-shell.is-nav-open .nx-sidebar{ transform:translateX(0); box-shadow:var(--nx-shadow-pop); }
  .nx-content{ padding: var(--nx-s4); }
  .nx-topbar{ padding:0 var(--nx-s3); gap:var(--nx-s2); }
  .nx-user-meta{ display:none; }
  .nx-nav-toggle-mobile{ display:flex; }
}

/* ---------- page header ---------- */
.nx-pagehead{ display:flex; align-items:flex-start; justify-content:space-between; gap:var(--nx-s4); margin-bottom:var(--nx-s5); flex-wrap:wrap; }
.nx-crumbs{ font-size:12px; color:var(--nx-text-faint); margin-bottom:var(--nx-s1); }
.nx-h1{ font-size: var(--nx-fs-xl); font-weight:650; margin:0; }
.nx-sub{ color:var(--nx-text-muted); font-size:var(--nx-fs-sm); margin-top:4px; }

/* ---------- buttons ---------- */
.nx-btn{ display:inline-flex; align-items:center; gap:var(--nx-s2); white-space:nowrap; font-size: var(--nx-fs-sm); font-weight:600; padding: var(--nx-s2) var(--nx-s4); border-radius: var(--nx-radius-md); border:1px solid var(--nx-border-strong); background: var(--nx-surface); color:var(--nx-text); cursor:pointer; transition: background .12s, border-color .12s; text-decoration:none; }
.nx-btn:hover{ background: var(--nx-surface-2); }
.nx-btn.nx-btn-primary{ background: var(--nx-accent); border-color: var(--nx-accent); color: var(--nx-accent-contrast); }
.nx-btn.nx-btn-primary:hover{ background: var(--nx-accent-hover); border-color: var(--nx-accent-hover); }
.nx-btn.nx-btn-ghost{ border-color: transparent; background:none; }
.nx-btn.nx-btn-ghost:hover{ background: var(--nx-surface-2); }
.nx-btn:disabled{ opacity:.45; cursor:not-allowed; }
.nx-btn:focus-visible{ outline:2px solid var(--nx-focus); outline-offset:1px; }

/* ---------- inputs ---------- */
.mes-field-label{ font-size:.75rem; color: var(--nx-text-muted); }
.nx-input, .nx-select, .mes-date-input{
  font: inherit; font-size: var(--nx-fs-sm); color: var(--nx-text); background: var(--nx-surface);
  border:1px solid var(--nx-border-strong); border-radius: var(--nx-radius-md);
  padding: var(--nx-s2) var(--nx-s3); box-sizing:border-box;
}
.nx-input:focus-visible, .nx-select:focus-visible, .mes-date-input:focus-visible{ outline:2px solid var(--nx-focus); outline-offset:-1px; }
.nx-select{ padding-right: var(--nx-s6); }

/* switch (toggle) */
.nx-switch{ display:inline-flex; align-items:center; cursor:pointer; }
.nx-switch input{ position:absolute; opacity:0; width:1px; height:1px; }
.nx-switch-track{ width:36px; height:20px; border-radius:999px; background: var(--nx-border-strong); display:inline-block; position:relative; transition: background .15s; }
.nx-switch-thumb{ position:absolute; top:2px; left:2px; width:16px; height:16px; border-radius:50%; background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.25); transition: transform .15s; }
.nx-switch input:checked + .nx-switch-track{ background: var(--nx-accent); }
.nx-switch input:checked + .nx-switch-track .nx-switch-thumb{ transform: translateX(16px); }
.nx-switch input:focus-visible + .nx-switch-track{ outline:2px solid var(--nx-focus); outline-offset:2px; }
.nx-switch.is-disabled{ opacity:.5; cursor:not-allowed; }

/* ---------- card / toolbar ---------- */
.nx-card{ background: var(--nx-surface); border:1px solid var(--nx-border); border-radius: var(--nx-radius-lg); box-shadow: var(--nx-shadow-sm); }
.nx-toolbar{ display:flex; align-items:center; gap:var(--nx-s3); padding: var(--nx-s4); border-bottom:1px solid var(--nx-border); flex-wrap:wrap; }
.nx-search{ position:relative; flex:0 1 280px; }
.nx-search svg{ position:absolute; left:10px; top:50%; transform:translateY(-50%); width:15px; height:15px; color:var(--nx-text-faint); }
.nx-search .nx-input{ width:100%; padding-left:32px; }
.nx-toolbar-spacer{ flex:1 1 auto; }
.nx-viewcount{ font-size:12.5px; color:var(--nx-text-muted); white-space:nowrap; }
.nx-chip{ display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:600; padding:4px var(--nx-s2) 4px var(--nx-s3); border-radius:999px; background: var(--nx-accent-soft); color: var(--nx-accent); }
.nx-chip button{ background:none; border:none; color:inherit; cursor:pointer; padding:0; opacity:.75; }

/* ---------- table ---------- */
.nx-table-scroll{ overflow-x:auto; }
table.nx-table{ width:100%; border-collapse:collapse; font-size: var(--nx-fs-sm); }
.nx-table thead th{ text-align:left; font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color: var(--nx-text-muted); padding: var(--nx-s3) var(--nx-s4); background: var(--nx-surface-2); border-bottom:1px solid var(--nx-border); }
.nx-table th.nx-sortable{ cursor:pointer; user-select:none; }
.nx-table td{ padding: var(--nx-s3) var(--nx-s4); border-bottom:1px solid var(--nx-border); vertical-align:middle; }
.nx-table tbody tr:hover{ background: var(--nx-surface-2); }
.nx-table tbody tr:last-child td{ border-bottom:none; }
.nx-cell-muted{ color: var(--nx-text-muted); }
.nx-cell-mono{ font-family: var(--nx-font-mono); font-variant-numeric: tabular-nums; font-size:12.5px; }
.nx-row-actions{ display:flex; gap:2px; justify-content:flex-end; }

/* legacy alias: existing pages already use class="mes-table" -- keep it styled identically to nx-table during migration */
table.mes-table{ width:100%; border-collapse:collapse; font-size: var(--nx-fs-sm); background: var(--nx-surface); border:1px solid var(--nx-border); border-radius: var(--nx-radius-lg); overflow:hidden; }
table.mes-table thead th{ text-align:left; font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color: var(--nx-text-muted); padding: var(--nx-s3) var(--nx-s4); background: var(--nx-surface-2); border-bottom:1px solid var(--nx-border); }
table.mes-table td{ padding: var(--nx-s3) var(--nx-s4); border-bottom:1px solid var(--nx-border); vertical-align:middle; }
table.mes-table tbody tr:hover{ background: var(--nx-surface-2); }
table.mes-table tbody tr:last-child td{ border-bottom:none; }

/* ---------- badges ---------- */
.nx-badge{ display:inline-flex; align-items:center; gap:5px; font-size:11.5px; font-weight:700; padding:3px var(--nx-s2); border-radius:999px; white-space:nowrap; }
.nx-badge::before{ content:""; width:6px; height:6px; border-radius:50%; background:currentColor; }
.nx-badge-success{ background: var(--nx-success-soft); color: var(--nx-success); }
.nx-badge-warn{ background: var(--nx-warn-soft); color: var(--nx-warn); }
.nx-badge-danger{ background: var(--nx-danger-soft); color: var(--nx-danger); }
.nx-badge-info{ background: var(--nx-info-soft); color: var(--nx-info); }
.nx-badge-neutral{ background: var(--nx-surface-2); color: var(--nx-text-muted); }

/* ---------- alert / message bar ---------- */
.nx-alert{ display:flex; flex-direction:column; gap:2px; padding: var(--nx-s3) var(--nx-s4); border-radius: var(--nx-radius-md); border:1px solid transparent; font-size: var(--nx-fs-sm); margin-bottom: var(--nx-s4); }
.nx-alert-info{ background: var(--nx-info-soft); color: var(--nx-info); border-color: var(--nx-info); }
.nx-alert-success{ background: var(--nx-success-soft); color: var(--nx-success); border-color: var(--nx-success); }
.nx-alert-warn{ background: var(--nx-warn-soft); color: var(--nx-warn); border-color: var(--nx-warn); }
.nx-alert-danger{ background: var(--nx-danger-soft); color: var(--nx-danger); border-color: var(--nx-danger); }

/* legacy alias: mes-error used by RunGuardedAsync's ErrorMessage rendering in some pages */
.mes-error{ background: var(--nx-danger-soft); color: var(--nx-danger); border:1px solid var(--nx-danger); border-radius: var(--nx-radius-md); padding: var(--nx-s3) var(--nx-s4); margin-bottom: var(--nx-s4); }
.mes-muted{ color: var(--nx-text-muted); }

/* ---------- dialog ---------- */
.nx-dialog-scrim{ position:fixed; inset:0; background: var(--nx-scrim); display:flex; align-items:center; justify-content:center; z-index:100; padding: var(--nx-s4); }
.nx-dialog{ background: var(--nx-surface); border-radius: var(--nx-radius-lg); box-shadow: var(--nx-shadow-pop); width:100%; max-width:520px; max-height:calc(100vh - 2 * var(--nx-s6)); overflow-y:auto; }
.nx-dialog-header{ padding: var(--nx-s5) var(--nx-s5) 0; }
.nx-dialog-header h2{ font-size: var(--nx-fs-lg); margin:0; }
.nx-dialog-body{ padding: var(--nx-s5); }

/* ---------- pagination ---------- */
.nx-pagination{ display:flex; align-items:center; justify-content:space-between; gap:var(--nx-s4); padding: var(--nx-s3) var(--nx-s4); flex-wrap:wrap; }
.nx-pager{ display:flex; align-items:center; gap:3px; }
.nx-page-btn{ min-width:30px; height:30px; padding:0 8px; border-radius: var(--nx-radius-sm); border:1px solid transparent; background:none; color:var(--nx-text-muted); font-size:12.5px; cursor:pointer; display:flex; align-items:center; justify-content:center; font-weight:600; }
.nx-page-btn:hover{ background: var(--nx-surface-2); color:var(--nx-text); }
.nx-page-btn.is-active{ background: var(--nx-accent); color: var(--nx-accent-contrast); }
.nx-page-btn:disabled{ opacity:.35; cursor:not-allowed; }

/* ---------- misc ---------- */
.nx-avatar-sm{ width:24px; height:24px; border-radius:50%; background:var(--nx-info-soft); color:var(--nx-info); display:inline-flex; align-items:center; justify-content:center; font-size:10.5px; font-weight:700; margin-right:8px; vertical-align:middle; }
.nx-progress{ width:74px; height:6px; border-radius:999px; background:var(--nx-surface-2); overflow:hidden; display:inline-block; vertical-align:middle; margin-right:8px; }
.nx-progress > span{ display:block; height:100%; background: var(--nx-accent); border-radius:999px; }
.nx-theme-switch{ display:flex; align-items:center; gap:6px; padding:3px; border-radius:999px; background: var(--nx-surface-2); border:1px solid var(--nx-border); }
.nx-theme-switch button{ border:none; background:none; width:30px; height:26px; border-radius:999px; cursor:pointer; display:flex; align-items:center; justify-content:center; color:var(--nx-text-muted); }
.nx-theme-switch button.is-active{ background: var(--nx-surface); color: var(--nx-accent); box-shadow: var(--nx-shadow-sm); }