/* ═══════════════════════════════════════════════════════════════════════
   DESIGN TOKENS  —  ELPRO-V3
   Light mode: clean white canvas, warm-cool neutrals, precise indigo
   ═══════════════════════════════════════════════════════════════════════ */
:root {
  --font-sans: 'Sora', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  /* ── Brand ─────────────────────────────────────────────────────── */
  --primary:        #4f46e5;
  --primary-light:  #6366f1;
  --primary-dark:   #3730a3;
  --primary-50:     #eef2ff;
  --primary-100:    #e0e7ff;

  /* ── Semantic ───────────────────────────────────────────────────── */
  --success:        #059669;
  --success-50:     #ecfdf5;
  --warning:        #d97706;
  --warning-50:     #fffbeb;
  --danger:         #dc2626;
  --danger-50:      #fef2f2;
  --info:           #2563eb;
  --info-50:        #eff6ff;

  /* ── Light Canvas — airy, precise, modern ───────────────────────── */
  --bg:             #f0f4f8;        /* soft blue-grey page background   */
  --bg-card:        #ffffff;        /* pure white cards                 */
  --bg-header:      rgba(255,255,255,0.92);
  --bg-input:       #f8fafc;

  /* ── Sidebar — light, clean, modern ─────────────────────────────── */
  --bg-sidebar:         #ffffff;       /* pure white                        */
  --sidebar-accent:     #f4f6fb;       /* hover bg — soft blue-grey         */
  --sidebar-border:     #e8edf5;       /* crisp hairline                    */
  --sidebar-text:       #64748b;       /* muted slate                       */
  --sidebar-text-hover: #1e293b;       /* near-black on hover               */
  --sidebar-active-bg:  #eef2ff;       /* indigo-50                         */
  --sidebar-active-bar: #4f46e5;       /* indigo-600                        */
  --sidebar-label:      #a0aec0;       /* section labels                    */

  /* ── Text — warm-neutral scale ──────────────────────────────────── */
  --text:           #0f172a;        /* near-black, slightly warm        */
  --text-2:         #334155;        /* body text                        */
  --text-muted:     #64748b;        /* labels, captions                 */
  --text-light:     #94a3b8;        /* placeholders, hints              */

  /* ── Borders — hair-thin precision ─────────────────────────────── */
  --border:         #dde3ec;        /* slightly cooler than slate-200   */
  --border-light:   #eef1f6;        /* dividers, row separators         */

  /* ── Structure ──────────────────────────────────────────────────── */
  --sidebar-w:      260px;
  --header-h:       40px;
  --radius:         10px;
  --radius-lg:      16px;

  /* ── Shadows — layered, soft ────────────────────────────────────── */
  --shadow-sm:  0 1px 2px rgba(15,23,42,0.04), 0 1px 4px rgba(15,23,42,0.03);
  --shadow:     0 2px 12px rgba(15,23,42,0.06), 0 1px 4px rgba(15,23,42,0.04);
  --shadow-lg:  0 8px 32px rgba(15,23,42,0.08), 0 2px 8px rgba(15,23,42,0.04);

  --transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);

  --autofill-text: #0f172a;
  --autofill-bg:   #ffffff;
}

/* ── Autofill ─────────────────────────────────────────────────────── */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
select:-webkit-autofill {
  -webkit-text-fill-color: #0f172a !important;
  -webkit-box-shadow: 0 0 0px 1000px transparent inset !important;
  transition: background-color 9999s ease-in-out 0s;
  caret-color: #0f172a;
}

/* ═══════════════════════════════════════════════════════════════════════
   DARK MODE
   ═══════════════════════════════════════════════════════════════════════ */
[data-theme="dark"] {
  --bg:             #0d1117;
  --bg-card:        #161b22;
  --bg-header:      rgba(22,27,34,0.92);
  --bg-input:       #1c2230;
  --bg-sidebar:     #151a22;
  --sidebar-accent: #161b22;
  --sidebar-border: rgba(255,255,255,0.06);
  --sidebar-text:   rgba(255,255,255,0.50);
  --sidebar-text-hover: rgba(255,255,255,0.88);
  --sidebar-active-bg:  rgba(99,102,241,0.20);
  --sidebar-active-bar: #818cf8;

  --text:           #e2e8f0;
  --text-2:         #cbd5e1;
  --text-muted:     #94a3b8;
  --text-light:     #64748b;
  --border:         #2a3140;
  --border-light:   #1a2030;
  --primary-50:     rgba(99,102,241,.12);
  --primary-100:    rgba(99,102,241,.20);
  --success-50:     rgba(5,150,105,.10);
  --warning-50:     rgba(217,119,6,.10);
  --danger-50:      rgba(220,38,38,.10);
  --info-50:        rgba(37,99,235,.10);
  --shadow-sm:      0 1px 3px rgba(0,0,0,.30);
  --shadow:         0 4px 16px rgba(0,0,0,.40);
  --shadow-lg:      0 8px 32px rgba(0,0,0,.50);

  --autofill-text: #f1f5f9;
  --autofill-bg:   #1e2435;
}

[data-theme="dark"] select {
  background-color: #161b22;
  color: #e2e8f0;
  border-color: #2a3140;
}
[data-theme="dark"] select option {
  background-color: #161b22;
  color: #e2e8f0;
}
[data-theme="dark"] input:-webkit-autofill,
[data-theme="dark"] input:-webkit-autofill:hover,
[data-theme="dark"] input:-webkit-autofill:focus,
[data-theme="dark"] textarea:-webkit-autofill,
[data-theme="dark"] select:-webkit-autofill {
  -webkit-text-fill-color: #e2e8f0 !important;
  -webkit-box-shadow: 0 0 0px 1000px transparent inset !important;
  transition: background-color 9999s ease-in-out 0s;
  caret-color: #e2e8f0;
}

/* ═══════════════════════════════════════════════════════════════════════
   RESET & BASE
   ═══════════════════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.6;
  background: var(--bg);
  color: var(--text);
  display: flex;
  min-height: 100vh;
  overflow-x: hidden;
  transition: background var(--transition), color var(--transition);
}
a       { color: inherit; text-decoration: none; }
button  { font-family: inherit; cursor: pointer; border: none; background: none; }
ul      { list-style: none; }
img     { display: block; max-width: 100%; }

/* ── Scrollbar ───────────────────────────────────────────────────── */
::-webkit-scrollbar       { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-light); }

/* ── Animations ─────────────────────────────────────────────────── */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.nx-fade-in   { animation: fadeInUp .3s ease forwards; }
.nx-fade-in-1 { animation-delay: .05s; opacity: 0; }
.nx-fade-in-2 { animation-delay: .10s; opacity: 0; }
.nx-fade-in-3 { animation-delay: .15s; opacity: 0; }
.nx-fade-in-4 { animation-delay: .20s; opacity: 0; }
.nx-fade-in-5 { animation-delay: .25s; opacity: 0; }
.nx-fade-in-6 { animation-delay: .30s; opacity: 0; }

/* ── Spacing utilities ──────────────────────────────────────────── */
.nx-pb-15 { padding-bottom: 15px; }
.nx-pt-15 { padding-top:    15px; }
/* ═══════════════════════════════════════════════
   ELPRO LOGIN — Device-Specific Responsive Design
   Desktop (>1024px) | iPad/Tablet (768px-1024px) | Mobile (<768px)
═══════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════
   BASE STYLES (Mobile First Approach)
═══════════════════════════════════════════════ */

.nx-login-root {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  width: 100%;
  background: var(--bg-sidebar);
  font-family: var(--font-sans, system-ui, -apple-system, sans-serif);
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

/* Header Panel (Mobile: Compact top bar) */
.nx-login-panel {
  width: 100%;
  padding: 24px 20px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: transparent;
  position: relative;
  flex-shrink: 0;
}

.nx-login-panel::before {
  content: '';
  position: absolute;
  inset: 0;
  background: 
    radial-gradient(at 50% 100%, rgba(99,102,241,.3) 0px, transparent 60%),
    radial-gradient(at 0% 0%, rgba(168,85,247,.2) 0px, transparent 40%);
  filter: blur(40px);
  z-index: 0;
}

.nx-login-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  z-index: 1;
  position: relative;
}

.nx-login-brand-icon {
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light, #818cf8) 100%);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  box-shadow: 0 4px 20px -4px rgba(99,102,241,.5);
}

.nx-login-brand-name {
  font-size: 22px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.02em;
}

.nx-login-brand-version {
  font-size: 10px;
  color: rgba(255,255,255,.5);
  font-weight: 500;
  margin-left: 4px;
  padding: 2px 8px;
  background: rgba(255,255,255,0.1);
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,0.1);
}

.nx-login-tagline,
.nx-login-footer-note {
  display: none; /* Hidden on mobile */
}

/* Form Area (Mobile: Full width bottom sheet) */
.nx-login-form-area {
  flex: 1;
  width: 100%;
  display: flex;
  align-items: flex-end; /* Anchor to bottom */
  justify-content: center;
  padding: 0;
  position: relative;
  background: transparent;
}

