/*!
 * nuteaiw-theme.css - NUTEAIW membership admin, "Material Dashboard" look in NUTEAIW colours: logo red + royal blue
 * (gradients, coloured glows, depth; no black). Generated from the NUTEAIW portal redesign by resources/theme-build/build-theme.js.
 * Loaded LAST (after Materialize 2.4 + materialize-compat + Pixinvent style.min.css).
 * Pure presentation: markup hooks, ids, names and page scripts are untouched.
 *
 * RE-THEMING: every brand colour comes from the variables in section 1 ("Tokens" -> "Brand"). Change --primary*, --blue*,
 * --c-* ("r, g, b" triplets for glows), --hl-* (blue highlight) and the gradients --sb-bg / --topbar-bg / --auth-bg,
 * then re-run: node resources/theme-build/build-theme.js <nuteaiw public/app-assets> public/app-assets
 *
 *  1. Tokens            7. Inputs (underline + gradient focus bar)   12. Modals, toasts, sweetalert, alerts
 *  2. Base + ripple     8. Selects + menus                            13. Misc widgets
 *  3. Sidebar           9. Buttons (gradient + coloured glow)         14. Dashboard
 *  4. Top bar          10. Tables + DataTables                        15. Auth + error pages
 *  5. Page band/header 11. Chips                                      16. Responsive / reduced motion
 *  6. Cards + card headers
 *
 * Glow convention: every coloured element sets --c (an "r, g, b" triplet); shadows use rgba(var(--c), a).
 */

