/* IntelScope UI Kit v2.0 — SASLAB Design System */
@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap");

:root {
  --is-navy-950: #091126;
  --is-navy-900: #111a3a;
  --is-navy-800: #1a2550;
  --is-violet: #7357ff;
  --is-violet-dark: #5b3ff2;
  --is-cyan: #28c7d9;
  --is-coral: #ff6b6b;
  --is-amber: #ffbd4a;
  --is-green: #28c796;
  --is-canvas: #f4f6fb;
  --is-surface: #ffffff;
  --is-line: #e5e9f2;
  --is-text: #17213d;
  --is-muted: #75809b;
  --is-radius-sm: 10px;
  --is-radius: 16px;
  --is-radius-lg: 24px;
  --is-shadow-sm: 0 4px 14px rgba(18, 29, 67, .06);
  --is-shadow: 0 14px 36px rgba(18, 29, 67, .10);
  --is-gradient: linear-gradient(135deg, var(--is-violet) 0%, #537cff 52%, var(--is-cyan) 100%);

  --vz-primary: var(--is-violet);
  --vz-primary-rgb: 115, 87, 255;
  --vz-success: var(--is-green);
  --vz-info: var(--is-cyan);
  --vz-warning: var(--is-amber);
  --vz-danger: var(--is-coral);
  --vz-body-bg: var(--is-canvas);
  --vz-body-color: var(--is-text);
  --vz-body-font-family: "Manrope", "Poppins", sans-serif;
  --vz-vertical-menu-width: 272px;
  --vz-header-bg: rgba(255, 255, 255, .94);
  --vz-header-border: rgba(226, 231, 242, .9);
  --vz-header-item-color: var(--is-text);
  --vz-header-item-sub-color: var(--is-muted);
  --vz-topbar-user-bg: #f2f4fa;
  --vz-footer-bg: transparent;
  --vz-footer-color: var(--is-muted);
  --vz-vertical-menu-bg: linear-gradient(180deg, #121b3c 0%, #0b132c 100%);
  --vz-vertical-menu-border: rgba(255, 255, 255, .06);
  --vz-vertical-menu-item-color: #aab5d4;
  --vz-vertical-menu-item-hover-color: #ffffff;
  --vz-vertical-menu-item-active-color: #ffffff;
  --vz-vertical-menu-sub-item-color: #8f9abb;
  --vz-vertical-menu-sub-item-hover-color: #ffffff;
  --vz-vertical-menu-sub-item-active-color: #ffffff;
  --vz-vertical-menu-title-color: #667398;
  --vz-vertical-menu-box-shadow: 8px 0 28px rgba(9, 17, 38, .12);
}

html { scroll-behavior: smooth; }

body {
  font-family: "Manrope", "Poppins", sans-serif !important;
  color: var(--is-text);
  background:
    radial-gradient(circle at 88% 4%, rgba(115, 87, 255, .08), transparent 28rem),
    var(--is-canvas);
  letter-spacing: -.01em;
}

::selection { color: #fff; background: var(--is-violet); }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #c8cee0; border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: #9da7c2; }

a { transition: color .2s ease, opacity .2s ease; }
h1, h2, h3, h4, h5, h6 { color: var(--is-text); letter-spacing: -.035em; }
.text-primary { color: var(--is-violet) !important; }
.text-muted { color: var(--is-muted) !important; }

/* App shell */
.navbar-menu {
  border: 0;
  overflow: hidden;
}

.navbar-menu::before,
.navbar-menu::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.navbar-menu::before {
  width: 210px;
  height: 210px;
  top: -90px;
  right: -105px;
  background: rgba(115, 87, 255, .20);
  filter: blur(1px);
}

.navbar-menu::after {
  width: 160px;
  height: 160px;
  left: -95px;
  bottom: 40px;
  background: rgba(40, 199, 217, .10);
}

.navbar-brand-box {
  height: 82px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid rgba(255, 255, 255, .07);
  position: relative;
  z-index: 1;
}

.navbar-brand-box img { max-height: 50px !important; filter: brightness(0) invert(1); }
.navbar-menu .navbar-nav { padding: 16px 13px 20px; position: relative; z-index: 1; }
.navbar-menu .menu-title { padding: 18px 14px 8px; font-size: 10px; font-weight: 800; letter-spacing: .14em; }

.navbar-menu .navbar-nav .nav-link {
  min-height: 46px;
  margin: 2px 0;
  padding: 11px 14px;
  border-radius: 12px;
  font-family: "Manrope", sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: -.005em;
  transition: background .2s ease, color .2s ease, transform .2s ease;
}

.navbar-menu .navbar-nav .nav-link:hover {
  background: rgba(255, 255, 255, .07);
  transform: translateX(2px);
}

.navbar-menu .navbar-nav .nav-link.active,
.navbar-menu .navbar-nav .nav-link[aria-expanded="true"] {
  background: linear-gradient(100deg, rgba(115, 87, 255, .95), rgba(77, 124, 255, .82));
  box-shadow: 0 8px 22px rgba(91, 63, 242, .30);
}

.navbar-menu .navbar-nav .nav-link i { font-size: 19px; opacity: .92; }
.navbar-menu .navbar-nav .nav-sm { padding: 4px 0 7px 17px; }
.navbar-menu .navbar-nav .nav-sm .nav-link { min-height: 38px; padding: 8px 14px !important; margin: 1px 0; border-radius: 9px; font-size: 12.5px; }
.navbar-menu .navbar-nav .nav-sm .nav-link:before { display: none; }
.navbar-menu .navbar-nav .nav-sm .nav-link.active { color: #fff; background: rgba(115, 87, 255, .20); }

#page-topbar {
  min-height: 72px;
  border-bottom: 1px solid var(--is-line);
  box-shadow: 0 5px 24px rgba(18, 29, 67, .04);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.navbar-header { height: 72px; padding-inline: 22px; }
.header-item { height: 72px; }
.topbar-user { margin: 10px 0; border-radius: 13px; }
.topbar-user .btn { border-radius: 13px; padding: 8px 12px; }
.header-profile-user { width: 38px; height: 38px; border: 3px solid #fff; box-shadow: 0 0 0 2px rgba(115, 87, 255, .20); }
.navbar-header .user-name-text { font-weight: 750 !important; }
.navbar-header .user-name-sub-text { font-weight: 600; }

.page-content { padding: 102px 22px 78px; }
.page-title-box { padding: 15px 22px; margin: -22px -22px 24px; background: rgba(255, 255, 255, .7); box-shadow: none; border-bottom: 1px solid var(--is-line); }
.page-title-box h4 { font-size: 17px !important; letter-spacing: -.02em; text-transform: none; }
.breadcrumb-item { font-size: 12px; font-weight: 600; }
.footer { border-top: 1px solid rgba(229, 233, 242, .8); font-size: 12px; }

/* Surfaces */
.card {
  border: 1px solid rgba(225, 230, 241, .92) !important;
  border-radius: var(--is-radius) !important;
  background: var(--is-surface);
  box-shadow: var(--is-shadow-sm);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.card:hover { border-color: rgba(115, 87, 255, .20) !important; box-shadow: var(--is-shadow); }
.card-header { min-height: 58px; padding: 16px 20px; border-color: var(--is-line); background: transparent; }
.card-header:first-child { border-radius: var(--is-radius) var(--is-radius) 0 0; }
.card-body { padding: 20px; }
.card-title { font-weight: 800; letter-spacing: -.025em; }

.avatar-title { background: linear-gradient(135deg, rgba(115, 87, 255, .15), rgba(40, 199, 217, .16)); color: var(--is-violet); }
.avatar-sm, .avatar-md, .avatar-lg { filter: saturate(.96); }

/* Buttons */
.btn {
  border-radius: 10px;
  font-family: "Manrope", sans-serif;
  font-weight: 700;
  letter-spacing: -.01em;
  box-shadow: none;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}

.btn:hover:not(:disabled) { transform: translateY(-1px); }
.btn-primary, .btn-success {
  border-color: transparent !important;
  background: var(--is-gradient) !important;
  color: #fff !important;
  box-shadow: 0 8px 18px rgba(91, 63, 242, .20);
}
.btn-primary:hover, .btn-success:hover { box-shadow: 0 11px 24px rgba(91, 63, 242, .30); }
.btn-secondary { background: var(--is-navy-800); border-color: var(--is-navy-800); }
.btn-light { color: var(--is-text); background: #f1f3f8; border-color: #e7eaf2; }
.btn-danger { background: var(--is-coral); border-color: var(--is-coral); }
.btn-outline-primary { color: var(--is-violet); border-color: rgba(115, 87, 255, .42); }
.btn-outline-primary:hover { background: var(--is-violet); border-color: var(--is-violet); }
.btn-icon { border-radius: 10px !important; }

/* Forms */
.form-label { margin-bottom: 7px; color: #39435e; font-size: 12px; font-weight: 800; }
.form-control, .form-select, .input-group-text {
  min-height: 44px;
  border: 1px solid #dfe4ee;
  border-radius: 10px;
  color: var(--is-text);
  background-color: #fbfcfe;
  font-size: 13px;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.form-control:focus, .form-select:focus {
  border-color: rgba(115, 87, 255, .7);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(115, 87, 255, .10);
}
.form-check-input:checked { background-color: var(--is-violet); border-color: var(--is-violet); }
.ng-select .ng-select-container { min-height: 44px; border-radius: 10px !important; border-color: #dfe4ee !important; background: #fbfcfe; }

/* Tables */
.table-responsive { border-radius: 12px; }
.table { margin-bottom: 0; --vz-table-bg: transparent; }
.table > thead { background: #f5f6fa; }
.table > thead th {
  padding: 13px 14px;
  border-bottom: 1px solid var(--is-line);
  color: #66708a;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .055em;
  text-transform: uppercase;
  white-space: nowrap;
}
.table > tbody td { padding: 14px; border-color: #edf0f5; color: #3d4762; font-size: 12.5px; vertical-align: middle; }
.table > tbody tr { transition: background .18s ease; }
.table > tbody tr:hover { background: rgba(115, 87, 255, .035); }

/* Status, dropdowns and pagination */
.badge { border-radius: 999px; padding: 6px 10px; font-weight: 750; letter-spacing: .005em; }
.bg-success-subtle { background: rgba(40, 199, 150, .12) !important; }
.bg-warning-subtle { background: rgba(255, 189, 74, .15) !important; }
.bg-danger-subtle { background: rgba(255, 107, 107, .12) !important; }
.bg-info-subtle, .bg-primary-subtle { background: rgba(115, 87, 255, .10) !important; }
.dropdown-menu { padding: 8px; border: 1px solid var(--is-line); border-radius: 12px; box-shadow: var(--is-shadow); }
.dropdown-item { padding: 9px 11px; border-radius: 8px; font-size: 12.5px; font-weight: 600; }
.dropdown-item:hover { color: var(--is-violet); background: rgba(115, 87, 255, .08); }
.pagination { gap: 4px; }
.page-link { min-width: 34px; height: 34px; border: 0; border-radius: 9px !important; color: var(--is-muted); background: transparent; text-align: center; font-weight: 700; }
.active > .page-link, .page-link.active { color: #fff; background: var(--is-gradient); box-shadow: 0 5px 14px rgba(91, 63, 242, .24); }
.modal-content { border: 0; border-radius: 20px; box-shadow: 0 24px 70px rgba(10, 18, 40, .20); }
.modal-header, .modal-footer { border-color: var(--is-line); }
.alert { border: 0; border-radius: 12px; }
.progress { height: 7px; border-radius: 99px; background: #eceff5; }
.progress-bar { border-radius: 99px; background: var(--is-gradient); }

/* Charts */
.apexcharts-canvas text { font-family: "Manrope", sans-serif !important; fill: var(--is-muted); }
.apexcharts-tooltip, .apexcharts-xaxistooltip { border: 0 !important; border-radius: 10px !important; box-shadow: var(--is-shadow) !important; }
.apexcharts-legend-text { color: var(--is-muted) !important; font-weight: 650 !important; }

/* Login experience */
.auth-page-wrapper.auth-bg-cover {
  overflow: auto;
  padding: 32px !important;
  background:
    radial-gradient(circle at 16% 15%, rgba(40, 199, 217, .18), transparent 26rem),
    radial-gradient(circle at 86% 88%, rgba(115, 87, 255, .23), transparent 28rem),
    #091126 !important;
}

.auth-page-wrapper::before,
.auth-page-wrapper::after {
  content: "";
  position: fixed;
  width: 250px;
  height: 250px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 46px;
  pointer-events: none;
  transform: rotate(22deg);
}
.auth-page-wrapper::before { top: -110px; left: -90px; }
.auth-page-wrapper::after { right: -95px; bottom: -120px; }

.auth-page-wrapper .auth-page-content { max-width: 1060px; padding: 0; }
.auth-page-wrapper .container { max-width: 1060px; }
.auth-page-wrapper .card {
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .15) !important;
  border-radius: 26px !important;
  box-shadow: 0 34px 90px rgba(0, 0, 0, .35);
}
.auth-page-wrapper .card:hover { transform: none; }
.auth-page-wrapper .row.g-0 { min-height: 640px; }

.auth-page-wrapper .auth-one-bg {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  padding: 52px !important;
  background:
    linear-gradient(160deg, rgba(12, 20, 47, .18), rgba(9, 17, 38, .48)),
    url("assets/images/bg-auth.jpg") center / cover no-repeat !important;
}
.auth-page-wrapper .auth-one-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: linear-gradient(145deg, rgba(115, 87, 255, .92), rgba(22, 46, 102, .74) 56%, rgba(40, 199, 217, .72));
  mix-blend-mode: multiply;
}
.auth-page-wrapper .auth-one-bg::after {
  content: "";
  position: absolute;
  width: 300px;
  height: 300px;
  right: -115px;
  top: -110px;
  z-index: -1;
  border: 60px solid rgba(255, 255, 255, .08);
  border-radius: 50%;
}

.is-auth-story { color: #fff; position: relative; z-index: 2; }
.is-auth-kicker { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 22px; font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.is-auth-kicker::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #6dffcf; box-shadow: 0 0 0 5px rgba(109, 255, 207, .14); }
.is-auth-story h1 { max-width: 420px; margin: 0 0 18px; color: #fff; font-size: clamp(31px, 4vw, 47px); line-height: 1.07; font-weight: 800; }
.is-auth-story p { max-width: 390px; margin: 0; color: rgba(255, 255, 255, .76); font-size: 14px; line-height: 1.75; }
.is-auth-points { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.is-auth-points span { padding: 8px 11px; border: 1px solid rgba(255,255,255,.14); border-radius: 999px; background: rgba(9,17,38,.22); color: rgba(255,255,255,.87); font-size: 10.5px; font-weight: 700; backdrop-filter: blur(8px); }

.auth-page-wrapper .col-lg-6:last-child { display: flex; align-items: center; background: #fff; }
.auth-page-wrapper .col-lg-6:last-child > div { width: 100%; padding: 48px 54px !important; }
.auth-page-wrapper h5.text-primary { margin-bottom: 8px; color: var(--is-text) !important; font-size: 28px; font-weight: 800; }
.auth-page-wrapper h5.text-primary::before { content: "INTELSCOPE"; display: block; margin-bottom: 15px; color: var(--is-violet); font-size: 11px; font-weight: 800; letter-spacing: .18em; }
.auth-page-wrapper .mt-4 { margin-top: 28px !important; }
.auth-page-wrapper .form-control { height: 49px; padding-inline: 15px; }
.auth-page-wrapper .btn-success { height: 50px; border-radius: 11px; font-size: 13px; }
.auth-page-wrapper .password-addon { top: 3px !important; right: 3px !important; width: 43px; height: 43px; color: var(--is-muted) !important; }
.auth-page-wrapper .signin-other-title { margin-top: 32px; }
.auth-page-wrapper .signin-other-title:after { border-color: var(--is-line); }
.auth-page-wrapper .signin-other-title .title { background: #fff; color: #9ba3b7; font-size: 10px !important; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.auth-page-wrapper form img { max-width: 145px; height: auto !important; }
.auth-page-wrapper .mt-5.text-center { margin-top: 22px !important; color: #99a1b3; font-size: 10.5px; }
.auth-page-wrapper .footer { height: auto; padding: 0; bottom: 9px; color: rgba(255,255,255,.46); font-size: 10px; }

@media (max-width: 991.98px) {
  :root { --vz-vertical-menu-width: 260px; }
  .auth-page-wrapper.auth-bg-cover { padding: 22px !important; }
  .auth-page-wrapper .row.g-0 { min-height: 0; }
  .auth-page-wrapper .auth-one-bg { min-height: 330px; padding: 38px !important; }
  .auth-page-wrapper .col-lg-6:last-child > div { padding: 38px !important; }
}

@media (max-width: 767.98px) {
  .page-content { padding: 94px 14px 74px; }
  .page-title-box { margin-inline: -14px; padding-inline: 16px; }
  .card-body { padding: 16px; }
  .auth-page-wrapper.auth-bg-cover { padding: 14px !important; align-items: flex-start !important; }
  .auth-page-wrapper .auth-page-content { padding-top: 0; }
  .auth-page-wrapper .auth-one-bg { min-height: 290px; padding: 28px !important; }
  .is-auth-story h1 { font-size: 32px; }
  .is-auth-story p { font-size: 12.5px; }
  .auth-page-wrapper .col-lg-6:last-child > div { padding: 30px 26px !important; }
  .auth-page-wrapper h5.text-primary { font-size: 24px; }
  .auth-page-wrapper .footer { position: relative; margin-top: 18px; }
}

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