/* ==========================================================================
   FieldsFlow design layer for bzanalytics
   Ports the FieldsFlow visual language onto the Duralux / Bootstrap 5.3 theme.
   Loaded LAST (after bootstrap.min.css, theme.min.css and the layout's inline
   <style>) so it wins the cascade. Reskin is driven from CSS variables:
   dark is the default theme; html[data-ff-theme="light"] switches to light.
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

/* ── Token layer ─────────────────────────────────────────────────────────── */
:root,
html[data-ff-theme="dark"] {
  --ff-base:        #1E293B;
  --ff-canvas:      #243044;
  --ff-surface:     #2B3A4F;
  --ff-surface2:    #31445E;
  --ff-text:        #F8FAFC;
  --ff-text2:       #CBD5E1;
  --ff-muted:       #94A3B8;

  --ff-primary:     #2680EB;
  --ff-primary-rgb: 38,128,235;
  --ff-primary-soft: rgba(38,128,235,.15);
  --ff-success:     #22C55E;
  --ff-warning:     #F59E0B;
  --ff-info:        #60A5FA;
  --ff-danger:      #EF4444;

  --ff-border:      rgba(255,255,255,.06);
  --ff-border2:     rgba(255,255,255,.10);
  --ff-border3:     rgba(255,255,255,.16);

  --ff-shadow-card: 0 2px 12px -2px rgba(0,0,0,.25);
  --ff-shadow-soft: 0 4px 20px -2px rgba(0,0,0,.38);
  --ff-shadow-glow: 0 0 15px rgba(38,128,235,.15);

  --ff-radius:      1rem;      /* cards / modals  (rounded-2xl) */
  --ff-radius-sm:   .75rem;    /* buttons / inputs (rounded-xl) */
  --ff-radius-xs:   .5rem;     /* small controls  (rounded-lg) */
}

html[data-ff-theme="light"] {
  --ff-base:        #F1F5F9;
  --ff-canvas:      #E8EFF7;
  --ff-surface:     #FFFFFF;
  --ff-surface2:    #F0F4FA;
  --ff-text:        #0F172A;
  --ff-text2:       #334155;
  --ff-muted:       #64748B;

  --ff-border:      rgba(15,23,42,.08);
  --ff-border2:     rgba(15,23,42,.12);
  --ff-border3:     rgba(15,23,42,.18);

  --ff-shadow-card: 0 2px 12px -2px rgba(0,0,0,.06);
  --ff-shadow-soft: 0 4px 20px -2px rgba(0,0,0,.10);
  --ff-shadow-glow: 0 0 15px rgba(38,128,235,.12);
}

/* ── Bootstrap variable remap (cascades to most components) ──────────────── */
:root {
  --bs-primary:            var(--ff-primary);
  --bs-primary-rgb:        38,128,235;
  --bs-link-color:         var(--ff-primary);
  --bs-link-color-rgb:     38,128,235;
  --bs-link-hover-color:   #93C5FD;
  --bs-body-bg:            var(--ff-base);
  --bs-body-bg-rgb:        30,41,59;
  --bs-body-color:         var(--ff-text2);
  --bs-emphasis-color:     var(--ff-text);
  --bs-heading-color:      var(--ff-text);
  --bs-secondary-color:    var(--ff-muted);
  --bs-tertiary-color:     var(--ff-muted);
  --bs-border-color:       var(--ff-border);
  --bs-border-color-translucent: var(--ff-border);
  --bs-card-bg:            var(--ff-surface);
  --bs-card-border-color:  var(--ff-border);
  --bs-card-cap-bg:        transparent;
  --bs-tertiary-bg:        var(--ff-surface2);
  --bs-secondary-bg:       var(--ff-surface2);
}