.nx-login-card {
  width: 100%;
  min-width: 100%;
  max-width: 100%;
  padding: 28px 20px 40px;
  margin: 0;
  background: var(--bg-card, #1a1a1f);
  border-radius: 24px 24px 0 0;
  box-shadow: 0 -8px 40px rgba(0,0,0,0.4);
  border-top: 1px solid rgba(255,255,255,0.1);
  position: relative;
  flex-shrink: 0;
  animation: slideUp 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes slideUp {
  from { transform: translateY(100%); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

.nx-login-card-title {
  font-size: 26px;
  font-weight: 800;
  color: var(--text, #fff);
  letter-spacing: -0.03em;
  margin-bottom: 8px;
  text-align: center;
  line-height: 1.2;
}

.nx-login-card-subtitle {
  font-size: 14px;
  color: var(--text-muted, rgba(255,255,255,0.5));
  margin-bottom: 28px;
  text-align: center;
  font-weight: 450;
}

/* Form Elements */
.nx-login-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
}

.nx-login-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

.nx-login-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-2, rgba(255,255,255,0.8));
  letter-spacing: -0.01em;
}

.nx-login-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

.nx-login-input-icon {
  position: absolute;
  left: 16px;
  color: rgba(255,255,255,0.4);
  pointer-events: none;
  display: flex;
  z-index: 2;
}

.nx-login-input {
  width: 100%;
  height: 56px;
  padding: 0 48px;
  border: 1.5px solid rgba(255,255,255,0.1);
  border-radius: 14px;
  font-family: inherit;
  font-size: 16px; /* Prevent iOS zoom */
  color: var(--text, #fff);
  background: rgba(0,0,0,0.3);
  outline: none;
  transition: all 0.2s ease;
  -webkit-appearance: none;
}

.nx-login-input:focus {
  border-color: var(--primary, #6366f1);
  box-shadow: 0 0 0 4px rgba(99,102,241,0.15);
  background: rgba(0,0,0,0.5);
}

.nx-login-input.error {
  border-color: #ef4444;
  box-shadow: 0 0 0 4px rgba(239,68,68,0.1);
}

.nx-login-input::placeholder {
  color: rgba(255,255,255,0.3);
}

.nx-login-pw-toggle {
  position: absolute;
  right: 16px;
  color: rgba(255,255,255,0.4);
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  display: flex;
  border-radius: 6px;
  z-index: 2;
}

.nx-login-field-error {
  font-size: 12px;
  color: #ef4444;
  font-weight: 500;
  display: none;
  margin-top: 4px;
}

.nx-login-field-error.visible {
  display: block;
}

.nx-login-alert {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 12px;
  font-size: 13px;
  line-height: 1.5;
  font-weight: 500;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-8px);
  transition: all 0.3s ease;
  margin-bottom: 20px;
  border: 1px solid transparent;
  background: rgba(239,68,68,0.1);
  color: #ef4444;
}

.nx-login-alert.visible {
  opacity: 1;
  pointer-events: all;
  transform: translateY(0);
}

.nx-login-submit {
  width: 100%;
  height: 56px;
  border-radius: 14px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  background: linear-gradient(135deg, var(--primary, #6366f1) 0%, #4f46e5 100%);
  color: #fff;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 8px;
  box-shadow: 0 4px 20px -4px rgba(99,102,241,0.5);
}

.nx-login-submit:active {
  transform: scale(0.98);
}

.nx-login-spinner {
  width: 18px;
  height: 18px;
  border: 2.5px solid rgba(255,255,255,.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: nx-spin .8s linear infinite;
  display: none;
}

.nx-login-submit.loading .nx-login-spinner {
  display: block;
}

@keyframes nx-spin {
  to { transform: rotate(360deg); }
}

.nx-login-divider {
  display: flex;
  align-items: center;
  gap: 16px;
  color: rgba(255,255,255,0.3);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  margin-top: 28px;
}

.nx-login-divider::before,
.nx-login-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(255,255,255,0.1);
}

.nx-login-security {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 12px;
  color: rgba(255,255,255,0.4);
  margin-top: 16px;
  font-weight: 500;
}

/* Safe area for notched phones */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .nx-login-card {
    padding-bottom: calc(32px + env(safe-area-inset-bottom));
  }
}

/* ═══════════════════════════════════════════════
   TABLET / iPAD (768px - 1024px)
   Side-by-side layout with narrower panel
═══════════════════════════════════════════════ */

@media (min-width: 768px) and (max-width: 1024px) {
  .nx-login-root {
    flex-direction: row;
    background: var(--bg);
  }
  
  .nx-login-panel {
    flex: 0 0 40%;
    min-width: 320px;
    max-width: 400px;
    width: auto;
    padding: 48px 32px;
    align-items: flex-start;
    text-align: left;
    justify-content: space-between;
    background: linear-gradient(165deg, var(--bg-sidebar) 0%, color-mix(in srgb, var(--bg-sidebar) 90%, black) 100%);
    display: flex;
  }
  
  .nx-login-panel::before {
    display: block;
    background: 
      radial-gradient(at 0% 0%, rgba(99,102,241,.35) 0px, transparent 50%),
      radial-gradient(at 100% 100%, rgba(168,85,247,.25) 0px, transparent 50%);
    filter: blur(60px);
  }
  
  .nx-login-brand {
    margin: 0;
  }
  
  .nx-login-tagline {
    display: block;
    margin-top: auto;
    margin-bottom: auto;
    padding: 40px 0;
  }
  
  .nx-login-tagline h2 {
    font-size: 32px;
    font-weight: 800;
    color: #fff;
    letter-spacing: -0.03em;
    line-height: 1.2;
    margin-bottom: 16px;
  }
  
  .nx-login-tagline p {
    font-size: 15px;
    color: rgba(255,255,255,.6);
    line-height: 1.6;
    max-width: 280px;
  }
  
  .nx-login-footer-note {
    display: block;
    font-size: 12px;
    color: rgba(255,255,255,.35);
  }
  
  .nx-login-form-area {
    flex: 1;
    align-items: center;
    padding: 40px;
    background: var(--bg);
    background-image: 
      linear-gradient(rgba(99,102,241,0.03) 1px, transparent 1px),
      linear-gradient(90deg, rgba(99,102,241,0.03) 1px, transparent 1px);
    background-size: 50px 50px;
  }
  
  .nx-login-card {
    width: 100%;
    max-width: 420px;
    min-width: auto;
    padding: 40px;
    border-radius: 24px;
    margin: 0;
    box-shadow: 
      0 20px 60px -20px rgba(0,0,0,0.5),
      0 0 0 1px rgba(255,255,255,0.05);
    animation: fadeIn 0.5s ease;
  }
  
  @keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
  }
  
  .nx-login-card-title {
    font-size: 30px;
    text-align: left;
  }
  
  .nx-login-card-subtitle {
    text-align: left;
    margin-bottom: 36px;
  }
  
  .nx-login-form {
    gap: 24px;
  }
  
  .nx-login-divider {
    margin-top: 32px;
  }
}

/* ═══════════════════════════════════════════════
   DESKTOP (>1024px)
   Full side-by-side layout with generous spacing
═══════════════════════════════════════════════ */

@media (min-width: 1025px) {
  .nx-login-root {
    flex-direction: row;
    background: var(--bg);
  }
  
  .nx-login-panel {
    flex: 0 0 45%;
    min-width: 480px;
    max-width: 600px;
    width: auto;
    padding: 64px;
    align-items: flex-start;
    text-align: left;
    justify-content: space-between;
    background: linear-gradient(165deg, var(--bg-sidebar) 0%, color-mix(in srgb, var(--bg-sidebar) 90%, black) 100%);
    position: relative;
    overflow: hidden;
    isolation: isolate;
  }
  
  /* Animated mesh gradient */
  .nx-login-panel::before {
    display: block;
    content: '';
    position: absolute;
    inset: 0;
    background: 
      radial-gradient(at 0% 0%, rgba(99,102,241,.35) 0px, transparent 50%),
      radial-gradient(at 100% 100%, rgba(168,85,247,.25) 0px, transparent 50%),
      radial-gradient(at 50% 50%, rgba(99,102,241,.15) 0px, transparent 60%);
    filter: blur(60px);
    z-index: 0;
    animation: meshMove 20s ease-in-out infinite alternate;
  }
  
  @keyframes meshMove {
    0% { transform: translate(0, 0) scale(1); }
    100% { transform: translate(-20px, -20px) scale(1.1); }
  }
  
  .nx-login-brand {
    margin: 0;
    position: relative;
    z-index: 1;
  }
  
  .nx-login-brand-icon {
    width: 44px;
    height: 44px;
    font-size: 22px;
    transition: transform 0.3s ease;
  }
  
  .nx-login-brand:hover .nx-login-brand-icon {
    transform: translateY(-2px) scale(1.05);
  }
  
  .nx-login-brand-name {
    font-size: 24px;
  }
  
  .nx-login-tagline {
    display: block;
    position: relative;
    z-index: 1;
    margin-top: auto;
    margin-bottom: auto;
    padding: 60px 0;
    max-width: 420px;
  }
  
  .nx-login-tagline h2 {
    font-size: 42px;
    font-weight: 800;
    color: #fff;
    letter-spacing: -0.04em;
    line-height: 1.1;
    margin-bottom: 20px;
    background: linear-gradient(to right, #fff 0%, rgba(255,255,255,0.85) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  
  .nx-login-tagline p {
    font-size: 16px;
    color: rgba(255,255,255,.6);
    line-height: 1.7;
    max-width: 320px;
  }
  
  .nx-login-footer-note {
    display: block;
    position: relative;
    z-index: 1;
    font-size: 12px;
    color: rgba(255,255,255,.35);
  }
  
  .nx-login-form-area {
    flex: 1;
    align-items: center;
    justify-content: center;
    padding: 64px;
    background: var(--bg);
    background-image: 
      linear-gradient(rgba(99,102,241,0.03) 1px, transparent 1px),
      linear-gradient(90deg, rgba(99,102,241,0.03) 1px, transparent 1px);
    background-size: 60px 60px;
  }
  
  .nx-login-card {
    width: 100%;
    max-width: 460px;
    min-width: auto;
    padding: 48px;
    border-radius: 24px;
    margin: 0;
    background: var(--bg-card, #1a1a1f);
    box-shadow: 
      0 20px 60px -20px rgba(0,0,0,0.5),
      0 0 0 1px rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    animation: cardEnter 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  }
  
  @keyframes cardEnter {
    from { 
      opacity: 0; 
      transform: translateY(20px) scale(0.98); 
    }
    to { 
      opacity: 1; 
      transform: translateY(0) scale(1); 
    }
  }
  
  .nx-login-card-title {
    font-size: 32px;
    text-align: left;
    margin-bottom: 8px;
  }
  
  .nx-login-card-subtitle {
    font-size: 15px;
    text-align: left;
    margin-bottom: 40px;
  }
  
  .nx-login-form {
    gap: 24px;
  }
  
  .nx-login-input {
    height: 56px;
    font-size: 15px;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  }
  
  .nx-login-input:hover {
    border-color: rgba(255,255,255,0.2);
  }
  
  .nx-login-submit {
    height: 56px;
    margin-top: 8px;
    position: relative;
    overflow: hidden;
  }
  
  .nx-login-submit::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, transparent, rgba(255,255,255,0.2), transparent);
    transform: translateX(-100%);
    transition: transform 0.6s ease;
  }
  
  .nx-login-submit:hover::before {
    transform: translateX(100%);
  }
  
  .nx-login-divider {
    margin-top: 32px;
  }
  
  .nx-login-security {
    margin-top: 20px;
  }
}

/* ═══════════════════════════════════════════════
   LARGE DESKTOP (>1600px)
   Expanded layout for ultra-wide screens
═══════════════════════════════════════════════ */

@media (min-width: 1600px) {
  .nx-login-panel {
    flex: 0 0 600px;
    padding: 80px;
  }
  
  .nx-login-tagline h2 {
    font-size: 48px;
  }
  
  .nx-login-form-area {
    padding: 80px;
  }
  
  .nx-login-card {
    max-width: 480px;
    padding: 56px;
  }
}

/* ═══════════════════════════════════════════════
   SMALL MOBILE (<380px)
   Compact adjustments for very small devices
═══════════════════════════════════════════════ */

@media (max-width: 380px) {
  .nx-login-panel {
    padding: 20px 16px 12px;
  }
  
  .nx-login-brand-icon {
    width: 36px;
    height: 36px;
    font-size: 18px;
  }
  
  .nx-login-brand-name {
    font-size: 20px;
  }
  
  .nx-login-card {
    padding: 24px 16px 32px;
    border-radius: 20px 20px 0 0;
  }
  
  .nx-login-card-title {
    font-size: 24px;
  }
  
  .nx-login-input {
    height: 52px;
    font-size: 16px;
  }
  
  .nx-login-submit {
    height: 52px;
  }
}

/* ═══════════════════════════════════════════════
   ACCESSIBILITY & MOTION
═══════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  .nx-login-card,
  .nx-login-panel::before,
  .nx-login-submit::before {
    animation: none;
    transition: none;
  }
}

@media (prefers-contrast: high) {
  .nx-login-input {
    border-width: 2px;
  }
}

:focus-visible {
  outline: 2px solid var(--primary, #6366f1);
  outline-offset: 2px;
}

.nx-login-input:focus-visible {
  outline: none;
}
/* ═══════════════════════════════════════════════
   SIDEBAR
═══════════════════════════════════════════════ */
.nx-sidebar {
  width: var(--sidebar-w);
  height: 100vh;
  position: fixed;
  left: 0; top: 0;
  display: flex;
  flex-direction: column;
  background: var(--bg-sidebar);
  border-right: 1px solid var(--sidebar-border);
  transition: width var(--transition), transform var(--transition);
  z-index: 200;
  overflow: hidden;
  box-shadow: 1px 0 0 var(--sidebar-border), 4px 0 16px rgba(15,23,42,0.04);
}
.nx-sidebar.collapsed { width: 64px; }

/* ── Sidebar header ───────────────────────────────────────────── */
.nx-sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 14px;
  height: var(--header-h);
  border-bottom: 1px solid var(--sidebar-border);
  flex-shrink: 0;
  min-width: 0;
}

/* ── Logo ─────────────────────────────────────────────────────── */
.nx-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 15px;
  white-space: nowrap;
  min-width: 0;
  overflow: hidden;
  letter-spacing: -0.02em;
  color: var(--text);
}

.nx-logo-icon {
  width: 28px; height: 28px;
  background: linear-gradient(135deg, var(--primary), #818cf8);
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(99,102,241,0.30);
}

.nx-logo-text {
  transition: opacity var(--transition), max-width var(--transition);
  max-width: 160px;
  overflow: hidden;
  white-space: nowrap;
  color: var(--text);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.collapsed .nx-logo-text { opacity: 0; max-width: 0; }

/* ── Collapse button ──────────────────────────────────────────── */
.nx-collapse-btn {
  width: 26px; height: 26px;
  border-radius: 6px;
  color: var(--text-light);
  display: flex; align-items: center; justify-content: center;
  transition: background var(--transition), color var(--transition);
  flex-shrink: 0;
  opacity: 1 !important;
  pointer-events: all !important;
}
.nx-collapse-btn:hover  { background: var(--sidebar-accent); color: var(--text); }
.nx-collapse-btn svg    { width: 15px; height: 15px; }
.collapsed .nx-collapse-btn svg { transform: rotate(180deg); }

/* ── Sidebar body ─────────────────────────────────────────────── */
.nx-sidebar-body {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 10px 8px 16px;
  background: var(--bg-sidebar);
}
.nx-sidebar-body::-webkit-scrollbar       { width: 3px; }
.nx-sidebar-body::-webkit-scrollbar-track { background: transparent; }
.nx-sidebar-body::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }

/* ── Section label ────────────────────────────────────────────── */
.nx-nav-section  { margin-bottom: 2px; }

.nx-nav-label {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-light);
  padding: 16px 10px 5px;
  white-space: nowrap;
  transition: opacity var(--transition);
  display: block;
}
.collapsed .nx-nav-label { opacity: 0; }

/* ── Nav item ─────────────────────────────────────────────────── */
.nx-nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 7px;
  color: var(--sidebar-text);
  font-size: 13px;
  font-weight: 500;
  transition: all var(--transition);
  cursor: pointer;
  white-space: nowrap;
  position: relative;
  margin-bottom: 1px;
}
.nx-nav-item:hover {
  background: var(--sidebar-accent);
  color: var(--sidebar-text-hover);
}
.nx-nav-item.active {
  background: var(--sidebar-active-bg);
  color: var(--primary);
  font-weight: 600;
}
.nx-nav-item.active::before {
  content: '';
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  width: 3px; height: 55%;
  background: var(--sidebar-active-bar);
  border-radius: 0 3px 3px 0;
}

/* ── Nav icon ─────────────────────────────────────────────────── */
.nx-nav-icon {
  width: 18px; height: 18px;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-light);
}
.nx-nav-item:hover  .nx-nav-icon  { color: var(--text-muted); }
.nx-nav-item.active .nx-nav-icon  { color: var(--primary); }

/* ── Nav text ─────────────────────────────────────────────────── */
.nx-nav-text {
  transition: opacity var(--transition), max-width var(--transition);
  max-width: 160px;
  overflow: hidden;
  white-space: nowrap;
}
.collapsed .nx-nav-text { opacity: 0; max-width: 0; }

/* ── Nav badge ────────────────────────────────────────────────── */
.nx-nav-badge {
  margin-left: auto;
  background: var(--primary-50);
  color: var(--primary);
  font-size: 9.5px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 999px;
  transition: opacity var(--transition);
  flex-shrink: 0;
}
.collapsed .nx-nav-badge { opacity: 0; }

/* ── Tree toggle (parent) ─────────────────────────────────────── */
.nx-nav-tree { overflow: hidden; }

.nx-nav-tree-toggle {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px;
  border-radius: 7px;
  color: var(--sidebar-text);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  width: 100%;
  transition: all var(--transition);
  margin-bottom: 1px;
}
.nx-nav-tree-toggle:hover {
  background: var(--sidebar-accent);
  color: var(--sidebar-text-hover);
}
.nx-nav-tree.open .nx-nav-tree-toggle { color: var(--text-2); }

/* ── Tree arrow ───────────────────────────────────────────────── */
.nx-tree-arrow {
  margin-left: auto;
  transition: transform var(--transition);
  color: var(--text-light);
  flex-shrink: 0;
}
.nx-nav-tree.open .nx-tree-arrow { transform: rotate(90deg); color: var(--text-muted); }

/* ── Tree children ────────────────────────────────────────────── */
.nx-tree-children {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.28s ease;
  padding-left: 10px;
  margin-left: 9px;
  border-left: 1.5px solid var(--border-light);
  margin-top: 2px;
  margin-bottom: 2px;
}
.nx-nav-tree.open .nx-tree-children { max-height: fit-content; }
.collapsed .nx-tree-children        { max-height: 0 !important; }

/* ── Tree child item ──────────────────────────────────────────── */
.nx-tree-child {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 6px;
  color: var(--text-muted);
  font-size: 12.5px;
  font-weight: 400;
  cursor: pointer;
  transition: all var(--transition);
  text-decoration: none;
  margin-bottom: 1px;
}
.nx-tree-child::before { display: none !important; content: none !important; }
.nx-tree-child:hover   { background: var(--sidebar-accent); color: var(--sidebar-text-hover); }
.nx-tree-child.active  {
  color: var(--primary);
  background: var(--sidebar-active-bg);
  font-weight: 500;
}

/* ── Child icon ───────────────────────────────────────────────── */
.nx-nav-icon-child {
  width: 16px; height: 16px;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-light);
}
.nx-tree-child:hover  .nx-nav-icon-child { color: var(--text-muted); }
.nx-tree-child.active .nx-nav-icon-child { color: var(--primary); }


.nx-main {
  flex: 1;
  margin-left: var(--sidebar-w);
  min-width: 0;
  display: flex;
  flex-direction: column;
  transition: margin-left var(--transition);
}
.sidebar-collapsed .nx-main { margin-left: 64px; }

/* ═══════════════════════════════════════════════
   HEADER — FIXED PRECISE
   Key changes:
   • position: fixed (not sticky) — stays locked to viewport top
   • left = sidebar width, right = 0, recalculated on collapse
   • exact height via --header-h CSS var (56px)
   • backdrop-filter for glass effect
   • box-shadow for depth separation
   • transition for sidebar width change
═══════════════════════════════════════════════ */
.nx-header {
  height: var(--header-h);
  background: var(--bg-header);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px 0 24px;

  /* FIXED — pinned to viewport, respects sidebar width */
  position: fixed;
  top: 0;
  left: var(--sidebar-w);
  right: 0;
  z-index: 50;

  /* Smooth transition when sidebar collapses */
  transition: left var(--transition), background var(--transition);
}

/* When sidebar is collapsed, header shifts left */
.sidebar-collapsed .nx-header {
  left: 64px;
}

/* Push page content down so it isn't hidden behind fixed header */
.nx-content-wrapper {
  padding-top: var(--header-h);
  flex: 1;
  display: flex;
  flex-direction: column;
}

.nx-header-left { display: flex; align-items: center; gap: 12px; }

.nx-header-search {
  position: relative;
  display: flex;
  align-items: center;
}

.nx-header-search input {
  width: 220px;
  padding: 7px 12px 7px 34px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-card);
  font-family: inherit;
  font-size: 13px;
  color: var(--text);
  transition: all var(--transition);
  outline: none;
  height: 34px;
}
.nx-header-search input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-50); width: 260px; }
.nx-header-search input::placeholder { color: var(--text-light); }
.nx-search-icon { position: absolute; left: 10px; color: var(--text-light); pointer-events: none; }

.nx-header-right { display: flex; align-items: center; gap: 2px; }

.nx-header-btn {
  width: 34px; height: 34px;
  border-radius: 8px;
  color: var(--text-muted);
  display: flex; align-items: center; justify-content: center;
  transition: all var(--transition);
  position: relative;
}
.nx-header-btn:hover { background: var(--border-light); color: var(--text); }

.nx-notif-dot {
  position: absolute;
  top: 5px; right: 5px;
  width: 7px; height: 7px;
  background: var(--danger);
  border-radius: 50%;
  border: 1.5px solid var(--bg-header);
}

/* Header divider between groups */
.nx-header-divider {
  width: 1px;
  height: 20px;
  background: var(--border);
  margin: 0 6px;
  flex-shrink: 0;
}

/* Header breadcrumb / page title area */
.nx-header-page-info {
  display: flex;
  flex-direction: column;
  gap: 0;
  line-height: 1.2;
}
.nx-header-page-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}
.nx-header-page-sub {
  font-size: 11px;
  color: var(--text-muted);
}

/* Mobile menu button */
.nx-mobile-menu-btn {
  display: none;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  color: var(--text);
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  transition: background 0.15s;
}
.nx-mobile-menu-btn:hover { background: var(--border-light); }
.nx-mobile-menu-btn svg { width: 20px; height: 20px; }

/* Avatar in header */
.nx-header-avatar {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), var(--primary-light));
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 12px; font-weight: 700;
  cursor: pointer;
  flex-shrink: 0;
  margin-left: 4px;
  border: 2px solid transparent;
  transition: border-color var(--transition);
}
.nx-header-avatar:hover { border-color: var(--primary-light); }

/* ═══════════════════════════════════════════════
   CONTENT AREA
═══════════════════════════════════════════════ */
.nx-content { flex: 1; padding: 50px 20px 20px 20px; }

/* ═══════════════════════════════════════════════
   GRID UTILITIES
═══════════════════════════════════════════════ */
.nx-grid { display: grid; gap: 20px; }
.nx-grid-btn-form { display: grid; gap: 20px; padding-top:20px; }
.nx-grid-2 { grid-template-columns: 1fr 1fr; }
.nx-grid-3 { grid-template-columns: repeat(3, 1fr); }
.nx-grid-4 { grid-template-columns: repeat(4, 1fr); }
.nx-grid-5 { grid-template-columns: repeat(5, 1fr); }
.nx-col-span-2 { grid-column: span 2; }
.nx-col-span-3 { grid-column: span 3; }

/* ═══════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .nx-grid-3 { grid-template-columns: 1fr 1fr; }
  .nx-grid-4 { grid-template-columns: 1fr 1fr; }
  .nx-grid-5 { grid-template-columns: 1fr 1fr; }
  .nx-col-span-2 { grid-column: span 1; }
}

@media (max-width: 768px) {
  /* ── sidebar: fully hidden off-screen by default ───────── */
  .nx-sidebar {
    transform: translateX(-100%) !important;
    width: var(--sidebar-w) !important;   /* always full width on mobile */
  }
  /* ── open: slide in, always expanded (not collapsed) ────── */
  .nx-sidebar.mobile-open {
    transform: translateX(0) !important;
    width: var(--sidebar-w) !important;
  }
  /* ── collapsed class must NOT shrink sidebar on mobile ───── */
  .nx-sidebar.collapsed {
    width: var(--sidebar-w) !important;
    transform: translateX(-100%) !important;
  }
  .nx-sidebar.collapsed.mobile-open {
    transform: translateX(0) !important;
    width: var(--sidebar-w) !important;
  }
  /* ── force all text/icons visible when sidebar is open ───── */
  .nx-sidebar.mobile-open .nx-logo-text    { opacity: 1 !important; max-width: none !important; }
  .nx-sidebar.mobile-open .nx-nav-text     { opacity: 1 !important; max-width: none !important; }
  .nx-sidebar.mobile-open .nx-tree-arrow   { opacity: 1 !important; }
  .nx-sidebar.mobile-open .nx-user-info    { opacity: 1 !important; max-width: none !important; }
  .nx-sidebar.mobile-open .nx-tree-children { /* allow open state */ }
  /* ── hide collapse button on mobile (use hamburger instead) */
  .nx-collapse-btn { display: none !important; }

  .nx-main { margin-left: 0 !important; }
  .nx-header {
    left: 0 !important;
    right: 0 !important;
    padding-left: 12px !important;
  }
  .nx-mobile-menu-btn { display: flex !important; }
  .nx-header-search input { width: 140px; }
  .nx-header-search input:focus { width: 160px; }
  .nx-grid-2, .nx-grid-3, .nx-grid-4, .nx-grid-5 { grid-template-columns: 1fr; }
  .nx-stat-grid { grid-template-columns: 1fr 1fr; }
  .nx-content { padding: 50px 20px 20px 20px; }
  .nx-header-page-info { display: none; }
}

