/* ============================================================================
   nisGuard — Designer Interface / 2026
   Visual-only layer. No application logic is changed by this stylesheet.
   Direction: premium cybersecurity / AI product UI, deep navy glass surfaces,
   luminous edge sweeps, restrained motion and editorial typography.
   ============================================================================ */

@property --ng-edge-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

:root {
  --ng-ink-1000: #010713;
  --ng-ink-975: #020b1c;
  --ng-ink-950: #031026;
  --ng-ink-925: #06152e;
  --ng-ink-900: #081a37;
  --ng-ink-875: #0a2043;
  --ng-ink-850: #0c264e;
  --ng-ink-800: #102f5d;
  --ng-blue-700: #155ce8;
  --ng-blue-600: #2d76ff;
  --ng-blue-500: #4b8dff;
  --ng-blue-400: #6ca5ff;
  --ng-cyan-500: #2bc8ff;
  --ng-cyan-400: #5ee2ff;
  --ng-violet-500: #6a63ff;
  --ng-mint-500: #43e7bd;
  --ng-amber-500: #f6b94f;
  --ng-red-500: #ff6473;
  --ng-text-strong: #f4f8ff;
  --ng-text: #d9e6f7;
  --ng-text-soft: #a8bdd7;
  --ng-text-dim: #7690ae;
  --ng-line: rgba(140, 184, 245, 0.12);
  --ng-line-strong: rgba(151, 196, 255, 0.22);
  --ng-glass: rgba(7, 24, 53, 0.68);
  --ng-glass-strong: rgba(7, 25, 56, 0.86);
  --ng-glass-soft: rgba(12, 35, 72, 0.48);
  --ng-glass-hover: rgba(14, 42, 84, 0.70);
  --ng-shadow: 0 18px 52px rgba(0, 4, 15, 0.26), 0 2px 10px rgba(0, 8, 25, 0.14);
  --ng-shadow-hover: 0 28px 76px rgba(0, 4, 18, 0.42), 0 8px 26px rgba(35, 110, 255, 0.12);
  --ng-radius-xl: 24px;
  --ng-radius-lg: 18px;
  --ng-radius-md: 14px;
  --ng-radius-sm: 11px;
  --ng-sidebar-width: 252px;
  --ng-topbar-height: 70px;
  --ng-font-body: "Manrope", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ng-font-display: "Space Grotesk", "Manrope", sans-serif;
  --ng-ease: cubic-bezier(.22,.72,.22,1);

  /* Compatibility with the legacy stylesheet. */
  --eset-blue: var(--ng-ink-950);
  --eset-blue-dark: var(--ng-ink-1000);
  --eset-blue-sidebar: var(--ng-ink-950);
  --eset-main-bg: var(--ng-ink-975);
  --eset-card-bg: var(--ng-glass);
  --eset-border: var(--ng-line);
  --eset-primary: var(--ng-blue-600);
  --eset-primary-hover: var(--ng-blue-500);
  --eset-primary-glow: rgba(45, 118, 255, .24);
  --eset-text: var(--ng-text);
  --eset-text-muted: var(--ng-text-soft);
  --eset-radius: var(--ng-radius-lg);
  --eset-radius-md: var(--ng-radius-md);
  --eset-radius-sm: var(--ng-radius-sm);
  --eset-sidebar-width: var(--ng-sidebar-width);
  --eset-shadow: var(--ng-shadow);
  --eset-shadow-hover: var(--ng-shadow-hover);
  --eset-shadow-focus: 0 0 0 4px rgba(70, 138, 255, .14), 0 0 26px rgba(45, 118, 255, .12);
  --eset-success: #2dd5a6;
  --eset-success-dark: #38e2b6;
  --eset-success-soft: rgba(45, 213, 166, .14);
  --eset-success-softer: rgba(45, 213, 166, .08);
}

html {
  min-height: 100%;
  background: var(--ng-ink-1000);
  color-scheme: dark;
}

