/* NGEST brand palette
   This layer is loaded after the vendor theme so product colors remain
   consistent without modifying Bootstrap's generated stylesheet. */
:root {
  --brand-primary: #4F46E5;
  --brand-strong: #2563EB;
  --brand-secondary: #3B82F6;
  --brand-accent: #06B6D4;
  --brand-navy: #0D1B2A;
  --brand-white: #FFFFFF;
  --brand-primary-soft: #EEF2FF;
  --brand-secondary-soft: #EFF6FF;
  --brand-accent-soft: #ECFEFF;
  --brand-border: rgba(79, 70, 229, 0.12);
  --brand-shadow: 0 10px 30px rgba(13, 27, 42, 0.06);
}

html,
body {
  background: var(--brand-white);
  color: rgba(13, 27, 42, 0.76);
}

/* NGEST logo: white square, blue N and Montserrat wordmark. */
.ngest-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.ngest-brand-mark {
  display: block;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  border-radius: 11px;
  filter: drop-shadow(0 6px 12px rgba(37, 99, 235, 0.14));
}

.ngest-brand-name {
  margin: 0 !important;
  font-family: 'Montserrat', sans-serif;
  font-size: 22px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  letter-spacing: 0.12em;
  text-transform: uppercase !important;
  background: linear-gradient(135deg, var(--brand-primary), var(--brand-strong));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
}

.iq-sidebar-logo .header-logo {
  align-items: center;
}

.ngest-brand-auth {
  gap: 14px;
}

.ngest-brand-auth .ngest-brand-mark {
  width: 62px;
  height: 62px;
  flex-basis: 62px;
  border-radius: 15px;
}

.ngest-brand-auth .ngest-brand-name {
  font-size: 30px !important;
}

.ngest-brand-navigation .ngest-brand-mark {
  width: 38px;
  height: 38px;
  flex-basis: 38px;
  border-radius: 10px;
}

.ngest-brand-navigation .ngest-brand-name {
  font-size: 19px !important;
}

/* Loader uses the same mark and keeps the white square stationary. */
#loading-center.ngest-loader {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
}

.ngest-loader-logo {
  position: relative;
  width: 76px;
  height: 76px;
  padding: 7px;
  border-radius: 19px;
  background: var(--brand-white);
  box-shadow: 0 14px 36px rgba(37, 99, 235, 0.18);
}

.ngest-loader-logo img {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  height: 100%;
}

.ngest-loader-ring {
  position: absolute;
  z-index: 1;
  inset: -6px;
  border: 3px solid rgba(79, 70, 229, 0.12);
  border-top-color: var(--brand-primary);
  border-right-color: var(--brand-strong);
  border-radius: 24px;
  animation: ngest-loader-spin 1s linear infinite;
}