/* ── mobile backdrop overlay ──────────────────────────────── */
.nx-mobile-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 199;   /* below sidebar (z-index 200) but above content */
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.nx-mobile-backdrop.active { display: block; }

@media (max-width: 480px) {
  .nx-stat-grid { grid-template-columns: 1fr; }
}
/* ═══════════════════════════════════════════════
   COLLAPSED SIDEBAR — hover floating submenu
═══════════════════════════════════════════════ */
.nx-hover-submenu {
  position: fixed;
  z-index: 9999;
  min-width: 200px;
  background: var(--bg-sidebar);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px;
  box-shadow: 0 8px 32px rgba(0,0,0,.35);
  padding: 6px 0 8px;
  pointer-events: none;
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity .15s ease, transform .15s ease;
}
.nx-hover-submenu.visible {
  pointer-events: all;
  opacity: 1;
  transform: translateX(0);
}

.nx-hover-submenu-title {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--sidebar-text);
  padding: 4px 14px 6px;
  border-bottom: 1px solid rgba(255,255,255,.07);
  margin-bottom: 4px;
}

.nx-hover-child {
  display: block;
  padding: 7px 14px;
  font-size: 13px;
  color: var(--sidebar-text);
  text-decoration: none;
  border-radius: 6px;
  margin: 0 4px;
  transition: background .12s, color .12s;
  white-space: nowrap;
}
.nx-hover-child:hover {
  color: var(--primary);
  background: var(--sidebar-active-bg);
}

/* hide hover submenu icon tooltip on non-collapsed items */
.collapsed .nx-nav-tree-toggle { position: relative; }
/* ═══════════════════════════════════════════════════════════════
   PAGE AREA — Compact / Modern / Elegant Redesign
   Targets: .nx-content · .nx-breadcrumb · .nx-page-header
            .nx-filter-toolbar (inline flat style)
   ═══════════════════════════════════════════════════════════════ */
 
/* ── 1. Content wrapper — reduce top padding ──────────────── */
.nx-content {
  padding: 12px 20px 20px 20px !important;
}
 
/* ── 2. Breadcrumb — ghost trail, no bottom margin ─────────── */
.nx-breadcrumb {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--text-light);
  margin-bottom: 4px;
  line-height: 1;
}
.nx-breadcrumb a             { color: var(--text-light); transition: color .15s; }
.nx-breadcrumb a:hover       { color: var(--primary); }
.nx-breadcrumb-sep           { color: var(--text-light); opacity: .5; }
.nx-breadcrumb-active        { color: var(--text-muted); font-weight: 500; }
 
/* ── 3. Page header — single compact bar ──────────────────── */
.nx-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  /*min-height: 36px;*/
  margin-top: 35px;
  margin-bottom: 15px;
  padding: 0;
  flex-wrap: nowrap;
}
 
.nx-page-header > div:first-child {
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
  flex: 1;
}
 
/* Title — compact weight, not a giant H1 */
.nx-page-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.01em;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 0;
}
 

 
/* Subtitle — inline with title, muted caption */
.nx-page-subtitle {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 0;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
 
/* ── 4. Action buttons row ────────────────────────────────── */
.nx-page-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
 
.nx-page-actions .nx-btn {
  height: 32px !important;
  padding: 0 14px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  border-radius: 6px !important;
  gap: 5px !important;
  letter-spacing: 0 !important;
}
 
.nx-page-actions .nx-btn svg {
  width: 13px !important;
  height: 13px !important;
}
 
/* Icon-only buttons (trash, refresh) */
.nx-page-actions .nx-btn-danger,
.nx-page-actions .nx-btn-outline {
  width: 32px !important;
  min-width: 32px !important;
  padding: 0 !important;
}

/* ═══════════════════════════════════════════════
   CARDS
═══════════════════════════════════════════════ */
.nx-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.nx-card-header { 
    display: flex; 
    align-items: center; 
    padding: 12px 20px; /* Padding lebih ramping agar presisi */
    min-height: 48px;
    border-bottom: 1px solid var(--border);
}

/* Penyelarasan ikon dan teks di dalam title */
.nx-card-title { 
    display: flex; 
    align-items: center; 
    gap: 8px; /* Jarak antara ikon dan teks */
    font-size: 14px;
    font-weight: 600;
    line-height: 1; /* Mencegah extra space dari line height */
}

/* Konsistensi ukuran ikon */
.nx-card-title i, 
.nx-card-title svg { 
    width: 18px; 
    height: 18px; 
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
    margin: 0; /* Hapus margin-right manual karena sudah ada gap */
}
.nx-card-subtitle { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.nx-card-body     { padding: 24px; }
.nx-card-footer   { padding: 16px 24px; border-top: 1px solid var(--border); }

/* ═══════════════════════════════════════════════
   STAT CARDS
═══════════════════════════════════════════════ */
.nx-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.nx-stat-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px;
  display: flex;
  align-items: center;
  gap: 18px;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition), transform var(--transition);
}
.nx-stat-card:hover { box-shadow: var(--shadow); transform: translateY(-1px); }

.nx-stat-icon {
  width: 52px; height: 52px;
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
}
.nx-stat-icon.primary { background: var(--primary-50); }
.nx-stat-icon.success { background: var(--success-50); }
.nx-stat-icon.warning { background: var(--warning-50); }
.nx-stat-icon.danger  { background: var(--danger-50);  }

.nx-stat-value  { font-size: 26px; font-weight: 700; letter-spacing: -.03em; color: var(--text); }
.nx-stat-label  { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.nx-stat-change { font-size: 12px; font-weight: 500; margin-top: 4px; }
.nx-stat-change.up   { color: var(--success); }
.nx-stat-change.down { color: var(--danger); }

/* ═══════════════════════════════════════════════
   CHART BAR (CSS-only)
═══════════════════════════════════════════════ */
.nx-chart-area {
  height: 200px;
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 0 4px;
}
.nx-bar-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  height: 100%;
  justify-content: flex-end;
}
.nx-bar {
  width: 100%;
  border-radius: 5px 5px 0 0;
  background: linear-gradient(180deg, var(--primary-light), var(--primary));
  transition: opacity var(--transition);
  cursor: pointer;
  min-height: 4px;
}
.nx-bar:hover { opacity: .7; }
.nx-bar-label { font-size: 10px; color: var(--text-light); }

.nx-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 8px 16px;
  border-radius: 8px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  /* Optimasi: Menggunakan transition yang spesifik agar performa render lebih lancar */
  transition: background-color var(--transition, 0.2s ease), 
              color var(--transition, 0.2s ease), 
              border-color var(--transition, 0.2s ease), 
              filter var(--transition, 0.2s ease);
  white-space: nowrap;
  border: 1px solid transparent;
}

/* Menghindari efek flicker saat ditekan di mobile */
.nx-btn:active {
  transform: scale(0.98);
}

.nx-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 8px 16px;
  border-radius: 8px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  /* Performa Lancar (60fps) */
  transition: background-color var(--transition, 0.2s ease), 
              color var(--transition, 0.2s ease), 
              border-color var(--transition, 0.2s ease), 
              filter var(--transition, 0.2s ease);
  white-space: nowrap;
  border: 1px solid transparent;
}

/* Efek Mikro-interaksi saat Tombol Ditekan */
.nx-btn:active {
  transform: scale(0.98);
}

/* ==========================================================================
   1. SOLID BUTTON VARIANTS & HOVER
   ========================================================================== */