body {
  position: relative;
  min-height: 100vh;
  font-family: var(--ng-font-body) !important;
  font-size: 0.925rem;
  line-height: 1.58;
  color: var(--ng-text);
  background:
    radial-gradient(80rem 46rem at 84% -12%, rgba(35, 111, 255, .18), transparent 58%),
    radial-gradient(56rem 40rem at 22% 104%, rgba(46, 210, 255, .08), transparent 60%),
    linear-gradient(135deg, var(--ng-ink-975) 0%, #020a19 52%, #030d20 100%);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body::before,
body::after {
  content: "";
  position: fixed;
  pointer-events: none;
  z-index: 0;
}

body::before {
  inset: 0;
  opacity: .36;
  background-image:
    linear-gradient(rgba(126, 171, 239, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(126, 171, 239, .035) 1px, transparent 1px);
  background-size: 38px 38px;
  -webkit-mask-image: radial-gradient(circle at 66% 24%, #000 0%, rgba(0,0,0,.88) 35%, transparent 82%);
  mask-image: radial-gradient(circle at 66% 24%, #000 0%, rgba(0,0,0,.88) 35%, transparent 82%);
}

body::after {
  width: 38vw;
  height: 38vw;
  min-width: 420px;
  min-height: 420px;
  right: -11vw;
  top: 18vh;
  border: 1px solid rgba(83, 151, 255, .08);
  border-radius: 50%;
  box-shadow:
    0 0 0 44px rgba(56, 130, 255, .025),
    0 0 0 96px rgba(56, 130, 255, .017),
    0 0 100px rgba(43, 200, 255, .07);
  animation: ng-orbit-drift 18s ease-in-out infinite alternate;
}

::selection {
  background: rgba(72, 141, 255, .34);
  color: #fff;
}

* {
  scrollbar-width: thin;
  scrollbar-color: rgba(103, 157, 226, .34) rgba(5, 17, 38, .6);
}

*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: rgba(3, 13, 31, .72); }
*::-webkit-scrollbar-thumb {
  border: 3px solid rgba(3, 13, 31, .72);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(73, 139, 255, .6), rgba(63, 207, 255, .42));
}

h1, h2, h3, h4, h5, h6,
.page-title,
.nisguard-topbar-title,
.card-header,
.modal-title {
  font-family: var(--ng-font-display) !important;
}

a {
  color: #73aaff;
  text-decoration-color: rgba(115, 170, 255, .35);
  text-underline-offset: .18em;
}

a:hover { color: #a9ccff; }

:focus-visible {
  outline: 2px solid rgba(92, 162, 255, .88);
  outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   APP SHELL
   -------------------------------------------------------------------------- */
.nisguard-topbar {
  min-height: var(--ng-topbar-height) !important;
  padding: 0 clamp(1rem, 2vw, 1.8rem) !important;
  position: sticky !important;
  top: 0;
  z-index: 1040;
  background:
    linear-gradient(90deg, rgba(18, 53, 107, .72), rgba(4, 17, 42, .90) 42%, rgba(2, 10, 27, .94)),
    rgba(3, 14, 35, .9) !important;
  border-bottom: 1px solid rgba(118, 171, 240, .10) !important;
  box-shadow: 0 14px 38px rgba(0, 4, 16, .22) !important;
  backdrop-filter: blur(22px) saturate(140%);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
}

.nisguard-topbar::before {
  content: "";
  position: absolute;
  inset: auto 0 -1px 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(61, 146, 255, .12) 14%,
    rgba(100, 220, 255, .88) 35%,
    rgba(255,255,255,.86) 38%,
    rgba(82, 143, 255, .42) 46%,
    transparent 68%);
  background-size: 220% 100%;
  animation: ng-topbar-scan 8s linear infinite;
  opacity: .66;
}

.nisguard-topbar::after {
  content: "" !important;
  position: absolute !important;
  width: 320px !important;
  height: 90px !important;
  left: 18% !important;
  top: -54px !important;
  background: radial-gradient(circle, rgba(52, 132, 255, .20), transparent 70%) !important;
  filter: blur(16px);
  pointer-events: none;
}

.nisguard-topbar-logo-img {
  width: 39px !important;
  height: 39px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: transparent !important;
  filter: drop-shadow(0 0 12px rgba(55, 126, 255, .35)) drop-shadow(0 8px 18px rgba(0,0,0,.32));
  transition: transform .45s var(--ng-ease), filter .45s var(--ng-ease);
}

.nisguard-topbar > div:first-child:hover .nisguard-topbar-logo-img {
  transform: translateY(-1px) rotate(-2deg) scale(1.04);
  filter: drop-shadow(0 0 18px rgba(74, 148, 255, .58)) drop-shadow(0 10px 22px rgba(0,0,0,.36));
}

.nisguard-topbar-title {
  position: relative;
  font-size: 1.02rem !important;
  font-weight: 650 !important;
  letter-spacing: -.028em !important;
  color: #f6f9ff !important;
}

.nisguard-topbar-title::after {
  content: "SECURITY OPERATIONS" !important;
  display: block;
  margin-top: .18rem !important;
  font-family: var(--ng-font-body);
  font-size: .52rem !important;
  font-weight: 700 !important;
  line-height: 1;
  letter-spacing: .17em !important;
  color: rgba(122, 174, 240, .62) !important;
}

.nisguard-topbar-user .nisguard-topbar-dropdown-toggle {
  min-height: 41px !important;
  padding: .45rem .7rem .45rem .56rem !important;
  color: #cfe0f5 !important;
  border: 1px solid rgba(125, 174, 238, .12) !important;
  border-radius: 13px !important;
  background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.022)) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.025);
  font-size: .82rem !important;
  font-weight: 650 !important;
  backdrop-filter: blur(12px);
}

.nisguard-topbar-user .nisguard-topbar-dropdown-toggle:hover,
.nisguard-topbar-user .nisguard-topbar-dropdown-toggle:focus {
  color: #fff !important;
  border-color: rgba(95, 165, 255, .28) !important;
  background: linear-gradient(180deg, rgba(58, 124, 233, .17), rgba(19, 55, 112, .12)) !important;
  box-shadow: 0 0 24px rgba(45, 118, 255, .08), inset 0 1px rgba(255,255,255,.04) !important;
}

.nisguard-layout,
.nisguard-layout-body {
  min-height: calc(100vh - var(--ng-topbar-height)) !important;
  position: relative;
  z-index: 1;
  background: transparent !important;
}

.nisguard-sidebar {
  width: var(--ng-sidebar-width) !important;
  padding: 1.35rem .82rem 1.5rem !important;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(18rem 15rem at 15% 2%, rgba(42, 112, 232, .22), transparent 70%),
    linear-gradient(180deg, rgba(8, 28, 62, .90), rgba(3, 15, 35, .96) 74%, rgba(2, 10, 25, .98)) !important;
  border-right: 1px solid rgba(111, 164, 231, .09) !important;
  box-shadow: 18px 0 70px rgba(0, 5, 20, .18) !important;
  backdrop-filter: blur(18px);
}

.nisguard-sidebar::before {
  content: "SECURE CONSOLE" !important;
  display: flex !important;
  align-items: center;
  gap: .48rem;
  margin: .18rem .74rem 1rem !important;
  color: rgba(139, 176, 223, .55) !important;
  font-family: var(--ng-font-body);
  font-size: .57rem !important;
  font-weight: 800 !important;
  letter-spacing: .18em !important;
}

.nisguard-sidebar::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 270px;
  height: 270px;
  left: -160px;
  bottom: 8%;
  border: 1px solid rgba(70, 138, 255, .09);
  border-radius: 50%;
  box-shadow: 0 0 0 34px rgba(56, 126, 240, .025), 0 0 0 72px rgba(56, 126, 240, .018);
}

.nisguard-sidebar-nav { gap: .28rem !important; }

.nisguard-sidebar-link {
  position: relative;
  min-height: 44px !important;
  gap: .76rem !important;
  margin: 0 !important;
  padding: .65rem .78rem !important;
  color: rgba(186, 207, 232, .70) !important;
  border: 1px solid transparent !important;
  border-radius: 13px !important;
  font-size: .825rem !important;
  font-weight: 620 !important;
  letter-spacing: -.012em;
  overflow: hidden;
  transition: color .26s var(--ng-ease), border-color .26s var(--ng-ease), background .26s var(--ng-ease), transform .26s var(--ng-ease), box-shadow .26s var(--ng-ease) !important;
}

.nisguard-sidebar-link::before {
  content: "";
  position: absolute;
  width: 90px;
  height: 90px;
  left: -58px;
  top: 50%;
  transform: translateY(-50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(74, 145, 255, .34), transparent 70%);
  opacity: 0;
  transition: opacity .28s var(--ng-ease), transform .28s var(--ng-ease);
}