.ngest-loader-name {
  font-family: 'Montserrat', sans-serif;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 0.22em;
  background: linear-gradient(135deg, var(--brand-primary), var(--brand-strong));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

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

@media (prefers-reduced-motion: reduce) {
  .ngest-loader-ring {
    animation-duration: 2.5s;
  }
}

h1,
h2,
h3,
h4,
h5,
h6,
.text-dark,
.iq-card .card-title {
  color: var(--brand-navy) !important;
}

a {
  color: var(--brand-strong);
}

a:hover,
a:focus {
  color: var(--brand-primary);
}

/* Navigation: deliberately white, with color used only for state. */
.iq-sidebar,
.iq-sidebar-logo {
  background: var(--brand-white) !important;
}

.iq-sidebar {
  border-right: 1px solid var(--brand-border);
  box-shadow: 8px 0 28px rgba(13, 27, 42, 0.05);
}

.iq-sidebar-menu .iq-menu > li {
  margin: 3px 12px;
  border-radius: 10px;
}

.iq-sidebar-menu .iq-menu > li > a {
  border-radius: 10px;
  color: rgba(13, 27, 42, 0.72);
}

.iq-sidebar-menu .iq-menu > li > a:hover {
  background: rgba(79, 70, 229, 0.06);
  color: var(--brand-strong);
}

.iq-sidebar-menu .iq-menu > li.active > a,
.iq-sidebar-menu .iq-menu > li.active-menu > a,
.iq-sidebar-menu .iq-menu > li > a[aria-expanded="true"] {
  background: var(--brand-primary-soft);
  color: var(--brand-primary);
  font-weight: 600;
}

.iq-sidebar-menu .iq-menu > li.active > a::before,
.iq-sidebar-menu .iq-menu > li.active-menu > a::before {
  top: 20%;
  right: 6px;
  width: 3px;
  height: 60%;
  border-radius: 999px;
  background: var(--brand-accent);
}

.iq-sidebar-menu .iq-menu li a[aria-expanded="true"] .iq-arrow-right,
.iq-sidebar-menu .iq-menu li.active > a .iq-arrow-right {
  color: var(--brand-accent);
}

.iq-sidebar-menu .iq-menu li ul li a {
  color: rgba(13, 27, 42, 0.64);
}

.iq-sidebar-menu .iq-menu li.active .iq-submenu li.active > a,
.iq-sidebar-menu .iq-menu li ul a:hover {
  color: var(--brand-strong);
  background: var(--brand-secondary-soft);
}

.iq-top-navbar {
  background: var(--brand-white);
  border-bottom: 1px solid var(--brand-border);
}

.wrapper-menu,
.navbar-list li > a {
  color: var(--brand-primary);
}

.brand-tagline {
  color: var(--brand-strong);
}

.content-page {
  background: var(--brand-white);
}

/* Surfaces and data presentation. */
.iq-card {
  border: 1px solid var(--brand-border);
  box-shadow: var(--brand-shadow);
}

.iq-card-header {
  border-bottom-color: var(--brand-border);
}

.table thead th {
  color: var(--brand-navy);
  border-bottom-color: var(--brand-border);
}

.table-dark th,
.table-dark td,
.table-dark thead th {
  color: var(--brand-white);
  background-color: var(--brand-navy);
  border-color: rgba(255, 255, 255, 0.12);
}

.table-striped tbody tr:nth-of-type(odd) {
  background: rgba(79, 70, 229, 0.025);
}

/* Bootstrap action hierarchy. */
.btn-primary,
.bg-primary,
.badge-primary,
.page-item.active .page-link {
  color: var(--brand-white) !important;
  background-color: var(--brand-primary) !important;
  border-color: var(--brand-primary) !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active,
.show > .btn-primary.dropdown-toggle,
a.bg-primary:hover,
button.bg-primary:hover {
  color: var(--brand-white) !important;
  background-color: var(--brand-strong) !important;
  border-color: var(--brand-strong) !important;
}

.btn-primary:focus,
.btn-primary.focus,
.page-link:focus {
  box-shadow: 0 0 0 0.2rem rgba(6, 182, 212, 0.28) !important;
}

.btn-outline-primary {
  color: var(--brand-strong);
  border-color: var(--brand-secondary);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:not(:disabled):not(.disabled):active {
  color: var(--brand-white);
  background-color: var(--brand-secondary);
  border-color: var(--brand-secondary);
}

.btn-info,
.badge-info {
  color: var(--brand-white) !important;
  background-color: var(--brand-secondary) !important;
  border-color: var(--brand-secondary) !important;
}

.text-primary {
  color: var(--brand-primary) !important;
}

.text-info {
  color: var(--brand-accent) !important;
}

.border-primary {
  border-color: var(--brand-primary) !important;
}

.page-link {
  color: var(--brand-strong);
  border-color: var(--brand-border);
}

.page-link:hover {
  color: var(--brand-primary);
  background: var(--brand-primary-soft);
  border-color: rgba(79, 70, 229, 0.2);
}

/* Form focus uses blue for the control and cyan for the outer highlight. */
.form-control:focus,
.custom-select:focus,
.select2-container--focus .select2-selection,
.ts-wrapper.focus .ts-control {
  border-color: var(--brand-secondary) !important;
  box-shadow: 0 0 0 0.2rem rgba(6, 182, 212, 0.18) !important;
}

.custom-control-input:checked ~ .custom-control-label::before,
.custom-checkbox .custom-control-input:checked ~ .custom-control-label::before,
.custom-radio .custom-control-input:checked ~ .custom-control-label::before,
.custom-switch .custom-control-input:checked ~ .custom-control-label::before {
  background-color: var(--brand-primary) !important;
  border-color: var(--brand-primary) !important;
}

::selection {
  color: var(--brand-white);
  background: var(--brand-primary);
}

::-webkit-scrollbar-thumb {
  background-color: rgba(79, 70, 229, 0.45);
}