/* ── Base ───────────────────────────────────────────────────────────────── */
body {
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif !important;
  background-color: var(--ff-base) !important;
  color: var(--ff-text2) !important;
  -webkit-font-smoothing: antialiased;
}
h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6 { color: var(--ff-text) !important; letter-spacing:-.01em; }
a { color: var(--ff-primary); }
a:hover { color: #93C5FD; }
hr { border-color: var(--ff-border2); opacity:1; }

/* Text utilities that assume a light canvas — flip for the surface tiers */
.text-dark, .text-black, .text-body, .text-gray-900, .text-gray-800 { color: var(--ff-text) !important; }
.text-muted, .text-secondary, .text-gray-600, .text-gray-500 { color: var(--ff-muted) !important; }
.text-primary { color: var(--ff-primary) !important; }
.bg-white, .bg-body, .bg-body-tertiary { background-color: var(--ff-surface) !important; }
.bg-light, .bg-gray-100, .bg-gray-200 { background-color: var(--ff-surface2) !important; color: var(--ff-text2) !important; }
.border, .border-top, .border-bottom, .border-start, .border-end { border-color: var(--ff-border) !important; }

/* ── App shell: sidebar ─────────────────────────────────────────────────── */
.nxl-navigation, .nxl-navigation .navbar-wrapper, .nxl-menu {
  background: var(--ff-base) !important;
  border-right: 1px solid var(--ff-border) !important;
}
.nxl-navigation .m-header, .nxl-navigation .b-brand { border-color: var(--ff-border) !important; }
.nxl-item .nxl-link {
  color: var(--ff-text2) !important;
  border-radius: var(--ff-radius-xs);
  margin: 1px 12px;
  transition: background .18s ease, color .18s ease;
}
.nxl-item .nxl-link:hover { background: rgba(var(--ff-primary-rgb),.08) !important; color: var(--ff-text) !important; }
.nxl-item.active > .nxl-link,
.nxl-item .nxl-link.active {
  background: var(--ff-primary-soft) !important;
  color: var(--ff-primary) !important;
}
.nxl-item.active > .nxl-link .nxl-micon,
.nxl-item .nxl-link.active .nxl-micon { color: var(--ff-primary) !important; }
.nxl-caption label, .nxl-caption { color: var(--ff-muted) !important; text-transform:uppercase; letter-spacing:.06em; font-size:11px; font-weight:600; }
.nxl-submenu { background: transparent !important; }
.nxl-submenu .nxl-item .nxl-link { padding-left: 52px; }
.nxl-arrow, .nxl-micon { color: var(--ff-muted); }

/* ── App shell: header / topbar ─────────────────────────────────────────── */
.nxl-header {
  background: color-mix(in srgb, var(--ff-base) 88%, transparent) !important;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--ff-border) !important;
  color: var(--ff-text2) !important;
}
.nxl-header .nxl-h-item .nxl-head-link, .nxl-header a { color: var(--ff-text2); }
.nxl-header .nxl-h-item .nxl-head-link:hover { color: var(--ff-text) !important; background: rgba(var(--ff-primary-rgb),.08); border-radius: var(--ff-radius-xs); }
.nxl-header .border, .nxl-header [class*="border"] { border-color: var(--ff-border2) !important; }
.nxl-navigation-toggle .hamburger-inner,
.nxl-navigation-toggle .hamburger-inner::before,
.nxl-navigation-toggle .hamburger-inner::after { background-color: var(--ff-muted) !important; }

/* ── Content well ───────────────────────────────────────────────────────── */
.nxl-container, .nxl-content { background: var(--ff-base) !important; }
/* The full-bleed page-header bar hardcodes a white background in the theme. */
.page-header, .nxl-content > .page-header {
  background: var(--ff-base) !important;
  border-bottom: 1px solid var(--ff-border) !important;
  box-shadow: none !important;
}
.page-header .page-header-title, .page-header h1,h2,h3 { color: var(--ff-text) !important; }
.breadcrumb-item, .breadcrumb-item a { color: var(--ff-muted); }
.breadcrumb-item.active { color: var(--ff-text2); }

/* ── Cards / panels ─────────────────────────────────────────────────────── */
.card {
  background: var(--ff-surface) !important;
  border: 1px solid var(--ff-border) !important;
  border-radius: var(--ff-radius) !important;
  box-shadow: var(--ff-shadow-card) !important;
  color: var(--ff-text2);
}
.card .card-header, .card .card-footer {
  background: transparent !important;
  border-color: var(--ff-border) !important;
  color: var(--ff-text) !important;
}
.card .card-title, .card h5, .card h4 { color: var(--ff-text) !important; }
.card.stretch, .card-body { color: var(--ff-text2); }