.nisguard-sidebar-link::after {
  content: "";
  position: absolute;
  left: -1px;
  top: 25%;
  bottom: 25%;
  width: 2px;
  border-radius: 3px;
  background: linear-gradient(180deg, transparent, #74e9ff 30%, #4b84ff 72%, transparent);
  box-shadow: 0 0 12px rgba(83, 169, 255, .8);
  opacity: 0;
  transform: scaleY(.4);
  transition: opacity .28s var(--ng-ease), transform .28s var(--ng-ease);
}

.nisguard-sidebar-link i {
  position: relative;
  z-index: 1;
  width: 1.3rem !important;
  font-size: 1rem !important;
  color: rgba(151, 184, 224, .70) !important;
  opacity: 1 !important;
  transition: color .26s var(--ng-ease), transform .26s var(--ng-ease), text-shadow .26s var(--ng-ease) !important;
}

.nisguard-sidebar-link span { position: relative; z-index: 1; }

.nisguard-sidebar-link:hover {
  color: #eef6ff !important;
  border-color: rgba(103, 160, 235, .10) !important;
  background: linear-gradient(90deg, rgba(55, 119, 219, .12), rgba(34, 79, 156, .035)) !important;
  transform: translateX(2px);
}

.nisguard-sidebar-link:hover::before { opacity: .64; transform: translateY(-50%) scale(1.12); }
.nisguard-sidebar-link:hover i { color: #83b7ff !important; transform: translateX(1px); text-shadow: 0 0 16px rgba(89, 158, 255, .36); }

.nisguard-sidebar-link.active {
  color: #fff !important;
  border-color: rgba(104, 168, 255, .22) !important;
  background:
    linear-gradient(100deg, rgba(48, 119, 235, .24), rgba(29, 78, 165, .09) 58%, rgba(23, 65, 138, .035)) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.03), 0 10px 30px rgba(0, 8, 25, .15) !important;
}

.nisguard-sidebar-link.active::before { opacity: .9; }
.nisguard-sidebar-link.active::after { opacity: 1; transform: scaleY(1); }
.nisguard-sidebar-link.active i { color: #8fc5ff !important; text-shadow: 0 0 18px rgba(74, 153, 255, .64); }

.nisguard-main {
  position: relative !important;
  isolation: isolate;
  overflow: clip;
  min-width: 0;
  background:
    radial-gradient(50rem 32rem at 91% 1%, rgba(29, 103, 224, .115), transparent 67%),
    radial-gradient(36rem 24rem at 48% 98%, rgba(32, 204, 255, .045), transparent 70%),
    linear-gradient(180deg, rgba(5, 18, 42, .76), rgba(2, 10, 25, .84)) !important;
}

.nisguard-main::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: -1 !important;
  opacity: .62 !important;
  background-image:
    linear-gradient(rgba(101, 153, 222, .026) 1px, transparent 1px),
    linear-gradient(90deg, rgba(101, 153, 222, .026) 1px, transparent 1px) !important;
  background-size: 34px 34px !important;
  -webkit-mask-image: linear-gradient(to bottom, #000, rgba(0,0,0,.55) 36rem, transparent 90%) !important;
  mask-image: linear-gradient(to bottom, #000, rgba(0,0,0,.55) 36rem, transparent 90%) !important;
}

.nisguard-main::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 560px;
  height: 560px;
  right: -290px;
  top: 180px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, rgba(63, 135, 255, .07), rgba(21, 78, 176, .025) 44%, transparent 70%);
  border: 1px solid rgba(75, 140, 232, .055);
  box-shadow: 0 0 0 60px rgba(63, 135, 255, .015), 0 0 0 118px rgba(63, 135, 255, .009);
}

.nisguard-main .container,
.nisguard-main-container {
  width: min(100%, 1510px) !important;
  max-width: 1510px !important;
  padding: clamp(1.45rem, 2.8vw, 2.8rem) clamp(1rem, 2.7vw, 2.7rem) clamp(2rem, 3vw, 3.6rem) !important;
}

.nisguard-footer {
  position: relative;
  z-index: 2;
  margin-top: 0 !important;
  color: rgba(145, 170, 202, .58) !important;
  background: rgba(1, 7, 19, .94) !important;
  border-top: 1px solid rgba(112, 164, 231, .08) !important;
  font-size: .73rem;
  letter-spacing: .02em;
}

.nisguard-footer .container { color: inherit !important; }

.nisguard-sidebar-toggle {
  width: 52px !important;
  height: 52px !important;
  color: #fff !important;
  border: 1px solid rgba(111, 175, 255, .25) !important;
  border-radius: 16px !important;
  background: linear-gradient(145deg, rgba(34, 100, 210, .92), rgba(12, 42, 93, .94)) !important;
  box-shadow: 0 18px 46px rgba(0, 6, 23, .48), 0 0 30px rgba(45, 118, 255, .14) !important;
  backdrop-filter: blur(18px);
}

/* --------------------------------------------------------------------------
   TYPOGRAPHY & PAGE RHYTHM
   -------------------------------------------------------------------------- */
.page-title {
  position: relative;
  display: inline-block;
  margin-bottom: 0;
  color: #f6f9ff !important;
  font-size: clamp(1.55rem, 2.2vw, 2.15rem) !important;
  font-weight: 590 !important;
  line-height: 1.12;
  letter-spacing: -.052em !important;
  text-wrap: balance;
}

.page-title::after {
  content: "";
  display: block;
  width: 34px;
  height: 2px;
  margin-top: .62rem;
  border-radius: 10px;
  background: linear-gradient(90deg, #67e7ff, #3f7fff 70%, transparent);
  box-shadow: 0 0 12px rgba(72, 153, 255, .32);
}

.page-subtitle {
  max-width: 780px;
  color: var(--ng-text-soft) !important;
  font-size: .89rem;
  line-height: 1.7;
}

.section-title { color: #f0f6ff !important; }
.text-muted, .text-secondary, .form-text { color: var(--ng-text-soft) !important; }
.text-dark { color: var(--ng-text) !important; }
.small { letter-spacing: -.005em; }

/* --------------------------------------------------------------------------
   GLASS SURFACES / CARDS
   -------------------------------------------------------------------------- */
.nisguard-card,
.nisguard-form-card,
.stat-card,
.knowledge-card,
.step-card,
.modal-content,
.dropdown-menu {
  position: relative;
  isolation: isolate;
  background:
    linear-gradient(145deg, rgba(15, 43, 84, .72), rgba(6, 22, 49, .68) 48%, rgba(5, 18, 41, .76)) !important;
  border: 1px solid rgba(131, 181, 246, .12) !important;
  box-shadow: var(--ng-shadow) !important;
  backdrop-filter: blur(22px) saturate(135%);
  -webkit-backdrop-filter: blur(22px) saturate(135%);
}

.nisguard-card,
.nisguard-form-card,
.stat-card,
.knowledge-card,
.step-card {
  border-radius: var(--ng-radius-lg) !important;
}

.nisguard-card,
.nisguard-form-card,
.stat-card,
.knowledge-card {
  overflow: hidden;
}

.nisguard-card::before,
.nisguard-form-card::before,
.stat-card::before,
.knowledge-card::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 190px;
  height: 150px;
  right: -70px;
  top: -70px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(72, 141, 255, .10), transparent 68%);
  filter: blur(4px);
  opacity: .72;
  transition: transform .6s var(--ng-ease), opacity .6s var(--ng-ease);
}

.nisguard-card::after,
.nisguard-form-card::after,
.stat-card::after,
.knowledge-card::after {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: 3;
  pointer-events: none;
  border-radius: inherit;
  padding: 1px;
  background: conic-gradient(
    from var(--ng-edge-angle),
    transparent 0 50%,
    rgba(69, 151, 255, .04) 54%,
    rgba(86, 224, 255, .50) 57%,
    rgba(255,255,255,.78) 58.1%,
    rgba(78, 133, 255, .34) 59.3%,
    transparent 63% 100%
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: .28;
  animation: ng-edge-rotate 11s linear infinite;
}

.nisguard-card:hover,
.nisguard-form-card:hover,
.stat-card:hover,
.knowledge-card:hover {
  border-color: rgba(119, 183, 255, .20) !important;
  box-shadow: var(--ng-shadow-hover) !important;
}

.nisguard-card:hover::before,
.nisguard-form-card:hover::before,
.stat-card:hover::before,
.knowledge-card:hover::before {
  transform: translate(-14px, 12px) scale(1.22);
  opacity: .95;
}

.nisguard-card:hover::after,
.nisguard-form-card:hover::after,
.stat-card:hover::after,
.knowledge-card:hover::after { opacity: .72; }

.nisguard-card .card-header,
.card-header {
  position: relative;
  z-index: 1;
  min-height: 58px;
  padding: 1rem 1.25rem !important;
  color: #edf5ff !important;
  font-size: .88rem;
  font-weight: 620 !important;
  letter-spacing: -.02em;
  background: linear-gradient(180deg, rgba(255,255,255,.028), rgba(255,255,255,.004)) !important;
  border-bottom: 1px solid rgba(131, 181, 246, .09) !important;
}

.nisguard-card .card-body,
.nisguard-form-card .card-body,
.stat-card .card-body,
.knowledge-card .card-body,
.step-card .card-body { position: relative; z-index: 1; color: var(--ng-text) !important; }

.card-footer {
  color: var(--ng-text);
  background: rgba(3, 15, 35, .24) !important;
  border-top: 1px solid rgba(131, 181, 246, .09) !important;
}

.bg-light,
.bg-light-subtle,
.bg-white {
  background-color: rgba(14, 38, 75, .36) !important;
}

.border,
.border-top,
.border-bottom,
.border-start,
.border-end { border-color: rgba(131, 181, 246, .11) !important; }

.rounded,
.rounded-3 { border-radius: var(--ng-radius-md) !important; }

/* KPI cards */
.stat-card {
  min-height: 132px;
  transform: translateZ(0);
  transition: transform .38s var(--ng-ease), box-shadow .38s var(--ng-ease), border-color .38s var(--ng-ease) !important;
}

.stat-card:hover { transform: translateY(-5px) !important; }

.stat-card .card-body { padding: 1.22rem 1.28rem !important; }
.stat-card .small { color: #91a9c5 !important; font-size: .71rem; font-weight: 650; letter-spacing: .055em; text-transform: uppercase; }
.stat-card h3 {
  margin-top: .22rem;
  color: #f6f9ff !important;
  font-family: var(--ng-font-display) !important;
  font-size: 2rem !important;
  font-weight: 540 !important;
  letter-spacing: -.06em;
}

.stat-card .fs-2 {
  width: 47px;
  height: 47px;
  display: grid;
  place-items: center;
  border-radius: 15px;
  font-size: 1.25rem !important;
  opacity: 1 !important;
  background: linear-gradient(145deg, rgba(69, 139, 255, .16), rgba(37, 99, 195, .04));
  border: 1px solid rgba(111, 174, 255, .13);
  box-shadow: inset 0 1px rgba(255,255,255,.025), 0 10px 22px rgba(0, 8, 25, .14);
}

.stat-card.border-primary .fs-2,
.stat-card.border-primary h3 { color: #75adff !important; }
.stat-card.border-warning .fs-2,
.stat-card.border-warning h3 { color: #ffc56a !important; }
.stat-card.border-info .fs-2,
.stat-card.border-info h3 { color: #67e2ff !important; }
.stat-card.border-success .fs-2,
.stat-card.border-success h3 { color: #63e5bf !important; }

.stat-card.border-primary::before { background: radial-gradient(circle, rgba(70, 138, 255, .19), transparent 69%); }
.stat-card.border-warning::before { background: radial-gradient(circle, rgba(246, 185, 79, .105), transparent 69%); }
.stat-card.border-info::before { background: radial-gradient(circle, rgba(43, 200, 255, .13), transparent 69%); }
.stat-card.border-success::before { background: radial-gradient(circle, rgba(67, 231, 189, .115), transparent 69%); }

/* News/activity items */
.news-item {
  position: relative;
  overflow: hidden;
  padding: 1rem 1.05rem !important;
  color: var(--ng-text) !important;
  border: 1px solid rgba(130, 182, 248, .09) !important;
  border-radius: 15px !important;
  background: linear-gradient(120deg, rgba(17, 47, 93, .46), rgba(8, 26, 57, .34)) !important;
  transition: transform .32s var(--ng-ease), border-color .32s var(--ng-ease), background .32s var(--ng-ease), box-shadow .32s var(--ng-ease);
}

.news-item::after {
  content: "";
  position: absolute;
  width: 120px;
  height: 220%;
  left: -160px;
  top: -60%;
  transform: rotate(20deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.07), transparent);
  transition: left .65s var(--ng-ease);
}

.news-item:hover {
  transform: translateX(4px);
  border-color: rgba(114, 180, 255, .19) !important;
  background: linear-gradient(120deg, rgba(22, 59, 113, .56), rgba(9, 31, 67, .43)) !important;
  box-shadow: 0 12px 28px rgba(0, 8, 25, .16);
}
.news-item:hover::after { left: 120%; }
.news-item h3 { color: #eaf3ff !important; }
.news-item .text-muted { color: #8da7c5 !important; }

/* --------------------------------------------------------------------------
   FORMS & CONTROLS
   -------------------------------------------------------------------------- */
.form-label {
  margin-bottom: .48rem;
  color: #cbdcf0 !important;
  font-size: .75rem;
  font-weight: 680 !important;
  letter-spacing: .015em;
}

.form-control,
.form-select,
.input-group-text,
#knowledge-search {
  min-height: 45px;
  color: #e7f0fc !important;
  caret-color: #69dfff;
  border: 1px solid rgba(129, 179, 244, .13) !important;
  border-radius: 12px !important;
  background-color: rgba(3, 16, 37, .58) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.015), 0 7px 22px rgba(0, 6, 20, .08);
  transition: border-color .25s var(--ng-ease), box-shadow .25s var(--ng-ease), background .25s var(--ng-ease), transform .25s var(--ng-ease) !important;
}

.form-control-sm,
.form-select-sm { min-height: 37px; }

textarea.form-control { min-height: 100px; }

.form-control::placeholder { color: rgba(137, 160, 191, .55) !important; }

.form-control:hover,
.form-select:hover,
#knowledge-search:hover {
  border-color: rgba(116, 176, 251, .21) !important;
  background-color: rgba(5, 20, 46, .70) !important;
}

.form-control:focus,
.form-select:focus,
#knowledge-search:focus {
  color: #fff !important;
  border-color: rgba(83, 159, 255, .62) !important;
  background-color: rgba(5, 22, 50, .83) !important;
  box-shadow: 0 0 0 4px rgba(52, 128, 255, .105), 0 0 26px rgba(45, 118, 255, .075), inset 0 1px rgba(255,255,255,.02) !important;
}

.form-select {
  --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%239bb6d6' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

.form-select option { color: #dbe8f7; background: #081b39; }

.form-check-input {
  width: 1.08em;
  height: 1.08em;
  background-color: rgba(5, 20, 45, .85);
  border-color: rgba(124, 176, 241, .28);
  box-shadow: none;
}

.form-check-input:checked {
  background-color: #3c83ff;
  border-color: #5c9bff;
  box-shadow: 0 0 12px rgba(64, 141, 255, .27);
}

.form-check-label { color: #c7d8ed !important; }
.input-group-text { color: #9fb8d5 !important; }

/* --------------------------------------------------------------------------
   BUTTONS
   -------------------------------------------------------------------------- */
.btn {
  position: relative;
  overflow: hidden;
  min-height: 40px;
  padding: .57rem .95rem;
  border-radius: 12px !important;
  font-size: .81rem;
  font-weight: 700 !important;
  letter-spacing: -.012em;
  transition: transform .26s var(--ng-ease), box-shadow .26s var(--ng-ease), border-color .26s var(--ng-ease), color .26s var(--ng-ease), background .26s var(--ng-ease) !important;
}
.btn-sm { min-height: 34px; padding: .4rem .68rem; font-size: .75rem; }

.btn::after {
  content: "";
  position: absolute;
  width: 72px;
  height: 180%;
  left: -100px;
  top: -40%;
  transform: rotate(20deg);
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent);
  transition: left .58s var(--ng-ease);
}
.btn:hover::after { left: calc(100% + 30px); }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(.985); }

.btn-primary {
  color: #fff !important;
  border-color: rgba(114, 176, 255, .33) !important;
  background:
    radial-gradient(circle at 20% 0%, rgba(117, 212, 255, .22), transparent 38%),
    linear-gradient(135deg, #2874f5 0%, #235fd7 52%, #1b4db5 100%) !important;
  box-shadow: 0 12px 28px rgba(24, 80, 184, .25), inset 0 1px rgba(255,255,255,.14) !important;
}

.btn-primary:hover,
.btn-primary:focus {
  border-color: rgba(129, 194, 255, .58) !important;
  background:
    radial-gradient(circle at 20% 0%, rgba(130, 222, 255, .30), transparent 40%),
    linear-gradient(135deg, #3484ff 0%, #2b6ce9 52%, #2157c3 100%) !important;
  box-shadow: 0 16px 36px rgba(30, 99, 220, .34), 0 0 28px rgba(55, 139, 255, .12), inset 0 1px rgba(255,255,255,.17) !important;
}

.btn-success {
  color: #eafff8 !important;
  border-color: rgba(65, 229, 182, .32) !important;
  background: linear-gradient(135deg, #168d72, #11725d) !important;
  box-shadow: 0 12px 28px rgba(13, 106, 86, .20) !important;
}
.btn-success:hover { background: linear-gradient(135deg, #1da583, #15816a) !important; box-shadow: 0 15px 34px rgba(18, 143, 113, .25) !important; }

.btn-outline-primary {
  color: #8dbbff !important;
  border-color: rgba(92, 157, 246, .34) !important;
  background: rgba(32, 82, 160, .08) !important;
}
.btn-outline-primary:hover { color: #eaf4ff !important; border-color: rgba(103, 174, 255, .50) !important; background: rgba(45, 112, 220, .17) !important; box-shadow: 0 0 24px rgba(42, 114, 236, .075); }

.btn-outline-secondary,
.btn-secondary {
  color: #b7cae0 !important;
  border-color: rgba(133, 178, 235, .16) !important;
  background: rgba(18, 42, 78, .34) !important;
}
.btn-outline-secondary:hover,
.btn-secondary:hover { color: #f0f6ff !important; border-color: rgba(133, 187, 253, .28) !important; background: rgba(31, 66, 119, .46) !important; }

.btn-outline-danger { color: #ff8b98 !important; border-color: rgba(255, 100, 115, .28) !important; background: rgba(136, 29, 45, .08) !important; }
.btn-outline-danger:hover { color: #fff !important; background: rgba(186, 44, 62, .30) !important; border-color: rgba(255, 117, 129, .44) !important; }

.btn-link { color: #79acfb; }

/* --------------------------------------------------------------------------
   TABLES
   -------------------------------------------------------------------------- */
.table-responsive { border-radius: inherit; }
.table { --bs-table-bg: transparent; --bs-table-color: var(--ng-text); --bs-table-hover-bg: transparent; color: var(--ng-text) !important; margin-bottom: 0; }
.table > :not(caption) > * > * { color: var(--ng-text); background: transparent !important; border-bottom-color: rgba(130, 181, 246, .075) !important; box-shadow: none !important; }

.incidents-table thead.nisguard-table-head th,
.nisguard-table-head th,
.table thead th {
  padding: .95rem 1rem !important;
  color: #839cba !important;
  border-bottom: 1px solid rgba(135, 187, 250, .11) !important;
  background: rgba(4, 18, 42, .36) !important;
  font-size: .64rem !important;
  font-weight: 780 !important;
  letter-spacing: .105em !important;
  text-transform: uppercase;
}

.table tbody td,
.incidents-table tbody td {
  padding: .96rem 1rem !important;
  color: #cbdcee !important;
  font-size: .82rem;
  vertical-align: middle;
  transition: background .22s var(--ng-ease), color .22s var(--ng-ease);
}

.table-hover > tbody > tr:hover > * { color: #eef6ff !important; background: rgba(30, 76, 148, .12) !important; }
.table tbody tr { transition: background .24s var(--ng-ease); }
.table tbody tr:hover { background: linear-gradient(90deg, rgba(42, 107, 215, .07), rgba(38, 94, 183, .02)); }

/* --------------------------------------------------------------------------
   BADGES / ALERTS / STATUS
   -------------------------------------------------------------------------- */
.badge {
  padding: .38rem .58rem !important;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 999px !important;
  font-size: .63rem !important;
  font-weight: 750 !important;
  letter-spacing: .02em;
  box-shadow: inset 0 1px rgba(255,255,255,.03);
}
.bg-primary { background: rgba(44, 116, 245, .72) !important; }
.bg-success { background: rgba(27, 151, 117, .72) !important; }
.bg-warning { background: rgba(182, 126, 39, .70) !important; color: #fff4dd !important; }
.bg-danger { background: rgba(188, 60, 73, .72) !important; }
.bg-info { background: rgba(35, 143, 180, .67) !important; }
.bg-secondary { background: rgba(87, 110, 141, .60) !important; }

.alert,
.nisguard-alert {
  color: #d8e6f7 !important;
  border: 1px solid rgba(123, 180, 250, .14) !important;
  border-radius: 14px !important;
  background: rgba(14, 43, 89, .42) !important;
  box-shadow: inset 3px 0 rgba(74, 148, 255, .54);
}
.alert-success { background: rgba(20, 112, 89, .18) !important; border-color: rgba(60, 216, 171, .16) !important; box-shadow: inset 3px 0 rgba(65, 225, 179, .64); }
.alert-danger { background: rgba(119, 30, 43, .20) !important; border-color: rgba(255, 103, 119, .16) !important; box-shadow: inset 3px 0 rgba(255, 102, 118, .65); }
.alert-warning { background: rgba(127, 83, 24, .20) !important; border-color: rgba(247, 187, 80, .15) !important; box-shadow: inset 3px 0 rgba(247, 187, 80, .65); }
.alert-info { background: rgba(20, 86, 126, .20) !important; border-color: rgba(76, 199, 246, .16) !important; box-shadow: inset 3px 0 rgba(77, 205, 255, .64); }
.alert-secondary { background: rgba(59, 78, 105, .18) !important; border-color: rgba(150, 180, 219, .11) !important; box-shadow: inset 3px 0 rgba(149, 181, 224, .42); }

.text-primary { color: #72aaff !important; }
.text-info { color: #62dfff !important; }
.text-success { color: #65e0ba !important; }
.text-warning { color: #ffc66f !important; }
.text-danger { color: #ff8491 !important; }

/* Dashboard time pill */
#dashboard-time {
  position: relative;
  display: inline-flex !important;
  align-items: center;
  gap: .48rem;
  min-height: 36px;
  padding: .42rem .72rem !important;
  color: #9eb4ce !important;
  border: 1px solid rgba(128, 178, 242, .12) !important;
  border-radius: 999px !important;
  background: rgba(8, 28, 61, .48) !important;
  box-shadow: 0 10px 26px rgba(0, 7, 24, .12) !important;
  backdrop-filter: blur(12px);
  font-size: .69rem !important;
  font-weight: 650 !important;
}
#dashboard-time::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #54e4bd; box-shadow: 0 0 0 4px rgba(84,228,189,.08), 0 0 14px rgba(84,228,189,.5); animation: ng-status-pulse 2.8s ease-in-out infinite; }

/* --------------------------------------------------------------------------
   WIZARD / COURSE CREATOR / KNOWLEDGE
   -------------------------------------------------------------------------- */
.report-wizard-progress {
  position: relative;
  padding: 1.25rem 1.5rem !important;
  border-bottom: 1px solid rgba(129, 179, 244, .10) !important;
  background: linear-gradient(180deg, rgba(16, 46, 91, .39), rgba(7, 25, 55, .24)) !important;
}

.report-wizard-steps { max-width: 620px !important; }

.report-wizard-step {
  position: relative;
  padding: .42rem .64rem !important;
  border-radius: 13px !important;
  transition: background .25s var(--ng-ease), transform .25s var(--ng-ease) !important;
}
.report-wizard-step:hover { background: rgba(53, 116, 214, .10) !important; transform: translateY(-1px); }

.report-wizard-step-num {
  width: 2.35rem !important;
  height: 2.35rem !important;
  color: #7e97b5 !important;
  background: rgba(6, 24, 54, .82) !important;
  border: 1px solid rgba(131, 180, 243, .13);
  box-shadow: inset 0 1px rgba(255,255,255,.02);
}
.report-wizard-step.active .report-wizard-step-num,
.report-wizard-step.completed .report-wizard-step-num {
  color: #fff !important;
  border-color: rgba(116, 189, 255, .44);
  background: linear-gradient(145deg, #3c85ff, #205dcc) !important;
  box-shadow: 0 0 0 5px rgba(57, 131, 255, .08), 0 0 22px rgba(58, 137, 255, .20) !important;
}
.report-wizard-step-label { color: #7892b1 !important; font-size: .67rem !important; font-weight: 700 !important; }
.report-wizard-step.active .report-wizard-step-label { color: #a8c9f5 !important; }
.report-wizard-pane { animation: ng-pane-in .38s var(--ng-ease) !important; }

.step-card { overflow: visible !important; }
.step-card-header,
.step-card-body {
  color: var(--ng-text) !important;
  border-color: rgba(127, 179, 243, .10) !important;
  background: transparent !important;
}
.step-card-header { background: rgba(17, 45, 86, .28) !important; }
.step-card .form-control,
.step-card .form-select { color: #e5effd !important; background: rgba(3, 17, 39, .55) !important; border-color: rgba(129,179,244,.13) !important; }
.step-drag-handle { color: #6484aa !important; }

.step-image-dropzone {
  border: 1px dashed rgba(107, 172, 255, .28) !important;
  background: radial-gradient(circle at 50% 0%, rgba(49, 124, 236, .10), transparent 60%), rgba(6, 24, 53, .42) !important;
  transition: border-color .25s var(--ng-ease), background .25s var(--ng-ease), box-shadow .25s var(--ng-ease) !important;
}
.step-image-dropzone:hover { border-color: rgba(105, 185, 255, .48) !important; background: radial-gradient(circle at 50% 0%, rgba(49, 124, 236, .16), transparent 60%), rgba(8, 29, 63, .54) !important; box-shadow: inset 0 0 28px rgba(40, 112, 225, .06); }

.knowledge-card { transition: transform .38s var(--ng-ease), box-shadow .38s var(--ng-ease), border-color .38s var(--ng-ease) !important; }
.knowledge-card:hover { transform: translateY(-6px) !important; border-color: rgba(112, 182, 255, .23) !important; }
.knowledge-card .card-title { color: #eef5ff !important; font-weight: 620 !important; }
.knowledge-card .card-text { color: #93a9c4 !important; }
.knowledge-card__icon { border-color: rgba(134, 185, 246, .14) !important; border-radius: 14px !important; box-shadow: 0 10px 24px rgba(0, 7, 23, .15); }
.knowledge-card__icon--placeholder { color: #7ca8df !important; background: rgba(28, 76, 146, .20) !important; }
.knowledge-card__progress { height: 6px !important; background: rgba(79, 121, 172, .16) !important; overflow: hidden; }
.knowledge-card__progress .progress-bar { background: linear-gradient(90deg, #2e73ef, #56d9ff) !important; box-shadow: 0 0 14px rgba(57, 151, 255, .34); }

.progress { background-color: rgba(83, 123, 173, .15) !important; }
.progress-bar { background: linear-gradient(90deg, #2d73f2, #50d9ff) !important; }

/* Course player */
.course-view-page {
  top: var(--ng-topbar-height) !important;
  left: var(--ng-sidebar-width) !important;
  min-height: calc(100vh - var(--ng-topbar-height)) !important;
  background:
    radial-gradient(36rem 24rem at 80% 0%, rgba(41, 110, 224, .10), transparent 66%),
    linear-gradient(180deg, #04132d, #020a19) !important;
}
.course-view-layout { min-height: calc(100vh - var(--ng-topbar-height)) !important; }
.course-view-content { color: var(--ng-text); }
.course-view-title { color: #f1f6ff !important; }
.course-view-sidebar {
  color: var(--ng-text);
  background: rgba(4, 18, 41, .86) !important;
  border-left-color: rgba(128, 179, 242, .10) !important;
  box-shadow: -20px 0 58px rgba(0, 4, 17, .17) !important;
  backdrop-filter: blur(18px);
}
.course-view-step-item { color: #839dbb !important; border: 1px solid transparent; }
.course-view-step-item:hover { color: #dceafa !important; background: rgba(34, 82, 155, .14) !important; }
.course-view-step-item.current { color: #b8d5ff !important; border-color: rgba(89, 157, 245, .15); background: rgba(43, 104, 205, .16) !important; }
.course-view-step-item.done { color: #78d9bb !important; background: rgba(25, 139, 107, .10) !important; }
.course-view-step-num { color: #7892b1 !important; background: rgba(19, 48, 89, .72) !important; }
.course-view-step-item.current .course-view-step-num { color: #fff !important; background: linear-gradient(145deg, #3c84ff, #205dcc) !important; box-shadow: 0 0 16px rgba(60, 137, 255, .18); }
.course-view-step-item.done .course-view-step-num { color: #e9fff8 !important; background: #16896d !important; }
.course-step-text, #course-player-body .form-check-label { color: #d5e3f4 !important; }

.course-view-step-body .quiz-question-box {
  color: var(--ng-text);
  border: 1px solid rgba(104, 171, 255, .17) !important;
  border-left: 2px solid #4f9aff !important;
  background: linear-gradient(120deg, rgba(30, 82, 166, .18), rgba(8, 28, 59, .28)) !important;
  box-shadow: 0 16px 38px rgba(0, 7, 23, .10);
}
.course-view-step-body .quiz-question-text { color: #eef5ff !important; }
.course-view-step-body .quiz-option-card {
  color: var(--ng-text);
  border: 1px solid rgba(130, 180, 244, .13) !important;
  background: rgba(7, 26, 57, .55) !important;
}
.course-view-step-body .quiz-option-card:hover { border-color: rgba(96, 168, 255, .28) !important; background: rgba(18, 51, 101, .57) !important; }
.course-view-step-body .quiz-option-card--selected,
.course-view-step-body .quiz-option-card:has(.quiz-option-input:checked) { border-color: rgba(84, 157, 255, .58) !important; background: rgba(35, 91, 183, .21) !important; box-shadow: 0 0 0 3px rgba(53, 126, 246, .075) !important; }
.course-view-step-body .quiz-option-letter { color: #89a2c0 !important; background: rgba(44, 79, 124, .54) !important; }
.course-view-step-body .quiz-option-text { color: #cfdeef !important; }

/* --------------------------------------------------------------------------
   DROPDOWNS / MODALS
   -------------------------------------------------------------------------- */
.dropdown-menu {
  padding: .48rem !important;
  border-radius: 15px !important;
  color: var(--ng-text) !important;
  background: linear-gradient(145deg, rgba(11, 35, 75, .96), rgba(4, 18, 42, .97)) !important;
  border-color: rgba(128, 184, 250, .17) !important;
  box-shadow: 0 28px 70px rgba(0, 3, 13, .48), inset 0 1px rgba(255,255,255,.02) !important;
}
.dropdown-item,
.dropdown-item-text { color: #cbdcf0 !important; border-radius: 10px !important; font-size: .79rem; }
.dropdown-item:hover,
.dropdown-item:focus { color: #fff !important; background: rgba(57, 119, 221, .18) !important; }
.dropdown-divider { border-color: rgba(125, 174, 236, .11) !important; }

.modal { --bs-modal-bg: transparent; }
.modal-backdrop.show { opacity: .72; backdrop-filter: blur(6px); }
.modal-content {
  border-radius: 20px !important;
  background: linear-gradient(145deg, rgba(10, 33, 71, .96), rgba(4, 17, 40, .98)) !important;
  border-color: rgba(126, 184, 251, .18) !important;
  box-shadow: 0 42px 110px rgba(0, 3, 15, .62), 0 0 60px rgba(42, 115, 235, .07) !important;
  overflow: hidden;
}
.modal-header,
.modal-footer { border-color: rgba(130, 181, 246, .10) !important; }
.modal-title { color: #f2f7ff !important; font-weight: 600 !important; }
.modal-body { color: #cbdcf0 !important; }
.btn-close { filter: invert(1) grayscale(1) brightness(1.8); opacity: .66; }
.btn-close:hover { opacity: 1; }

/* --------------------------------------------------------------------------
   AUTHENTICATION
   -------------------------------------------------------------------------- */
.nisguard-auth-body {
  color: var(--ng-text);
  background: #020916 !important;
}
.nisguard-auth-bg {
  background:
    radial-gradient(46rem 46rem at 18% 22%, rgba(46, 111, 233, .22), transparent 68%),
    radial-gradient(38rem 38rem at 82% 78%, rgba(36, 205, 255, .10), transparent 68%),
    linear-gradient(145deg, #020815 0%, #041329 50%, #020914 100%) !important;
}
.nisguard-auth-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .33;
  background-image: linear-gradient(rgba(112, 164, 232, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(112, 164, 232, .045) 1px, transparent 1px);
  background-size: 42px 42px;
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000, transparent 78%);
}
.nisguard-auth-bg__orb { filter: blur(85px) !important; opacity: .5 !important; }
.nisguard-auth-bg__orb--1 { background: radial-gradient(circle, rgba(54, 125, 255, .32), transparent 68%) !important; }
.nisguard-auth-bg__orb--2 { background: radial-gradient(circle, rgba(34, 199, 255, .18), transparent 68%) !important; }
.nisguard-auth-bg__orb--3 { background: radial-gradient(circle, rgba(101, 78, 255, .15), transparent 68%) !important; }
.nisguard-auth-card {
  max-width: min(92vw, 700px) !important;
  border-radius: 24px !important;
  background: linear-gradient(145deg, rgba(14, 42, 84, .77), rgba(5, 19, 44, .82)) !important;
  border: 1px solid rgba(130, 186, 253, .16) !important;
  box-shadow: 0 45px 120px rgba(0, 3, 16, .50), 0 0 64px rgba(44, 117, 234, .08) !important;
  backdrop-filter: blur(28px) saturate(145%);
}
.nisguard-auth-logo {
  width: 72px !important;
  height: 72px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  filter: drop-shadow(0 0 22px rgba(52, 126, 255, .30));
}

/* --------------------------------------------------------------------------
   RESPONSIVE / MOTION
   -------------------------------------------------------------------------- */
@keyframes ng-edge-rotate { to { --ng-edge-angle: 360deg; } }
@keyframes ng-topbar-scan { from { background-position: 110% 0; } to { background-position: -110% 0; } }
@keyframes ng-orbit-drift { from { transform: translate3d(0,0,0) scale(1); opacity: .72; } to { transform: translate3d(-26px,20px,0) scale(1.04); opacity: 1; } }
@keyframes ng-status-pulse { 0%,100% { opacity: .72; transform: scale(.92); } 50% { opacity: 1; transform: scale(1.12); } }
@keyframes ng-pane-in { from { opacity: 0; transform: translateY(7px); filter: blur(2px); } to { opacity: 1; transform: translateY(0); filter: blur(0); } }

@media (max-width: 1199.98px) {
  :root { --ng-sidebar-width: 236px; }
  .nisguard-main .container,
  .nisguard-main-container { padding-left: 1.35rem !important; padding-right: 1.35rem !important; }
}

@media (max-width: 991.98px) {
  :root { --ng-topbar-height: 64px; }
  .nisguard-topbar { min-height: 64px !important; }
  .nisguard-sidebar {
    position: fixed !important;
    top: var(--ng-topbar-height) !important;
    bottom: 0 !important;
    left: 0 !important;
    z-index: 1020 !important;
    border-radius: 0 20px 20px 0 !important;
    box-shadow: 25px 0 80px rgba(0, 4, 18, .48) !important;
  }
  .nisguard-sidebar-backdrop { top: var(--ng-topbar-height) !important; background: rgba(0, 5, 17, .68) !important; backdrop-filter: blur(6px) !important; }
  .course-view-page { left: 0 !important; top: var(--ng-topbar-height) !important; }
  .nisguard-topbar-title::after { display: none !important; }
  body::after { display: none; }
}

@media (max-width: 767.98px) {
  .page-title { font-size: 1.55rem !important; }
  .nisguard-main .container,
  .nisguard-main-container { padding: 1.3rem .92rem 2.2rem !important; }
  .nisguard-card,
  .nisguard-form-card,
  .stat-card,
  .knowledge-card { border-radius: 16px !important; }
  .report-wizard-progress { padding: 1rem .6rem !important; }
  .report-wizard-step { padding: .34rem .2rem !important; }
  .report-wizard-step-label { font-size: .59rem !important; }
  .report-wizard-step-num { width: 2rem !important; height: 2rem !important; }
  .course-view-content { padding: 1.25rem 1rem 2rem !important; }
  .course-view-sidebar { width: 230px !important; }
}

@media (max-width: 575.98px) {
  .nisguard-topbar { padding: 0 .85rem !important; }
  .nisguard-topbar-user .nisguard-topbar-dropdown-toggle { font-size: 0 !important; width: 41px; justify-content: center; }
  .nisguard-topbar-user .nisguard-topbar-dropdown-toggle i { margin-right: 0 !important; font-size: 1rem; }
  .nisguard-topbar-title { font-size: .92rem !important; }
  .stat-card { min-height: 112px; }
  .stat-card h3 { font-size: 1.7rem !important; }
  .modal-dialog { margin: .65rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}