/* ===================== 1. Tokens ===================== */
:root {
  /* ---- Brand (NUTEAIW). Primary = the logo red; secondary / highlight = royal blue. No black anywhere. ---- */
  --primary: #e30613; --primary-light: #f0303b; --primary-dark: #c40510; --primary-darker: #8f1230; --primary-tint: #fde8ea;
  --c-primary: 227, 6, 19; --c-primary-light: 240, 48, 59; --c-primary-dark: 196, 5, 16;
  --blue: #1d4ed8; --blue-light: #3b82f6; --blue-deep: #1e3a8a; --c-blue: 29, 78, 216;
  --c-shadow: 143, 18, 48;           /* wine red: tinted shadows, never black */
  --hl-1: #bfdbfe; --hl-2: #3b82f6; --hl-3: #1d4ed8; --c-hl: 59, 130, 246; --on-hl: #fff; --hl-soft: #dbeafe;
  --g-hl: linear-gradient(135deg, #60a5fa 0%, #3b82f6 45%, #1d4ed8 100%);
  --sb-bg: linear-gradient(180deg, #d90f1e 0%, #c9102a 38%, #ad112e 72%, #8f1230 100%);
  --topbar-bg: linear-gradient(100deg, #e30613 0%, #d00b22 55%, #b80d2b 100%);
  --auth-bg: linear-gradient(135deg, #e30613 0%, #b80d2b 45%, #1d4ed8 100%);
  --panel-grad: linear-gradient(180deg, #fff4f5 0%, #fbf8fc 100%);
  --tint-1: #fdf8f9; --tint-2: #fdeef0;

  --accent: #1d4ed8; --accent-dark: #1e3a8a; --danger: #c40510;
  --navy-950: #1e3a8a; --navy-900: #1e3a8a; --navy-800: #334155; --navy-700: #1e293b;
  --g-primary: linear-gradient(135deg, #f0303b 0%, #e30613 50%, #c40510 100%);
  --g-navy: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 60%, #1e3a8a 100%);
  --g-red: linear-gradient(135deg, #f0303b 0%, #c40510 100%);
  --g-info: linear-gradient(135deg, #2563eb 0%, #3b82f6 100%);
  --g-success: linear-gradient(135deg, #0f8a5f 0%, #23a26f 100%);
  --g-warning: linear-gradient(135deg, #e07b00 0%, #f59e0b 100%);
  --g-teal: linear-gradient(135deg, #0f8a7e 0%, #1fae9b 100%);
  --g-purple: linear-gradient(135deg, #1e3a8a 0%, #1d4ed8 100%);
  --g-dark: linear-gradient(135deg, #475569 0%, #334155 100%);
  --g-grey: linear-gradient(135deg, #f8fafc 0%, #e8edf4 100%);

  --c-navy: 29, 78, 216; --c-red: 227, 6, 19; --c-info: 37, 99, 235; --c-success: 15, 138, 95;
  --c-warning: 224, 123, 0; --c-teal: 15, 138, 126; --c-dark: 51, 65, 85; --c-grey: 100, 116, 139; --c-purple: 30, 58, 138;

  --text: #1e293b; --text-muted: #64748b; --heading: #1e293b;
  --line: #f1e4e7; --line-2: #e9d6db; --page: #fbf7f8; --panel: #fff3f4;

  --sh-card: 0 2px 6px rgba(var(--c-shadow), .05), 0 10px 30px -12px rgba(var(--c-shadow), .16);
  --sh-card-hover: 0 4px 10px rgba(var(--c-shadow), .07), 0 22px 44px -16px rgba(var(--c-shadow), .26);
  --sh-xl: 0 30px 60px -20px rgba(var(--c-shadow), .42);

  --r: 20px; --r-sm: 12px; --r-xs: 8px;
  --ease: cubic-bezier(.25, .8, .25, 1);
  --ease-out: cubic-bezier(.05, .7, .1, 1);
  --t-btn: 200ms;

  --sb-w: 256px; --sb-mini: 80px; --sb-cur: var(--sb-w); --sb-gap: 0px;
  --top-h: 72px;
  --nt-font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --head-font: 'Nunito', 'Inter', system-ui, sans-serif;
}
body.nt-sb-mini { --sb-cur: var(--sb-mini); }

.nt-g-navy, .nt-g-red, .nt-g-info, .nt-g-success, .nt-g-warning, .nt-g-teal, .nt-g-dark, .nt-g-purple, .nt-g-primary { color: #fff !important; }
.nt-g-navy, .nt-g-primary { background: var(--g-primary) !important; --c: var(--c-primary); }
.nt-g-red { background: var(--g-red) !important; --c: var(--c-red); }
.nt-g-info { background: var(--g-info) !important; --c: var(--c-info); }
.nt-g-success { background: var(--g-success) !important; --c: var(--c-success); }
.nt-g-warning { background: var(--g-warning) !important; --c: var(--c-warning); }
.nt-g-teal { background: var(--g-teal) !important; --c: var(--c-teal); }
.nt-g-purple { background: var(--g-purple) !important; --c: var(--c-purple); }
.nt-g-dark { background: var(--g-dark) !important; --c: var(--c-dark); }
body.nt-app h1, body.nt-app h2, body.nt-app h3, body.nt-app h4, body.nt-app h5, body.nt-app h6,
body.nt-auth h1, body.nt-auth h2, .nt-kpi-value, .nt-chart-total, .nt-ring b { font-family: var(--head-font) !important; }

/* ===================== 2. Base + ripple ===================== */
html { background: var(--page); color: var(--text) !important; }
body.nt-app, body.nt-auth {
  font-family: var(--nt-font); font-weight: 400; color: var(--text); background: var(--page) !important;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
body.nt-app h1, body.nt-app h2, body.nt-app h3, body.nt-app h4, body.nt-app h5, body.nt-app h6,
body.nt-app .btn, body.nt-app button, body.nt-app input, body.nt-app select, body.nt-app textarea,
body.nt-app table, body.nt-app .dropdown-content, body.nt-app .toast, body.nt-app .swal-modal,
body.nt-auth h1, body.nt-auth h2, body.nt-auth .btn, body.nt-auth input, body.nt-auth button { font-family: var(--nt-font); }
body.nt-app h1, body.nt-app h2, body.nt-app h3, body.nt-app h4, body.nt-app h5, body.nt-app h6 { color: var(--heading); }
body.nt-app a { color: var(--accent); transition: color .2s var(--ease); }
body.nt-app a:hover { color: var(--accent-dark); }
body.nt-app ::selection { background: rgba(var(--c-primary), .18); }

.waves-ripple { display: none !important; }
.nt-ripple-host { position: fixed; pointer-events: none; overflow: hidden; z-index: 10050; contain: strict; }
.nt-ripple { position: absolute; border-radius: 50%; pointer-events: none; transform: scale(0); opacity: .32; animation: nt-ripple 600ms var(--ease) forwards; }
@keyframes nt-ripple { to { transform: scale(1); opacity: 0; } }

/* ===================== 3. Sidebar (floating navy panel) ===================== */
body.nt-app .nt-sidebar {
  position: fixed !important; top: var(--sb-gap) !important; left: var(--sb-gap) !important; bottom: var(--sb-gap);
  z-index: 999; width: var(--sb-cur) !important; height: calc(100% - 2 * var(--sb-gap)) !important;
  display: flex; flex-direction: column; border-radius: 0;
  background:
    radial-gradient(320px 260px at 0% 100%, rgba(var(--c-primary), .28), transparent 70%),
    var(--sb-bg) !important;
  box-shadow: 10px 0 40px -10px rgba(var(--c-shadow), .45) !important;
  transition: width .32s var(--ease), transform .32s var(--ease), box-shadow .32s var(--ease);
  overflow: hidden;
}
body.nt-app .nt-sidebar .nt-brand {
  position: relative !important; top: auto !important; left: auto !important;
  width: auto !important; height: var(--top-h) !important; flex: 0 0 var(--top-h);
  display: flex; align-items: center; justify-content: space-between; overflow: hidden;
  padding: 0 12px 0 16px; z-index: 1; box-shadow: none !important;
  background: radial-gradient(200px 120px at 85% 0%, rgba(255, 255, 255, .16), transparent 70%), linear-gradient(135deg, var(--primary-light) 0%, var(--primary) 55%, rgba(var(--c-primary), 0) 100%) !important;
}
.nt-brand-link { display: flex; align-items: center; gap: 12px; min-width: 0; text-decoration: none; }
.nt-brand-logo { flex: 0 0 44px; width: 44px; height: 44px; border-radius: 50%; background: #fff; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 0 0 3px #fff, 0 0 0 6px rgba(255, 255, 255, .35), 0 6px 18px rgba(var(--c-shadow), .55); }
.nt-brand-logo img { width: 38px; height: 38px; object-fit: contain; display: block; }
.nt-brand-text { display: flex; flex-direction: column; line-height: 1.15; white-space: nowrap; transition: opacity .2s var(--ease); }
.nt-brand-text strong { color: #fff; font-family: var(--head-font); font-size: 20px; font-weight: 900; letter-spacing: .08em; }
.nt-brand-text small { color: rgba(255, 255, 255, .88); font-size: 12px; font-weight: 400; margin-top: 3px; letter-spacing: .02em; }
.nt-icon-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%;
  background: transparent; color: var(--text); cursor: pointer; transition: background-color var(--t-btn) var(--ease), color var(--t-btn) var(--ease), box-shadow var(--t-btn) var(--ease);
}
.nt-icon-btn:hover { background: #fff; box-shadow: 0 4px 14px rgba(var(--c-navy), .2); }
.nt-icon-btn:focus-visible { outline: 2px solid rgba(var(--c-primary), .5); outline-offset: 1px; }
.nt-icon-btn :is(i, svg) { font-size: 24px; line-height: 1; transition: transform .3s var(--ease); }
.nt-sidebar .nt-drawer-close { display: none; color: rgba(255, 255, 255, .75); }
.nt-sidebar .nt-drawer-close:hover { background: rgba(255, 255, 255, .12); color: #fff; box-shadow: none; }

body.nt-app .nt-sidebar #slide-out.sidenav {
  margin-top: 6px !important; position: relative !important; top: auto !important; left: auto !important; right: auto !important;
  transform: none !important; width: 100% !important; height: auto !important;
  flex: 1 1 auto; min-height: 0; margin: 0 !important; padding: 10px 14px 24px !important;
  background: transparent !important; box-shadow: none !important; border: 0 !important; overflow-y: auto; z-index: auto;
}
body.nt-app .nt-sidebar #slide-out .collapsible, body.nt-app .nt-sidebar #slide-out.collapsible { border: 0 !important; box-shadow: none !important; margin: 0 !important; }
body.nt-app .nt-sidebar .sidenav li { line-height: normal; background: transparent !important; float: none; }
body.nt-app .nt-sidebar .sidenav li.bold, body.nt-app .nt-sidebar .sidenav li.bold.active, body.nt-app .nt-sidebar .sidenav li.open { background: transparent !important; box-shadow: none !important; }
body.nt-app .nt-sidebar .sidenav li > a {
  position: relative; display: flex !important; align-items: center; gap: 14px;
  height: 44px !important; line-height: 44px !important; margin: 3px 0 !important; padding: 0 14px !important;
  border-radius: 999px !important; color: rgba(255, 255, 255, .86) !important; font-size: 14px !important; font-weight: 400 !important;
  background: transparent !important; box-shadow: none !important; white-space: nowrap; overflow: hidden;
  transition: background-color var(--t-btn) var(--ease), color var(--t-btn) var(--ease), box-shadow var(--t-btn) var(--ease), transform var(--t-btn) var(--ease);
}
body.nt-app .nt-sidebar .sidenav li > a > .material-icons {
  float: none !important; flex: 0 0 22px; width: 22px !important; height: auto !important;
  margin: 0 !important; font-size: 21px !important; line-height: 1 !important; color: rgba(255, 255, 255, .86) !important;
}
body.nt-app .nt-sidebar .sidenav li > a .menu-title, body.nt-app .nt-sidebar .sidenav li > a > span { overflow: hidden; text-overflow: ellipsis; transition: opacity .2s var(--ease); }
body.nt-app .nt-sidebar .sidenav li > a:hover { background-color: rgba(255, 255, 255, .1) !important; color: #fff !important; }
body.nt-app .nt-sidebar .sidenav li > a:focus-visible { background-color: rgba(255, 255, 255, .16) !important; outline: none; }
body.nt-app .nt-sidebar .sidenav li > a.active,
body.nt-app .nt-sidebar .sidenav .collapsible-body li > a.active {
  background: var(--g-primary) !important; color: #fff !important; font-weight: 600 !important;
  box-shadow: 0 6px 22px 0 rgba(var(--c-primary-light), .6), 0 0 0 1px rgba(255, 255, 255, .12) inset !important;
}
body.nt-app .nt-sidebar .sidenav li > a.active:hover { box-shadow: 0 8px 28px 0 rgba(var(--c-primary), .6), 0 7px 12px -5px rgba(var(--c-primary), .7) !important; transform: translateY(-1px); }
body.nt-app .nt-sidebar .sidenav li > a.active > .material-icons { color: #fff !important; }
body.nt-app .nt-sidebar .sidenav li > a.collapsible-header { border: 0 !important; }
body.nt-app .nt-sidebar .sidenav li > a.collapsible-header::after {
  content: 'expand_more'; font-family: 'Material Icons'; font-size: 20px; line-height: 1; margin-left: auto;
  color: rgba(255, 255, 255, .6); transition: transform .3s var(--ease); position: static !important; float: none !important;
  -webkit-font-feature-settings: 'liga'; font-feature-settings: 'liga';
}
body.nt-app .nt-sidebar .sidenav li.active > a.collapsible-header { background: rgba(255, 255, 255, .1) !important; color: #fff !important; }
body.nt-app .nt-sidebar .sidenav li.active > a.collapsible-header::after { transform: rotate(180deg); color: #fff; }
body.nt-app .nt-sidebar .collapsible-body { background: transparent !important; border: 0 !important; padding: 0 !important; }
body.nt-app .nt-sidebar .collapsible-sub { margin: 4px 0 6px 0 !important; padding: 0 !important; border: 0 !important; }
body.nt-app .nt-sidebar .collapsible-body li > a { height: 38px !important; line-height: 38px !important; padding: 0 12px 0 44px !important; font-size: 13.5px !important; color: rgba(255, 255, 255, .75) !important; }
body.nt-app .nt-sidebar .collapsible-body li > a::before {
  content: ''; position: absolute; left: 22px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%;
  background: rgba(255, 255, 255, .45); transition: background-color .2s var(--ease), transform .2s var(--ease);
}
body.nt-app .nt-sidebar .collapsible-body li > a:hover::before { background: #fff; transform: scale(1.3); }
body.nt-app .nt-sidebar .collapsible-body li > a.active::before { background: #fff; box-shadow: 0 0 8px #fff; }
body.nt-app .nt-sidebar .collapsible-body li > a > .material-icons { display: none !important; }
body.nt-app .nt-sidebar .sidenav li.navigation-header { height: auto !important; line-height: 1 !important; margin: 0 !important; padding: 18px 14px 8px !important; }
body.nt-app .nt-sidebar .sidenav li.navigation-header:first-child { padding-top: 6px !important; }
body.nt-app .nt-sidebar .sidenav li.navigation-header > a.navigation-header-text {
  display: block !important; height: auto !important; line-height: 1.3 !important; margin: 0 !important; padding: 0 !important; background: none !important;
  font-size: 11px !important; font-weight: 700 !important; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(255, 255, 255, .55) !important; pointer-events: none; cursor: default;
}
body.nt-app .nt-sidebar .sidenav li.navigation-header > i.navigation-header-icon { display: none !important; }
.nt-sidebar .ps__rail-y { background: transparent !important; }
.nt-sidebar .ps__thumb-y { background: rgba(255, 255, 255, .3) !important; width: 5px !important; }
.nt-sidebar #slide-out::-webkit-scrollbar { width: 6px; }
.nt-sidebar #slide-out::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .22); border-radius: 6px; }
@media (min-width: 993px) {
  body.nt-sb-mini .nt-sidebar:not(:hover) .nt-brand { padding: 0; justify-content: center; }
  body.nt-sb-mini .nt-sidebar:not(:hover) .nt-brand-text,
  body.nt-sb-mini .nt-sidebar:not(:hover) .sidenav li > a .menu-title,
  body.nt-sb-mini .nt-sidebar:not(:hover) .sidenav li > a > span,
  body.nt-sb-mini .nt-sidebar:not(:hover) .sidenav li > a.collapsible-header::after { opacity: 0; width: 0; flex: 0 0 0; }
  body.nt-sb-mini .nt-sidebar:not(:hover) .collapsible-body { display: none !important; }
  body.nt-sb-mini .nt-sidebar:not(:hover) #slide-out.sidenav { padding: 10px 12px 24px !important; }
  body.nt-sb-mini .nt-sidebar:not(:hover) .sidenav li > a { justify-content: center; padding: 0 !important; gap: 0; }
  body.nt-sb-mini .nt-sidebar:not(:hover) .sidenav li.navigation-header { padding: 10px 8px !important; }
  body.nt-sb-mini .nt-sidebar:not(:hover) .sidenav li.navigation-header > a.navigation-header-text { font-size: 0 !important; height: 1px !important; background: rgba(255, 255, 255, .18) !important; }
  body.nt-sb-mini .nt-sidebar:hover { width: var(--sb-w) !important; box-shadow: 0 24px 48px rgba(30, 58, 138, .45) !important; }
}

/* ===================== 4. Top bar (full-width vivid gradient) ===================== */
body.nt-app .nt-topbar {
  position: fixed; top: 0; right: 0; left: 0; z-index: 997; height: var(--top-h);
  background: var(--topbar-bg);
  box-shadow: 0 8px 30px -12px rgba(var(--c-primary), .7);
  transition: left .32s var(--ease), box-shadow .3s var(--ease);
}
body.nt-app.nt-scrolled .nt-topbar { box-shadow: 0 10px 34px -8px rgba(var(--c-primary), .8); }
.nt-topbar-inner { height: 100%; display: flex; align-items: center; gap: 12px; padding: 0 22px 0 calc(var(--sb-cur) + 16px); transition: padding-left .32s var(--ease); }
body.nt-app .nt-topbar .nt-icon-btn { color: #fff; background: rgba(255, 255, 255, .14); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); }
body.nt-app .nt-topbar .nt-icon-btn:hover { background: rgba(255, 255, 255, .26); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .4), 0 6px 18px rgba(var(--c-shadow), .3); transform: translateY(-1px); }
.nt-topbar-brand { display: none; align-items: center; gap: 10px; color: #fff !important; text-decoration: none; }
.nt-topbar-logo { width: 38px; height: 38px; border-radius: 50%; background: #fff; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 0 0 3px rgba(255, 255, 255, .25); }
.nt-topbar-logo img { width: 32px; height: 32px; object-fit: contain; }
.nt-topbar-name { font-family: var(--head-font); font-weight: 900; font-size: 18px; letter-spacing: .06em; line-height: 1.05; color: #fff; }
.nt-topbar-name small { display: block; font-family: var(--nt-font); font-weight: 500; font-size: 11px; letter-spacing: .02em; opacity: .8; }
.nt-topbar-spacer { flex: 1 1 auto; }
.nt-topbar-right { position: relative; display: flex; align-items: center; gap: 12px; }
.nt-initials {
  display: inline-flex; align-items: center; justify-content: center; min-width: 46px; height: 34px; padding: 0 12px; border-radius: 999px;
  background: rgba(255, 255, 255, .2); color: #fff; font-weight: 700; font-size: 13px; letter-spacing: .04em; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25);
}
body.nt-app .nt-user-chip {
  position: relative; display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 12px 0 4px; border-radius: 999px;
  background: rgba(255, 255, 255, .16); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25);
  transition: box-shadow var(--t-btn) var(--ease), transform var(--t-btn) var(--ease), background-color var(--t-btn) var(--ease);
}
body.nt-app .nt-user-chip:hover { background: rgba(255, 255, 255, .26); color: #fff; transform: translateY(-2px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .4), 0 8px 22px rgba(var(--c-shadow), .35); }
body.nt-app .nt-user-chip:active { transform: translateY(0); }
.nt-user-chip .nt-avatar { width: 38px !important; line-height: 0 !important; vertical-align: middle; }
.nt-user-chip .nt-avatar img { width: 38px; height: 38px; object-fit: cover; border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px rgba(255, 255, 255, .7); }
.nt-user-chip .nt-avatar i { bottom: 0 !important; right: -1px !important; width: 11px !important; height: 11px !important; border: 2px solid #fff !important; background: #3b82f6; }
.nt-user-meta { display: flex; flex-direction: column; line-height: 1.2; }
.nt-user-name { font-size: 13.5px; font-weight: 700; color: #fff; max-width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nt-user-role { font-size: 11px; color: rgba(255, 255, 255, .82); font-weight: 600; text-transform: uppercase; letter-spacing: .08em; }
.nt-user-caret { font-size: 20px !important; color: rgba(255, 255, 255, .85); }
body.nt-app .nt-profile-dropdown { min-width: 230px !important; padding: 8px !important; border-radius: 16px !important; }
body.nt-app .nt-profile-dropdown li { min-height: 0; border-radius: 10px; }
body.nt-app .nt-profile-dropdown li > a { display: flex !important; align-items: center; gap: 12px; padding: 10px 12px !important; font-size: 14px !important; color: var(--text) !important; border-radius: 10px; }
body.nt-app .nt-profile-dropdown li > a > :is(i, svg) { margin: 0 !important; font-size: 20px !important; color: var(--accent); height: auto !important; line-height: 1 !important; width: auto !important; }
body.nt-app .nt-profile-dropdown li.nt-dd-head { pointer-events: none; margin-bottom: 6px; background: var(--g-primary) !important; box-shadow: 0 6px 18px rgba(var(--c-primary), .4); }
body.nt-app .nt-profile-dropdown li.nt-dd-head > a { flex-direction: column; align-items: flex-start; gap: 4px; color: #fff !important; }
.nt-dd-name { font-weight: 700; color: #fff; font-size: 14.5px; }
.nt-dd-role { font-size: 11px; color: var(--accent-dark); background: #fff; padding: 2px 9px; border-radius: 999px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }

/* ===================== 5. Page header banner + lavender content panel ===================== */
body.nt-app #main, body.nt-app #main.main-full {
  padding-left: calc(var(--sb-cur) + 14px) !important; padding-right: 14px; padding-top: calc(var(--top-h) + 4px);
  min-height: calc(100vh - 56px); transition: padding-left .32s var(--ease); animation: nt-fade .35s var(--ease) backwards;
}
body.nt-app #main .content-wrapper-before { display: none !important; }
body.nt-app #main > .row { margin-bottom: 0; }
body.nt-app #main .container { padding: 0 .5rem; }
body.nt-app #breadcrumbs-wrapper {
  position: relative; z-index: 2; overflow: hidden;
  margin: 18px .75rem 18px !important; padding: 22px 26px !important; min-height: 0;
  border-radius: 24px; color: #fff;
  background: linear-gradient(110deg, var(--primary-dark) 0%, var(--primary) 50%, var(--primary-light) 100%) !important;
  box-shadow: 0 14px 34px -14px rgba(var(--c-primary), .8) !important;
  animation: nt-enter .5s var(--ease-out) backwards;
}
body.nt-app #breadcrumbs-wrapper::before, body.nt-app #breadcrumbs-wrapper::after { content: ''; position: absolute; border-radius: 50%; pointer-events: none; background: rgba(255, 255, 255, .09); }
body.nt-app #breadcrumbs-wrapper::before { width: 320px; height: 320px; right: -60px; top: -170px; }
body.nt-app #breadcrumbs-wrapper::after { width: 220px; height: 220px; right: 240px; bottom: -150px; background: rgba(255, 255, 255, .06); }
body.nt-app #breadcrumbs-wrapper > .container { position: relative; z-index: 1; padding: 0 !important; width: 100%; }
body.nt-app #breadcrumbs-wrapper > .container > .row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px; margin: 0; }
body.nt-app #breadcrumbs-wrapper > .container > .row > .col { float: none !important; width: auto !important; margin-left: 0 !important; min-height: 0; flex: 1 1 260px; min-width: 0; padding: 0; }
body.nt-app #breadcrumbs-wrapper > .container > .row > .col + .col { flex: 0 1 auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px; }
body.nt-app #breadcrumbs-wrapper > .container > .row > .col:empty { display: none; }
body.nt-app #breadcrumbs-wrapper .breadcrumbs-title, body.nt-app #breadcrumbs-wrapper.breadcrumbs-dark .breadcrumbs-title {
  font-family: var(--head-font) !important; font-size: 26px !important; line-height: 1.2 !important; font-weight: 900 !important; color: #fff !important; margin: 0 !important; letter-spacing: .005em;
}
body.nt-app #breadcrumbs-wrapper .breadcrumbs { margin: 8px 0 0 !important; padding: 0; display: flex; flex-wrap: wrap; align-items: center; list-style: none; }
body.nt-app #breadcrumbs-wrapper .breadcrumbs > li { font-size: 13px; color: rgba(255, 255, 255, .82); display: inline-flex; align-items: center; }
body.nt-app #breadcrumbs-wrapper .breadcrumbs > li + li::before { content: 'chevron_right' !important; top: 0 !important; padding: 0 3px !important; color: rgba(255, 255, 255, .6) !important; font-size: 16px; }
body.nt-app #breadcrumbs-wrapper .breadcrumbs a { color: #fff !important; font-weight: 600; }
body.nt-app #breadcrumbs-wrapper .breadcrumbs .active { color: rgba(255, 255, 255, .8) !important; }
/* page actions: translucent glass pills */
body.nt-app #breadcrumbs-wrapper .btn, body.nt-app #breadcrumbs-wrapper .breadcrumbs-btn {
  --c: var(--c-shadow);
  position: static !important; top: auto !important; float: none !important; margin: 0 !important;
  display: inline-flex; align-items: center; gap: 8px; height: 42px; line-height: 42px; padding: 0 20px !important;
  border-radius: 999px !important; background: rgba(255, 255, 255, .16) !important; color: #fff !important;
  text-transform: none; letter-spacing: .01em; font-size: 13.5px; font-weight: 700;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3), 0 6px 18px -6px rgba(var(--c-shadow), .45) !important;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
body.nt-app #breadcrumbs-wrapper .btn:hover { background: rgba(255, 255, 255, .28) !important; transform: translateY(-2px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .5), 0 10px 26px -6px rgba(var(--c-shadow), .55) !important; }
body.nt-app #breadcrumbs-wrapper .btn:active { transform: translateY(0); }
body.nt-app #breadcrumbs-wrapper .breadcrumbs-btn .material-icons { display: none; }
body.nt-app #breadcrumbs-wrapper .breadcrumbs-btn[class*=nt-ic-]::before { font-family: 'Material Icons'; font-size: 19px; line-height: 1; font-weight: 400; margin-left: -4px; -webkit-font-feature-settings: 'liga'; font-feature-settings: 'liga'; }
body.nt-app #breadcrumbs-wrapper .breadcrumbs-btn.nt-ic-add::before { content: 'add_circle_outline'; }
body.nt-app #breadcrumbs-wrapper .breadcrumbs-btn.nt-ic-list::before { content: 'list'; }
body.nt-app #breadcrumbs-wrapper .breadcrumbs-btn.nt-ic-home::before { content: 'dashboard'; }
body.nt-app #breadcrumbs-wrapper .breadcrumbs-btn.nt-ic-print::before { content: 'print'; }
body.nt-app #breadcrumbs-wrapper .breadcrumbs-btn.nt-ic-back::before { content: 'arrow_back'; }
body.nt-app #breadcrumbs-wrapper .breadcrumbs-btn.nt-ic-upload::before { content: 'cloud_upload'; }
body.nt-app #breadcrumbs-wrapper .btn.nt-ic-add { background: #fff !important; color: var(--accent-dark) !important; box-shadow: 0 8px 24px -6px rgba(var(--c-shadow), .55) !important; }
body.nt-app #breadcrumbs-wrapper .btn.nt-ic-add:hover { background: #fff !important; box-shadow: 0 14px 32px -6px rgba(var(--c-shadow), .65) !important; }
/* the page body below the banner: soft lavender rounded panel */
body.nt-app .nt-dash-panel {
  float: none !important; width: auto !important; margin: 0 .75rem 8px !important; padding: 18px 10px 6px !important;
  border-radius: 28px; background: var(--panel-grad);
  box-shadow: inset 0 0 0 1px rgba(var(--c-primary), .08);
}
body.nt-app footer.page-footer {
  background: transparent !important; background-image: none !important; box-shadow: none !important;
  color: var(--text-muted) !important; font-size: 13px; padding: 0 !important; margin: 18px 0 0 !important;
  padding-left: var(--sb-cur) !important; transition: padding-left .32s var(--ease); text-align: center;
}
body.nt-app #main footer.page-footer { padding-left: 0 !important; }
body.nt-app footer.page-footer .footer-copyright { background: transparent !important; color: var(--text-muted) !important; padding: 14px 16px 18px !important; height: auto; line-height: 1.6; min-height: 0; border-top: 1px solid var(--line); }
body.nt-app footer.page-footer .footer-copyright .container { display: flex !important; flex-wrap: wrap; justify-content: center; gap: 4px 18px; width: 100%; max-width: none !important; }
body.nt-app footer.page-footer .footer-copyright span { display: inline !important; float: none !important; }
body.nt-app footer.page-footer a { color: var(--accent) !important; font-weight: 700; display: inline !important; }

/* ===================== 6. Cards + floating gradient card headers ===================== */
body.nt-app .card, body.nt-app .card-panel {
  position: relative; background-color: #fff; border: 0; border-radius: var(--r) !important; box-shadow: var(--sh-card) !important;
  transition: box-shadow .3s var(--ease), transform .3s var(--ease);
}
body.nt-app #main .card:not(.card-alert):hover { box-shadow: var(--sh-card-hover) !important; transform: translateY(-2px); }
body.nt-app .card .card-content { padding: 22px 24px; border-radius: var(--r); }
body.nt-app .card .card-title, body.nt-app .card h4.card-title { font-size: 18px !important; line-height: 1.4 !important; font-weight: 500 !important; color: var(--heading) !important; margin: 0 0 6px; }
body.nt-app .card .card-action { border-top: 1px solid var(--line) !important; background: transparent; border-radius: 0 0 var(--r) var(--r); }
body.nt-app hr, body.nt-app .divider { border: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(30, 41, 59, .14), transparent); }
body.nt-app .card.nt-has-head { overflow: visible !important; }
body.nt-app #main .card:hover .nt-card-head { transform: translateY(-2px); box-shadow: 0 16px 30px -10px rgba(var(--c, var(--c-primary)), .8), 0 2px 6px -2px rgba(var(--c, var(--c-primary)), .4) !important; }
body.nt-app .nt-card-head {
  position: relative; display: flex !important; align-items: center; gap: 12px; overflow: hidden;
  margin: -6px 0 22px !important; padding: 16px 22px !important; min-height: 0;
  border-radius: 16px; width: auto !important; float: none !important;
  box-shadow: 0 10px 24px -8px rgba(var(--c, var(--c-primary)), .7), 0 2px 6px -2px rgba(var(--c, var(--c-primary)), .4) !important;
  transition: box-shadow .3s var(--ease), transform .3s var(--ease);
}
body.nt-app .nt-card-head::before { content: ''; position: absolute; width: 180px; height: 180px; right: -40px; top: -110px; border-radius: 50%; background: rgba(255, 255, 255, .13); pointer-events: none; }
body.nt-app .nt-card-head::after { content: ''; position: absolute; width: 120px; height: 120px; right: 110px; bottom: -90px; border-radius: 50%; background: rgba(255, 255, 255, .08); pointer-events: none; }
body.nt-app .nt-card-head .row, body.nt-app .nt-card-head .col { margin: 0 !important; padding: 0 !important; width: auto !important; float: none !important; min-height: 0; }
body.nt-app .nt-card-head, body.nt-app .nt-card-head * { color: #fff !important; }
body.nt-app .nt-card-head .card-title, body.nt-app .nt-card-head h4, body.nt-app .nt-card-head h5, body.nt-app .nt-card-head h6,
body.nt-app .nt-card-head.card-title, body.nt-app h4.nt-card-head, body.nt-app h5.nt-card-head { font-family: var(--head-font) !important; font-size: 18px !important; font-weight: 800 !important; margin: 0 !important; line-height: 1.3 !important; position: relative; z-index: 1; }
body.nt-app .card .card-title, body.nt-app .card h4.card-title { font-family: var(--head-font) !important; font-weight: 800 !important; }
@keyframes nt-enter { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes nt-fade { from { opacity: 0; } to { opacity: 1; } }
body.nt-app .nt-enter { animation: nt-enter .6s var(--ease-out) backwards; animation-delay: calc(var(--nt-i, 0) * 70ms + 40ms); }

/* collapsible filters: a compact red pill toggle; the fields expand below it in one compact card */
body.nt-app #main .card.nt-filter-card { background: transparent !important; box-shadow: none !important; margin: 0 0 14px !important; transform: none !important; overflow: visible !important; }
body.nt-app #main .card.nt-filter-card:hover { box-shadow: none !important; transform: none !important; }
body.nt-app .nt-filter-card > .card-content { padding: 0 !important; }
body.nt-app .nt-card-head.nt-filter-head {
  display: inline-flex !important; width: auto !important; height: 40px; min-height: 0; gap: 8px; margin: 0 !important; padding: 0 8px 0 14px !important;
  border-radius: 999px; cursor: pointer; user-select: none; outline: none; overflow: visible;
  box-shadow: 0 4px 20px 0 rgba(var(--c, var(--c-primary)), .45), 0 2px 4px -1px rgba(var(--c, var(--c-primary)), .35) !important;
  transition: box-shadow var(--t-btn) var(--ease), transform var(--t-btn) var(--ease);
}
body.nt-app .nt-card-head.nt-filter-head::before, body.nt-app .nt-card-head.nt-filter-head::after { display: none; }
body.nt-app .nt-card-head.nt-filter-head:hover { transform: translateY(-2px); box-shadow: 0 8px 28px 0 rgba(var(--c, var(--c-primary)), .6) !important; }
body.nt-app .nt-card-head.nt-filter-head:active { transform: translateY(1px); box-shadow: 0 2px 8px 0 rgba(var(--c, var(--c-primary)), .4) !important; }
body.nt-app .nt-filter-head:focus-visible { box-shadow: 0 0 0 3px #fff, 0 0 0 6px rgba(var(--c-primary), .55) !important; }
body.nt-app .nt-filter-head .card-title, body.nt-app .nt-filter-head h4, body.nt-app .nt-filter-head.card-title { font-size: 14px !important; font-weight: 800 !important; letter-spacing: .02em; line-height: 40px !important; }
body.nt-app .nt-filter-head .row, body.nt-app .nt-filter-head .col { display: contents; }
body.nt-app .nt-filter-head .nt-filter-ic { font-size: 19px; }
body.nt-app .nt-filter-head .nt-filter-count { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: #fff; color: var(--accent-dark) !important; font-size: 11.5px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }
body.nt-app .nt-filter-head .nt-filter-chev { width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, .22); font-size: 20px; transition: transform .25s var(--ease); }
body.nt-app .nt-filter-open .nt-filter-head .nt-filter-chev { transform: rotate(180deg); }
body.nt-app .nt-filter-open .nt-card-head.nt-filter-head { box-shadow: inset 0 2px 6px rgba(30, 41, 59, .25), 0 2px 10px 0 rgba(var(--c, var(--c-primary)), .4) !important; }
body.nt-app .nt-filter-body { transition: height .25s var(--ease); }
body.nt-app .nt-filter-inner { margin-top: 10px; padding: 6px 18px 12px; background: #fff; border-radius: 16px; box-shadow: var(--sh-card); }
body.nt-app .nt-hidden-title { display: none !important; }
body.nt-app .nt-filter-inner .row { margin-bottom: 0; display: flex; flex-wrap: wrap; align-items: flex-end; }
body.nt-app .nt-filter-inner .row > .col { float: none; }
body.nt-app .nt-filter-inner .row::after { display: none; }
body.nt-app .nt-filter-inner .row > form { flex: 1 1 100%; display: flex; flex-wrap: wrap; align-items: flex-end; }
body.nt-app .nt-filter-inner form > .col { float: none; }
body.nt-app .nt-filter-inner form > div:not(.col):not(.row):not(.input-field) { display: contents; }
body.nt-app input[type=month], body.nt-app .nt-filter-inner input.form-control:not(.select-dropdown) {
  box-sizing: border-box; height: 42px; margin: 0; padding: 0 2px; border: 0; border-bottom: 1px solid #d2d6da; border-radius: 0; background: transparent; color: var(--heading); font: 14.5px var(--nt-font); outline: none;
}
body.nt-app input[type=month]:focus { border-bottom-color: var(--accent); box-shadow: 0 1px 0 0 var(--accent); }
body.nt-app .nt-filter-inner .input-field { margin-top: 1.15rem; margin-bottom: .5rem; }
/* the Search button sits at the end of the last row */
body.nt-app .nt-filter-inner .col:has(.btn):not(:has(input:not([type=hidden]):not([type=submit]), select, textarea)) { width: auto !important; margin-left: auto !important; flex: 0 0 auto; margin-top: .4rem; margin-bottom: .5rem; }
body.nt-app .nt-filter-inner .col:has(.btn):not(:has(input:not([type=hidden]):not([type=submit]), select, textarea)) .btn { float: none !important; }

/* ===================== 7. Inputs: underline + animated navy->red focus bar ===================== */
body.nt-app label, body.nt-app label.active { color: var(--text-muted) !important; font-size: .8rem; font-weight: 400; }
body.nt-app .input-field > input:not([type]):not(.browser-default),
body.nt-app .input-field > input[type=text]:not(.browser-default),
body.nt-app .input-field > input[type=password]:not(.browser-default),
body.nt-app .input-field > input[type=email]:not(.browser-default),
body.nt-app .input-field > input[type=url]:not(.browser-default),
body.nt-app .input-field > input[type=time]:not(.browser-default),
body.nt-app .input-field > input[type=date]:not(.browser-default),
body.nt-app .input-field > input[type=datetime-local]:not(.browser-default),
body.nt-app .input-field > input[type=tel]:not(.browser-default),
body.nt-app .input-field > input[type=number]:not(.browser-default),
body.nt-app .input-field > input[type=search]:not(.browser-default),
body.nt-app .input-field > textarea.materialize-textarea,
body.nt-app .select-wrapper input.select-dropdown {
  box-sizing: border-box !important; height: 42px !important; margin: 0 !important; padding: 0 2px !important;
  border: 0 !important; border-bottom: 1px solid #d2d6da !important; border-radius: 0 !important;
  background-color: transparent !important;
  background-image: linear-gradient(90deg, var(--primary), var(--hl-2)) !important;
  background-size: 0 2px !important; background-position: 50% 100% !important; background-repeat: no-repeat !important;
  box-shadow: none !important; color: var(--heading); font-size: 14.5px !important;
  transition: background-size .35s var(--ease), border-color .2s var(--ease);
}
body.nt-app .input-field > textarea.materialize-textarea { padding: 10px 2px !important; min-height: 42px; height: auto !important; line-height: 1.45; }
body.nt-app .input-field > input:not(.browser-default):hover, body.nt-app .select-wrapper input.select-dropdown:hover { border-bottom-color: #a9b1bb !important; }
body.nt-app .input-field > input:not(.browser-default):focus:not([readonly]),
body.nt-app .input-field > textarea.materialize-textarea:focus:not([readonly]),
body.nt-app .select-wrapper input.select-dropdown:focus,
body.nt-app .input-field > input[class*=datepicker]:focus, body.nt-app .input-field > input.datepicker:focus {
  background-size: 100% 2px !important; border-bottom-color: transparent !important; outline: none;
}
body.nt-app .input-field > input:disabled, body.nt-app .input-field > textarea:disabled, body.nt-app .select-wrapper.disabled input.select-dropdown { color: #9aa0ac !important; border-bottom-style: dotted !important; }
body.nt-app .input-field > input.invalid, body.nt-app .input-field > input.error:not(.valid),
body.nt-app .input-field > textarea.invalid, body.nt-app .input-field > textarea.error:not(.valid) { border-bottom-color: var(--danger) !important; background-image: linear-gradient(90deg, var(--danger), var(--danger)) !important; }
body.nt-app .input-field > input.valid:not(.select-dropdown) { border-bottom-color: #d2d6da !important; }
body.nt-app .input-field > input.valid:not(.select-dropdown):focus { border-bottom-color: transparent !important; }
/* floating labels: one "floated" position for text fields, datepickers and Materialize selects */
body.nt-app .input-field > label {
  left: 2px; top: 0; transform: translateY(12px); color: var(--text-muted) !important; font-size: 14.5px; font-weight: 400;
  max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; line-height: 20px;
  transition: transform .3s var(--ease), color .2s var(--ease);
}
body.nt-app .input-field.col > label { left: calc(.75rem + 2px); max-width: calc(100% - 1.5rem); }
body.nt-app .input-field > label:not(.label-icon).active,
body.nt-app .input-field > input[type=date]:not(.browser-default) + label,
body.nt-app .input-field > input[type=time]:not(.browser-default) + label,
body.nt-app .input-field > .select-wrapper + label,
body.nt-app .input-field > .select-wrapper ~ label,
body.nt-app .select-wrapper.input-field > label,
body.nt-app .select-wrapper > label {
  position: absolute; top: 0 !important; font-size: 12px !important; line-height: 16px;
  transform: translateY(-15px) !important; transform-origin: 0 0 !important; background: none; padding: 0; margin-left: 0; max-width: 100%;
}
body.nt-app .select-wrapper.input-field > label, body.nt-app .select-wrapper > label { left: 2px !important; z-index: 2; }
body.nt-app .input-field .select-wrapper.input-field { margin: 0 !important; }
body.nt-app .input-field > .select-wrapper + label, body.nt-app .input-field > .select-wrapper ~ label { z-index: 2; }
body.nt-app .input-field > input:focus:not([readonly]) + label, body.nt-app .input-field > textarea:focus:not([readonly]) + label { color: var(--accent) !important; }
body.nt-app .input-field > input.invalid + label, body.nt-app .input-field > input.error:not(.valid) + label { color: var(--danger) !important; }
body.nt-app .input-field > .prefix { top: 9px; font-size: 22px; width: 2.4rem; color: var(--text-muted); transition: color .2s var(--ease); }
body.nt-app .input-field > .prefix.active { color: var(--accent); }
body.nt-app .input-field > .prefix ~ input, body.nt-app .input-field > .prefix ~ textarea { margin-left: 2.6rem !important; width: calc(100% - 2.6rem) !important; }
body.nt-app .input-field > .prefix ~ label { margin-left: 2.6rem; }
body.nt-app .input-field { margin-top: 1.25rem; margin-bottom: .9rem; }
body.nt-app .col > label:not([class*=error]):not(.nt-float), body.nt-app .row > label:not([class*=error]) { display: inline-block; font-size: 12px !important; line-height: 16px; margin: 6px 0 0; color: var(--text-muted) !important; }
body.nt-app .input-field:has(> small:only-child:empty), body.nt-app .input-field:has(> div:only-child:empty), body.nt-app .input-field:empty { margin: 0 !important; min-height: 0; }
body.nt-app .input-field .helper-text, body.nt-app .input-field .supporting-text { font-size: 12px; color: var(--text-muted); }
body.nt-app label.error, body.nt-app span.error, body.nt-app div.error, body.nt-app small.error,
body.nt-app [class*=errorTxt], body.nt-app [class*=errorTxt] *, body.nt-app .invalid-feedback, body.nt-app .text-danger { color: var(--danger) !important; font-size: 12px !important; font-weight: 500; }
body.nt-app .input-field > label.error { position: static; transform: none !important; margin: 4px 0 0; display: block; white-space: normal; }
body.nt-app select.browser-default, body.nt-app select.form-control {
  -webkit-appearance: none; appearance: none; height: 42px; padding: 0 28px 0 2px;
  border: 0 !important; border-bottom: 1px solid #d2d6da !important; border-radius: 0 !important;
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='%237b809a'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E") no-repeat right 0 center !important;
  color: var(--heading); font-size: 14.5px; box-shadow: none; outline: none; cursor: pointer; transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
body.nt-app select.browser-default:hover { border-bottom-color: #a9b1bb !important; }
body.nt-app select.browser-default:focus { border-bottom-color: var(--accent) !important; box-shadow: 0 1px 0 0 var(--accent); }
body.nt-app select.browser-default[multiple] { height: auto; background-image: none !important; padding: 6px; }
body.nt-app [type=checkbox].filled-in:checked + span:not(.lever)::after { border-color: var(--accent) !important; background: var(--g-primary) !important; border-radius: 4px; box-shadow: 0 2px 8px rgba(var(--c-primary), .45); }
body.nt-app [type=checkbox].filled-in:not(:checked) + span:not(.lever)::after { border-radius: 4px; border-color: #b0b6c0; }
body.nt-app [type=checkbox]:checked + span:not(.lever)::before { border-right-color: var(--accent) !important; border-bottom-color: var(--accent) !important; }
body.nt-app [type=checkbox] + span:not(.lever), body.nt-app [type=radio] + span { color: var(--text); font-size: 14px; }
body.nt-app [type=radio]:checked + span::after, body.nt-app [type=radio].with-gap:checked + span::after { background-color: var(--accent) !important; border-color: var(--accent) !important; }
body.nt-app [type=radio].with-gap:checked + span::before { border-color: var(--accent) !important; }
body.nt-app .switch label input[type=checkbox]:checked + .lever { background-color: rgba(var(--c-primary), .35); }
body.nt-app .switch label input[type=checkbox]:checked + .lever::after { background-color: var(--accent); }
body.nt-app input[type=range] { accent-color: var(--accent); }
body.nt-app .file-field .file-path-wrapper input.file-path { border: 0 !important; border-bottom: 1px solid #d2d6da !important; border-radius: 0 !important; box-shadow: none !important; background: transparent; }
body.nt-app input[type=file]::file-selector-button {
  margin-right: 12px; padding: 0 16px; height: 34px; border: 0; border-radius: var(--r-sm);
  background: var(--g-navy); color: #fff; font: 700 12px var(--nt-font); letter-spacing: .06em; text-transform: uppercase; cursor: pointer;
  box-shadow: 0 4px 20px 0 rgba(var(--c-navy), .4); transition: box-shadow var(--t-btn) var(--ease), transform var(--t-btn) var(--ease);
}
body.nt-app input[type=file]::file-selector-button:hover { box-shadow: 0 8px 28px 0 rgba(var(--c-navy), .55); transform: translateY(-2px); }

/* ===================== 8. Selects + menus ===================== */
body.nt-app .select-wrapper { position: relative; }
body.nt-app .select-wrapper .caret { right: 0 !important; fill: var(--text-muted); z-index: 1; }
body.nt-app .select-wrapper input.select-dropdown { padding-right: 26px !important; cursor: pointer; text-overflow: ellipsis; }
body.nt-app .dropdown-content { background: #fff; border: 0; border-radius: var(--r-sm) !important; box-shadow: 0 8px 26px -4px rgba(30, 41, 59, .15), 0 8px 9px -5px rgba(30, 41, 59, .06) !important; padding: 6px 0; }
body.nt-app .dropdown-content li { min-height: 40px; transition: background-color .15s var(--ease); }
body.nt-app .dropdown-content li > a, body.nt-app .dropdown-content li > span { color: var(--text) !important; font-size: 14px !important; line-height: 20px !important; padding: 10px 16px !important; }
body.nt-app .dropdown-content li:hover, body.nt-app .dropdown-content li.active { background-color: #f0f2f5 !important; }
body.nt-app .dropdown-content li.selected { background-color: rgba(var(--c-primary), .08) !important; }
body.nt-app .dropdown-content li.selected > span { color: var(--accent-dark) !important; font-weight: 500; }
body.nt-app .dropdown-content li.disabled > span, body.nt-app .dropdown-content li.optgroup > span { color: #adb5bd !important; }

/* ===================== 9. Buttons: gradients + coloured glow (rest / hover lift / press) ===================== */
body.nt-app .btn, body.nt-app .btn-large, body.nt-app .btn-small, body.nt-app a.btn, body.nt-app button.btn {
  --c: var(--c-primary);
  position: relative; background: var(--g-primary); background-color: var(--accent);
  color: #fff !important; border: 0; border-radius: var(--r-sm) !important;
  font-weight: 700; font-size: 12px; letter-spacing: .07em; text-transform: uppercase;
  height: 40px; line-height: 40px; padding: 0 22px;
  box-shadow: 0 4px 20px 0 rgba(var(--c), .4), 0 2px 4px -1px rgba(var(--c), .3) !important;
  transition: box-shadow var(--t-btn) var(--ease), transform var(--t-btn) var(--ease), filter var(--t-btn) var(--ease);
}
body.nt-app .btn-large { height: 50px; line-height: 50px; font-size: 13px; padding: 0 28px; }
body.nt-app .btn-small, body.nt-app .btn.btn-sm, body.nt-app .btn-sm { height: 32px; line-height: 32px; font-size: 11px; padding: 0 14px; }
body.nt-app .btn:hover, body.nt-app .btn-large:hover, body.nt-app .btn-small:hover {
  transform: translateY(-2px); filter: brightness(1.05) saturate(1.05);
  box-shadow: 0 8px 28px 0 rgba(var(--c), .55), 0 4px 10px -2px rgba(var(--c), .45) !important;
}
body.nt-app .btn:active, body.nt-app .btn-large:active, body.nt-app .btn-small:active {
  transform: translateY(1px); filter: none; box-shadow: 0 2px 8px 0 rgba(var(--c), .35) !important; transition-duration: 80ms;
}
body.nt-app .btn:focus-visible { outline: 2px solid rgba(var(--c), .55); outline-offset: 2px; }
body.nt-app .btn :is(i, svg), body.nt-app .btn-large :is(i, svg), body.nt-app .btn-small :is(i, svg) { font-size: 18px; line-height: inherit; }
body.nt-app .btn :is(i, svg).left { margin-right: 8px; }
body.nt-app .btn :is(i, svg).right { margin-left: 8px; }
body.nt-app .btn.disabled, body.nt-app .btn:disabled, body.nt-app .btn[disabled] { background: #e0e3e8 !important; color: #9aa0ac !important; box-shadow: none !important; transform: none !important; filter: none; }
body.nt-app .btn.gradient-45deg-indigo-purple, body.nt-app .btn.gradient-45deg-deep-purple-blue, body.nt-app .btn.gradient-45deg-indigo-blue,
body.nt-app .btn.gradient-45deg-purple-deep-purple, body.nt-app .btn.gradient-45deg-indigo-light-blue, body.nt-app .btn.btn-primary { background: var(--g-primary) !important; --c: var(--c-primary); }
body.nt-app .btn.blue, body.nt-app .btn.indigo, body.nt-app .btn.light-blue, body.nt-app .btn.purple, body.nt-app .btn.deep-purple { background: var(--g-navy) !important; --c: var(--c-navy); }
body.nt-app .btn.red, body.nt-app .btn.btn-danger, body.nt-app .btn.gradient-45deg-red-pink, body.nt-app .btn.pink, body.nt-app .btn.delete-user { background: var(--g-red) !important; --c: var(--c-red); }
body.nt-app .btn.gradient-45deg-purple-deep-orange { background: var(--g-primary) !important; --c: var(--c-primary); }
body.nt-app .btn.green, body.nt-app .btn.btn-green, body.nt-app .btn.btn-success, body.nt-app .btn.gradient-45deg-green-teal, body.nt-app .btn.light-green { background: var(--g-success) !important; --c: var(--c-success); }
body.nt-app .btn.teal { background: var(--g-teal) !important; --c: var(--c-teal); }
body.nt-app .btn.cyan, body.nt-app .btn.btn-info, body.nt-app .btn.gradient-45deg-light-blue-cyan { background: var(--g-navy) !important; --c: var(--c-navy); }
body.nt-app .btn.orange, body.nt-app .btn.amber, body.nt-app .btn.deep-orange, body.nt-app .btn.btn-warning,
body.nt-app .btn.gradient-45deg-amber-amber, body.nt-app .btn.gradient-45deg-orange-deep-orange { background: var(--g-warning) !important; --c: var(--c-warning); }
body.nt-app .btn.amber.darken-4, body.nt-app .btn.orange.darken-4 { background: linear-gradient(195deg, #fb8c00, #e65100) !important; --c: 230, 81, 0; }
body.nt-app .btn.grey, body.nt-app .btn.blue-grey, body.nt-app .btn.btn-light, body.nt-app .btn.white { background: var(--g-grey) !important; color: var(--heading) !important; --c: var(--c-grey); }
body.nt-app .btn.grey.darken-1, body.nt-app .btn.grey.darken-2, body.nt-app .btn.grey.darken-3, body.nt-app .btn.black { background: var(--g-dark) !important; color: #fff !important; --c: var(--c-dark); }
body.nt-app .btn-flat {
  color: var(--text) !important; background: transparent !important; box-shadow: none !important; border-radius: var(--r-sm) !important;
  text-transform: uppercase; font-weight: 700; font-size: 12px; letter-spacing: .07em; height: 38px; line-height: 38px;
  transition: background-color var(--t-btn) var(--ease), box-shadow var(--t-btn) var(--ease), transform var(--t-btn) var(--ease);
}
body.nt-app .btn-flat:hover { background: #fff !important; box-shadow: 0 4px 16px rgba(var(--c-navy), .18) !important; transform: translateY(-2px); }
body.nt-app .btn-flat:active { transform: translateY(0); box-shadow: 0 1px 4px rgba(var(--c-navy), .15) !important; }
body.nt-app .btn-floating {
  --c: var(--c-primary); background: var(--g-primary); box-shadow: 0 4px 20px 0 rgba(var(--c), .45) !important;
  transition: box-shadow var(--t-btn) var(--ease), transform var(--t-btn) var(--ease);
}
body.nt-app .btn-floating:hover { transform: translateY(-2px); box-shadow: 0 8px 28px 0 rgba(var(--c), .6) !important; }
body.nt-app .btn-floating:active { transform: translateY(1px); box-shadow: 0 2px 8px 0 rgba(var(--c), .4) !important; }
body.nt-app .btn-floating.green { background: var(--g-success) !important; --c: var(--c-success); }
body.nt-app .btn-floating.cyan, body.nt-app .btn-floating.blue { background: var(--g-navy) !important; --c: var(--c-navy); }
body.nt-app .btn-floating.orange, body.nt-app .btn-floating.amber { background: var(--g-warning) !important; --c: var(--c-warning); }
body.nt-app .border-round { border-radius: var(--r-sm) !important; }
body.nt-app table td .btn, body.nt-app table td .btn-small, body.nt-app table td .btn-sm { height: 30px; line-height: 30px; padding: 0 12px !important; font-size: 11px; margin: 2px 4px 2px 0 !important; box-shadow: 0 3px 12px 0 rgba(var(--c), .35) !important; }
body.nt-app table td .btn:hover { box-shadow: 0 6px 18px 0 rgba(var(--c), .5) !important; }
body.nt-app table td .btn :is(i, svg) { font-size: 16px; }
body.nt-app table td a > .material-icons, body.nt-app table td > .material-icons {
  font-size: 19px; width: 32px; height: 32px; line-height: 32px; text-align: center; border-radius: var(--r-sm); vertical-align: middle;
  transition: background-color var(--t-btn) var(--ease), transform var(--t-btn) var(--ease), box-shadow var(--t-btn) var(--ease);
}
body.nt-app table td a:hover > .material-icons { background: #fff; transform: translateY(-2px); box-shadow: 0 4px 14px rgba(var(--c-navy), .22); }

/* ===================== 10. Tables + DataTables ===================== */
body.nt-app table { font-size: 13.5px; color: var(--text); border-collapse: separate; border-spacing: 0; }
body.nt-app table thead th, body.nt-app table.dataTable thead th, body.nt-app table.dataTable thead td, body.nt-app table.dataTable tfoot th {
  background: transparent !important; color: var(--navy-800) !important; font-size: 11px !important; font-weight: 700 !important;
  text-transform: uppercase; letter-spacing: .07em; border-bottom: 1px solid var(--line-2) !important; border-top: 0 !important; white-space: nowrap; vertical-align: middle;
}
body.nt-app table tbody td, body.nt-app .dataTables_wrapper table.dataTable > tbody > tr > td { border-bottom: 1px solid var(--line) !important; vertical-align: middle; }
body.nt-app table:not(.dataTable) td, body.nt-app table:not(.dataTable) th { padding: 12px 14px; }
body.nt-app .dataTables_wrapper table.dataTable > thead > tr > th, body.nt-app .dataTables_wrapper table.dataTable > thead > tr > td { padding: 13px 28px 13px 14px !important; text-align: left; }
body.nt-app .dataTables_wrapper table.dataTable > thead > tr > th.sorting_disabled { padding-right: 14px !important; }
body.nt-app .dataTables_wrapper table.dataTable > tbody > tr > td { padding: 11px 14px; line-height: 1.45; }
body.nt-app .dataTables_wrapper table.dataTable.dtr-inline.collapsed > thead > tr > th:first-child { padding-left: 26px !important; }
body.nt-app table.dataTable tbody tr { background-color: #fff; }
body.nt-app table.striped > tbody > tr:nth-child(odd), body.nt-app table.dataTable tbody tr.odd, body.nt-app table.dataTable.display tbody tr.odd { background-color: var(--tint-1); }
body.nt-app table tbody tr { transition: background-color .2s var(--ease), box-shadow .2s var(--ease); }
body.nt-app table.highlight > tbody > tr:hover, body.nt-app table.dataTable tbody tr:hover,
body.nt-app table.dataTable.display tbody tr:hover, body.nt-app table.dataTable.hover tbody tr:hover { background-color: var(--tint-2) !important; box-shadow: inset 3px 0 0 var(--accent); }
body.nt-app table.dataTable.display tbody tr > .sorting_1, body.nt-app table.dataTable.order-column tbody tr > .sorting_1 { background-color: transparent !important; }
body.nt-app table.dataTable.no-footer { border-bottom: 0 !important; }
body.nt-app table.dataTable { margin-top: 12px !important; margin-bottom: 6px !important; }
body.nt-app table.dataTable tbody tr.selected { background-color: rgba(var(--c-primary), .08) !important; }
body.nt-app .dataTables_wrapper { font-size: 13px; color: var(--text-muted); }
body.nt-app .dataTables_wrapper .dataTables_length, body.nt-app .dataTables_wrapper .dataTables_filter { margin-bottom: 6px; }
body.nt-app .dataTables_wrapper .dataTables_length label, body.nt-app .dataTables_wrapper .dataTables_filter label { color: var(--text-muted) !important; font-size: 13.5px !important; display: inline-flex; align-items: center; gap: 8px; }
body.nt-app .dataTables_wrapper .dataTables_length select {
  -webkit-appearance: none; appearance: none; height: 34px; padding: 0 28px 0 10px; margin: 0; display: inline-block; width: auto; font-size: 13.5px;
  border: 1px solid #d2d6da !important; border-radius: var(--r-sm) !important; color: var(--heading);
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='%237b809a'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E") no-repeat right 4px center !important;
}
body.nt-app .dataTables_wrapper .dataTables_filter input, body.nt-app .dataTables_wrapper .dataTables_filter input[type=search]:not(.browser-default) {
  box-sizing: border-box !important; height: 40px !important; width: 240px !important; max-width: 100%; margin: 0 !important; padding: 0 14px 0 40px !important;
  border: 1px solid #d2d6da !important; border-radius: var(--r-sm) !important;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='%237b809a'%3E%3Cpath d='M15.5 14h-.79l-.28-.27A6.47 6.47 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z'/%3E%3C/svg%3E") no-repeat 12px center !important;
  box-shadow: none !important; color: var(--heading); font-size: 14px !important; transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
body.nt-app .dataTables_wrapper .dataTables_filter input:focus { border-color: var(--accent) !important; box-shadow: 0 0 0 3px rgba(var(--c-primary), .15), 0 4px 16px rgba(var(--c-primary), .15) !important; outline: none; }
body.nt-app .dataTables_wrapper .dataTables_info { color: var(--text-muted) !important; font-size: 13px; padding-top: 16px !important; }
body.nt-app .dataTables_wrapper .dataTables_paginate { padding-top: 10px !important; }
body.nt-app .dataTables_wrapper .dataTables_paginate .paginate_button {
  position: relative; box-sizing: border-box; min-width: 36px; height: 36px; line-height: 34px !important; padding: 0 10px !important; margin: 0 3px !important;
  border: 1px solid #dee2e6 !important; border-radius: 999px !important; background: #fff !important; background-image: none !important; box-shadow: none !important;
  color: var(--text-muted) !important; font-size: 13px; text-align: center;
  transition: background-color var(--t-btn) var(--ease), box-shadow var(--t-btn) var(--ease), color var(--t-btn) var(--ease), transform var(--t-btn) var(--ease);
}
body.nt-app .dataTables_wrapper .dataTables_paginate .paginate_button:hover { color: var(--heading) !important; border-color: transparent !important; transform: translateY(-2px); box-shadow: 0 4px 14px rgba(var(--c-navy), .2) !important; }
body.nt-app .dataTables_wrapper .dataTables_paginate .paginate_button:active { transform: translateY(0); box-shadow: 0 1px 4px rgba(var(--c-navy), .2) !important; }
body.nt-app .dataTables_wrapper .dataTables_paginate .paginate_button.current, body.nt-app .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  background: var(--g-primary) !important; color: #fff !important; border-color: transparent !important; font-weight: 700;
  box-shadow: 0 4px 20px 0 rgba(var(--c-primary), .45), 0 2px 4px -1px rgba(var(--c-primary), .35) !important;
}
body.nt-app .dataTables_wrapper .dataTables_paginate .paginate_button.previous, body.nt-app .dataTables_wrapper .dataTables_paginate .paginate_button.next { padding: 0 14px !important; }
body.nt-app .dataTables_wrapper .dataTables_paginate .paginate_button.disabled, body.nt-app .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover { color: #c3c8d0 !important; background: #fff !important; cursor: default; transform: none; box-shadow: none !important; border-color: #eceef1 !important; }
body.nt-app .dataTables_wrapper .dataTables_paginate .ellipsis { color: var(--text-muted); padding: 0 6px; }
@keyframes nt-lp1 { 0% { left: -35%; right: 100%; } 60% { left: 100%; right: -90%; } 100% { left: 100%; right: -90%; } }
@keyframes nt-lp2 { 0% { left: -200%; right: 100%; } 60% { left: 107%; right: -8%; } 100% { left: 107%; right: -8%; } }
body.nt-app .dataTables_wrapper .dataTables_processing {
  position: absolute !important; top: 0 !important; left: 0 !important; right: 0; width: 100% !important; height: 3px !important;
  margin: 0 !important; padding: 0 !important; z-index: 5; background: rgba(var(--c-primary), .15) !important; background-image: none !important;
  border: 0; border-radius: 3px; box-shadow: 0 0 10px rgba(var(--c-primary), .35); overflow: hidden; font-size: 0 !important; color: transparent !important; line-height: 0;
}
body.nt-app .dataTables_wrapper .dataTables_processing > * { display: none !important; }
body.nt-app .dataTables_wrapper .dataTables_processing::before, body.nt-app .dataTables_wrapper .dataTables_processing::after { content: ''; position: absolute; top: 0; bottom: 0; background: var(--g-primary); border-radius: 3px; }
body.nt-app .dataTables_wrapper .dataTables_processing::before { animation: nt-lp1 2.1s cubic-bezier(.65, .815, .735, .395) infinite; }
body.nt-app .dataTables_wrapper .dataTables_processing::after { animation: nt-lp2 2.1s cubic-bezier(.165, .84, .44, 1) 1.15s infinite; }
body.nt-app .dataTables_wrapper .dataTables_empty { color: var(--text-muted); padding: 32px !important; }
body.nt-app .dataTables_wrapper .dataTables_scrollHead table.dataTable, body.nt-app .dataTables_wrapper .dataTables_scrollBody table.dataTable { margin-top: 0 !important; }
body.nt-app .dt-buttons { display: inline-flex; flex-wrap: wrap; gap: 10px; margin: 0 0 6px 16px !important; float: left; vertical-align: middle; }
body.nt-app .dt-buttons .dt-button, body.nt-app a.buttons-excel, body.nt-app a.buttons-pdf, body.nt-app a.buttons-print, body.nt-app a.buttons-csv,
body.nt-app button.buttons-excel, body.nt-app button.buttons-pdf, body.nt-app button.buttons-print, body.nt-app button.buttons-csv {
  --c: var(--c-dark);
  position: relative; display: inline-flex !important; align-items: center; gap: 6px; height: 32px; padding: 0 14px 0 10px !important; margin: 0 !important;
  border: 0 !important; border-radius: var(--r-sm) !important; background: var(--g-dark) !important; color: #fff !important;
  font: 700 11px/1 var(--nt-font) !important; letter-spacing: .07em; text-transform: uppercase; cursor: pointer; text-decoration: none;
  box-shadow: 0 4px 20px 0 rgba(var(--c), .4) !important; transition: box-shadow var(--t-btn) var(--ease), transform var(--t-btn) var(--ease);
}
body.nt-app .dt-buttons .dt-button::before, body.nt-app .buttons-excel::before, body.nt-app .buttons-pdf::before, body.nt-app .buttons-print::before, body.nt-app .buttons-csv::before {
  font-family: 'Material Icons' !important; font-size: 16px; line-height: 1; font-weight: 400; text-transform: none; letter-spacing: 0; -webkit-font-feature-settings: 'liga'; font-feature-settings: 'liga';
}
body.nt-app .dt-buttons .buttons-excel, body.nt-app .dt-buttons .buttons-csv, body.nt-app .buttons-excel, body.nt-app .buttons-csv { background: var(--g-success) !important; --c: var(--c-success); }
body.nt-app .dt-buttons .buttons-pdf, body.nt-app .buttons-pdf { background: var(--g-red) !important; --c: var(--c-red); }
body.nt-app .dt-buttons .buttons-print, body.nt-app .buttons-print { background: var(--g-dark) !important; --c: var(--c-dark); }
body.nt-app .buttons-excel::before { content: 'grid_on'; }
body.nt-app .buttons-csv::before { content: 'description'; }
body.nt-app .buttons-pdf::before { content: 'picture_as_pdf'; }
body.nt-app .buttons-print::before { content: 'print'; }
body.nt-app .dt-buttons .dt-button:hover { transform: translateY(-2px); box-shadow: 0 8px 28px 0 rgba(var(--c), .55) !important; }
body.nt-app .dt-buttons .dt-button:active { transform: translateY(1px); box-shadow: 0 2px 8px 0 rgba(var(--c), .35) !important; }
body.nt-app .dt-buttons .dt-button:focus { outline: none; }
body.nt-app table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control::before,
body.nt-app table.dataTable.dtr-inline.collapsed > tbody > tr[role=row] > td:first-child::before,
body.nt-app table.dataTable.dtr-inline.collapsed > tbody > tr[role=row] > th:first-child::before { background: var(--g-navy) !important; border: 2px solid #fff !important; box-shadow: 0 2px 8px rgba(var(--c-navy), .5) !important; font-family: var(--nt-font); font-weight: 700; }
body.nt-app table.dataTable.dtr-inline.collapsed > tbody > tr.parent > td.dtr-control::before,
body.nt-app table.dataTable.dtr-inline.collapsed > tbody > tr.parent > td:first-child::before,
body.nt-app table.dataTable.dtr-inline.collapsed > tbody > tr.parent > th:first-child::before { background: var(--g-red) !important; box-shadow: 0 2px 8px rgba(var(--c-red), .5) !important; }
body.nt-app table.dataTable > tbody > tr.child { background: var(--tint-1) !important; }
body.nt-app table.dataTable > tbody > tr.child ul.dtr-details > li { border-bottom: 1px dashed var(--line-2); padding: 8px 0; }
body.nt-app table.dataTable > tbody > tr.child span.dtr-title { color: var(--navy-800); font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; min-width: 120px; }

/* inline legacy purple header rows on some pages -> brand primary */
body.nt-app tr[style*="linear-gradient"], body.nt-app thead[style*="linear-gradient"] { background: var(--g-primary) !important; }
body.nt-app tr[style*="linear-gradient"] th, body.nt-app thead[style*="linear-gradient"] th, body.nt-app tr[style*="linear-gradient"] td { color: #fff !important; background: transparent !important; }

/* ===================== 11. Chips ===================== */
body.nt-app .chip { position: relative; display: inline-flex; align-items: center; gap: 6px; height: 24px; line-height: 24px; padding: 0 11px; margin: 0; border-radius: 999px; font-size: 11.5px; font-weight: 700; letter-spacing: .03em; background-color: #e9ecef; color: var(--text); }
body.nt-app .chip.lighten-5::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: 0 0 7px; box-shadow: 0 0 6px currentColor; }
body.nt-app .chip.green.lighten-5, body.nt-app .chip.green { background-color: #e3f5e4 !important; color: #2e7d32 !important; }
body.nt-app .chip.red.lighten-5, body.nt-app .chip.red { background-color: #fdeaea !important; color: #c62828 !important; }
body.nt-app .chip.orange.lighten-5, body.nt-app .chip.amber.lighten-5, body.nt-app .chip.yellow.lighten-5, body.nt-app .chip.orange, body.nt-app .chip.amber { background-color: #fff1dd !important; color: #e65100 !important; }
body.nt-app .chip.blue.lighten-5, body.nt-app .chip.cyan.lighten-5, body.nt-app .chip.light-blue.lighten-5, body.nt-app .chip.blue, body.nt-app .chip.cyan { background-color: #e3effd !important; color: #1565c0 !important; }
body.nt-app .chip.purple.lighten-5, body.nt-app .chip.purple { background-color: #e8eaf6 !important; color: var(--navy-700) !important; }
body.nt-app .chip .green-text { color: #2e7d32 !important; }
body.nt-app .chip .red-text { color: #c62828 !important; }
body.nt-app .chip .orange-text, body.nt-app .chip .amber-text { color: #e65100 !important; }
body.nt-app span.badge { border-radius: 999px; font-weight: 700; font-size: 11px; }
body.nt-app span.badge.new { background: var(--g-primary); box-shadow: 0 2px 8px rgba(var(--c-primary), .45); }

/* ===================== 12. Modals, toasts, sweetalert, alerts ===================== */
body.nt-app .modal { border-radius: var(--r) !important; box-shadow: var(--sh-xl) !important; border: 0; overflow-x: hidden; }
body.nt-app .modal .modal-content { padding: 24px 26px; }
body.nt-app .modal .modal-content h4, body.nt-app .modal .modal-content h5 { font-size: 20px; font-weight: 500; color: var(--heading); margin: 0 0 14px; }
body.nt-app .modal .modal-footer { background: #f8f9fa !important; border-top: 1px solid var(--line); padding: 10px 20px !important; height: auto !important; min-height: 58px; border-radius: 0 0 var(--r) var(--r); display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px; }
body.nt-app .modal .modal-footer .btn, body.nt-app .modal .modal-footer .btn-flat { margin: 0 !important; float: none; }
body.nt-app .modal.modal-fixed-footer .modal-footer { position: absolute; }
body.nt-app .modal-overlay { background: var(--navy-950) !important; }
body .toast { background: var(--g-navy) !important; color: #fff; border-radius: var(--r-sm) !important; box-shadow: 0 8px 28px 0 rgba(var(--c-navy), .55) !important; font-family: var(--nt-font); font-size: 14px; min-height: 46px; padding: 10px 18px !important; }
body .toast .toast-action { color: #c5cae9; font-weight: 700; }
body .swal-overlay { background-color: rgba(30, 58, 138, .55); }
@keyframes nt-pop { from { opacity: 0; transform: scale(.9) translateY(10px); } to { opacity: 1; transform: none; } }
body .swal-overlay--show-modal .swal-modal { animation: nt-pop .35s var(--ease-out) !important; }
body .swal-modal { border-radius: var(--r); font-family: var(--nt-font); box-shadow: var(--sh-xl); }
body .swal-title { font-family: var(--nt-font); font-weight: 500; color: var(--heading); font-size: 22px; }
body .swal-text { font-family: var(--nt-font); color: var(--text); text-align: center; font-size: 15px; }
body .swal-footer { text-align: center; padding: 6px 16px 20px; }
body .swal-overlay .swal-button {
  --c: var(--c-primary); background: var(--g-primary) !important; color: #fff; border-radius: var(--r-sm); font-family: var(--nt-font);
  font-weight: 700; font-size: 12px; letter-spacing: .07em; text-transform: uppercase; padding: 11px 24px;
  box-shadow: 0 4px 20px 0 rgba(var(--c), .4) !important; transition: box-shadow var(--t-btn) var(--ease), transform var(--t-btn) var(--ease);
}
body .swal-overlay .swal-button:not([disabled]):hover { transform: translateY(-2px); box-shadow: 0 8px 28px 0 rgba(var(--c), .55) !important; }
body .swal-overlay .swal-button:not([disabled]):active { transform: translateY(1px); box-shadow: 0 2px 8px 0 rgba(var(--c), .35) !important; }
body .swal-overlay .swal-button--cancel { --c: var(--c-grey); background: var(--g-grey) !important; color: var(--heading) !important; }
body .swal-overlay .swal-button--danger { --c: var(--c-red); background: var(--g-red) !important; }
body .swal-overlay .swal-button:focus { outline: 2px solid rgba(var(--c), .45); outline-offset: 2px; }
body .swal-icon--success__line { background-color: #43a047; }
body .swal-icon--success__ring { border-color: rgba(67, 160, 71, .25); }
@keyframes nt-slide-in { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
body.nt-app .card-alert, body.nt-auth .card-alert {
  position: fixed; top: calc(var(--top-h) + 10px); right: 20px; z-index: 9999; margin: 0 !important; padding: 0 !important;
  min-width: 300px; max-width: min(440px, calc(100vw - 32px)); border-radius: var(--r-sm) !important; border: 0;
  background: var(--g-navy) !important; color: #fff; overflow: hidden; --c: var(--c-navy);
  box-shadow: 0 8px 28px 0 rgba(var(--c), .55) !important; animation: nt-slide-in .45s var(--ease-out) backwards;
}
body.nt-app .card-alert .card-content { padding: 14px 18px !important; color: #fff !important; }
body.nt-app .card-alert .card-content p { display: flex; align-items: center; gap: 12px; margin: 0; font-size: 14px; font-weight: 500; line-height: 1.45; color: #fff !important; }
body.nt-app .card-alert .card-content :is(i, svg) { font-size: 22px; line-height: 1; flex: 0 0 auto; }
body.nt-app .card-alert.gradient-45deg-green-teal, body.nt-app .card-alert.green { background: var(--g-success) !important; --c: var(--c-success); }
body.nt-app .card-alert.gradient-45deg-amber-amber, body.nt-app .card-alert.orange, body.nt-app .card-alert.amber { background: var(--g-warning) !important; --c: var(--c-warning); }
body.nt-app .card-alert.gradient-45deg-red-pink, body.nt-app .card-alert.red { background: var(--g-red) !important; --c: var(--c-red); }
body.nt-app .card-alert .close { color: #fff !important; opacity: .8; }

/* ===================== 13. Misc widgets ===================== */
body.nt-app #main .tabs { background: #f0f2f5 !important; border-radius: var(--r); padding: 4px; height: auto; min-height: 46px; display: flex; gap: 4px; overflow-x: auto; overflow-y: hidden; white-space: nowrap; }
body.nt-app #main .tabs .tab { height: 38px; line-height: 38px; flex: 1 0 auto; text-transform: none; }
body.nt-app #main .tabs .tab a { color: var(--text) !important; border-radius: var(--r-sm); font-weight: 500; font-size: 13.5px; text-transform: none; background: transparent !important; transition: background-color .2s var(--ease), color .2s var(--ease), box-shadow .2s var(--ease); padding: 0 16px; }
body.nt-app #main .tabs .tab a:hover { background: rgba(255, 255, 255, .7) !important; }
body.nt-app #main .tabs .tab a.active { background: #fff !important; color: var(--accent) !important; box-shadow: 0 4px 14px rgba(var(--c-primary), .2); font-weight: 700; }
body.nt-app #main .tabs .indicator { display: none; }
body.nt-app #main .collapsible { border: 0; border-radius: var(--r); box-shadow: var(--sh-card); overflow: hidden; }
body.nt-app #main .collapsible-header { background: #fff; border-bottom: 1px solid var(--line); font-weight: 500; color: var(--heading); }
body.nt-app #main .collapsible-body { border-bottom: 1px solid var(--line); background: #fafbfc; }
body.nt-app .collection { border: 0; border-radius: var(--r); box-shadow: var(--sh-card); }
body.nt-app .collection .collection-item { border-bottom: 1px solid var(--line); }
body.nt-app .collection .collection-item.active { background: var(--g-primary); }
body.nt-app .progress { background-color: rgba(var(--c-primary), .15); border-radius: 999px; }
body.nt-app .progress .determinate, body.nt-app .progress .indeterminate { background: var(--g-primary); }
body.nt-app .spinner-layer, body.nt-app .spinner-blue-only { border-color: var(--accent); }
body .datepicker-container { border: 0 !important; border-radius: var(--r); box-shadow: 0 8px 26px -4px rgba(30, 41, 59, .2), 0 8px 9px -5px rgba(30, 41, 59, .08) !important; font-family: var(--nt-font); overflow: hidden; }
body .datepicker-panel > ul > li { border-radius: var(--r-xs); }
body .datepicker-panel > ul > li.picked, body .datepicker-panel > ul > li.picked:hover { color: #fff !important; background: var(--g-primary) !important; box-shadow: 0 2px 8px rgba(var(--c-primary), .45); }
body .datepicker-panel > ul > li.highlighted { background-color: rgba(var(--c-primary), .08) !important; }
body .datepicker-panel > ul > li:hover { background-color: #f0f2f5 !important; }
body .datepicker-top-left::before, body .datepicker-top-right::before, body .datepicker-bottom-left::before, body .datepicker-bottom-right::before,
body .datepicker-top-left::after, body .datepicker-top-right::after, body .datepicker-bottom-left::after, body .datepicker-bottom-right::after { display: none !important; }
body .datepicker-date-display { background: var(--g-navy) !important; }
body .datepicker-table td.is-selected { background: var(--g-primary) !important; }
body .datepicker-table td.is-today { color: var(--accent) !important; }
body .datepicker-cancel, body .datepicker-clear, body .datepicker-today, body .datepicker-done, body .month-prev, body .month-next { color: var(--accent) !important; }
body .ui-datepicker { border: 0 !important; border-radius: var(--r) !important; padding: 8px !important; box-shadow: 0 8px 26px -4px rgba(30, 41, 59, .2) !important; font-family: var(--nt-font) !important; font-size: 13px !important; background: #fff !important; z-index: 1003 !important; }
body .ui-datepicker .ui-widget-header { background: var(--g-navy) !important; border: 0 !important; color: #fff !important; border-radius: var(--r-sm); }
body .ui-datepicker .ui-state-default { border: 0 !important; background: transparent !important; text-align: center; border-radius: var(--r-xs); color: var(--text) !important; }
body .ui-datepicker .ui-state-hover { background: #f0f2f5 !important; }
body .ui-datepicker .ui-state-highlight { color: var(--accent) !important; font-weight: 700; }
body .ui-datepicker .ui-state-active { background: var(--g-primary) !important; color: #fff !important; }
body .ui-datepicker select.ui-datepicker-month, body .ui-datepicker select.ui-datepicker-year { display: inline-block !important; height: 28px; border: 0; border-radius: var(--r-xs); padding: 0 6px; font-size: 13px; background: #fff; color: var(--heading); }
body.nt-app .select2-container .select2-selection--single, body.nt-app .select2 .selection .select2-selection--single { height: 42px !important; border: 0 !important; border-bottom: 1px solid #d2d6da !important; border-radius: 0 !important; background: transparent; }
body.nt-app .select2-container .select2-selection--single .select2-selection__rendered { line-height: 42px !important; padding-left: 2px !important; color: var(--heading); font-size: 14.5px; }
body.nt-app .select2-container .select2-selection--single .select2-selection__arrow { height: 40px !important; }
body.nt-app .select2-container--open .select2-selection--single, body.nt-app .select2-container--focus .select2-selection--single { border-bottom-color: var(--accent) !important; box-shadow: 0 1px 0 0 var(--accent); }
body.nt-app .select2-dropdown { border: 0 !important; border-radius: var(--r-sm) !important; box-shadow: 0 8px 26px -4px rgba(30, 41, 59, .15); overflow: hidden; }
body.nt-app .select2-container--default .select2-results__option--highlighted[aria-selected],
body.nt-app .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable { background: var(--g-primary) !important; color: #fff !important; }
body.nt-app .select2-container--default .select2-search--dropdown .select2-search__field, body.nt-app .select2 .select2-search--dropdown .select2-search__field { border: 1px solid #d2d6da !important; border-radius: var(--r-sm) !important; height: 36px; padding: 0 10px !important; box-sizing: border-box; }
body.nt-app .pagination li.active { background: var(--g-primary); border-radius: 999px; box-shadow: 0 4px 14px rgba(var(--c-primary), .45); }
body.nt-app .pagination li a { border-radius: 999px; }
body.nt-app .material-tooltip { background: var(--navy-900); border-radius: var(--r-xs); font-size: 12px; }

/* ===================== 14. Dashboard ===================== */
.nt-dash-panel { padding: 22px 18px 18px !important; margin-top: 22px !important; }

/* KPI: fully saturated gradient cards with glass icon tile, watermark and footer strip */
.nt-kpi-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin-bottom: 18px; }
body.nt-app a.nt-kpi {
  --c: var(--c-info);
  position: relative; overflow: hidden; display: flex; flex-direction: column; border-radius: 20px; color: #fff;
  box-shadow: 0 10px 26px -10px rgba(var(--c), .75), 0 4px 10px -4px rgba(var(--c), .4);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
body.nt-app a.nt-kpi:hover { transform: translateY(-5px); color: #fff; box-shadow: 0 22px 40px -14px rgba(var(--c), .85), 0 6px 14px -4px rgba(var(--c), .45); }
.nt-kpi.k-blue { background: linear-gradient(135deg, #1d4ed8 0%, #3b82f6 100%); --c: 29, 78, 216; }
.nt-kpi.k-orange { background: linear-gradient(135deg, #ea6a0c 0%, #f59e0b 100%); --c: 234, 106, 12; }
.nt-kpi.k-teal { background: linear-gradient(135deg, #0d8a80 0%, #2cc4a8 100%); --c: 13, 138, 128; }
.nt-kpi.k-red { background: linear-gradient(135deg, #e30613 0%, #f43f5e 100%); --c: 227, 6, 19; }
.nt-kpi-watermark { position: absolute; right: 18px; top: 10px; font-size: 130px !important; line-height: 1; color: rgba(255, 255, 255, .12); pointer-events: none; transform: rotate(-8deg); }
.nt-kpi-main { position: relative; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 22px 22px 18px; }
.nt-kpi-label { font-size: 15px; font-weight: 600; color: rgba(255, 255, 255, .95); }
.nt-kpi-value { font-size: 38px; font-weight: 900; line-height: 1.15; margin-top: 6px; color: #fff; letter-spacing: .01em; font-variant-numeric: tabular-nums; text-shadow: 0 2px 10px rgba(30, 41, 59, .12); }
.nt-kpi-icon {
  flex: 0 0 64px; width: 64px; height: 64px; border-radius: 18px; display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .25); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 0 0 1px rgba(255, 255, 255, .25), 0 8px 18px -8px rgba(30, 41, 59, .3);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: transform .3s var(--ease);
}
body.nt-app a.nt-kpi:hover .nt-kpi-icon { transform: translateY(-3px) rotate(-6deg); }
.nt-kpi-icon :is(i, svg) { font-size: 30px; color: #fff; }
.nt-kpi-foot {
  position: relative; display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding: 14px 22px;
  background: rgba(30, 41, 59, .14); font-size: 13px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
}
.nt-kpi-foot :is(i, svg) { width: 28px; height: 28px; border-radius: 50%; background: rgba(255, 255, 255, .25); display: inline-flex; align-items: center; justify-content: center; font-size: 17px; transition: transform .3s var(--ease), background-color .3s var(--ease); }
body.nt-app a.nt-kpi:hover .nt-kpi-foot :is(i, svg) { transform: translateX(4px); background: rgba(255, 255, 255, .4); }

/* lower widgets */
.nt-widget-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); gap: 18px; }
.nt-widget { position: relative; border-radius: 20px; overflow: hidden; }
.nt-chart-card { background: #fff; padding: 22px 24px 18px; box-shadow: var(--sh-card); }
.nt-widget-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.nt-widget h3 { font-family: var(--head-font) !important; font-size: 20px; font-weight: 900; margin: 0; color: var(--heading); }
body.nt-app a.nt-soft-btn { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; border-radius: 999px; background: var(--panel); color: var(--accent-dark); font-weight: 700; font-size: 13.5px; box-shadow: 0 4px 14px -6px rgba(var(--c-primary), .5); transition: transform var(--t-btn) var(--ease), box-shadow var(--t-btn) var(--ease); }
body.nt-app a.nt-soft-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 22px -8px rgba(var(--c-primary), .6); color: var(--accent-dark); }
body.nt-app a.nt-soft-btn :is(i, svg) { font-size: 18px; }
.nt-chart-total { margin: 18px 0 6px; font-size: 40px; font-weight: 900; color: var(--heading); line-height: 1.1; }
.nt-chart-total small { font-family: var(--nt-font); font-size: 16px; font-weight: 500; color: var(--text-muted); margin-left: 4px; }
.nt-bars { display: flex; align-items: flex-end; justify-content: space-around; gap: 8px; height: 230px; padding-top: 6px; border-bottom: 1px dashed var(--line-2); position: relative; }
.nt-bar { flex: 1 1 0; min-width: 0; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; position: relative; }
.nt-bar-val { text-align: center; line-height: 1.25; margin-bottom: 6px; }
.nt-bar-val b { display: block; font-family: var(--head-font); font-weight: 900; font-size: 16px; color: var(--heading); }
.nt-bar-val span { font-size: 12px; color: var(--text-muted); font-weight: 600; }
.nt-bar-track { width: 100%; max-width: 64px; flex: 0 1 140px; display: flex; align-items: flex-end; }
.nt-bar-fill { width: 100%; border-radius: 12px 12px 4px 4px; min-height: 0; transform-origin: bottom; animation: nt-grow .9s var(--ease-out) .25s backwards; }
@keyframes nt-grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.nt-bar-name { position: absolute; top: calc(100% + 8px); left: -2px; right: -2px; white-space: normal; justify-content: center; text-align: center; flex-wrap: wrap; line-height: 1.25; font-size: 10.5px !important; letter-spacing: .05em !important; display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--heading); }
.nt-bar-name i { width: 9px; height: 9px; border-radius: 3px; display: inline-block; }
.nt-bars { margin-bottom: 48px; }
.b-teal .nt-bar-fill, .b-teal .nt-bar-name i { background: linear-gradient(180deg, #38d39f, #0f9b8e); box-shadow: 0 8px 18px -8px rgba(15, 155, 142, .8); }
.b-red .nt-bar-fill, .b-red .nt-bar-name i { background: linear-gradient(180deg, #f4697a, #e8344e); box-shadow: 0 8px 18px -8px rgba(232, 52, 78, .8); }
.b-orange .nt-bar-fill, .b-orange .nt-bar-name i { background: linear-gradient(180deg, #f9b24e, #f7921e); box-shadow: 0 8px 18px -8px rgba(247, 146, 30, .8); }
.b-purple .nt-bar-fill, .b-purple .nt-bar-name i { background: linear-gradient(180deg, #5d7393, #34495e); box-shadow: 0 8px 18px -8px rgba(52, 73, 94, .8); }
.b-slate .nt-bar-fill, .b-slate .nt-bar-name i { background: linear-gradient(180deg, #94a3b8, #475569); box-shadow: 0 8px 18px -8px rgba(71, 85, 105, .7); }
.b-blue .nt-bar-fill, .b-blue .nt-bar-name i { background: linear-gradient(180deg, #38b2f0, #2f6fe8); box-shadow: 0 8px 18px -8px rgba(47, 111, 232, .8); }
.b-pink .nt-bar-fill, .b-pink .nt-bar-name i { background: linear-gradient(180deg, #e879f9, #c026d3); box-shadow: 0 8px 18px -8px rgba(192, 38, 211, .8); }

/* ring cards */
body.nt-app a.nt-ring-card {
  --c: 229, 57, 53;
  display: flex; flex-direction: column; color: #fff; padding: 22px 24px 0;
  box-shadow: 0 14px 30px -12px rgba(var(--c), .8); transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
body.nt-app a.nt-ring-card:hover { transform: translateY(-5px); color: #fff; box-shadow: 0 24px 44px -14px rgba(var(--c), .9); }
.nt-ring-card.k-purple { background: radial-gradient(260px 200px at 100% 0%, rgba(255, 255, 255, .14), transparent 70%), linear-gradient(150deg, #34495e 0%, #1f2d3d 100%); --c: 31, 45, 61; }
.nt-ring-card.k-crimson { background: radial-gradient(260px 200px at 100% 0%, rgba(255, 255, 255, .18), transparent 70%), linear-gradient(150deg, #e11d48 0%, #f4697a 100%); --c: 225, 29, 72; }
.nt-ring-card h3 { color: #fff !important; }
.nt-ring-card p { margin: 6px 0 0; color: rgba(255, 255, 255, .85); font-size: 14.5px; }
.nt-ring {
  --p: 50; position: relative; width: 190px; height: 190px; margin: 22px auto 24px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; animation: nt-spin-in 1s var(--ease-out) .2s backwards;
  filter: drop-shadow(0 0 16px rgba(255, 255, 255, .55));
}
.nt-ring::before {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(#fff calc(var(--p) * 1%), rgba(255, 255, 255, .28) 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 20px), #000 calc(100% - 19px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 20px), #000 calc(100% - 19px));
}
@keyframes nt-spin-in { from { transform: rotate(-90deg) scale(.85); opacity: 0; } to { transform: none; opacity: 1; } }
.nt-ring-inner { position: relative; width: 140px; height: 140px; border-radius: 50%; background: rgba(255, 255, 255, .1); box-shadow: inset 0 2px 12px rgba(30, 41, 59, .12); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.nt-ring-cap { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .95); }
.nt-ring-cap::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--hl-1); box-shadow: 0 0 8px var(--hl-1); }
.nt-ring b { font-size: 40px; font-weight: 900; line-height: 1.1; color: #fff; margin-top: 2px; }
.nt-ring-foot { display: flex; align-items: center; justify-content: space-between; margin: auto -24px 0; padding: 14px 24px; background: rgba(30, 41, 59, .15); font-size: 13px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.nt-ring-foot :is(i, svg) { width: 28px; height: 28px; border-radius: 50%; background: rgba(255, 255, 255, .25); display: inline-flex; align-items: center; justify-content: center; font-size: 17px; transition: transform .3s var(--ease); }
body.nt-app a.nt-ring-card:hover .nt-ring-foot :is(i, svg) { transform: translateX(4px); }
@media (max-width: 1280px) { .nt-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .nt-widget-grid { grid-template-columns: 1fr 1fr; } .nt-chart-card { grid-column: 1 / -1; } }
@media (max-width: 600px) {
  .nt-kpi-grid, .nt-widget-grid { grid-template-columns: 1fr; }
  .nt-bars { height: 200px; }
  .nt-bar-name { font-size: 9px; letter-spacing: .04em; }
  .nt-bar-val b { font-size: 13px; }
  .nt-dash-panel { padding: 16px 10px !important; }
}

/* ===================== 15. Auth + error pages ===================== */
@keyframes nt-float { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(30px, -24px) scale(1.08); } }
body.nt-auth {
  min-height: 100vh; margin: 0;
  background:
    radial-gradient(700px 460px at 90% 0%, rgba(var(--c-primary-light), .45), transparent 70%),
    radial-gradient(600px 420px at 0% 100%, rgba(var(--c-hl), .28), transparent 70%),
    var(--auth-bg) !important;
  background-attachment: fixed !important;
}
.nt-auth-page { position: relative; min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 72px 18px 28px; overflow: hidden; isolation: isolate; }
.nt-auth-glow { position: absolute; z-index: -1; border-radius: 50%; filter: blur(8px); animation: nt-float 14s ease-in-out infinite; pointer-events: none; }
.nt-auth-glow.g1 { width: 420px; height: 420px; right: -120px; top: -120px; background: radial-gradient(circle, rgba(255, 255, 255, .22), transparent 65%); }
.nt-auth-glow.g2 { width: 360px; height: 360px; left: -120px; bottom: -120px; background: radial-gradient(circle, rgba(255, 255, 255, .16), transparent 65%); animation-duration: 18s; animation-direction: reverse; }
.nt-auth-glow.g3 { width: 260px; height: 260px; left: 12%; top: 8%; background: none; border: 30px solid rgba(255, 255, 255, .05); filter: none; animation-duration: 22s; }
.nt-auth-card { position: relative; width: 100%; max-width: 430px; background: #fff; border-radius: 24px; padding: 0 30px 26px; box-shadow: 0 30px 60px -12px rgba(30, 41, 59, .45), 0 18px 36px -18px rgba(30, 41, 59, .5); animation: nt-enter .6s var(--ease-out) backwards; }
.nt-auth-head {
  position: relative; margin: -48px 0 26px; padding: 22px 20px 20px; border-radius: 20px; text-align: center; color: #fff;
  background: var(--g-primary); box-shadow: 0 4px 20px 0 rgba(var(--c-primary), .5), 0 7px 12px -5px rgba(var(--c-primary), .6); overflow: hidden;
}
.nt-auth-head::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .06) 0 2px, transparent 2px 14px); }
.nt-auth-head > * { position: relative; }
.nt-auth-logo { width: 74px; height: 74px; border-radius: 50%; background: #fff; margin: 0 auto 10px; display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 20px rgba(30, 41, 59, .25); }
.nt-auth-logo img { width: 64px; height: 64px; object-fit: contain; }
.nt-auth-head h1 { font-size: 23px !important; font-weight: 900; margin: 0; color: #fff !important; letter-spacing: .04em; }
.nt-auth-head p { margin: 4px 0 0; font-size: 13px; color: rgba(255, 255, 255, .88); }
.nt-auth-card h2 { font-size: 20px; font-weight: 500; color: var(--heading); margin: 0 0 4px; text-align: center; }
.nt-auth-sub { color: var(--text-muted); font-size: 14px; margin: 0 0 18px; text-align: center; line-height: 1.5; }
.nt-field { margin-bottom: 14px; }
.nt-field-box { position: relative; padding-top: 14px; }
.nt-field-box > .nt-lead { position: absolute; left: 0; top: 24px; font-size: 22px; color: var(--text-muted); pointer-events: none; transition: color .2s var(--ease); z-index: 1; }
body.nt-auth .nt-field-box input.nt-input, body.nt-auth .nt-field-box input.nt-input:focus:not([readonly]) {
  box-sizing: border-box; width: 100%; height: 44px !important; margin: 0 !important; padding: 0 40px 0 34px !important;
  border: 0 !important; border-bottom: 1px solid #d2d6da !important; border-radius: 0 !important;
  background: transparent linear-gradient(90deg, var(--primary), var(--hl-2)) no-repeat 50% 100% / 0 2px !important;
  color: var(--heading); font-size: 15px !important; box-shadow: none !important; outline: none;
  transition: background-size .35s var(--ease), border-color .2s var(--ease);
}
body.nt-auth .nt-field-box input.nt-input:focus:not([readonly]) { background-size: 100% 2px !important; border-bottom-color: transparent !important; }
body.nt-auth .nt-field-box input.nt-input.is-invalid { border-bottom-color: var(--danger) !important; }
.nt-field-box:focus-within > .nt-lead { color: var(--accent); }
body.nt-auth .nt-field-box > label.nt-float { position: absolute; left: 34px; top: 26px; padding: 0; margin: 0; font-size: 15px; line-height: 20px; color: var(--text-muted) !important; pointer-events: none; transform-origin: 0 0; transition: transform .3s var(--ease), color .2s var(--ease), left .3s var(--ease); }
body.nt-auth .nt-field-box input.nt-input:focus + label.nt-float, body.nt-auth .nt-field-box input.nt-input:not(:placeholder-shown) + label.nt-float { transform: translateY(-22px) scale(.8); left: 0; }
body.nt-auth .nt-field-box input.nt-input:focus + label.nt-float { color: var(--accent) !important; }
.nt-pw-toggle { position: absolute; right: -4px; top: 18px; width: 38px; height: 38px; border: 0; border-radius: 50%; background: transparent; color: var(--text-muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background-color .2s var(--ease), color .2s var(--ease), box-shadow .2s var(--ease); }
.nt-pw-toggle:hover { background: #fff; color: var(--heading); box-shadow: 0 4px 14px rgba(var(--c-navy), .2); }
.nt-pw-toggle :is(i, svg) { font-size: 20px; }
.nt-field .invalid-feedback { display: block; margin-top: 6px; color: var(--danger) !important; font-size: 12.5px; }
.nt-auth-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 14px 0 22px; flex-wrap: wrap; }
body.nt-auth .nt-auth-row [type=checkbox] + span:not(.lever) { font-size: 14px; color: var(--text); padding-left: 28px; height: 20px; line-height: 20px; }
body.nt-auth .nt-auth-row [type=checkbox].filled-in:checked + span:not(.lever)::after { border-color: var(--accent); background: var(--g-primary); box-shadow: 0 2px 8px rgba(var(--c-primary), .45); }
body.nt-auth .nt-auth-row [type=checkbox].filled-in + span:not(.lever)::after { border-radius: 4px; top: 1px; }
body.nt-auth .nt-auth-row [type=checkbox].filled-in:not(:checked) + span:not(.lever)::after { border-color: #b0b6c0; }
.nt-auth-link { color: var(--accent); font-weight: 500; font-size: 14px; }
.nt-auth-link:hover { color: var(--accent-dark); text-decoration: underline; }
body.nt-auth .nt-btn-primary {
  --c: var(--c-primary);
  position: relative; overflow: hidden; width: 100%; height: 46px; border: 0; border-radius: var(--r-sm); cursor: pointer;
  background: var(--g-primary) !important; color: #fff !important; font: 700 13px var(--nt-font); letter-spacing: .1em; text-transform: uppercase;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  box-shadow: 0 4px 20px 0 rgba(var(--c), .45), 0 2px 4px -1px rgba(var(--c), .35);
  transition: box-shadow var(--t-btn) var(--ease), transform var(--t-btn) var(--ease), filter var(--t-btn) var(--ease);
}
body.nt-auth .nt-btn-primary:hover { transform: translateY(-2px); filter: brightness(1.05); box-shadow: 0 10px 30px 0 rgba(var(--c), .6), 0 4px 10px -2px rgba(var(--c), .45); }
body.nt-auth .nt-btn-primary:active { transform: translateY(1px); filter: none; box-shadow: 0 2px 8px 0 rgba(var(--c), .4); transition-duration: 80ms; }
body.nt-auth .nt-btn-primary:focus-visible { outline: 2px solid rgba(var(--c), .5); outline-offset: 2px; }
body.nt-auth .nt-btn-primary :is(i, svg) { font-size: 19px; transition: transform .3s var(--ease); }
body.nt-auth .nt-btn-primary:hover :is(i, svg) { transform: translateX(3px); }
.nt-auth-alert { display: flex; gap: 10px; align-items: center; padding: 11px 14px; border-radius: var(--r-sm); margin: 0 0 14px; font-size: 13.5px; line-height: 1.45; color: #fff; animation: nt-enter .4s var(--ease-out) backwards; }
.nt-auth-alert :is(i, svg) { font-size: 20px; flex: 0 0 auto; }
.nt-auth-alert.is-error { background: var(--g-red); box-shadow: 0 4px 20px 0 rgba(var(--c-primary), .4); }
.nt-auth-alert.is-ok { background: var(--g-success); box-shadow: 0 4px 20px 0 rgba(67, 160, 71, .4); }
.nt-auth-note { margin-top: 20px; padding-top: 14px; font-size: 12.5px; color: var(--text-muted); display: flex; gap: 8px; align-items: center; justify-content: center; position: relative; }
.nt-auth-note::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(30, 41, 59, .14), transparent); }
.nt-auth-note :is(i, svg) { font-size: 17px; color: var(--text-muted); }
.nt-auth-foot { margin-top: 26px; font-size: 12.5px; color: rgba(255, 255, 255, .6); text-align: center; }
.nt-auth-foot strong { color: #fff; font-weight: 500; }
.nt-error-code { font-size: 92px; line-height: 1; font-weight: 900; margin: 4px 0 6px; letter-spacing: -.03em; background: var(--g-primary); -webkit-background-clip: text; background-clip: text; color: transparent; text-align: center; }
body.nt-auth .nt-error-card .nt-btn-primary { text-decoration: none; }

/* ===================== 15b. Highlight accents (royal blue, ~10% of the colour area) ===================== */
/* highlight tokens: see section 1 (--hl-*) */
/* logo rings */
.nt-brand-logo, .nt-topbar-logo, .nt-auth-logo { box-shadow: 0 0 0 3px var(--hl-2), 0 0 0 6px rgba(255, 255, 255, .25), 0 6px 18px rgba(var(--c-hl), .45) !important; }
/* top bar + page banners: thin gold accent line */
body.nt-app .nt-topbar { box-shadow: inset 0 -2px 0 rgba(var(--c-hl), .85), 0 8px 30px -12px rgba(var(--c-primary), .7); }
body.nt-app #breadcrumbs-wrapper { box-shadow: inset 0 -3px 0 var(--hl-2), 0 14px 34px -14px rgba(var(--c-primary), .8) !important; }
.nt-initials { background: var(--g-hl) !important; color: var(--on-hl) !important; box-shadow: 0 4px 14px rgba(var(--c-hl), .5) !important; }
body.nt-app .nt-user-chip .nt-user-role { color: var(--hl-1); }
/* sidebar: gold indicator + icon on the active pill, gold chevrons */
body.nt-app .nt-sidebar .sidenav li > a.active::after { content: ''; position: absolute; left: 6px; top: 10px; bottom: 10px; width: 4px; border-radius: 4px; background: var(--g-hl); box-shadow: 0 0 10px rgba(var(--c-hl), .8); }
body.nt-app .nt-sidebar .sidenav li > a.active > .material-icons { color: var(--hl-1) !important; }
body.nt-app .nt-sidebar .sidenav li.active > a.collapsible-header::after { color: var(--hl-1); }
body.nt-app .nt-sidebar .sidenav li.active > a.collapsible-header > .material-icons { color: var(--hl-1) !important; }
body.nt-app .nt-sidebar .collapsible-body li > a.active::before { background: var(--hl-1); box-shadow: 0 0 8px var(--hl-2); }
body.nt-app .nt-sidebar .sidenav li.navigation-header > a.navigation-header-text { color: rgba(191, 219, 254, .72) !important; }
/* buttons: thin gold inner highlight on red; gold icons in primary buttons; red -> gold shimmer on hover */
body.nt-app .btn:not(.btn-flat) { overflow: hidden; }
body.nt-app .btn:not(.btn-flat)::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(110deg, transparent 30%, rgba(191, 219, 254, .55) 50%, transparent 70%);
  transform: translateX(-130%); transition: transform .7s var(--ease);
}
body.nt-app .btn:not(.btn-flat):hover::after { transform: translateX(130%); }
body.nt-app .btn.nt-red-btn { box-shadow: inset 0 1px 0 rgba(191, 219, 254, .6), 0 4px 20px 0 rgba(var(--c), .4), 0 2px 4px -1px rgba(var(--c), .3) !important; }
body.nt-app .btn.nt-red-btn:hover { box-shadow: inset 0 1px 0 rgba(191, 219, 254, .75), 0 8px 28px 0 rgba(var(--c), .55), 0 0 18px -4px rgba(var(--c-hl), .55) !important; }
body.nt-app .btn.nt-red-btn:active { box-shadow: inset 0 1px 0 rgba(191, 219, 254, .5), 0 2px 8px 0 rgba(var(--c), .35) !important; }
body.nt-app .btn.nt-red-btn .material-icons { color: var(--hl-1) !important; }
/* gold "accent" buttons: page main action (Add / Registration) */
body.nt-app #breadcrumbs-wrapper .btn.nt-ic-add { background: var(--g-hl) !important; color: var(--on-hl) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 6px 22px 0 rgba(var(--c-hl), .55) !important; }
body.nt-app #breadcrumbs-wrapper .btn.nt-ic-add:hover { background: var(--g-hl) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 12px 32px 0 rgba(var(--c-hl), .7) !important; }
body.nt-app #breadcrumbs-wrapper .btn.nt-ic-add::after { background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .6) 50%, transparent 70%); }
body.nt-app a.nt-soft-btn { background: var(--hl-soft); color: var(--hl-3); box-shadow: 0 4px 14px -6px rgba(var(--c-hl), .7); }
body.nt-app a.nt-soft-btn:hover { color: var(--hl-3); box-shadow: 0 10px 22px -8px rgba(var(--c-hl), .8); }
/* badges / counts / chevrons */
body.nt-app .nt-filter-head .nt-filter-count { background: var(--g-hl) !important; color: var(--on-hl) !important; box-shadow: 0 0 10px rgba(var(--c-hl), .6); }
body.nt-app .nt-filter-head .nt-filter-chev { color: var(--hl-1) !important; }
body.nt-app span.badge.new { background: var(--g-hl); color: var(--on-hl); box-shadow: 0 2px 8px rgba(var(--c-hl), .5); }
.nt-dd-role { background: var(--g-hl) !important; color: var(--on-hl) !important; }
/* tables + pagination */
body.nt-app table thead th, body.nt-app table.dataTable thead th { border-bottom: 2px solid var(--hl-2) !important; }
body.nt-app .dataTables_wrapper .dataTables_paginate .paginate_button:not(.current):not(.disabled):hover { box-shadow: inset 0 0 0 1px var(--hl-2), 0 4px 14px rgba(var(--c-hl), .35) !important; color: var(--hl-3) !important; }
body.nt-app .dataTables_wrapper .dataTables_paginate .paginate_button.current { box-shadow: inset 0 -2px 0 var(--hl-1), 0 4px 20px 0 rgba(var(--c-primary), .45) !important; }
body.nt-app table.highlight > tbody > tr:hover, body.nt-app table.dataTable tbody tr:hover { box-shadow: inset 3px 0 0 var(--hl-2) !important; }
/* dashboard + misc */
.nt-kpi-foot :is(i, svg), .nt-ring-foot :is(i, svg) { box-shadow: inset 0 0 0 1px rgba(191, 219, 254, .55); }
.nt-ring-cap::before { background: var(--hl-1); box-shadow: 0 0 8px var(--hl-2); }
body .toast { box-shadow: inset 3px 0 0 var(--hl-2), 0 8px 28px 0 rgba(var(--c-primary), .45) !important; }
body.nt-app hr, body.nt-app .divider { background: linear-gradient(90deg, transparent, rgba(var(--c-hl), .6), transparent); }
/* login / auth */
body.nt-auth .nt-btn-primary { box-shadow: inset 0 1px 0 rgba(191, 219, 254, .65), 0 4px 20px 0 rgba(var(--c-primary), .45), 0 2px 4px -1px rgba(var(--c-primary), .35); }
body.nt-auth .nt-btn-primary :is(i, svg) { color: var(--hl-1); }
body.nt-auth .nt-btn-primary::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(110deg, transparent 30%, rgba(191, 219, 254, .55) 50%, transparent 70%); transform: translateX(-130%); transition: transform .7s var(--ease); }
body.nt-auth .nt-btn-primary:hover::after { transform: translateX(130%); }
.nt-auth-head { box-shadow: inset 0 -3px 0 var(--hl-2), 0 4px 20px 0 rgba(var(--c-primary), .5), 0 7px 12px -5px rgba(var(--c-primary), .6) !important; }
.nt-auth-head h1 { white-space: normal; overflow-wrap: anywhere; font-size: clamp(18px, 5.2vw, 23px) !important; line-height: 1.25; padding: 0 6px; text-align: center; }
.nt-auth-head p { overflow-wrap: anywhere; }
.nt-auth-link { color: var(--primary); }
body.nt-auth .nt-field-box input.nt-input, body.nt-auth .nt-field-box input.nt-input:focus:not([readonly]) { background-image: linear-gradient(90deg, var(--primary), var(--hl-2)) !important; }

body.nt-app .card .nt-card-head .card-title, body.nt-app .card .nt-card-head h4, body.nt-app .card .nt-card-head h5, body.nt-app .card .nt-card-head h6,
body.nt-app .card h4.nt-card-head, body.nt-app .card .nt-card-head.card-title, body.nt-app .card .nt-card-head * { color: #fff !important; }
body.nt-app .card .nt-card-head .nt-filter-count { color: var(--on-hl) !important; }
body.nt-app .card .nt-card-head .nt-filter-chev { color: var(--hl-1) !important; }

/* ===================== 16. Responsive / reduced motion ===================== */
@media (max-width: 1280px) { .nt-stat-grid, .nt-quick { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 992px) {
  body.nt-app { --sb-cur: 0px; --sb-gap: 0px; }
  body.nt-app .nt-sidebar { width: 272px !important; max-width: 86vw; top: 0 !important; left: 0 !important; height: 100% !important; border-radius: 0 20px 20px 0; transform: translateX(-104%); box-shadow: none !important; }
  body.nt-app.nt-drawer-open .nt-sidebar { transform: translateX(0); box-shadow: 0 24px 60px rgba(30, 58, 138, .6) !important; }
  .nt-sidebar .nt-drawer-close { display: inline-flex; }
  .nt-backdrop { position: fixed; inset: 0; z-index: 998; background: rgba(30, 58, 138, .55); opacity: 0; visibility: hidden; transition: opacity .3s var(--ease), visibility .3s var(--ease); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
  body.nt-drawer-open .nt-backdrop { opacity: 1; visibility: visible; }
  body.nt-drawer-open { overflow: hidden; }
  body.nt-app .nt-topbar { left: 0; }
  .nt-topbar-brand { display: flex; }
  body.nt-app #main, body.nt-app #main.main-full { padding-left: 8px !important; padding-right: 8px; }
  body.nt-app #main .content-wrapper-before { left: 8px !important; right: 8px !important; }
  body.nt-app footer.page-footer { padding-left: 0 !important; }
}
@media (min-width: 993px) { .nt-backdrop { display: none; } }
@media (max-width: 600px) {
  :root { --top-h: 64px; }
  .nt-topbar-inner { padding: 0 6px 0 2px; gap: 4px; }
  .nt-user-meta, .nt-user-caret, .nt-initials, .nt-topbar-name small { display: none; }
  .nt-topbar-inner { padding: 0 10px; }
  body.nt-app .nt-user-chip { padding: 0 4px; height: 46px; }
  .nt-page-title { font-size: 17px; }
  body.nt-app #breadcrumbs-wrapper { padding: 18px !important; margin: 12px .25rem 14px !important; border-radius: 20px; }
  body.nt-app #breadcrumbs-wrapper .breadcrumbs-title { font-size: 22px !important; }
  body.nt-app #breadcrumbs-wrapper > .container > .row > .col + .col { justify-content: flex-start; flex: 1 1 100%; }
  body.nt-app .card .card-content { padding: 18px 16px; }
  body.nt-app .nt-card-head { margin: -4px 0 18px !important; padding: 14px 16px !important; }
  body.nt-app .card table:not(.dataTable) { display: block; overflow-x: auto; max-width: 100%; }
  body.nt-app table:not(.dataTable) td, body.nt-app table:not(.dataTable) th { padding: 10px 8px; white-space: normal; }
  body.nt-app .dataTables_wrapper .dataTables_filter, body.nt-app .dataTables_wrapper .dataTables_length { float: none; text-align: left; }
  body.nt-app .dataTables_wrapper .dataTables_filter input { width: 100% !important; }
  body.nt-app .dataTables_wrapper .dataTables_filter label { display: flex; width: 100%; }
  body.nt-app .dt-buttons { margin: 6px 0 8px !important; float: none; display: flex; }
  body.nt-app .card-alert { right: 12px; left: 12px; min-width: 0; }
  .nt-stat-grid { grid-template-columns: 1fr; gap: 26px; }
  .nt-quick { grid-template-columns: 1fr; gap: 12px; }
  .nt-auth-card { padding: 0 20px 22px; }
  .nt-error-code { font-size: 72px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; animation-delay: 0ms !important; transition-duration: 1ms !important; scroll-behavior: auto !important; }
  body.nt-app .btn:hover, body.nt-app .dt-buttons .dt-button:hover, body.nt-app a.nt-stat:hover, body.nt-app #main .card:hover, body.nt-auth .nt-btn-primary:hover { transform: none !important; }
  .nt-ripple-host { display: none !important; }
}

/* Collapsed rail: every item (plain links and collapsible group headers) gets the same centred box,
   so the icons line up in one column instead of zig-zagging. */
@media (min-width: 993px) {
  body.nt-sb-mini .nt-sidebar:not(:hover) .sidenav li { margin: 0 !important; padding: 0 !important; }
  body.nt-sb-mini .nt-sidebar:not(:hover) .sidenav li > a,
  body.nt-sb-mini .nt-sidebar:not(:hover) .sidenav li > a.collapsible-header {
    width: 56px !important; min-width: 56px !important; margin: 4px auto !important; padding: 0 !important;
    display: flex !important; align-items: center !important; justify-content: center !important; gap: 0 !important;
  }
  body.nt-sb-mini .nt-sidebar:not(:hover) .sidenav li > a > .material-icons {
    margin: 0 !important; width: 24px !important; flex: 0 0 24px !important; text-align: center !important; float: none !important;
  }
  body.nt-sb-mini .nt-sidebar:not(:hover) .sidenav li > a.collapsible-header::after { display: none !important; }
}

/* Materialize file buttons: the real <input type=file> must stay an invisible layer covering the
   button (some inputs also carry the .btn class, which the button styles would otherwise move). */
body.nt-app .file-field .btn { position: relative !important; overflow: hidden !important; }
body.nt-app .file-field .btn > span { pointer-events: none; }
body.nt-app .file-field input[type=file],
body.nt-app .file-field input[type=file].btn {
  position: absolute !important; top: 0 !important; right: 0 !important; bottom: 0 !important; left: 0 !important;
  width: 100% !important; height: 100% !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important;
  opacity: 0 !important; cursor: pointer !important; z-index: 3 !important; font-size: 20px !important;
  transform: none !important; box-shadow: none !important; background: transparent !important; border: 0 !important;
}

/* ===================== 17. Fix batch (feedback 13-19) ===================== */
/* (1) links inside buttons (e.g. sticky-label pager <button><a>) take the button's text colour */
body.nt-app .btn a, body.nt-app .btn a:hover, body.nt-app .btn a:visited { color: inherit !important; text-decoration: none; }
body.nt-app button.btn:disabled a, body.nt-app .btn[disabled] a { pointer-events: none; }
body.nt-app button.btn:disabled, body.nt-app .btn[disabled] { opacity: 1; color: var(--text-muted) !important; background: #e8e8f0 !important; }

/* (4) empty-state note under plain tables with no rows (shown/hidden purely by CSS) */
.nt-empty-note { display: none; margin: 8px 0 4px; padding: 22px 16px; border: 1px dashed var(--line-2); border-radius: 14px; background: var(--tint-1); color: var(--text-muted); text-align: center; font-size: 14px; }
.nt-empty-note i { vertical-align: middle; margin-right: 6px; color: var(--accent); }
table:not(:has(> tbody > tr)) + .nt-empty-note { display: block; }
/* page toolbars that sit in a card's title area (e.g. Print on Members Print) */
body.nt-app .card > .card-title.right, body.nt-app .card > .card-title:has(.btn) { float: none !important; display: flex; justify-content: flex-end; gap: 10px; padding: 14px 18px 0 !important; }

/* (5) modals: brand header everywhere + date/time labels always floated */
body.nt-app .modal .modal-header {
  background: var(--g-primary) !important; color: #fff !important; padding: 16px 24px !important; margin: 0 !important;
  border-radius: var(--r) var(--r) 0 0; box-shadow: inset 0 -3px 0 var(--hl-2);
}
body.nt-app .modal .modal-header h4, body.nt-app .modal .modal-header h5, body.nt-app .modal .modal-header * { color: #fff !important; margin: 0 !important; font-family: var(--head-font) !important; font-weight: 800; font-size: 20px; text-align: center; }
body.nt-app .input-field > label.force-active,
body.nt-app .input-field:has(> input[type=date]) > label,
body.nt-app .input-field:has(> input[type=time]) > label,
body.nt-app .input-field:has(> input[type=month]) > label,
body.nt-app .input-field:has(> input[type=datetime-local]) > label,
body.nt-app .input-field:has(> input[type=week]) > label,
body.nt-app .input-field:has(> input[placeholder]:not([placeholder=""]):not([placeholder=" "])) > label:not(.error) {
  position: absolute; top: 0 !important; font-size: 12px !important; line-height: 16px;
  transform: translateY(-15px) !important; transform-origin: 0 0 !important; background: none; padding: 0;
}
body.nt-app .input-field > input[type=date], body.nt-app .input-field > input[type=time], body.nt-app .input-field > input[type=month] { color: var(--heading); }

/* (6) DataTables controls / search labels never look like a card header */
body.nt-app .dataTables_wrapper .nt-card-head, body.nt-app .dataTables_filter.nt-card-head, body.nt-app .dataTables_length.nt-card-head { background: transparent !important; box-shadow: none !important; padding: 0 !important; margin: 0 !important; color: inherit !important; }

/* (7) dashboard ring cards: white cards with coloured rings */
body.nt-app a.nt-ring-card { background: #fff !important; color: var(--heading) !important; box-shadow: var(--sh-card) !important; }
body.nt-app a.nt-ring-card:hover { color: var(--heading) !important; box-shadow: var(--sh-card-hover) !important; }
.nt-ring-card.k-purple { --ring: #0f8a5f; --ring-2: #23a26f; --ring-track: #e3f4ec; --c: 15, 138, 95; }
.nt-ring-card.k-crimson { --ring: #d32f2f; --ring-2: #ef5350; --ring-track: #fbe5e5; --c: 211, 47, 47; }
.nt-ring-card h3 { color: var(--heading) !important; }
.nt-ring-card p { color: var(--text-muted) !important; }
.nt-ring { filter: drop-shadow(0 6px 14px rgba(var(--c), .28)) !important; }
.nt-ring::before { background: conic-gradient(var(--ring) 0, var(--ring-2) calc(var(--p) * 1%), var(--ring-track) 0) !important; }
.nt-ring-inner { background: #fff !important; box-shadow: inset 0 0 0 1px var(--line), 0 6px 18px -8px rgba(var(--c), .35) !important; }
.nt-ring-cap { color: var(--text-muted) !important; }
.nt-ring-cap::before { background: var(--ring) !important; box-shadow: 0 0 8px var(--ring) !important; }
.nt-ring b { color: var(--heading) !important; }
.nt-ring-foot { background: transparent !important; border-top: 1px solid var(--line); color: var(--ring) !important; }
.nt-ring-foot :is(i, svg) { background: rgba(var(--c), .12) !important; color: var(--ring) !important; box-shadow: none !important; }
/* (3) DataTables sets a fixed pixel width at init; when the page scrollbar appears afterwards the table ends up a few px
   wider than its card and Responsive hides the last column (e.g. a month on Paid/Unpaid). Keep tables fluid. */
body.nt-app table.dataTable { width: 100% !important; max-width: 100%; }
body.nt-app .card > .card-title.right .btn, body.nt-app .card > .card-title:has(.btn) .btn { background: var(--g-primary) !important; --c: var(--c-primary); }
/* (5) legacy #modal-header (public/assets/custom_respon.css, id + !important) and pink modal title rows */
body.nt-app .modal #modal-header, body.nt-app .modal .modal-header {
  background: var(--g-primary) !important; height: auto !important; padding: 16px 24px !important; border-radius: var(--r) var(--r) 0 0 !important;
  box-shadow: inset 0 -3px 0 var(--hl-2);
}
body.nt-app .modal #modal-header h4 { color: #fff !important; font-size: 20px !important; margin: 0 !important; }
body.nt-app .modal > .row[style*="background"]:first-child, body.nt-app .modal .modal-content > .row[style*="background"]:first-child { background: var(--g-primary) !important; box-shadow: inset 0 -3px 0 var(--hl-2); border-radius: var(--r) var(--r) 0 0; }
/* legacy page stylesheets that paint DataTables headers indigo */
body.nt-app #main table.dataTable thead th, body.nt-app #main table.dataTable thead td, body.nt-app #main table thead th { background-color: transparent !important; background-image: none !important; color: var(--navy-800) !important; }
body.nt-app #main tr[style*="linear-gradient"] th, body.nt-app #main thead[style*="linear-gradient"] th { color: #fff !important; }
/* (6) inline "Search: <input>" boxes used by some list pages -> same look as the DataTables search */
body.nt-app #main h5:has(> input) { float: none !important; width: 100% !important; display: flex; justify-content: flex-end; align-items: center; gap: 10px; margin: 0 0 10px !important; font-family: var(--nt-font) !important; font-size: 13.5px !important; font-weight: 500 !important; color: var(--text-muted) !important; text-align: right !important; }
body.nt-app #main h5:has(> input) > input {
  float: none !important; width: 240px !important; max-width: 60%; height: 40px !important; margin: 0 !important; padding: 0 14px 0 40px !important; box-sizing: border-box;
  border: 1px solid #d2d6da !important; border-radius: var(--r-sm) !important; box-shadow: none !important; color: var(--heading); font-size: 14px;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='%237b809a'%3E%3Cpath d='M15.5 14h-.79l-.28-.27A6.47 6.47 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z'/%3E%3C/svg%3E") no-repeat 12px center !important;
}
body.nt-app #main h5:has(> input) > input:focus { border-color: var(--accent) !important; box-shadow: 0 0 0 3px rgba(var(--c-primary), .15) !important; outline: none; }
body.nt-app #main table.dataTable > thead, body.nt-app #main table.dataTable > thead > tr:not([style*="gradient"]) { background-color: transparent !important; background-image: none !important; }
body.nt-app #main .section-data-tables .dataTables_wrapper table.dataTable thead th, body.nt-app #main .dataTables_wrapper table.dataTable thead th { background-color: transparent !important; background-image: none !important; color: var(--navy-800) !important; }
body.nt-app #main .section-data-tables .dataTables_wrapper table.dataTable thead th { padding: 13px 28px 13px 14px !important; }