/* ── Buttons ────────────────────────────────────────────────────────────── */
.btn-primary {
  --bs-btn-bg: var(--ff-primary); --bs-btn-border-color: var(--ff-primary);
  --bs-btn-hover-bg: #1c6fd0; --bs-btn-hover-border-color:#1c6fd0;
  --bs-btn-active-bg:#1c6fd0; --bs-btn-active-border-color:#1c6fd0;
  --bs-btn-disabled-bg: var(--ff-primary); --bs-btn-disabled-border-color: var(--ff-primary);
  --bs-btn-color:#ffffff; --bs-btn-hover-color:#ffffff; --bs-btn-active-color:#ffffff;
  box-shadow: var(--ff-shadow-glow);
  border-radius: var(--ff-radius-sm);
  font-weight:600;
}
/* Duralux hardcodes .btn-primary{background} directly, so override the property
   (not just the --bs-btn-* vars) to force emerald over the theme's blue. */
.btn-primary, .btn-primary:not(:disabled):not(.disabled) {
  background-color: var(--ff-primary) !important;
  border-color: var(--ff-primary) !important;
  color: #ffffff !important;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active,
.btn-primary:first-child:active, .btn-check:checked + .btn-primary {
  background-color: #1c6fd0 !important; border-color: #1c6fd0 !important; color: #ffffff !important;
}
.btn { border-radius: var(--ff-radius-sm); transition: all .18s ease; }
.btn-outline-primary { --bs-btn-color:var(--ff-primary); --bs-btn-border-color:var(--ff-primary); --bs-btn-hover-bg:var(--ff-primary); --bs-btn-hover-border-color:var(--ff-primary); --bs-btn-hover-color:#ffffff; }
.btn-secondary, .btn-light { --bs-btn-bg:var(--ff-surface2); --bs-btn-border-color:var(--ff-border2); --bs-btn-color:var(--ff-text2); --bs-btn-hover-bg:var(--ff-surface); --bs-btn-hover-color:var(--ff-text); --bs-btn-hover-border-color:var(--ff-border3); }

/* Soft/light "chip" buttons + table action buttons (override inline blue) */
.btn-light-brand, .btn-light-primary, td .btn-light-brand, td .btn-light-primary { color: var(--ff-primary) !important; border-color: var(--ff-primary) !important; background: var(--ff-primary-soft) !important; }
.btn-light-brand:hover, .btn-light-primary:hover, td .btn-light-brand:hover, td .btn-light-primary:hover { background: var(--ff-primary) !important; border-color: var(--ff-primary) !important; color:#ffffff !important; }
.btn-light-danger, td .btn-light-danger { color: var(--ff-danger) !important; border-color: var(--ff-danger) !important; background: rgba(239,68,68,.14) !important; }
.btn-light-danger:hover, td .btn-light-danger:hover { background: var(--ff-danger) !important; border-color: var(--ff-danger) !important; color:#fff !important; }
.btn-light-success, td .btn-light-success { color: var(--ff-success) !important; border-color: var(--ff-success) !important; background: rgba(34,197,94,.14) !important; }
.btn-light-success:hover, td .btn-light-success:hover { background: var(--ff-success) !important; border-color: var(--ff-success) !important; color:#fff !important; }
.btn-light-warning, td .btn-light-warning { color: var(--ff-warning) !important; border-color: var(--ff-warning) !important; background: rgba(245,158,11,.14) !important; }
.btn-light-warning:hover, td .btn-light-warning:hover { background: var(--ff-warning) !important; border-color: var(--ff-warning) !important; color:#3a2a05 !important; }

/* ── Badges / status chips ──────────────────────────────────────────────── */
.badge.bg-primary, .bg-primary { background-color: var(--ff-primary) !important; color:#ffffff !important; }
.badge.bg-success, .bg-success { background-color: var(--ff-success) !important; }
.badge.bg-danger,  .bg-danger  { background-color: var(--ff-danger) !important; }
.badge.bg-warning, .bg-warning { background-color: var(--ff-warning) !important; color:#3a2a05 !important; }
.badge.bg-info,    .bg-info    { background-color: var(--ff-info) !important; color:#04233f !important; }
.badge.bg-light-primary, .bg-soft-primary { background: var(--ff-primary-soft) !important; color: var(--ff-primary) !important; }

/* ── Tables ─────────────────────────────────────────────────────────────── */
.table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--ff-text2);
  --bs-table-border-color: var(--ff-border);
  --bs-table-striped-bg: rgba(255,255,255,.02);
  --bs-table-hover-bg: rgba(var(--ff-primary-rgb),.06);
  --bs-table-hover-color: var(--ff-text);
  color: var(--ff-text2);
}
.table > thead, .table th { color: var(--ff-muted) !important; text-transform:uppercase; font-size:11px; letter-spacing:.05em; font-weight:600; border-color: var(--ff-border) !important; }
.table > :not(caption) > * > * { border-color: var(--ff-border) !important; }
html[data-ff-theme="light"] .table { --bs-table-striped-bg: rgba(15,23,42,.02); }

/* ── Forms ──────────────────────────────────────────────────────────────── */
.form-control, .form-select, .input-group-text {
  background: var(--ff-surface2) !important;
  border: 1px solid var(--ff-border2) !important;
  color: var(--ff-text) !important;
  border-radius: var(--ff-radius-sm) !important;
}
.form-control::placeholder { color: var(--ff-muted) !important; }
/* Theme hardcodes .form-label{color:#283c50!important} — invisible on dark surfaces. */
.form-label, .col-form-label { color: var(--ff-text2) !important; }
.form-text, .form-check-label { color: var(--ff-muted) !important; }
.form-control:focus, .form-select:focus {
  background: var(--ff-surface2) !important;
  border-color: var(--ff-primary) !important;
  box-shadow: 0 0 0 3px rgba(var(--ff-primary-rgb),.25) !important;
  color: var(--ff-text) !important;
}
.form-select { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%2394A3B8' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"); }
.form-check-input:checked { background-color: var(--ff-primary); border-color: var(--ff-primary); }
.form-check-input:focus { border-color: var(--ff-primary); box-shadow: 0 0 0 3px rgba(var(--ff-primary-rgb),.25); }
.btn-field { border-radius: var(--ff-radius-sm) !important; }

/* ── Dropdowns / popovers / modals ──────────────────────────────────────── */
.dropdown-menu {
  background: var(--ff-surface) !important;
  border: 1px solid var(--ff-border2) !important;
  border-radius: var(--ff-radius-sm) !important;
  box-shadow: var(--ff-shadow-soft) !important;
  color: var(--ff-text2);
}
.dropdown-item { color: var(--ff-text2) !important; }
.dropdown-item:hover, .dropdown-item:focus { background: rgba(var(--ff-primary-rgb),.10) !important; color: var(--ff-text) !important; }
.dropdown-item.active, .dropdown-item:active { background: var(--ff-primary-soft) !important; color: var(--ff-primary) !important; }
.dropdown-divider { border-color: var(--ff-border2); }
.modal-content { background: var(--ff-surface) !important; border:1px solid var(--ff-border2) !important; border-radius: var(--ff-radius) !important; box-shadow: var(--ff-shadow-soft) !important; color: var(--ff-text2); }
.modal-header, .modal-footer { border-color: var(--ff-border) !important; }
.modal-title { color: var(--ff-text) !important; }
.popover, .tooltip-inner { background: var(--ff-surface) !important; border:1px solid var(--ff-border2); color: var(--ff-text2); }

/* ── Tabs / nav pills / list groups / alerts ────────────────────────────── */
.nav-tabs { border-color: var(--ff-border) !important; }
.nav-tabs .nav-link { color: var(--ff-muted) !important; border:0; }
.nav-tabs .nav-link.active { color: var(--ff-primary) !important; background: transparent !important; border-bottom:2px solid var(--ff-primary) !important; }
.nav-pills .nav-link.active { background: var(--ff-primary-soft) !important; color: var(--ff-primary) !important; }
.list-group-item { background: var(--ff-surface) !important; border-color: var(--ff-border) !important; color: var(--ff-text2); }
.alert { border-radius: var(--ff-radius-sm); border:1px solid var(--ff-border2); }
.alert-success { background: rgba(34,197,94,.12); color:#86efac; border-color: rgba(34,197,94,.30); }
.alert-danger  { background: rgba(239,68,68,.12); color:#fca5a5; border-color: rgba(239,68,68,.30); }
.alert-warning { background: rgba(245,158,11,.12); color:#fcd34d; border-color: rgba(245,158,11,.30); }
.alert-info, .alert-primary { background: var(--ff-primary-soft); color:#93C5FD; border-color: rgba(var(--ff-primary-rgb),.30); }
html[data-ff-theme="light"] .alert-success { color:#166534; }
html[data-ff-theme="light"] .alert-danger  { color:#991b1b; }
html[data-ff-theme="light"] .alert-warning { color:#92400e; }
html[data-ff-theme="light"] .alert-info, html[data-ff-theme="light"] .alert-primary { color:#1e40af; }

/* ── Progress / misc ────────────────────────────────────────────────────── */
.progress { background: var(--ff-surface2) !important; }
.progress-bar { background-color: var(--ff-primary) !important; }
.avatar-text, .avatar-image { border-radius: 50%; }
.text-avatar, .avatar-text { background: var(--ff-primary-soft) !important; color: var(--ff-primary) !important; }

/* ════════════════════════════════════════════════════════════════════════
   APP SHELL REDESIGN — topbar, sidebar, footer
   ════════════════════════════════════════════════════════════════════════ */

/* ── Sidebar: brand mark ────────────────────────────────────────────────── */
.nxl-navigation .m-header {
  height: 74px; display: flex; align-items: center; padding: 0 22px;
  border-bottom: 1px solid var(--ff-border) !important;
}
.b-brand { text-decoration: none; }
.b-brand .fs-4 { letter-spacing: -.02em; }
.ff-brand-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 10px; flex: 0 0 34px;
  background: linear-gradient(135deg, var(--ff-primary), #1567D6);
  color: #ffffff; box-shadow: var(--ff-shadow-glow);
}
.ff-brand-mark i { font-size: 18px; }

/* Logo image (full wordmark) — swap dark/light variant by theme */
.ff-logo { height: 30px; width: auto; display: block; }
.ff-logo-light { display: none; }
html[data-ff-theme="light"] .ff-logo-dark { display: none; }
html[data-ff-theme="light"] .ff-logo-light { display: block; }
/* Symbol (mark only) — hidden by default; shown when the sidebar is collapsed */
.ff-logo-sym { display: none; height: 34px; width: auto; }
html.minimenu .ff-logo { display: none !important; }
html.minimenu .ff-logo-sym-dark { display: block; }
html.minimenu[data-ff-theme="light"] .ff-logo-sym-dark { display: none; }
html.minimenu[data-ff-theme="light"] .ff-logo-sym-light { display: block; }
/* Center the mark within the collapsed rail */
html.minimenu .nxl-navigation .m-header { padding: 0 !important; justify-content: center !important; }
html.minimenu .nxl-navigation .b-brand { display: flex !important; justify-content: center; align-items: center; width: 100%; margin: 0 !important; }
html.minimenu .nxl-navigation .ff-logo-sym { margin: 0 auto; }
/* Auth / marketing centered logo */
.ff-logo-auth { height: 40px; width: auto; }

/* ── Sidebar: nav rhythm ────────────────────────────────────────────────── */
.nxl-navbar { padding: 10px 0 24px; }
.nxl-item .nxl-link {
  display: flex; align-items: center; gap: 2px;
  padding: 9px 14px; font-size: 13.5px; font-weight: 500;
}
.nxl-item .nxl-link .nxl-micon { display:inline-flex; min-width: 26px; }
.nxl-item .nxl-link .nxl-micon i { font-size: 17px; }
.nxl-caption { padding: 16px 22px 6px !important; margin: 0 !important; }
.nxl-caption:first-child { padding-top: 8px !important; }
.nxl-caption label { color: var(--ff-muted) !important; font-size: 10.5px !important; letter-spacing: .09em; font-weight: 700; }
/* Active item: soft emerald pill + left accent bar */
.nxl-item.active > .nxl-link,
.nxl-item .nxl-link.active {
  position: relative; font-weight: 600;
}
.nxl-item.active > .nxl-link::before,
.nxl-item .nxl-link.active::before {
  content: ""; position: absolute; left: 4px; top: 50%; transform: translateY(-50%);
  width: 3px; height: 18px; border-radius: 2px; background: var(--ff-primary);
  box-shadow: 0 0 8px rgba(var(--ff-primary-rgb), .6);
}
/* Nav scrollbar */
.navbar-content::-webkit-scrollbar { width: 5px; }
.navbar-content::-webkit-scrollbar-thumb { background: var(--ff-border3); border-radius: 3px; }

/* ── Topbar: layout & surface ───────────────────────────────────────────── */
.nxl-header .header-wrapper { padding: 0 26px; min-height: 74px; }
.nxl-header .header-left h5 {
  font-size: 16px; font-weight: 600; color: var(--ff-text) !important; letter-spacing: -.01em;
}
.nxl-header .header-right > div { gap: .5rem !important; }
/* Navigation collapse / hamburger icons */
.nxl-navigation-toggle a, .nxl-head-mobile-toggler { color: var(--ff-muted); }
.nxl-navigation-toggle a:hover { color: var(--ff-primary); }

/* Icon buttons (theme toggle, language) — circular, hover-glow */
.ff-icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 50%; padding: 0;
  border: 1px solid var(--ff-border2); background: var(--ff-surface2);
  color: var(--ff-text2); cursor: pointer; transition: all .18s ease;
}
.ff-icon-btn:hover { color: var(--ff-primary); border-color: var(--ff-primary); box-shadow: var(--ff-shadow-glow); }
#ff-theme-toggle svg { display: block; }

/* Vertical separator between tool cluster and user menu */
.ff-header-sep { width: 1px; height: 26px; background: var(--ff-border2); margin: 0 .35rem; align-self: center; }

/* Language item → compact rounded button */
.nxl-header .nxl-h-item > a {
  border-radius: var(--ff-radius-xs); color: var(--ff-text2); transition: all .18s ease;
}
.nxl-header .nxl-h-item > a:hover { color: var(--ff-text) !important; }
.nxl-header .nxl-h-item > a[title="Language"],
.nxl-header .nxl-h-item > a[title="언어"] { height: 38px; padding: 0 .6rem !important; border:1px solid var(--ff-border2); background: var(--ff-surface2); }
.nxl-header .nxl-h-item > a[title="Language"]:hover,
.nxl-header .nxl-h-item > a[title="언어"]:hover { border-color: var(--ff-primary); }

/* Switcher pills (tenant / workspace / source) */
.nxl-header .header-right a.border {
  height: 38px; padding: 0 .7rem !important;
  background: var(--ff-surface2) !important;
  border: 1px solid var(--ff-border2) !important;
  border-radius: var(--ff-radius-xs) !important;
}
.nxl-header .header-right a.border:hover {
  border-color: var(--ff-primary) !important;
  background: rgba(var(--ff-primary-rgb), .08) !important;
}
.nxl-header .header-right a.border .feather-chevron-down { color: var(--ff-muted); }

/* User trigger + avatar */
.ff-user-trigger { padding: 3px 8px 3px 3px; border-radius: 999px; transition: background .18s ease; }
.ff-user-trigger:hover { background: var(--ff-surface2); }
.ff-user-trigger .avatar-text { background: linear-gradient(135deg, var(--ff-primary), #1567D6) !important; color: #ffffff !important; font-weight: 700; box-shadow: var(--ff-shadow-glow); }
.ff-user-trigger .fw-semibold { color: var(--ff-text2); }

/* ── Footer redesign ────────────────────────────────────────────────────── */
.footer {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  flex-wrap: wrap; padding: 15px 30px !important;
  border-top: 1px solid var(--ff-border) !important;
  background: var(--ff-base) !important;
}
.footer .footer-copy { color: var(--ff-muted); font-size: 12px; }
.footer .footer-copy .fw-semibold { color: var(--ff-text2); }
.footer .footer-links { display: inline-flex; align-items: center; gap: 16px; font-size: 12px; }
.footer .footer-links a { color: var(--ff-muted); text-decoration: none; transition: color .18s ease; }
.footer .footer-links a:hover { color: var(--ff-primary); }
.footer .footer-status { display: inline-flex; align-items: center; gap: 7px; color: var(--ff-muted); }
.footer .footer-status .dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--ff-success);
  box-shadow: 0 0 8px var(--ff-success); animation: ff-pulse 2.4s ease-in-out infinite;
}
@keyframes ff-pulse { 0%,100% { opacity: 1; } 50% { opacity: .4; } }

/* ── Scrollbar ──────────────────────────────────────────────────────────── */
::-webkit-scrollbar { width:8px; height:8px; }
::-webkit-scrollbar-track { background: var(--ff-base); }
::-webkit-scrollbar-thumb { background:#64748B; border-radius:4px; }
::-webkit-scrollbar-thumb:hover { background: var(--ff-muted); }

/* ── Autofill ───────────────────────────────────────────────────────────── */
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 30px var(--ff-surface2) inset !important;
  -webkit-text-fill-color: var(--ff-text) !important;
}

/* ── ApexCharts legibility on dark surfaces ─────────────────────────────── */
.apexcharts-text, .apexcharts-legend-text, .apexcharts-xaxis-label, .apexcharts-yaxis-label { fill: var(--ff-muted) !important; color: var(--ff-muted) !important; }
.apexcharts-gridline { stroke: var(--ff-border2) !important; }
.apexcharts-tooltip { background: var(--ff-surface) !important; border:1px solid var(--ff-border2) !important; color: var(--ff-text) !important; box-shadow: var(--ff-shadow-soft) !important; }
.apexcharts-tooltip-title { background: var(--ff-surface2) !important; border-color: var(--ff-border2) !important; }

/* ══════════════════════════════════════════════════════════════════════════
   MODERN REVAMP — vibrant data-dense + inset rounded panel
   Appended last: overrides earlier rules to deliver the new app-shell look.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Tokens: deeper gutter, gradients, stronger depth ───────────────────── */
:root, html[data-ff-theme="dark"] {
  --ff-gutter:      #0E1A2E;
  --ff-grad-brand:  linear-gradient(135deg, #3A93FF 0%, #1567D6 100%);
  --ff-grad-soft:   linear-gradient(135deg, rgba(58,147,255,.18), rgba(21,103,214,.08));
  --ff-shadow-panel: 0 10px 44px -10px rgba(0,0,0,.55);
  --ff-shadow-card:  0 4px 18px -6px rgba(0,0,0,.40);
  --ff-shadow-glow:  0 8px 24px -6px rgba(38,128,235,.50);
  --ff-border:  rgba(255,255,255,.07);
  --ff-border2: rgba(255,255,255,.12);
}
html[data-ff-theme="light"] {
  --ff-gutter:      #E4EAF3;
  --ff-grad-soft:   linear-gradient(135deg, rgba(38,128,235,.12), rgba(21,103,214,.05));
  --ff-shadow-panel: 0 10px 44px -14px rgba(15,23,42,.20);
  --ff-shadow-card:  0 4px 18px -8px rgba(15,23,42,.12);
  --ff-shadow-glow:  0 8px 24px -8px rgba(38,128,235,.35);
}

/* ── Gutter frame: body + sidebar + header all sit on the deepest tone ──── */
body { background: var(--ff-gutter) !important; }
.nxl-navigation, .nxl-navigation .navbar-wrapper, .nxl-menu,
.nxl-navigation .m-header {
  background: var(--ff-gutter) !important; border-right: none !important;
}
.nxl-navigation .m-header { border-bottom-color: transparent !important; }
.nxl-header {
  background: var(--ff-gutter) !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  border-bottom: none !important; box-shadow: none !important;
}

/* ── Inset rounded content panel ────────────────────────────────────────── */
.nxl-container { background: transparent !important; }
.nxl-content {
  background: var(--ff-base) !important;
  border: 1px solid var(--ff-border) !important;
  border-radius: 22px !important;
  margin: 6px 16px 16px 16px !important;
  padding: 22px 24px 14px !important;
  box-shadow: var(--ff-shadow-panel) !important;
}
/* page-header becomes a band flush to the panel's rounded top */
.nxl-content > .page-header {
  margin: -22px -24px 20px !important;
  padding: 20px 24px !important;
  background: transparent !important;
  border-bottom: 1px solid var(--ff-border) !important;
  border-radius: 22px 22px 0 0 !important;
  box-shadow: none !important;
}
.footer {
  background: transparent !important; border-top: none !important;
  margin: 2px 16px 0 16px !important; padding: 12px 6px 16px !important;
}
@media (max-width: 767px) {
  .nxl-content { margin: 4px 10px 10px 10px !important; padding: 16px !important; border-radius: 16px !important; }
  .nxl-content > .page-header { margin: -16px -16px 16px !important; padding: 16px !important; border-radius: 16px 16px 0 0 !important; }
}

/* ── Cards: vibrant depth, tighter radius, hover lift ───────────────────── */
.card {
  border-radius: 16px !important;
  border: 1px solid var(--ff-border) !important;
  box-shadow: var(--ff-shadow-card) !important;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease !important;
}
.card:hover { border-color: var(--ff-border2) !important; box-shadow: 0 8px 26px -8px rgba(0,0,0,.45) !important; }
html[data-ff-theme="light"] .card:hover { box-shadow: 0 8px 26px -10px rgba(15,23,42,.16) !important; }
/* KPI value emphasis (big numbers in stat cards) */
.card .fs-1, .card .fs-2, .card h1, .card h2 { letter-spacing: -.02em !important; font-weight: 700 !important; }
/* Icon chips inside stat cards → gradient */
.card .avatar-text, .avatar-text.bg-soft-primary, .avatar-text.bg-primary,
[class*="bg-soft-primary"].avatar-text { background: var(--ff-grad-soft) !important; color: var(--ff-primary) !important; }

/* ── Buttons: gradient primary, crisp radius, lift ──────────────────────── */
.btn { border-radius: 11px !important; font-weight: 600 !important; letter-spacing: .01em; transition: all .18s ease !important; }
.btn-primary {
  background: var(--ff-grad-brand) !important; border: none !important; color: #fff !important;
  box-shadow: var(--ff-shadow-glow) !important;
}
.btn-primary:hover { filter: brightness(1.07); transform: translateY(-1px); }
.btn-outline-primary:hover { background: var(--ff-grad-brand) !important; border-color: transparent !important; color:#fff !important; }
.btn-secondary, .btn-light { border-radius: 11px !important; }

/* ── Active nav: gradient soft pill + brighter accent bar ────────────────── */
.nxl-item.active > .nxl-link, .nxl-item .nxl-link.active { background: var(--ff-grad-soft) !important; }
.nxl-item.active > .nxl-link::before, .nxl-item .nxl-link.active::before {
  background: var(--ff-grad-brand) !important; box-shadow: 0 0 10px rgba(38,128,235,.7) !important;
}

/* ── Switcher pills / icon buttons: subtle depth ────────────────────────── */
.nxl-header .header-right a.border, .ff-icon-btn, .nxl-header .nxl-h-item > a[title] {
  background: rgba(255,255,255,.04) !important; box-shadow: 0 1px 3px rgba(0,0,0,.2) !important;
}
html[data-ff-theme="light"] .nxl-header .header-right a.border,
html[data-ff-theme="light"] .ff-icon-btn { background: rgba(255,255,255,.75) !important; }

/* ── Tables: airy, modern, hover ────────────────────────────────────────── */
.table > thead th {
  font-size: 10.5px !important; letter-spacing: .07em !important; padding-top: .6rem !important; padding-bottom: .6rem !important;
}
.table > tbody > tr { transition: background .14s ease; }
.table > tbody > tr:hover > * { background: rgba(var(--ff-primary-rgb), .05) !important; }
.card > .card-body.p-0 > .table-responsive, .card > .table-responsive { border-radius: 0 0 16px 16px; overflow: hidden; }

/* ── Forms: modern radius + soft focus ──────────────────────────────────── */
.form-control, .form-select, .input-group-text { border-radius: 11px !important; }
.form-control, .form-select { min-height: 42px; }

/* ── Badges / chips: pill, gradient-soft primary ────────────────────────── */
.badge { border-radius: 999px !important; font-weight: 600; letter-spacing: .01em; padding: .38em .7em; }
.badge.bg-primary { background: var(--ff-grad-brand) !important; }
.badge.bg-light-primary, .bg-soft-primary { background: var(--ff-grad-soft) !important; color: var(--ff-primary) !important; }

/* ── Dropdowns / modals: rounder, deeper ────────────────────────────────── */
.dropdown-menu { border-radius: 14px !important; padding: 6px !important; }
.dropdown-item { border-radius: 9px !important; }
.modal-content { border-radius: 20px !important; }

/* ── Micro-interactions ─────────────────────────────────────────────────── */
.nav-tabs .nav-link, .nav-pills .nav-link { transition: all .18s ease; }
a, .btn, .card, .nxl-link, .dropdown-item, .badge { transition-timing-function: cubic-bezier(.4,0,.2,1); }