.nx-btn-primary   { background: var(--primary); color: #fff; }
.nx-btn-secondary { background: var(--secondary); color: #fff; }
.nx-btn-success   { background: var(--success); color: #fff; }
.nx-btn-danger    { background: var(--danger); color: #fff; }
.nx-btn-info      { background: var(--info); color: #fff; }
.nx-btn-warning   { background: var(--warning); color: #fff; }

.nx-btn-primary:hover,
.nx-btn-secondary:hover,
.nx-btn-success:hover,
.nx-btn-danger:hover,
.nx-btn-info:hover,
.nx-btn-warning:hover {
  filter: brightness(0.9) contrast(1.1); /* Gelap halus & kontras naik sedikit */
}

/* ==========================================================================
   2. OUTLINE BUTTON VARIANTS & OPTIMIZED HOVER
   ========================================================================== */
/* Default Outline (Bawaan) */
.nx-btn-outline { background: transparent; border-color: var(--border); color: var(--text-2); }
.nx-btn-outline:hover { background: var(--border-light); color: var(--text); }

/* Kombinasi Tipe Spesifik untuk Outline */
.nx-btn-outline.nx-btn-primary   { border-color: var(--primary); color: var(--primary); }
.nx-btn-outline.nx-btn-secondary { border-color: var(--secondary); color: var(--secondary); }
.nx-btn-outline.nx-btn-success   { border-color: var(--success); color: var(--success); }
.nx-btn-outline.nx-btn-danger    { border-color: var(--danger); color: var(--danger); }
.nx-btn-outline.nx-btn-info      { border-color: var(--info); color: var(--info); }
.nx-btn-outline.nx-btn-warning   { border-color: var(--warning); color: var(--warning); }

/* Optimasi Hover Outline: Background tint senada warna border/teks */
.nx-btn-outline.nx-btn-primary:hover   { background: color-mix(in srgb, var(--primary) 8%, transparent); }
.nx-btn-outline.nx-btn-secondary:hover { background: color-mix(in srgb, var(--secondary) 8%, transparent); }
.nx-btn-outline.nx-btn-success:hover   { background: color-mix(in srgb, var(--success) 8%, transparent); }
.nx-btn-outline.nx-btn-danger:hover    { background: color-mix(in srgb, var(--danger) 8%, transparent); }
.nx-btn-outline.nx-btn-info:hover      { background: color-mix(in srgb, var(--info) 8%, transparent); }
.nx-btn-outline.nx-btn-warning:hover   { background: color-mix(in srgb, var(--warning) 8%, transparent); }


/* ==========================================================================
   3. GHOST BUTTON VARIANTS & OPTIMIZED HOVER
   ========================================================================== */
/* Default Ghost (Bawaan) */
.nx-btn-ghost { background: transparent; color: var(--type-color); }
.nx-btn-ghost:hover { background: var(--border-light); color: var(--text); }

/* Kombinasi Tipe Spesifik untuk Ghost */
.nx-btn-ghost.nx-btn-primary   { color: var(--primary); }
.nx-btn-ghost.nx-btn-secondary { color: var(--secondary); }
.nx-btn-ghost.nx-btn-success   { color: var(--success); }
.nx-btn-ghost.nx-btn-danger    { color: var(--danger); }
.nx-btn-ghost.nx-btn-info      { color: var(--info); }
.nx-btn-ghost.nx-btn-warning   { color: var(--warning); }

/* Optimasi Hover Ghost */
.nx-btn-ghost.nx-btn-primary:hover   { background: color-mix(in srgb, var(--primary) 8%, transparent); }
.nx-btn-ghost.nx-btn-secondary:hover { background: color-mix(in srgb, var(--secondary) 8%, transparent); }
.nx-btn-ghost.nx-btn-success:hover   { background: color-mix(in srgb, var(--success) 8%, transparent); }
.nx-btn-ghost.nx-btn-danger:hover    { background: color-mix(in srgb, var(--danger) 8%, transparent); }
.nx-btn-ghost.nx-btn-info:hover      { background: color-mix(in srgb, var(--info) 8%, transparent); }
.nx-btn-ghost.nx-btn-warning:hover   { background: color-mix(in srgb, var(--warning) 8%, transparent); }


/* ==========================================================================
   4. BUTTON SIZES
   ========================================================================== */
.nx-btn-sm { padding: 5px 10px; font-size: 12px; border-radius: 6px; }
.nx-btn-xs { padding: 3px 7px; font-size: 11px; border-radius: 5px; }
.nx-btn-lg { padding: 11px 22px; font-size: 14px; }
/* ═══════════════════════════════════════════════
   BADGES
═══════════════════════════════════════════════ */
.nx-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}
.nx-badge-primary { background: var(--primary-100); color: var(--primary-dark); }
.nx-badge-success { background: var(--success-50);  color: #047857; }
.nx-badge-warning { background: var(--warning-50);  color: #92400e; }
.nx-badge-danger  { background: var(--danger-50);   color: #b91c1c; }
.nx-badge-info    { background: var(--info-50);     color: #1d4ed8; }
[data-theme="dark"] .nx-badge-success { color: #6ee7b7; }
[data-theme="dark"] .nx-badge-warning { color: #fcd34d; }
[data-theme="dark"] .nx-badge-danger  { color: #fca5a5; }
[data-theme="dark"] .nx-badge-info    { color: #93c5fd; }
[data-theme="dark"] .nx-badge-primary { color: var(--primary-light); }

/* ═══════════════════════════════════════════════
   TABLE (basic)
═══════════════════════════════════════════════ */
.nx-table-wrap { overflow-x: auto; }
.nx-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.nx-table th {
  text-align: left;
  padding: 12px 16px;
  font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .05em;
  color: var(--text-muted);
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}
.nx-table td { padding: 13px 16px; border-bottom: 1px solid var(--border-light); color: var(--text-2); }
.nx-table tr:last-child td { border-bottom: none; }
.nx-table tr:hover td { background: var(--border-light); }
.nx-font-mono { font-family: var(--font-mono); font-size: 12px; }

/* ═══════════════════════════════════════════════
   FORM ELEMENTS
═══════════════════════════════════════════════ */
.nx-form-group { margin-bottom: 20px; }

.nx-label { display: block; font-size: 13px; font-weight: 500; color: var(--text-2); margin-bottom: 6px; }

.nx-input,
.nx-select,
.nx-textarea {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-family: inherit; font-size: 13px;
  color: var(--text);
  background: var(--bg-card);
  transition: all var(--transition);
  outline: none;
}
.nx-input:focus,
.nx-select:focus,
.nx-textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-50); }
.nx-textarea { min-height: 100px; resize: vertical; }

.nx-toggle { position: relative; display: inline-block; width: 44px; height: 24px; }
.nx-toggle input { opacity: 0; width: 0; height: 0; }
.nx-toggle-slider {
  position: absolute; inset: 0;
  background: var(--border);
  border-radius: 24px;
  transition: all var(--transition);
  cursor: pointer;
}
.nx-toggle-slider::before {
  content: '';
  position: absolute;
  width: 18px; height: 18px;
  left: 3px; top: 3px;
  background: #fff;
  border-radius: 50%;
  transition: transform var(--transition);
}
.nx-toggle input:checked + .nx-toggle-slider { background: var(--primary); }
.nx-toggle input:checked + .nx-toggle-slider::before { transform: translateX(20px); }

/* Container untuk input dengan label di border */
.nx-input-outline {
    position: relative;
    margin-bottom: 10px;
    width: 100%;
}

.nx-input-outline fieldset {
    position: relative;
    border: 1px solid var(--border, #ccc);
    border-radius: 8px;
    padding: 0 12px;
    margin: 0;
    transition: border-color 0.2s;
}

.nx-input-outline:focus-within fieldset {
    border-color: var(--primary, #3b82f6);
}

.nx-input-outline.is-invalid:focus-within fieldset {
    border-color: var(--danger, #ef4444);
}

.nx-input-outline.is-invalid:focus-within legend {
    color: var(--danger, #ef4444);
}

.nx-input-outline legend {
    font-size: 12px;
    padding: 0 5px;
    margin-left: -5px;
    color: var(--text-muted, #888);
    font-weight: 500;
}

/* Menggunakan class nx-input yang sudah ada tapi tanpa border sendiri */
.nx-input-outline .nx-input {
    border: none !important;
    background: transparent !important;
    padding: 6px 0 8px 0 !important;
    width: 100%;
    outline: none !important;
    box-shadow: none !important;
    color: var(--text-main);
    height: auto !important;
}

/* Efek saat fokus */
.nx-input-outline:focus-within legend {
    color: var(--primary);
}

/* Efek saat validation — must come AFTER :focus-within so danger wins */
.nx-input-outline.is-invalid fieldset,
.nx-input-outline.is-invalid:focus-within fieldset {
    border-color: var(--danger, #ef4444) !important;
}

.nx-input-outline.is-invalid legend,
.nx-input-outline.is-invalid:focus-within legend {
    color: var(--danger, #ef4444) !important;
}

.nx-input-outline.is-valid fieldset {
    /* border-color: var(--success, #2fb344); */
}

.nx-input-outline.is-validating fieldset {
    border-color: var(--warning, #f59f00);
}

.nx-input-outline .error {
    position: absolute;
    left: 10px;
    bottom: -25px;

    font-size: 11px;
    color: var(--danger, #e5484d);

    opacity: 0;
    transform: translateY(-3px);
    transition: all .15s ease;
    pointer-events: none;
}

.nx-input-outline.is-invalid .error {
    opacity: 1;
    transform: translateY(0);
}

.nx-input-outline.is-validating fieldset {
    border-color: var(--warning, #f59f00);
    animation: nx-validating 1s linear infinite;
}

@keyframes nx-validating {
    0% { border-color: #f59f00; }
    50% { border-color: #fbbf24; }
    100% { border-color: #f59f00; }
}

/* ═══════════════════════════════════════════════
   DROPDOWN
═══════════════════════════════════════════════ */
.nx-dropdown { position: relative; display: inline-block; }

.nx-dropdown-menu {
  position: absolute;
  top: calc(100% + -3px);
  right: 0;
  min-width: 180px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow-lg);
  z-index: 200;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-6px);
  transition: all var(--transition);
}
.nx-dropdown.open .nx-dropdown-menu { opacity: 1; pointer-events: all; transform: translateY(0); }

.nx-dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  font-size: 13px;
  color: var(--text-2);
  cursor: pointer;
  transition: background var(--transition);
  width: 100%;
  text-align: left;
}
.nx-dropdown-item:hover { background: var(--border-light); }
.nx-dropdown-item.danger { color: var(--danger); }

.nx-dropdown-header {
  padding: 8px 14px;
  font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .06em;
  color: var(--text-light);
}
.nx-dropdown-divider { border-top: 1px solid var(--border); margin: 4px 0; }


/* ═══════════════════════════════════════════════
   CHECKBOX & RADIO BUTTON REFINEMENT
   ═══════════════════════════════════════════════ */

/* Base style untuk keduanya */
.nx-checkbox, .nx-radio {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border: 1.5px solid var(--input-border, #d1d5db);
    background-color: var(--bg-card, #ffffff);
    margin: 0;
    cursor: pointer;
    display: inline-grid;
    place-content: center;
    transition: all 0.2s ease;
    vertical-align: middle;
    position: relative;
}

/* Checkbox specific (Rounded Corners) */
.nx-checkbox {
    border-radius: 4px;
}

/* Radio specific (Circle) */
.nx-radio {
    border-radius: 50%;
}

/* Hover State */
.nx-checkbox:hover, .nx-radio:hover {
    border-color: var(--primary);
    background-color: var(--primary-light, #eff6ff);
}

/* Checked State */
.nx-checkbox:checked, .nx-radio:checked {
    background-color: var(--primary);
    border-color: var(--primary);
}

/* Inner Icon for Checkbox (Checkmark) */
.nx-checkbox:checked::before {
    content: "";
    width: 10px;
    height: 6px;
    border: 2px solid white;
    border-top: 0;
    border-right: 0;
    transform: rotate(-45deg) translate(1px, -1px);
}

/* Inner Icon for Radio (Dot) */
.nx-radio:checked::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: white;
}

/* Focus State */
.nx-checkbox:focus, .nx-radio:focus {
    outline: none;
    box-shadow: 0 0 0 3px var(--input-focus-ring, rgba(37, 99, 235, 0.15));
}

/* Disabled State */
.nx-checkbox:disabled, .nx-radio:disabled {
    background-color: #f3f4f6;
    border-color: #e5e7eb;
    cursor: not-allowed;
}

/* Label Wrapper (Helper class) */
.nx-control-group {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-size: 14px;
    color: var(--text);
    user-select: none;
}

/* ═══════════════════════════════════════════════
   MODAL
═══════════════════════════════════════════════ */
.nx-modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.5);
  backdrop-filter: blur(4px);
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition);
}
.nx-modal-backdrop.open { opacity: 1; pointer-events: all; }

.nx-modal {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  width: 100%;
  max-width: 480px;
  transform: scale(.95);
  transition: transform var(--transition);
}
.nx-modal-backdrop.open .nx-modal { transform: scale(1); }
.nx-modal-header { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px; border-bottom: 1px solid var(--border); }
.nx-modal-title  { font-size: 15px; font-weight: 600; }
.nx-modal-close  { width: 28px; height: 28px; border-radius: 6px; color: var(--text-muted); display: flex; align-items: center; justify-content: center; }
.nx-modal-close:hover { background: var(--border-light); color: var(--text); }
.nx-modal-body   { padding: 24px; font-size: 14px; color: var(--text-2); line-height: 1.7; }
.nx-modal-footer { padding: 16px 24px; border-top: 1px solid var(--border); display: flex; justify-content: flex-end; gap: 10px; }

/* ═══════════════════════════════════════════════
   TOAST
═══════════════════════════════════════════════ */
#nx-toast-container {
  position: fixed;
  top: 20px; right: 20px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}
.nx-toast {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 18px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow-lg);
  min-width: 280px; max-width: 380px;
  pointer-events: all;
  transform: translateX(20px);
  opacity: 0;
  transition: all .3s ease;
  border-left: 4px solid var(--border);
}
.nx-toast.show { transform: translateX(0); opacity: 1; }
.nx-toast.success { border-left-color: var(--success); }
.nx-toast.error   { border-left-color: var(--danger);  }
.nx-toast.warning { border-left-color: var(--warning); }
.nx-toast.info    { border-left-color: var(--info);    }
.nx-toast-icon  { font-size: 18px; flex-shrink: 0; margin-top: 1px; }
.nx-toast-body  { flex: 1; min-width: 0; }
.nx-toast-title { font-size: 13px; font-weight: 600; color: var(--text); }
.nx-toast-msg   { font-size: 12px; color: var(--text-muted); margin-top: 2px; }

/* ═══════════════════════════════════════════════
   ACTIVITY FEED
═══════════════════════════════════════════════ */
.nx-activity-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 24px;
  border-bottom: 1px solid var(--border-light);
}
.nx-activity-item:last-child { border-bottom: none; }
.nx-activity-dot {
  width: 36px; height: 36px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}
.nx-activity-content-title { font-size: 13.5px; font-weight: 500; }
.nx-activity-time          { font-size: 11.5px; color: var(--text-muted); margin-top: 2px; }

/* ═══════════════════════════════════════════════
   PRODUCT CARD
═══════════════════════════════════════════════ */
.nx-product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 20px; }
.nx-product-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: all var(--transition);
}
.nx-product-card:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
.nx-product-thumb {
  height: 140px;
  background: linear-gradient(135deg, var(--primary-50), var(--primary-100));
  display: flex; align-items: center; justify-content: center;
  font-size: 64px;
}
.nx-product-body   { padding: 16px; }
.nx-product-name   { font-size: 14px; font-weight: 600; margin-bottom: 8px; }
.nx-product-footer { display: flex; justify-content: space-between; align-items: center; }
.nx-product-price  { font-size: 18px; font-weight: 700; color: var(--primary); }
.nx-product-stock  { font-size: 11px; color: var(--text-muted); }

/* ═══════════════════════════════════════════════
   ANALYTICS METRICS
═══════════════════════════════════════════════ */
.nx-metric-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--border-light);
}
.nx-metric-row:last-child { border-bottom: none; }
.nx-metric-icon    { font-size: 20px; width: 36px; text-align: center; flex-shrink: 0; }
.nx-metric-label   { flex: 1; font-size: 13.5px; color: var(--text-2); }
.nx-metric-bar-wrap { width: 120px; height: 6px; background: var(--border); border-radius: 999px; overflow: hidden; flex-shrink: 0; }
.nx-metric-bar     { height: 100%; border-radius: 999px; background: var(--primary); }
.nx-metric-val     { font-size: 13px; font-weight: 600; color: var(--text); min-width: 40px; text-align: right; flex-shrink: 0; }

/* ═══════════════════════════════════════════════
   COMPONENT DEMOS
═══════════════════════════════════════════════ */
.nx-demo-section { margin-bottom: 32px; }
.nx-demo-section h4 { font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); margin-bottom: 16px; }
.nx-demo-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* ═══════════════════════════════════════════════
   USER GRID
═══════════════════════════════════════════════ */
.nx-user-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.nx-user-card-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-card);
  transition: box-shadow var(--transition);
}
.nx-user-card-item:hover { box-shadow: var(--shadow); }

/* ═══════════════════════════════════════════════
   404 PAGE
═══════════════════════════════════════════════ */
.nx-404 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  text-align: center;
  gap: 16px;
}
.nx-404 h1 { font-size: 80px; font-weight: 700; color: var(--border); letter-spacing: -.04em; }
.nx-404 p  { font-size: 16px; color: var(--text-muted); }

/* ═══════════════════════════════════════════════
   CARD LIST
   ═══════════════════════════════════════════════ */
.nx-list-card-body {
    padding:10px 0px;
}
/* ═══════════════════════════════════════════════
   CARD TREEVIEW - FIXED BORDER & ALIGNMENT
   ═══════════════════════════════════════════════ */
.nx-tree-row {
    display: flex;
    align-items: center;
    padding: 10px 15px;
    gap: 12px;
    height: 35px;
    transition: background 0.2s;
    /* Tambahkan border-bottom secara global di sini */
    border-bottom: 1px solid var(--border, #eee); 
    background: var(--bg-card);
}

/* Kolom Aksi (Chevron) */
.nx-tree-col-action { 
    width: 16px; 
    display: flex; 
    justify-content: center; 
    align-items: center;
    cursor: pointer; 
}

/* Checkbox Column */
.nx-tree-col-check { 
    width: 20px; 
    display: flex; 
    justify-content: center; 
    align-items: center;
}

/* Label Column */
.nx-tree-col-label { 
    display: flex; 
    align-items: center; 
    gap: 10px; 
    flex: 1; 
    font-size: 13px;
    color: var(--text-main, #333);
}

/* Icon Styling */
.nx-tree-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    color: var(--primary);
}

.nx-tree-text {
    color:var(--text);
}

/* Toggle Logic */
.nx-tree-node-wrapper.is-collapsed > .nx-tree-children-container {
    display: none !important;
}

.nx-tree-node-wrapper.is-collapsed .nx-tree-chevron {
    transform: rotate(-90deg);
}

.nx-tree-chevron {
    transition: transform 0.2s ease;
    display: flex;
    align-items: center;
    font-size:12px;
}

/* Menghapus border terakhir di paling bawah card */
.nx-tree-container > .nx-tree-node-wrapper:last-child > .nx-tree-row {
    border-bottom: none;
}

/* Counter */
.nx-counter{
  font-size:12px;
  text-align:right;
  margin-top:4px;
  color:#888;
}

.nx-counter.is-warning{
  color:#f59e0b;
}

.nx-counter.is-danger{
  color:#ef4444;
}

/* ────────────────────────────────────────────────
   NxPopup — Modal Component Styles
   Add this block to src/styles/components.css
   ──────────────────────────────────────────────── */

/* Overlay / Backdrop */
.nx-popup-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(2px);
    opacity: 0;
    transition: opacity var(--transition);
    padding: 16px;
}

[data-theme="dark"] .nx-popup-overlay {
    background: rgba(0, 0, 0, 0.65);
}

.nx-popup-overlay.nx-popup-visible {
    opacity: 1;
}

.nx-popup-overlay.nx-popup-visible .nx-popup-dialog {
    transform: translateY(0) scale(1);
    opacity: 1;
}

/* Dialog box */
.nx-popup-dialog {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    display: flex;
    flex-direction: column;
    max-width: 96vw;
    max-height: 92vh;
    overflow: hidden;
    transform: translateY(18px) scale(0.98);
    opacity: 0;
    transition: transform var(--transition), opacity var(--transition);
}

/* Header */
.nx-popup-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
    background: var(--bg-subtle, var(--bg));
}

.nx-popup-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 1;
    flex: 1;
    min-width: 0;
}

.nx-popup-title svg,
.nx-popup-title img {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* Close (×) button */
.nx-popup-btn-close {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: transparent;
    color: var(--text-muted);
    font-size: 13px;
    cursor: pointer;
    line-height: 1;
    transition: background var(--transition), color var(--transition), border-color var(--transition);
}

.nx-popup-btn-close:hover {
    background: var(--danger-50);
    color: var(--danger);
    border-color: var(--danger);
}

/* Body */
.nx-popup-body {
    flex: 1;
    overflow-y: auto;
    background: var(--bg-card);
    color: var(--text);
}

/* Footer */
.nx-popup-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 12px 18px;
    border-top: 1px solid var(--border);
    flex-shrink: 0;
    background: var(--bg-subtle, var(--bg));
}

/* Any footer button that is disabled */
.nx-popup-footer .nx-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
}

/* Selected count badge — rendered inside a button via showCount: true */
.nx-popup-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    margin-left: 6px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.25);
    color: inherit;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
}

/* Responsive — bottom sheet on mobile */
@media (max-width: 600px) {
    .nx-popup-overlay {
        align-items: flex-end;
        padding: 0;
    }

    .nx-popup-dialog {
        width: 100% !important;
        border-radius: var(--radius-lg) var(--radius-lg) 0 0;
        max-height: 88vh;
    }
}
/* ════════════════════════════════════════════════════════════════════════════
   SPK FOLDER TABS  ·  Classic folder/file tab style
   Raised card on active, flat bottom merges with content border
   ════════════════════════════════════════════════════════════════════════════ */
 
.spk-tabs::-webkit-scrollbar { display: none; }
.spk-tabs {
    display: flex;
    flex-wrap: nowrap;           /* single row always — no wrapping */
    overflow-x: auto;            /* scroll horizontally when tabs overflow */
    overflow-y: hidden;
    scrollbar-width: none;       /* Firefox */
    background-color: #dfe6ed;
    gap: 4px;
}
[data-theme="dark"] .spk-tabs {
    background-color: #242930;
}
 
.spk-tab {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 32px;
    padding: 0 14px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    white-space: nowrap;         /* never break label text */
    cursor: pointer;
    font-family: inherit;
    outline: none;
    flex-shrink: 0;              /* tabs never shrink — scroll instead */
    transition: background 0.15s, color 0.15s;
    border-radius: 8px 8px 0 0;
    background: #dfe6ed;
    color: #6f757f;
    border: none;
}
 
.spk-tab::before { display: none; }
 
.spk-tab:hover:not(.spk-tab-active) {
    background: var(--bg-card);
    color: var(--text-2);
    z-index: 2;
}
 
/* ── ACTIVE ──────────────────────────────────────────────────────────────── */
.spk-tab-active {
    background: var(--bg-card);
    color: var(--text);
    font-weight: 700;
    z-index: 10;
}
 
.spk-tab-icon {
    font-size: 12px;
    flex-shrink: 0;
    opacity: 0.7;
    transition: opacity 0.15s;
}
.spk-tab-active .spk-tab-icon { opacity: 1; }
 
.spk-tab-label {
    white-space: nowrap;
}
 
/* ── DARK MODE ───────────────────────────────────────────────────────────── */
[data-theme="dark"] .spk-tabs {
    border-bottom-color: var(--border);
}
[data-theme="dark"] .spk-tab {
    background: #242931;
    color: var(--text-muted);
}
[data-theme="dark"] .spk-tab:hover:not(.spk-tab-active) {
    background: rgba(255,255,255,0.07);
    color: var(--text-2);
}
[data-theme="dark"] .spk-tab-active {
    background: var(--bg-card);
    color: var(--text);
}
 
/* ── MOBILE — smaller text/padding, still single scrollable row ─────────── */
@media (max-width: 768px) {
    .spk-tab {
        height: 30px;
        padding: 0 12px;
        font-size: 9.5px;
        letter-spacing: 0.05em;
        border-radius: 6px 6px 0 0;
    }
    .spk-tab-icon { display: none; }
}
 
/* ════════════════════════════════════════════════════════════════════════════
   SPK SUMMARY CARDS  ·  Responsive grid above Perintah Kerja tabs
   ════════════════════════════════════════════════════════════════════════════ */
.spk-summary-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin: 20px 20px 0 20px;
}
 
.spk-summary-card {
    border-radius: 10px;
    padding: 18px 20px;
    color: #fff;
    box-shadow: 0 2px 6px rgba(0,0,0,.12);
}
 
.spk-card-value {
    font-size: 28px;
    font-weight: 700;
    line-height: 1.1;
}
 
.spk-card-label {
    font-size: 13px;
    opacity: .92;
    margin-top: 4px;
    line-height: 1.35;
}
 
/* 2-col on tablet */
@media (max-width: 768px) {
    .spk-summary-row {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
        margin: 14px 14px 0 14px;
    }
    .spk-summary-card {
        padding: 14px 16px;
        border-radius: 8px;
    }
    .spk-card-value { font-size: 22px; }
    .spk-card-label { font-size: 11.5px; }
}
 
/* 2-col still on small phones, tighter spacing */
@media (max-width: 400px) {
    .spk-summary-row {
        gap: 8px;
        margin: 10px 10px 0 10px;
    }
    .spk-card-value { font-size: 20px; }
    .spk-card-label { font-size: 11px; }
}

/* --- Nexus Balanced Modern Theme --- */
:root {
    --tabulator-bg: #ffffff;
    --tabulator-text: #1f2937;
    --tabulator-text-muted: #6b7280;
    --tabulator-border: #f3f4f6;
    --tabulator-header-bg: #f9fafb; /* Light header */
    --tabulator-row-hover: #f8fafc;
    --tabulator-accent: #3b82f6;
    --tabulator-font: 'Inter', system-ui, -apple-system, sans-serif;
    --card-radius: 0px; 
    --nx-menu-bg: #ffffff;
    --nx-menu-border: #e2e8f0;
    --nx-menu-item-hover: #f1f5f9;
    --nx-menu-text: #475569;
    --nx-menu-sep: #eeeeee;
    --nx-trigger-hover: #eeeeee;
    --nx-edit-bg: #f8fafc;
}

/* Dark Mode Variables */
[data-theme="dark"] {
    --tabulator-bg: #111827;
    --tabulator-text: #f9fafb;
    --tabulator-text-muted: #9ca3af;
    --tabulator-border: #1f2937;
    --tabulator-header-bg: #1f2937; /* Dark header */
    --tabulator-row-hover: #1e293b;
    --tabulator-accent: #60a5fa;
    --nx-menu-bg: #1e293b; /* Slate 800 */
    --nx-menu-border: #334155; /* Slate 700 */
    --nx-menu-item-hover: #334155;
    --nx-menu-text: #f1f5f9; /* Slate 100 */
    --nx-menu-sep: #334155;
    --nx-trigger-hover: #334155;
    --nx-edit-bg: #0f172a; /* Slate 900 */
}

/* Base Fixes */
.tabulator, .tabulator * {
    box-sizing: border-box !important;
}

.tabulator {
    background-color: var(--tabulator-bg) !important;
    border: 1px solid var(--tabulator-border) !important;
    border-radius: var(--card-radius) !important;
    font-family: var(--tabulator-font) !important;
    font-size: 14px;
    color: var(--tabulator-text) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important; 
    width: 100%;
}

/* --- THE HEADER: Balanced & Modern --- */
/* Target all internal header containers to force color change */
.tabulator .tabulator-header,
.tabulator .tabulator-header .tabulator-header-contents,
.tabulator .tabulator-header .tabulator-headers,
.tabulator .tabulator-header .tabulator-col {
    background-color: var(--tabulator-header-bg) !important;
    color: var(--tabulator-text-muted) !important;
    border-right: none !important;
}

.tabulator .tabulator-header {
    border-bottom: 1px solid var(--tabulator-border) !important;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-size: 12px;
    flex-shrink: 0 !important;
    border-top-left-radius: var(--card-radius) !important;
    border-top-right-radius: var(--card-radius) !important;
}

.tabulator .tabulator-header .tabulator-col .tabulator-col-content {
    padding: 12px 16px !important;
    line-height: 1.5 !important;
}

/* --- THE BODY --- */
.tabulator .tabulator-tableholder {
    flex-grow: 1 !important;
    background-color: var(--tabulator-bg) !important;
}

.tabulator .tabulator-tableholder .tabulator-table .tabulator-row {
    background-color: var(--tabulator-bg) !important;
    border-bottom: 1px solid var(--tabulator-border) !important;
    min-height: 52px !important;
    display: flex !important;
}

.tabulator .tabulator-row:hover {
    background-color: var(--tabulator-row-hover) !important;
}

.tabulator .tabulator-cell {
    padding: 12px 16px !important;
    display: flex !important;
    align-items: center !important;
    border-right: none !important;
}

/* --- THE FOOTER: Right Aligned --- */
.tabulator .tabulator-footer {
    background-color: var(--tabulator-bg) !important;
    border-top: 1px solid var(--tabulator-border) !important;
    padding: 12px 16px !important;
    border-bottom-left-radius: var(--card-radius) !important;
    border-bottom-right-radius: var(--card-radius) !important;
}

/* Pagination Buttons */
.tabulator .tabulator-footer .tabulator-page {
    border: 1px solid var(--tabulator-border) !important;
    border-radius: 6px !important;
    padding: 6px 12px !important;
    margin: 0 4px !important;
    background: var(--tabulator-bg) !important;
    color: var(--tabulator-text) !important;
    transition: all 0.2s;
}

.tabulator .tabulator-footer .tabulator-page.active {
    background-color: var(--tabulator-accent) !important;
    color: #ffffff !important;
    border-color: var(--tabulator-accent) !important;
}

.tabulator .tabulator-footer .tabulator-footer-contents {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    justify-content: space-between !important;
    gap: 0 !important;
}

/* Row counter — left side */
.tabulator .tabulator-footer .tabulator-page-counter {
    flex-shrink: 0;
    font-size: 11.5px;
    color: var(--text-muted);
    white-space: nowrap;
}

/* Paginator — right side (flex:1 + text-align:right from Tabulator base CSS) */
.tabulator .tabulator-footer .tabulator-paginator {
    flex: 1 !important;
    text-align: right !important;
    display: block !important;
}

/* Override Tabulator Default Checkbox */
.tabulator-cell .tabulator-col-row-handle,
.tabulator-cell input[type="checkbox"],
.tabulator-header .tabulator-col-title input[type="checkbox"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 15px !important;
    height: 15px !important;
    border: 1.5px solid var(--input-border, #d1d5db);
    background-color: var(--bg-card, #ffffff);
    border-radius: 4px;
    cursor: pointer;
    display: inline-grid;
    place-content: center;
    transition: all 0.2s ease;
    position: relative;
    margin: 0 !important;
}

/* Checked State */
.tabulator-cell input[type="checkbox"]:checked,
.tabulator-header input[type="checkbox"]:checked {
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
}
/* ═══════════════════════════════════════════════
   ENHANCED TABULATOR EDIT LIST (DROPDOWN)
   ═══════════════════════════════════════════════ */

.tabulator-edit-list {
    background: var(--bg-card) !important;
    border: 1px solid var(--border) !important;
    border-radius: 12px !important; /* Radius lebih besar agar modern */
    box-shadow: var(--shadow-lg), 0 10px 25px -5px rgba(0, 0, 0, 0.1) !important;
    padding: 5px !important;
    min-width: 140px !important; /* Sedikit lebih lebar agar teks tidak sesak */
    z-index: 10000;
}

.tabulator-edit-list-item {
    /* Padding ditambah agar area klik (hitbox) lebih besar */
    padding: 8px 14px !important;
    border-radius: 8px !important; 
    color: var(--text) !important;
    font-size: 13px !important; /* Ukuran font ideal untuk readability */
    font-weight: 500 !important;
    line-height: 1.4 !important;
    margin-bottom: 2px !important;
    transition: all 0.15s ease-in-out !important;
}

.tabulator-edit-list-item:last-child {
    margin-bottom: 0 !important;
}

/* Hover State - Dibuat Jauh Lebih Kontras */
.tabulator-edit-list-item:hover {
    background: var(--primary) !important; /* Gunakan warna primary langsung */
    color: white !important;               /* Teks jadi putih agar kontras */
    transform: scale(1.02);                /* Efek sedikit membesar saat hover */
    cursor: pointer;
}

/* Active State (Item yang sedang terpilih) */
.tabulator-edit-list-item.tabulator-edit-list-item-active {
    background: var(--primary-hover, #1d4ed8) !important;
    color: white !important;
    font-weight: 700 !important;
}

/* Garis pemisah jika ada grup (optional) */
.tabulator-edit-list-separator {
    border-top: 1px solid var(--border) !important;
    margin: 4px 0 !important;
}
/* Checkmark Icon */
.tabulator-cell input[type="checkbox"]:checked::before,
.tabulator-header input[type="checkbox"]:checked::before {
    content: "";
    width: 10px;
    height: 6px;
    border: 2px solid white;
    border-top: 0;
    border-right: 0;
    transform: rotate(-45deg) translate(1px, -1px);
}

/* Hover effect inside table */
.tabulator-cell input[type="checkbox"]:hover {
    border-color: var(--primary);
}

/* Center the checkbox in Tabulator Cell */
.tabulator-row .tabulator-cell[tabulator-field="rowSelection"],
.tabulator-header .tabulator-col[tabulator-field="rowSelection"] {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Styling Tabulator List Editor agar sesuai dengan nx-input *//* 1. Editing Cell - Lebih subtle dan fokus */
/* 1. Editing Cell - Kompak & Theme Aware */
.tabulator-row .tabulator-cell.tabulator-editing {
    padding: 0 !important;
    border: none !important;
    background: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 100 !important;
    overflow: visible !important;
    box-shadow: none !important;
    transition: all 0.15s ease !important;
}

/* 2. Input/Select - Ukuran Fixed Agar Tidak Membengkak */
.tabulator-row .tabulator-cell.tabulator-editing input,
.tabulator-row .tabulator-cell.tabulator-editing select {
    width: 100% !important;
    height: 28px !important; /* Fixed height kompak */
    padding: 0 8px !important; /* Padding minimalis */
    border: none !important;
    background: transparent !important;
    font-size: 12px !important; /* Font lebih kecil */
    font-weight: 400 !important;
    color: var(--tabulator-text) !important;
    font-family: var(--tabulator-font) !important;
    outline: none !important;
}

/* Placeholder - Menggunakan muted color */
.tabulator-row .tabulator-cell.tabulator-editing input::placeholder {
    color: var(--tabulator-text-muted) !important;
    opacity: 0.7 !important;
}

/* 3. Dropdown List - Kompak & Adaptive Theme */
.tabulator-edit-list {
    background: var(--tabulator-bg) !important;
    border: 1px solid var(--tabulator-border) !important;
    border-radius: 6px !important;
    box-shadow: 
        0 10px 15px -3px rgba(0, 0, 0, 0.1),
        0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
    padding: 3px !important; /* Super compact */
    margin-top: -10px !important;
    min-width: 120px !important; /* Lebih kecil */
    max-height: 200px !important; /* Batasi tinggi */
    z-index: 20000 !important;
    font-family: var(--tabulator-font) !important;
    animation: dropdown-compact 0.12s ease-out !important;
}

/* Dark mode shadow lebih kuat */
[data-theme="dark"] .tabulator-edit-list {
    box-shadow: 
        0 10px 15px -3px rgba(0, 0, 0, 0.5),
        0 4px 6px -2px rgba(0, 0, 0, 0.3) !important;
    border-color: #374151 !important; /* Border sedikit terang di dark */
}

/* 4. List Items - Super Compact */
.tabulator-edit-list-item {
    padding: 5px 8px !important; /* Minimal padding */
    border-radius: 4px !important;
    color: var(--tabulator-text) !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    margin-bottom: 1px !important;
    cursor: pointer !important;
    transition: all 0.1s ease !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* Hover - Gunakan row hover dari theme */
.tabulator-edit-list-item:hover {
    background: var(--tabulator-row-hover) !important;
    color: var(--tabulator-text) !important;
}

/* Active/Selected - Accent dengan opacity */
.tabulator-edit-list-item.tabulator-edit-list-item-active {
    background: rgba(59, 130, 246, 0.12) !important;
    color: var(--tabulator-accent) !important;
    font-weight: 500 !important;
}

/* Dark mode active state */
[data-theme="dark"] .tabulator-edit-list-item.tabulator-edit-list-item-active {
    background: rgba(96, 165, 250, 0.15) !important;
}

/* Active Hover */
.tabulator-edit-list-item.tabulator-edit-list-item-active:hover {
    background: rgba(59, 130, 246, 0.18) !important;
}

[data-theme="dark"] .tabulator-edit-list-item.tabulator-edit-list-item-active:hover {
    background: rgba(96, 165, 250, 0.22) !important;
}

/* 5. Animation - Cepat & Smooth */
@keyframes dropdown-compact {
    from { 
        opacity: 0; 
        transform: translateY(-3px) scale(0.98); 
    }
    to { 
        opacity: 1; 
        transform: translateY(0) scale(1); 
    }
}

/* 6. Hide badges saat editing */
.tabulator-cell.tabulator-editing .nx-badge,
.tabulator-cell.tabulator-editing .badge {
    display: none !important;
}

/* 7. Scrollbar - Theme Adaptive */
.tabulator-edit-list::-webkit-scrollbar {
    width: 4px !important;
}

.tabulator-edit-list::-webkit-scrollbar-track {
    background: transparent !important;
    margin: 2px !important;
}

.tabulator-edit-list::-webkit-scrollbar-thumb {
    background: var(--tabulator-border) !important;
    border-radius: 4px !important;
}

.tabulator-edit-list::-webkit-scrollbar-thumb:hover {
    background: var(--tabulator-text-muted) !important;
}

/* Dark mode scrollbar */
[data-theme="dark"] .tabulator-edit-list::-webkit-scrollbar-thumb {
    background: #374151 !important;
}

[data-theme="dark"] .tabulator-edit-list::-webkit-scrollbar-thumb:hover {
    background: #4b5563 !important;
}

/* 8. Focus State Tambahan */
.tabulator-row .tabulator-cell.tabulator-editing:focus-within {
    box-shadow: none !important;
}

[data-theme="dark"] .tabulator-row .tabulator-cell.tabulator-editing:focus-within {
    box-shadow: none!important;
}

/* Pastikan dropdown menu muncul di atas baris lain */
.tabulator-cell.tabulator-editing {
    overflow: visible !important;
}

/* Membuat icon dots tetap di tengah */
.tabulator-cell[tabulator-field="quick_actions"] {
    font-size: 18px;
    font-weight: bold;
}

/* 1. DROPDOWN TRIGGER */
.nx-dropdown-trigger {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    padding: 5px;
    cursor: pointer;
    color: var(--text-muted, #94a3b8);
    transition: all 0.2s ease;
}

.nx-dropdown-trigger:hover {
    background: var(--nx-trigger-hover);
}

/* 2. FLOATING MENU */
.nx-floating-menu {
    background: var(--nx-menu-bg);
    border: 1px solid var(--nx-menu-border);
    border-radius: 12px;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.2);
    min-width: 180px;
    padding: 6px;
    z-index: 999999;
    animation: nx-menu-pop 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Item di dalam Menu */
.nx-floating-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 5px 14px;
    border-radius: 8px;
    border-bottom: 1px solid var(--nx-menu-sep);
    color: var(--nx-menu-text);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.1s;
}

.nx-floating-item:last-child {
    border-bottom: none;
}

.nx-floating-item:hover {
    background: var(--primary, #6366f1);
    color: #FFFFFF !important;
}

.nx-floating-item svg {
    width: 16px;
    height: 16px;
    opacity: 0.7;
    fill: currentColor;
}

/* Container Ikon */
.nx-floating-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px; /* Ukuran tetap agar teks sejajar vertical */
    height: 18px;
    flex-shrink: 0;
}

/* Styling Ikon SVG */
.nx-floating-icon svg {
    width: 100%;
    height: 100%;
    fill: currentColor; /* Ikon akan mengikuti warna teks */
    opacity: 0.8;
}

.nx-floating-item:hover .nx-floating-icon svg {
    opacity: 1;
}

.nx-floating-item:hover svg {
    opacity: 1;
}

/* 3. CELL EDITING PRECISION */
.tabulator-row .tabulator-cell.tabulator-editing {
    padding: 0 !important;
    background: var(--nx-edit-bg) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 100 !important;
    overflow: visible !important;
}
.tabulator-row .tabulator-cell .tabulator-data-tree-control {
    height: 16px;
    margin-right: 10px;
    width: 16px;
    border: 1.5px solid #ccc;
    border-radius: 4px;
}

.tabulator-row .tabulator-cell .tabulator-data-tree-branch-empty {
    width:18px;
}

/* 4. ANIMATIONS */
@keyframes nx-menu-pop {
    from { 
        opacity: 0; 
        transform: scale(0.95) translateY(-5px); 
    }
    to { 
        opacity: 1; 
        transform: scale(1) translateY(0); 
    }
}
/* ═══════════════════════════════════════════════════════════
   .custom-compact-grid — Pixel-Perfect Dense Tabulator Theme
   Targets: Excel/Airtable density · 12–13px · Ellipsis · 1px borders
   ═══════════════════════════════════════════════════════════ */

.custom-compact-grid {
  --cg-font:        'Inter', 'Sora', system-ui, -apple-system, sans-serif;
  --cg-fs:          12px;
  --cg-fs-head:     11px;
  --cg-row-h:       30px;
  --cg-head-h:      30px;
  --cg-pad-x:       8px;
  --cg-pad-y:       4px;
  --cg-border:      var(--border, #e2e8f0);
  --cg-bg:          var(--bg-card, #ffffff);
  --cg-bg-head:     var(--tabulator-header-bg, #f9fafb);
  --cg-text:        var(--tabulator-text, #1f2937);
  --cg-text-muted:  var(--tabulator-text-muted, #6b7280);
  --cg-hover:       var(--tabulator-row-hover, #f8fafc);
  --cg-accent:      var(--primary, #6366f1);
  --cg-stripe:      rgba(0,0,0,.018);
  --cg-edit-bg:     var(--nx-edit-bg, #f8fafc);
}

[data-theme="dark"] .custom-compact-grid {
  --cg-border:      #2d3748;
  --cg-bg:          #111827;
  --cg-bg-head:     #1f2937;
  --cg-text:        #f9fafb;
  --cg-text-muted:  #9ca3af;
  --cg-hover:       #1e293b;
  --cg-stripe:      rgba(255,255,255,.025);
  --cg-edit-bg:     #0f172a;
}

/* ── Shell ─────────────────────────────────────────────── */
.custom-compact-grid .tabulator {
  background-color: var(--cg-bg) !important;
  border: 1px solid var(--cg-border) !important;
  border-radius: 0 !important;
  font-family: var(--cg-font) !important;
  font-size: var(--cg-fs) !important;
  color: var(--cg-text) !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  width: 100%;
}

/* ── Header ────────────────────────────────────────────── */
.custom-compact-grid .tabulator .tabulator-header,
.custom-compact-grid .tabulator .tabulator-header .tabulator-header-contents,
.custom-compact-grid .tabulator .tabulator-header .tabulator-headers,
.custom-compact-grid .tabulator .tabulator-header .tabulator-col {
  background-color: var(--cg-bg-head) !important;
  color: var(--cg-text-muted) !important;
  border-right: none !important;
}

.custom-compact-grid .tabulator .tabulator-header {
  border-bottom: 1px solid var(--cg-border) !important;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: var(--cg-fs-head) !important;
  flex-shrink: 0 !important;
  min-height: var(--cg-head-h) !important;
}

.custom-compact-grid .tabulator .tabulator-header .tabulator-col {
  min-height: var(--cg-head-h) !important;
  height: var(--cg-head-h) !important;
  border-right: 1px solid var(--cg-border) !important;
}

.custom-compact-grid .tabulator .tabulator-header .tabulator-col:last-child {
  border-right: none !important;
}

.custom-compact-grid .tabulator .tabulator-header .tabulator-col .tabulator-col-content {
  padding: var(--cg-pad-y) var(--cg-pad-x) !important;
  height: var(--cg-head-h) !important;
  display: flex !important;
  align-items: center !important;
  line-height: 1 !important;
}

.custom-compact-grid .tabulator .tabulator-header .tabulator-col .tabulator-col-title {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  line-height: 1 !important;
}

/* Sort arrows — tighter */
.custom-compact-grid .tabulator .tabulator-header .tabulator-col .tabulator-col-sorter {
  right: 0px !important;
}

.custom-compact-grid .tabulator .tabulator-header .tabulator-col .tabulator-col-sorter .tabulator-arrow {
  border-width: 4px !important;
}

/* ── Body / Rows ───────────────────────────────────────── */
.custom-compact-grid .tabulator .tabulator-tableholder {
  flex-grow: 1 !important;
  background-color: var(--cg-bg) !important;
}

.custom-compact-grid .tabulator .tabulator-tableholder .tabulator-table .tabulator-row {
  background-color: var(--cg-bg) !important;
  border-bottom: 1px solid var(--cg-border) !important;
  min-height: var(--cg-row-h) !important;
  display: flex !important;
  transition: background 0.1s ease;
}

/* Zebra stripe — ultra-subtle */
.custom-compact-grid .tabulator .tabulator-tableholder .tabulator-table .tabulator-row:nth-child(even) {
  background-color: color-mix(in srgb, var(--cg-bg) 97%, #000 3%) !important;
}

[data-theme="dark"] .custom-compact-grid .tabulator .tabulator-tableholder .tabulator-table .tabulator-row:nth-child(even) {
  background-color: color-mix(in srgb, var(--cg-bg) 95%, #fff 5%) !important;
}

.custom-compact-grid .tabulator .tabulator-row:hover {
  background-color: var(--cg-hover) !important;
}

.custom-compact-grid .tabulator .tabulator-row.tabulator-selected {
  background-color: color-mix(in srgb, var(--cg-accent) 10%, transparent) !important;
}

/* ── Cells ─────────────────────────────────────────────── */
.custom-compact-grid .tabulator .tabulator-cell {
  padding: var(--cg-pad-y) var(--cg-pad-x) !important;
  min-height: var(--cg-row-h) !important;
  height: var(--cg-row-h) !important;
  display: flex !important;
  align-items: center !important;
  border-right: 1px solid var(--cg-border) !important;
  font-size: var(--cg-fs) !important;
  line-height: 1 !important;
  /* Ellipsis overflow */
  overflow: hidden !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
  /* Fix flex-shrink so text truncates not wraps */
  min-width: 0 !important;
}

.custom-compact-grid .tabulator .tabulator-cell:last-child {
  border-right: none !important;
}

/* Ensure inner text spans also truncate */
.custom-compact-grid .tabulator .tabulator-cell > span,
.custom-compact-grid .tabulator .tabulator-cell .tabulator-data {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  display: block !important;
  max-width: 100% !important;
}

/* ── Cell: Editing ─────────────────────────────────────── */
.custom-compact-grid .tabulator-row .tabulator-cell.tabulator-editing {
  padding: 0 !important;
  border: none !important;
  background: var(--cg-edit-bg) !important;
  box-shadow: inset 0 0 0 1.5px var(--cg-accent) !important;
  display: flex !important;
  align-items: center !important;
  z-index: 100 !important;
  overflow: visible !important;
}

.custom-compact-grid .tabulator-row .tabulator-cell.tabulator-editing input,
.custom-compact-grid .tabulator-row .tabulator-cell.tabulator-editing select {
  width: 100% !important;
  height: var(--cg-row-h) !important;
  padding: 0 var(--cg-pad-x) !important;
  border: none !important;
  background: transparent !important;
  font-size: var(--cg-fs) !important;
  font-family: var(--cg-font) !important;
  color: var(--cg-text) !important;
  outline: none !important;
  box-shadow: none !important;
}

/* ── Cell: Tree ────────────────────────────────────────── */
.custom-compact-grid .tabulator-row .tabulator-cell .tabulator-data-tree-control {
  width: 14px !important;
  height: 14px !important;
  margin-right: 6px !important;
  border: 1px solid var(--cg-border) !important;
  border-radius: 3px !important;
  flex-shrink: 0 !important;
}

.custom-compact-grid .tabulator-row .tabulator-cell .tabulator-data-tree-branch-empty {
  width: 14px !important;
  flex-shrink: 0 !important;
}

/* ── Checkbox ──────────────────────────────────────────── */
.custom-compact-grid .tabulator-cell input[type="checkbox"],
.custom-compact-grid .tabulator-header .tabulator-col-title input[type="checkbox"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 13px !important;
  height: 13px !important;
  border: 1.5px solid var(--cg-border);
  background-color: var(--cg-bg);
  border-radius: 3px;
  cursor: pointer;
  display: inline-grid;
  place-content: center;
  transition: all 0.15s ease;
  margin: 0 !important;
  flex-shrink: 0 !important;
}

.custom-compact-grid .tabulator-cell input[type="checkbox"]:checked,
.custom-compact-grid .tabulator-header input[type="checkbox"]:checked {
  background-color: var(--cg-accent) !important;
  border-color: var(--cg-accent) !important;
}

.custom-compact-grid .tabulator-cell input[type="checkbox"]:checked::before,
.custom-compact-grid .tabulator-header input[type="checkbox"]:checked::before {
  content: "";
  width: 8px;
  height: 5px;
  border: 1.5px solid white;
  border-top: 0;
  border-right: 0;
  transform: rotate(-45deg) translate(1px, -1px);
  display: block;
}

.custom-compact-grid .tabulator-cell input[type="checkbox"]:hover {
  border-color: var(--cg-accent);
}

.custom-compact-grid .tabulator-row .tabulator-cell[tabulator-field="rowSelection"],
.custom-compact-grid .tabulator-header .tabulator-col[tabulator-field="rowSelection"] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* ── Footer / Pagination ───────────────────────────────── */
.custom-compact-grid .tabulator .tabulator-footer {
  background-color: var(--cg-bg) !important;
  border-top: 1px solid var(--cg-border) !important;
  padding: 5px var(--cg-pad-x) !important;
  font-size: var(--cg-fs) !important;
  min-height: 34px !important;
  display: flex !important;
  align-items: center !important;
}

.custom-compact-grid .tabulator .tabulator-footer .tabulator-footer-contents {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  width: 100% !important;
}

.custom-compact-grid .tabulator .tabulator-footer .tabulator-page {
  border: 1px solid var(--cg-border) !important;
  border-radius: 4px !important;
  padding: 2px 7px !important;
  margin: 0 2px !important;
  background: var(--cg-bg) !important;
  color: var(--cg-text) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  line-height: 18px !important;
  min-width: 24px !important;
  transition: all 0.15s;
}

.custom-compact-grid .tabulator .tabulator-footer .tabulator-page:hover {
  background: var(--cg-hover) !important;
  border-color: var(--cg-accent) !important;
}

.custom-compact-grid .tabulator .tabulator-footer .tabulator-page.active {
  background-color: var(--cg-accent) !important;
  color: #fff !important;
  border-color: var(--cg-accent) !important;
}

.custom-compact-grid .tabulator .tabulator-footer .tabulator-page-size {
  border: 1px solid var(--cg-border) !important;
  border-radius: 4px !important;
  padding: 2px 4px !important;
  font-size: 11px !important;
  background: var(--cg-bg) !important;
  color: var(--cg-text) !important;
  height: 24px !important;
}

.custom-compact-grid .tabulator .tabulator-footer .tabulator-paginator {
  font-size: 11px !important;
  color: var(--cg-text-muted) !important;
}

/* ── Edit Dropdown List ────────────────────────────────── */
.custom-compact-grid ~ .tabulator-edit-list,
.tabulator-edit-list {
  background: var(--cg-bg) !important;
  border: 1px solid var(--cg-border) !important;
  border-radius: 6px !important;
  box-shadow: 0 8px 20px -4px rgba(0,0,0,.12), 0 3px 6px -2px rgba(0,0,0,.06) !important;
  padding: 3px !important;
  min-width: 120px !important;
  max-height: 200px !important;
  z-index: 20000 !important;
  font-family: var(--cg-font) !important;
  font-size: var(--cg-fs) !important;
  animation: cg-dropdown-in 0.1s ease-out !important;
}

.tabulator-edit-list-item {
  padding: 4px 8px !important;
  border-radius: 3px !important;
  font-size: var(--cg-fs) !important;
  font-weight: 400 !important;
  line-height: 1.3 !important;
  margin-bottom: 1px !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  transition: background 0.1s !important;
}

.tabulator-edit-list-item:hover {
  background: var(--cg-hover) !important;
  color: var(--cg-text) !important;
}

.tabulator-edit-list-item.tabulator-edit-list-item-active {
  background: color-mix(in srgb, var(--cg-accent) 12%, transparent) !important;
  color: var(--cg-accent) !important;
  font-weight: 500 !important;
}

.tabulator-edit-list::-webkit-scrollbar { width: 3px !important; }
.tabulator-edit-list::-webkit-scrollbar-track { background: transparent !important; }
.tabulator-edit-list::-webkit-scrollbar-thumb {
  background: var(--cg-border) !important;
  border-radius: 3px !important;
}

@keyframes cg-dropdown-in {
  from { opacity: 0; transform: translateY(-4px) scale(.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ── Quick-actions dot menu ────────────────────────────── */
.custom-compact-grid .tabulator-cell[tabulator-field="quick_actions"] {
  font-size: 14px !important;
  font-weight: 700 !important;
}

/* ── Floating action menu ──────────────────────────────── */
.nx-dropdown-trigger {
  width: 26px !important;
  height: 26px !important;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  cursor: pointer;
  color: var(--cg-text-muted, #94a3b8);
  transition: background 0.15s ease;
}

.nx-dropdown-trigger:hover {
  background: var(--nx-trigger-hover, #eeeeee);
}

.nx-floating-menu {
  background: var(--nx-menu-bg, #fff);
  border: 1px solid var(--nx-menu-border, #e2e8f0);
  border-radius: 8px;
  box-shadow: 0 8px 20px -4px rgba(0,0,0,.15);
  min-width: 160px;
  padding: 4px;
  z-index: 999999;
  animation: nx-menu-pop 0.15s cubic-bezier(0.16,1,0.3,1);
}

.nx-floating-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 5px 10px;
  border-radius: 5px;
  border-bottom: 1px solid var(--nx-menu-sep, #eee);
  color: var(--nx-menu-text, #475569);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.1s;
}

.nx-floating-item:last-child { border-bottom: none; }

.nx-floating-item:hover {
  background: var(--primary, #6366f1);
  color: #fff !important;
}

.nx-floating-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  overflow: hidden;
}

/* force ALL svg inside icon wrapper to 16×16, override inline attrs */
.nx-floating-icon svg,
.nx-floating-icon svg * {
  width: 16px !important;
  height: 16px !important;
  max-width: 16px !important;
  max-height: 16px !important;
  fill: none;
  opacity: 0.75;
}

/* stroke-based icons */
.nx-floating-icon svg { stroke: currentColor; }

.nx-floating-item:hover .nx-floating-icon svg { opacity: 1; }

/* any stray svg outside icon wrapper */
.nx-floating-item > svg { width: 14px !important; height: 14px !important; opacity: 0.7; }

@keyframes nx-menu-pop {
  from { opacity: 0; transform: scale(0.95) translateY(-4px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* ═══════════════════════════════════════════════════════════
   FILTER TOOLBAR — Enhanced on top of original nx- classes
   Uses the project's existing .nx-input-outline + .nx-btn.
   Only overrides sizing & alignment — no structural rewrites.
   ═══════════════════════════════════════════════════════════ */

/* ── Strip ─────────────────────────────────────────────── */
.nx-filter-toolbar {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 8px 16px !important;
  border-bottom: 1px solid var(--border) !important;
  background: var(--bg-card) !important;
  min-height: 56px !important;
  flex-wrap: nowrap !important;
  box-sizing: border-box !important;
}

/* ── .nx-input-outline inside the toolbar ──────────────── */
/* Preserve original fieldset/legend pattern exactly;
   only adjust sizing so it fits the 56px strip. */
.nx-filter-toolbar .nx-input-outline {
  margin-bottom: 0 !important;   /* override the default 10px */
  align-self: center !important;
}

.nx-filter-toolbar .nx-input-outline fieldset {
  /* Keep original border + radius; just set a fixed height */
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  padding: 0 12px !important;
  margin: 0 !important;
  height: 40px !important;
  display: flex !important;
  align-items: center !important;
  background: var(--bg-card) !important;
  transition: border-color 0.2s !important;
}

.nx-filter-toolbar .nx-input-outline:focus-within fieldset {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px var(--primary-50) !important;
}

/* Legend — keep original style, just nudge size slightly */
.nx-filter-toolbar .nx-input-outline legend {
  font-size: 11px !important;
  font-weight: 600 !important;
  padding: 0 5px !important;
  margin-left: -5px !important;
  color: var(--text-muted) !important;
  line-height: 1 !important;
}

/* Input / Select inside fieldset */
.nx-filter-toolbar .nx-input-outline .nx-input,
.nx-filter-toolbar .nx-input-outline select,
.nx-filter-toolbar .nx-input-outline input[type="text"] {
  border: none !important;
  background: transparent !important;
  outline: none !important;
  box-shadow: none !important;
  font-size: 13px !important;
  font-family: inherit !important;
  color: var(--text) !important;
  padding: 0 !important;
  width: 100% !important;
  height: 100% !important;
  line-height: 1.4 !important;
}

.nx-filter-toolbar .nx-input-outline select {
  cursor: pointer !important;
}

.nx-filter-toolbar .nx-input-outline input::placeholder {
  color: var(--text-light) !important;
  font-size: 12px !important;
}

/* ── Per-field widths ──────────────────────────────────── */
/* Field dropdown */
.nx-filter-toolbar .nx-input-outline:nth-child(1) {
  flex: 0 0 200px !important;
}

/* Type/operator dropdown */
.nx-filter-toolbar .nx-input-outline:nth-child(2) {
  flex: 0 0 120px !important;
}

/* Value text input — fills remaining space */
.nx-filter-toolbar .nx-input-outline:nth-child(3) {
  flex: 1 1 0 !important;
  min-width: 140px !important;
}

/* ── Button group ──────────────────────────────────────── */
.nx-filter-toolbar > div:last-child {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-shrink: 0 !important;
  align-self: center !important;
  padding-left: 6px !important;
  /* subtle separator from inputs */
  border-left: 1px solid var(--border) !important;
  margin-left: 2px !important;
  height: 28px !important;
  padding-right: 0 !important;
}

/* Keep original .nx-btn sizing but fix height to match inputs */
.nx-filter-toolbar .nx-btn {
  height: 36px !important;
  padding: 0 20px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  border-radius: 8px !important;
  gap: 7px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  white-space: nowrap !important;
}

.nx-filter-toolbar .nx-btn svg {
  width: 14px !important;
  height: 14px !important;
  flex-shrink: 0 !important;
}

/* Primary stays as-is from components.css */
.nx-filter-toolbar .nx-btn-primary {
  background: var(--primary) !important;
  color: #fff !important;
}

.nx-filter-toolbar .nx-btn-primary:hover {
  background: var(--primary-dark) !important;
}

/* Ghost "Clear" — override default muted color to danger */
.nx-filter-toolbar .nx-btn-ghost {
  color: var(--danger) !important;
  padding: 0 14px !important;
}

.nx-filter-toolbar .nx-btn-ghost:hover {
  background: var(--danger-50) !important;
  color: var(--danger) !important;
}

/* ── Dark mode ─────────────────────────────────────────── */
[data-theme="dark"] .nx-filter-toolbar {
  background: var(--bg-card) !important;
  border-bottom-color: var(--border) !important;
}

[data-theme="dark"] .nx-filter-toolbar .nx-input-outline fieldset {
  background: var(--bg-card) !important;
  border-color: var(--border) !important;
}

[data-theme="dark"] .nx-filter-toolbar .nx-input-outline .nx-input,
[data-theme="dark"] .nx-filter-toolbar .nx-input-outline select,
[data-theme="dark"] .nx-filter-toolbar .nx-input-outline input {
  color: var(--text) !important;
}

[data-theme="dark"] .nx-filter-toolbar .nx-input-outline select option {
  background: var(--bg-card) !important;
  color: var(--text) !important;
}

[data-theme="dark"] .nx-filter-toolbar > div:last-child {
  border-left-color: var(--border) !important;
}

[data-theme="dark"] .nx-filter-toolbar .nx-btn-ghost:hover {
  background: rgba(239,68,68,.12) !important;
}
/* ═══════════════════════════════════════════════════════════════
   PRECISION LAYOUT v4 — Clean, no overflow clipping on header
   ═══════════════════════════════════════════════════════════════

   Overflow strategy:
   • .nx-main          → overflow:hidden (viewport boundary)
   • .nx-content        → overflow:visible (NEVER clip the header row)
   • .custom-compact-grid → overflow:hidden (grid boundary)
   • .tabulator-tableholder → overflow-y:auto (only table body scrolls)
   ═══════════════════════════════════════════════════════════════ */

/* ── 1. Main column ───────────────────────────────────────── */
.nx-main {
  display: flex !important;
  flex-direction: column !important;
  height: 100vh !important;
  overflow: hidden !important;       /* outer viewport boundary */
  min-width: 0 !important;
}

/* ── 2. Page content ──────────────────────────────────────── */
.nx-content {
  flex: 1 !important;
  min-height: 0 !important;
  padding-top:    var(--header-h) !important;
  padding-left:   0 !important;
  padding-right:  0 !important;
  padding-bottom: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: visible !important;      /* NEVER clip the page header */
}

/* ── 3. Breadcrumb gone ───────────────────────────────────── */
.nx-breadcrumb { display: none !important; }

/* ═══════════════════════════════════════════════════════════
   BAR 1 — Page identity (44px)
   ═══════════════════════════════════════════════════════════ */
.nx-page-header {
  position: relative !important;
  flex-shrink: 0 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  height: 44px !important;
  min-height: 44px !important;
  padding: 0 20px !important;
  margin: 0 !important;
  gap: 12px !important;

  background: var(--bg-card) !important;
  overflow: visible !important;      /* never clip action buttons */
}

/* Left: icon + title + sep + subtitle */
.nx-page-header-left {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex: 1 !important;
  min-width: 0 !important;           /* allows subtitle to truncate */
  overflow: hidden !important;
}

.nx-page-icon-wrap {
  display: flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 5px;
  background: var(--primary-50); color: var(--primary);
  flex-shrink: 0;
}
.nx-page-icon-wrap svg { width: 13px; height: 13px; }

.nx-page-title {
  font-size: 14px !important; font-weight: 700 !important;
  color: var(--text) !important; letter-spacing: -0.01em !important;
  line-height: 1 !important; white-space: nowrap !important;
  flex-shrink: 0 !important; position: relative; padding-bottom: 2px;
}
.nx-page-title::after {
  content: ''; position: absolute;
  bottom: -3px; left: 0; width: 100%;
  height: 2px; background: var(--primary); border-radius: 2px;
}

.nx-page-header-sep {
  font-size: 11px !important; flex-shrink: 0 !important;
  color: var(--text-light) !important; opacity: .4;
}

.nx-page-subtitle {
  font-size: 12px !important; color: var(--text-muted) !important;
  margin: 0 !important; line-height: 1 !important;
  white-space: nowrap !important; overflow: hidden !important;
  text-overflow: ellipsis !important; min-width: 0 !important;
}

/* ── Action buttons ───────────────────────────────────────── */
.nx-page-actions {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex-shrink: 0 !important;
  flex-wrap: nowrap !important;
  overflow: visible !important;
  /* Explicit: never constrain width of this container */
  width: auto !important;
  max-width: none !important;
}

/*
  All buttons in the page header.
  Key: flex-shrink:0 + white-space:nowrap + overflow:visible = button always shows full text.
  NO justify-content (causes extra-space calculation issues in some browsers).
  NO fixed width or max-width.
*/
.nx-page-header .nx-btn,
.nx-page-header .nx-page-actions .nx-btn {
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  height: 30px !important;
  padding-top:    0 !important;
  padding-bottom: 0 !important;
  padding-left:   14px !important;
  padding-right:  14px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  border-radius: 6px !important;
  gap: 5px !important;
  flex-shrink: 0 !important;       /* NEVER compress */
  white-space: nowrap !important;  /* NEVER wrap text */
  overflow: visible !important;    /* NEVER clip text */
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
}

.nx-page-header .nx-btn svg,
.nx-page-header .nx-page-actions .nx-btn svg {
  width: 13px !important; height: 13px !important;
  flex-shrink: 0 !important;
  min-width: 13px !important;
}

/* ═══════════════════════════════════════════════════════════
   LIST PAGES — grid wrapper fills remaining height
   ═══════════════════════════════════════════════════════════ */
.custom-compact-grid {
  flex: 1 !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  margin: 0 !important;
}

/* Card: seamless, no floating chrome */
.custom-compact-grid .nx-card {
  flex: 1 !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  margin: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  border: none !important;
  border-top: 1px solid var(--border) !important;
  background: var(--bg-card) !important;
  overflow: hidden !important;
}

/* ═══════════════════════════════════════════════════════════
   BAR 2 — Filter toolbar (40px)
   ═══════════════════════════════════════════════════════════ */
.nx-filter-toolbar {
  position: relative !important;
  flex-shrink: 0 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  height: 40px !important;
  min-height: 40px !important;
  padding: 0 20px !important;
  margin: 0 !important;

  background: var(--bg-card) !important;
  border-bottom: 1px solid var(--border) !important;
  box-sizing: border-box !important;
}

.nx-filter-left {
  display: flex; align-items: center; gap: 0;
  flex: 1; min-width: 0; height: 100%;
}
.nx-filter-right {
  display: flex; align-items: center; gap: 5px;
  flex-shrink: 0; padding-left: 12px;
  border-left: 1px solid var(--border); height: 20px;
}

/* Toolbar ghost buttons */
.nx-ftb-btn {
  display: inline-flex !important; align-items: center !important;
  gap: 5px !important; height: 28px !important; padding: 0 10px !important;
  font-size: 12px !important; font-weight: 500 !important;
  border-radius: 5px !important; color: var(--text-muted) !important;
  background: transparent !important; border: none !important;
  cursor: pointer; white-space: nowrap; transition: all .15s; flex-shrink: 0;
}
.nx-ftb-btn svg { width: 13px !important; height: 13px !important; flex-shrink: 0; }
.nx-ftb-btn:hover { background: var(--border-light) !important; color: var(--text) !important; }
.nx-ftb-btn.active { color: var(--primary) !important; }

.nx-ftb-divider { width:1px; height:16px; background:var(--border); flex-shrink:0; margin:0 2px; }

.nx-ftb-fields { display:none; align-items:center; gap:4px; height:100%; flex:1; min-width:0; padding-left:4px; }
.nx-ftb-fields.open { display:flex; }

.nx-ftb-chip {
  display:inline-flex; align-items:center;
  height:26px; padding:0 8px;
  background:color-mix(in srgb, var(--border) 50%, transparent);
  border:1px solid var(--border); border-radius:5px; flex-shrink:0; gap:0;
  transition:border-color .15s;
}
.nx-ftb-chip:focus-within { border-color:var(--primary); box-shadow:0 0 0 2px color-mix(in srgb,var(--primary) 12%,transparent); }
[data-theme="dark"] .nx-ftb-chip { background:rgba(255,255,255,.06); }

.nx-ftb-label {
  font-size:9.5px; font-weight:700; color:var(--text-muted); text-transform:uppercase;
  letter-spacing:.06em; margin-right:5px; white-space:nowrap; flex-shrink:0; line-height:1;
}

.nx-ftb-select {
  border:none !important; background:transparent !important; outline:none !important;
  font-size:12px !important; font-family:inherit !important; color:var(--text) !important;
  cursor:pointer; padding:0 16px 0 0 !important; -webkit-appearance:none; appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%278%27 height=%275%27 viewBox=%270 0 8 5%27%3E%3Cpath d=%27M1 1l3 3 3-3%27 stroke=%27%2394a3b8%27 stroke-width=%271.5%27 fill=%27none%27 stroke-linecap=%27round%27/%3E%3C/svg%3E") !important;
  background-repeat:no-repeat !important; background-position:right 0 center !important;
  background-size:8px !important; min-width:55px;
}

.nx-ftb-search {
  display:flex; align-items:center; gap:5px;
  height:26px; padding:0 8px;
  background:color-mix(in srgb, var(--border) 50%, transparent);
  border:1px solid var(--border); border-radius:5px; flex:1; min-width:0; transition:border-color .15s;
}
.nx-ftb-search:focus-within { border-color:var(--primary); box-shadow:0 0 0 2px color-mix(in srgb,var(--primary) 12%,transparent); }
[data-theme="dark"] .nx-ftb-search { background:rgba(255,255,255,.06); }
.nx-ftb-search-icon { display:flex; align-items:center; color:var(--text-light); flex-shrink:0; }
.nx-ftb-search-icon svg { width:12px; height:12px; }
.nx-ftb-input {
  border:none !important; background:transparent !important; outline:none !important;
  font-size:12px !important; font-family:inherit !important; color:var(--text) !important;
  width:100% !important; line-height:1 !important; padding:0 !important;
}
.nx-ftb-input::placeholder { color:var(--text-light) !important; font-size:12px !important; }

.nx-filter-right .nx-btn {
  height:26px !important; padding:0 12px !important;
  font-size:11.5px !important; font-weight:600 !important; border-radius:5px !important; gap:4px !important;
}
.nx-filter-right .nx-btn svg { width:11px !important; height:11px !important; }
.nx-filter-right .nx-btn-ghost { color:var(--danger) !important; padding:0 8px !important; }
.nx-filter-right .nx-btn-ghost:hover { background:var(--danger-50) !important; }

/* ═══════════════════════════════════════════════════════════
   TABULATOR inside grid — fills remaining card height
   ═══════════════════════════════════════════════════════════ */
.custom-compact-grid .tabulator {
  flex: 1 !important; min-height: 0 !important;
  border-radius: 0 !important; border: none !important;
  border-top: 1px solid var(--border) !important;
}
.custom-compact-grid .tabulator .tabulator-tableholder {
  flex: 1 !important; min-height: 0 !important; overflow-y: auto !important;
}
.custom-compact-grid .tabulator .tabulator-footer { flex-shrink: 0 !important; }

/* ── Perms card: fixed height, table scrolls internally ─── */
.uf-perms-card .custom-compact-grid {
  display: flex;
  flex-direction: column;
}
.uf-perms-card .custom-compact-grid .tabulator {
  flex: none !important;
  height: 300px !important;
  max-height: 300px !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
}
.uf-perms-card .custom-compact-grid .tabulator .tabulator-header {
  flex-shrink: 0 !important;
}
.uf-perms-card .custom-compact-grid .tabulator .tabulator-tableholder {
  flex: 1 !important;
  height: 0 !important;          /* forces flex to control it, not content */
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: auto !important;
}

/* ═══════════════════════════════════════════════════════════
   FORM PAGES — scroll naturally, with padding
   ═══════════════════════════════════════════════════════════ */
.nx-content:not(:has(.custom-compact-grid)):not(:has(.nx-report-layout)) {
  overflow-y: auto !important;
  padding-left:  0px !important;
  padding-right: 0px !important;
  padding-bottom: 24px !important;
}

/* Form pages that embed custom-compact-grid (e.g. UserFormPage) still need to scroll */
.nx-content:has(.detail-form) {
  overflow-y: auto !important;
  padding-bottom: 32px !important;
}

/* Dashboard page — has custom-compact-grid but needs window scroll */
.nx-content:has(.db-wrap) {
  overflow-y: auto !important;
  padding-bottom: 32px !important;
}

/* Form grid layout */
.nx-grid-layout {
  display: grid !important;
  gap: 20px !important;
  align-items: start !important;
  margin-top: 10px !important;
}

/* Form cards */
.nx-card-fixed {
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-sm) !important;
  display: flex !important; flex-direction: column !important; overflow: hidden !important;
}
.nx-card-fixed > .nx-card-header,
form > div > .nx-card > .nx-card-header {
  display: flex !important; align-items: center !important;
  padding: 10px 16px !important; min-height: 40px !important;
  border-bottom: 1px solid var(--border) !important;
}
.nx-card-fixed > .nx-card-header .nx-card-title,
form > div > .nx-card > .nx-card-header .nx-card-title {
  font-size: 11px !important; font-weight: 700 !important;
  letter-spacing: .05em !important; text-transform: uppercase !important;
  color: var(--text-muted) !important; display: flex !important;
  align-items: center !important; gap: 6px !important;
}
.nx-card-body.nx-scroll-v { flex: 1 !important; overflow-y: auto !important; padding: 20px !important; }

/* Input outlines */
.nx-input-outline { margin-bottom: 14px !important; }
.nx-input-outline fieldset {
  border: 1px solid var(--border) !important; border-radius: 8px !important;
  padding: 0 12px !important; margin: 0 !important; min-height: 48px !important;
  display: flex !important; align-items: center !important;
  background: var(--bg-card) !important; transition: border-color .15s, box-shadow .15s !important;
}
.nx-input-outline:focus-within fieldset {
  border-color: var(--primary) !important; box-shadow: 0 0 0 3px var(--primary-50) !important;
}
.nx-input-outline.is-invalid fieldset,
.nx-input-outline.is-invalid:focus-within fieldset {
  border-color: var(--danger, #ef4444) !important;
  box-shadow: 0 0 0 3px rgba(239,68,68,.15) !important;
}
.nx-input-outline.is-invalid legend,
.nx-input-outline.is-invalid:focus-within legend {
  color: var(--danger, #ef4444) !important;
}
.nx-input-outline legend {
  font-size: 11px !important; font-weight: 600 !important;
  color: var(--text-muted) !important; padding: 0 4px !important;
}
.nx-input-outline .nx-input,
.nx-input-outline input,
.nx-input-outline select {
  border: none !important; background: transparent !important;
  outline: none !important; box-shadow: none !important;
  font-size: 13px !important; font-family: inherit !important;
  color: var(--text) !important; width: 100% !important; padding: 4px 0 !important;
}
.nx-input-outline textarea {
  border: none !important; background: transparent !important;
  outline: none !important; resize: vertical !important;
  min-height: 80px !important; padding: 8px 0 !important;
  font-size: 13px !important; font-family: inherit !important;
  color: var(--text) !important; width: 100% !important;
}
.nx-input-outline .error {
  font-size: 11px !important; color: var(--danger) !important;
  min-height: 16px !important; padding: 2px 0 0 2px !important;
}

/* ═══════════════════════════════════════════════════════════
   REPORT PAGE
   ═══════════════════════════════════════════════════════════ */
.nx-content:has(.nx-report-layout) {
  overflow: hidden !important;
  padding-left: 0 !important; padding-right: 0 !important; padding-bottom: 0 !important;
}

/* ── Dark mode selects ────────────────────────────────────── */
[data-theme="dark"] .nx-ftb-select option,
[data-theme="dark"] .nx-filter-toolbar select option {
  background: var(--bg-card); color: var(--text);
}

/* ── User form permissions section ───────────────────────── */
.nx-user-perms-card {
  margin-top: 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-card);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.nx-user-perms-card .nx-filter-toolbar {
  border-radius: 0 !important;
}

/* ═══════════════════════════════════════════════════════════
   FORM LAYOUT PRECISION FIXES
   ═══════════════════════════════════════════════════════════ */

/*
  FIX 1 — Form grid: single-card forms now use grid-template-columns:1fr
  (done directly in each FormPage.js — no CSS needed here).
  Fallback: span full width if only one card exists.
*/
.nx-grid-layout > .nx-card:only-child,
.nx-grid-layout > .nx-card-fixed:only-child {
  grid-column: 1 / -1 !important;
  width: 100% !important;
}

/*
  FIX 2 — Remove hardcoded STATIC_HEIGHT (500px inline style).
  Inline style has highest specificity, but !important beats it.
  Cards now size to their content — no blank space below fields.
*/
.nx-card-fixed {
  height: auto !important;
  min-height: 0 !important;
}

/*
  FIX 3 — Form card: integrated appearance matching grid pages.
  Flush border, no floating shadow on list-adjacent forms.
*/
form .nx-card.nx-card-fixed,
form .nx-card-fixed {
  border-radius: var(--radius) !important;
  border: 1px solid var(--border) !important;
  box-shadow: none !important;
  background: var(--bg-card) !important;
}

/*
  FIX 4 — Card header: compact, uppercase label style.
*/
.nx-card-fixed .nx-card-header,
form .nx-card .nx-card-header {
  padding: 10px 16px !important;
  min-height: 40px !important;
  height: 40px !important;
  border-bottom: 1px solid var(--border) !important;
  display: flex !important;
  align-items: center !important;
  background: var(--bg-card) !important;
}
.nx-card-fixed .nx-card-header .nx-card-title,
form .nx-card .nx-card-header .nx-card-title {
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .06em !important;
  color: var(--text-muted) !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}
.nx-card-fixed .nx-card-header .nx-card-title svg,
form .nx-card .nx-card-header .nx-card-title svg {
  width: 14px !important; height: 14px !important; color: var(--primary) !important;
}

/*
  FIX 5 — Input fields: compact fieldset height matching grid density.
*/
.nx-input-outline fieldset {
  min-height: 44px !important;
  height: 44px !important;
  padding: 0 12px !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  display: flex !important;
  align-items: center !important;
  background: var(--bg-card) !important;
  transition: border-color .15s, box-shadow .15s !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

/* textarea: taller but same style */
.nx-input-outline fieldset:has(textarea) {
  height: auto !important;
  min-height: 100px !important;
  align-items: flex-start !important;
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}

.nx-input-outline:focus-within fieldset {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px var(--primary-50) !important;
}

.nx-input-outline legend {
  font-size: 11px !important;
  font-weight: 600 !important;
  color: var(--text-muted) !important;
  padding: 0 4px !important;
  line-height: 1 !important;
}

.nx-input-outline .nx-input,
.nx-input-outline input:not([type="checkbox"]):not([type="radio"]),
.nx-input-outline select {
  border: none !important;
  background: transparent !important;
  outline: none !important;
  box-shadow: none !important;
  font-size: 13px !important;
  font-family: inherit !important;
  color: var(--text) !important;
  width: 100% !important;
  padding: 0 !important;
  height: 100% !important;
}

.nx-input-outline textarea {
  border: none !important;
  background: transparent !important;
  outline: none !important;
  font-size: 13px !important;
  font-family: inherit !important;
  color: var(--text) !important;
  width: 100% !important;
  resize: vertical !important;
  line-height: 1.5 !important;
}

.nx-input-outline .error {
  font-size: 11px !important;
  color: var(--danger) !important;
  min-height: 16px !important;
  padding: 2px 0 0 2px !important;
}

/*
  FIX 6 — Grid form margin: consistent top spacing.
*/
form > .nx-grid-layout,
.nx-grid-layout {
  margin-top: 10px !important;
  gap: 16px !important;
}

.detail-form {
  padding:20px 30px !important;
}
/* ═══════════════════════════════════════════════════════════════════════════
   ENTERPRISE DATA GRID  —  .custom-compact-grid wrapper
   Augments / overrides tabulator-compact.css with enterprise-class layout,
   mobile card view, sticky columns, and responsive strategy.
   Zero nested conditionals in logic — lookup-map patterns in JS only.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════════════════
   GRID WRAPPER  — layout shell
   ════════════════════════════════════════════════════════════════════════════ */
.custom-compact-grid {
  display: flex;
  flex-direction: column;
  contain: layout style;
  padding:20px;
}

.custom-compact-grid .nx-card {
  border-radius: 15px !important;
  overflow: hidden;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow-sm);
}

/* ── Table container: responsive horizontal scroll shell ─────────────────── */
.custom-compact-grid .tabulator {
  border-radius: 0 !important;
  border: none !important;
  width: 100% !important;
}

/* ════════════════════════════════════════════════════════════════════════════
   HEADER  — distinct, scannable, frozen on scroll
   ════════════════════════════════════════════════════════════════════════════ */
.custom-compact-grid .tabulator-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 10 !important;
  backdrop-filter: blur(6px) !important;
}

.custom-compact-grid .tabulator-col {
  user-select: none;
}

.custom-compact-grid .tabulator-col-title {
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.055em !important;
  text-transform: uppercase !important;
}

/* Active sort column — highlight header */
.custom-compact-grid .tabulator-col.tabulator-col-sorter-element:active,
.custom-compact-grid .tabulator-col[aria-sort="ascending"],
.custom-compact-grid .tabulator-col[aria-sort="descending"] {
  background: color-mix(in srgb, var(--primary) 8%, var(--cg-bg-head)) !important;
  color: var(--primary) !important;
}

/* ════════════════════════════════════════════════════════════════════════════
   STATUS BADGE SYSTEM  — lookup-map driven, no conditionals
   All badge logic lives in JS (Tabulator.column.badge mapFn).
   CSS provides the base token ring only.
   ════════════════════════════════════════════════════════════════════════════ */
.nx-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.03em;
  white-space: nowrap;
  text-transform: uppercase;
}

/* ════════════════════════════════════════════════════════════════════════════
   ACTION BUTTONS — icon + text inside cells
   ════════════════════════════════════════════════════════════════════════════ */
.custom-compact-grid .tabulator-cell .nx-btn-group {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 3px;
}

.custom-compact-grid .tabulator-cell .nx-btn-xs {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0 !important;
  border-radius: 5px;
  transition: background 0.15s, color 0.15s;
}

.custom-compact-grid .tabulator-cell .nx-btn-xs svg {
  width: 14px;
  height: 14px;
  pointer-events: none;
}

/* ════════════════════════════════════════════════════════════════════════════
   PAGINATION BAR — enterprise styling
   ════════════════════════════════════════════════════════════════════════════ */
.custom-compact-grid .tabulator-footer {
  border-top: 1px solid var(--border) !important;
  background: var(--bg-card) !important;
  padding: 6px 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  font-size: 12px !important;
  color: var(--text-muted) !important;
}

.custom-compact-grid .tabulator-page-counter {
  font-size: 12px !important;
  color: var(--text-muted) !important;
  white-space: nowrap;
}

.custom-compact-grid .tabulator-paginator {
  display: flex !important;
  align-items: center !important;
  gap: 3px !important;
}

.custom-compact-grid .tabulator-page {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 28px !important;
  height: 28px !important;
  padding: 0 6px !important;
  border: 1px solid var(--border) !important;
  border-radius: 5px !important;
  background: transparent !important;
  color: var(--text-muted) !important;
  font-size: 12px !important;
  font-family: inherit !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  transition: background 0.15s, color 0.15s, border-color 0.15s !important;
}

.custom-compact-grid .tabulator-page:hover {
  background: var(--border-light) !important;
  color: var(--text) !important;
}

.custom-compact-grid .tabulator-page.active {
  background: var(--primary) !important;
  color: #fff !important;
  border-color: var(--primary) !important;
  font-weight: 700 !important;
}

.custom-compact-grid .tabulator-page[disabled] {
  opacity: 0.35 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

/* ════════════════════════════════════════════════════════════════════════════
   SIDEBAR INTERACTION — fluid main area
   ════════════════════════════════════════════════════════════════════════════ */
.nx-main {
  transition: margin-left var(--transition, 0.2s ease) !important;
}

/* Collapsed sidebar: grid takes full remaining width */
.nx-sidebar.collapsed ~ .nx-main,
.nx-sidebar.collapsed + .nx-main {
  margin-left: 64px !important;
}

/* Normal sidebar */
.nx-main {
  margin-left: var(--sidebar-w, 260px);
}

/* Grid columns don't shift — they relayout naturally via width:100% */
.custom-compact-grid .tabulator {
  will-change: width;
  transition: none; /* Tabulator redraws — no CSS transition needed */
}

/* ════════════════════════════════════════════════════════════════════════════
   MOBILE CARD LAYOUT  (≤ 768px)
   Dense rows → stacked cards with sticky primary columns revealed inline.
   ════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Mobile: enable horizontal scroll, table stays visible */
  .custom-compact-grid .tabulator-tableholder {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  /* Pagination stays visible and centered on mobile */
  .custom-compact-grid .tabulator-footer {
    display: flex !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
  }

  .custom-compact-grid .tabulator-page-counter {
    display: none !important;
  }
}

/* ════════════════════════════════════════════════════════════════════════════
   TABLET (641–1024px) — horizontal scroll with sticky primary columns
   ════════════════════════════════════════════════════════════════════════════ */
@media (min-width: 641px) and (max-width: 1024px) {
  .custom-compact-grid .tabulator-tableholder {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  /* First two columns (checkbox + NO.RM or equivalent) pinned */
  .custom-compact-grid .tabulator-col:nth-child(1),
  .custom-compact-grid .tabulator-col:nth-child(2),
  .custom-compact-grid .tabulator-cell:nth-child(1),
  .custom-compact-grid .tabulator-cell:nth-child(2) {
    position: sticky !important;
    left: 0 !important;
    z-index: 5 !important;
    background: var(--cg-bg, var(--bg-card)) !important;
  }

  .custom-compact-grid .tabulator-col:nth-child(2),
  .custom-compact-grid .tabulator-cell:nth-child(2) {
    left: 50px !important;
    border-right: 2px solid var(--border) !important;
  }
}

/* ════════════════════════════════════════════════════════════════════════════
   DARK MODE OVERRIDES
   ════════════════════════════════════════════════════════════════════════════ */
[data-theme="dark"] .custom-compact-grid .tabulator-page {
  border-color: var(--border) !important;
  color: var(--text-muted) !important;
}

[data-theme="dark"] .custom-compact-grid .tabulator-page:hover {
  background: rgba(255,255,255,.06) !important;
  color: var(--text) !important;
}

[data-theme="dark"] .nxg-mobile-card:active {
  background: rgba(255,255,255,.04);
}
/* ═══════════════════════════════════════════════════════════════════════
   FILTER TOOLBAR  ·  ftb-* namespace
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Toolbar bar ─────────────────────────────────────────────────────── */
.ftb-bar {
  display: flex;
  align-items: center;
  height: 44px;
  padding: 0 14px;
  background: var(--bg-card);
  border-bottom: 1px solid var(--border);
  box-sizing: border-box;
  gap: 0;
}

.ftb-bar-left {
  display: flex;
  align-items: center;
  gap: 3px;
  flex-shrink: 0;
}

.ftb-bar-center {
  flex: 1;
  display: flex;
  align-items: center;
  padding: 0 10px;
  min-width: 0;
}

.ftb-bar-right {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

/* ── Left buttons ─────────────────────────────────────────────────────── */
.ftb-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 10px;
  border: 1px solid transparent;
  border-radius: 6px;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-2);
  background: transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s, color .15s;
}
.ftb-btn:hover { background: var(--border-light); color: var(--text); }
.ftb-btn svg   { width: 14px; height: 14px; flex-shrink: 0; }

.ftb-filter-btn.ftb-active {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}
.ftb-filter-btn.ftb-active:hover { background: var(--primary-dark); }

.ftb-divider {
  width: 1px;
  height: 18px;
  background: var(--border);
  margin: 0 3px;
  flex-shrink: 0;
}

/* ── Search ──────────────────────────────────────────────────────────── */
.ftb-search {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 30px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: transparent;
  width: 100%;
  max-width: 300px;
  transition: border-color .18s, box-shadow .18s;
  box-sizing: border-box;
}
.ftb-search:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-50);
}
.ftb-search-ico     { display: flex; align-items: center; color: var(--text-light); flex-shrink: 0; }
.ftb-search-ico svg { width: 13px; height: 13px; }
.ftb-search-inp {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-family: inherit;
  font-size: 12.5px;
  color: var(--text);
  min-width: 0;
}
.ftb-search-inp::placeholder { color: var(--text-light); }

/* ── Right controls ───────────────────────────────────────────────────── */
.ftb-rows-label {
  font-size: 11.5px;
  color: var(--text-muted);
  font-weight: 500;
  white-space: nowrap;
  flex-shrink: 0;
}

.ftb-rows-sel {
  height: 28px;
  padding: 0 22px 0 7px;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: var(--bg-card);
  color: var(--text);
  font-family: inherit;
  font-size: 12px;
  cursor: pointer;
  outline: none;
  appearance: none;
  min-width: 52px;
  flex-shrink: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2710%27 height=%2710%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%2394a3b8%27 stroke-width=%272%27%3E%3Cpolyline points=%276 9 12 15 18 9%27/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 5px center;
}
.ftb-rows-sel:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px var(--primary-50);
}

.ftb-icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  flex-shrink: 0;
  transition: background .15s, color .15s, border-color .15s;
}
.ftb-icon-btn:hover   { background: var(--border-light); color: var(--text); }
.ftb-icon-btn svg     { width: 13px; height: 13px; pointer-events: none; }
.ftb-icon-btn.ftb-icon-active {
  background: var(--primary-50);
  color: var(--primary);
  border-color: var(--primary);
}

/* ════════════════════════════════════════════════════════════════════════
   FILTER PANEL
   ════════════════════════════════════════════════════════════════════════ */
.ftb-panel {
  display: none;
  flex-direction: column;
  background: var(--bg-card);
  border-bottom: 1px solid var(--border);
}

.ftb-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 16px;
  min-height: 38px;
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg-card) 93%, var(--primary) 7%);
}

.ftb-panel-title {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
}
.ftb-panel-title svg { color: var(--primary); flex-shrink: 0; }

.ftb-add-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border: 1px dashed var(--border);
  border-radius: 6px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
  background: transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color .15s, color .15s, background .15s;
}
.ftb-add-btn:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: var(--primary-50);
}

.ftb-rows { display: flex; flex-direction: column; }

.ftb-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  min-height: 46px;
  border-bottom: 1px solid var(--border-light);
  transition: background .1s, opacity .15s, transform .15s;
  animation: ftbRowIn .14s ease forwards;
}
@keyframes ftbRowIn {
  from { opacity: 0; transform: translateX(-5px); }
  to   { opacity: 1; transform: translateX(0); }
}
.ftb-row:last-child { border-bottom: none; }
.ftb-row:hover { background: color-mix(in srgb, var(--bg) 40%, transparent); }

.ftb-cell         { display: flex; }
.ftb-cell-field   { flex: 0 0 180px; }
.ftb-cell-op      { flex: 0 0 180px; }
.ftb-cell-val     { flex: 1 1 0; min-width: 0; }

.ftb-sel,
.ftb-inp {
  height: 34px;
  width: 100%;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-card);
  color: var(--text);
  font-family: inherit;
  font-size: 12.5px;
  outline: none;
  box-sizing: border-box;
  transition: border-color .18s, box-shadow .18s;
}
.ftb-sel {
  appearance: none;
  cursor: pointer;
  padding-right: 26px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2710%27 height=%2710%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%2394a3b8%27 stroke-width=%272%27%3E%3Cpolyline points=%276 9 12 15 18 9%27/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
}
.ftb-sel:focus,
.ftb-inp:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-50);
}
.ftb-inp::placeholder { color: var(--text-light); font-size: 12px; }

.ftb-del {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border: none;
  border-radius: 5px;
  background: transparent;
  color: var(--text-light);
  cursor: pointer;
  transition: background .15s, color .15s;
}
.ftb-del:hover { background: var(--danger-50); color: var(--danger); }

.ftb-panel-foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 8px 16px;
  border-top: 1px solid var(--border);
}

/* ════════════════════════════════════════════════════════════════════════
   FULLSCREEN OVERLAY — appended to <body> by JS
   ════════════════════════════════════════════════════════════════════════ */
.ftb-fs-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--bg-card);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: ftbFsIn .15s ease forwards;
}
@keyframes ftbFsIn {
  from { opacity: .7; transform: scale(.99); }
  to   { opacity: 1;  transform: scale(1); }
}

/* Card fills overlay */
.ftb-fs-overlay .nx-card {
  flex: 1 1 0 !important;
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  border-radius: 0 !important;
  overflow: hidden !important;
  margin: 0 !important;
  border: none !important;
  box-shadow: none !important;
}

.ftb-fs-overlay [id$="-filter-toolbar"] { flex-shrink: 0; }

.ftb-fs-overlay [id$="-table"] {
  flex: 1 1 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

.ftb-fs-overlay .tabulator {
  height: 100% !important;
  max-height: none !important;
  border-radius: 0 !important;
}

.ftb-fs-overlay .tabulator-tableholder {
  overflow-y: auto !important;
}

/* ESC hint removed — shown via button tooltip only */

/* ════════════════════════════════════════════════════════════════════════
   DARK MODE
   ════════════════════════════════════════════════════════════════════════ */
[data-theme="dark"] .ftb-bar,
[data-theme="dark"] .ftb-panel       { background: var(--bg-card); }
[data-theme="dark"] .ftb-panel-head  {
  background: color-mix(in srgb, var(--bg-card) 88%, var(--primary) 12%);
}
[data-theme="dark"] .ftb-sel,
[data-theme="dark"] .ftb-inp         { background: rgba(255,255,255,.04); border-color: var(--border); }
[data-theme="dark"] .ftb-sel option  { background: var(--bg-card); color: var(--text); }
[data-theme="dark"] .ftb-rows-sel    { background-color: var(--bg-card); }
[data-theme="dark"] .ftb-rows-sel option { background: var(--bg-card); }
[data-theme="dark"] .ftb-search      { background: rgba(255,255,255,.03); }
[data-theme="dark"] .ftb-icon-btn.ftb-icon-active {
  background: rgba(99,102,241,.2);
  color: var(--primary-light);
  border-color: var(--primary);
}
[data-theme="dark"] .ftb-fs-overlay  { background: var(--bg-card); }

/* ════════════════════════════════════════════════════════════════════════
   MOBILE ≤640px
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  .ftb-bar         { height: auto; flex-wrap: wrap; padding: 7px 10px; gap: 5px; }
  .ftb-bar-center  { order: 3; flex: 0 0 100%; padding: 0; }
  .ftb-bar-right   { order: 2; }
  .ftb-search      { max-width: 100%; }
  .ftb-btn span    { display: none; }
  .ftb-btn         { padding: 0 8px; width: 32px; justify-content: center; }
  .ftb-row         { flex-wrap: wrap; min-height: auto; padding: 8px 10px; gap: 6px; }
  .ftb-cell-field  { flex: 1 1 calc(50% - 22px); }
  .ftb-cell-op     { flex: 1 1 calc(50% - 22px); }
  .ftb-cell-val    { flex: 0 0 100%; }
  .ftb-del         { width: 34px; height: 34px; align-self: flex-end; }
  .ftb-sel,
  .ftb-inp         { height: 42px; font-size: 14px; }
  .ftb-panel-foot  { flex-direction: column-reverse; gap: 6px; }
  .ftb-panel-foot .nx-btn { width: 100%; justify-content: center; }
}

/* ── Fullscreen toolbar bar: keep right side clean ───────────────────── */
.ftb-fs-overlay .ftb-bar-right {
  gap: 6px;
}

.ftb-fs-overlay .ftb-rows-label {
  display: inline-flex;
}

/* Maximize button active state in fullscreen — softer highlight */
.ftb-fs-overlay .ftb-icon-btn.ftb-icon-active {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}

/* ── ESC label inside maximize button (fullscreen only) ──────────────── */
.ftb-icon-fs {
  width: auto !important;
  padding: 0 8px !important;
  gap: 4px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .03em;
}

.ftb-esc-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  color: inherit;
  white-space: nowrap;
}

/*# sourceMappingURL=main.64ac2bf6.css.map*/