/* NAVONAX CRM premium semantic icon system — light, compact and consistent. */
:root {
  --nvx-icon-blue: #1376b8;
  --nvx-icon-blue-soft: #eaf5fb;
  --nvx-icon-teal: #287b76;
  --nvx-icon-teal-soft: #edf8f6;
  --nvx-icon-amber: #9b6a28;
  --nvx-icon-amber-soft: #fff8e9;
  --nvx-icon-rose: #a94f65;
  --nvx-icon-rose-soft: #fff1f4;
  --nvx-icon-violet: #6f62a7;
  --nvx-icon-violet-soft: #f4f1fb;
}

.nvx-premium-icon {
  --nvx-icon-color: var(--nvx-icon-blue);
  --nvx-icon-surface: var(--nvx-icon-blue-soft);
  box-sizing: border-box;
  line-height: 0 !important;
  letter-spacing: 0 !important;
  text-indent: 0 !important;
}

.nvx-premium-icon[data-nvx-icon-tone="teal"] {
  --nvx-icon-color: var(--nvx-icon-teal);
  --nvx-icon-surface: var(--nvx-icon-teal-soft);
}

.nvx-premium-icon[data-nvx-icon-tone="amber"] {
  --nvx-icon-color: var(--nvx-icon-amber);
  --nvx-icon-surface: var(--nvx-icon-amber-soft);
}

.nvx-premium-icon[data-nvx-icon-tone="rose"] {
  --nvx-icon-color: var(--nvx-icon-rose);
  --nvx-icon-surface: var(--nvx-icon-rose-soft);
}

.nvx-premium-icon[data-nvx-icon-tone="violet"] {
  --nvx-icon-color: var(--nvx-icon-violet);
  --nvx-icon-surface: var(--nvx-icon-violet-soft);
}

.nvx-premium-icon-svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  color: inherit;
  stroke: currentColor;
  stroke-width: 1.65;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.nvx-premium-icon-svg .nvx-icon-soft {
  fill: currentColor;
  fill-opacity: 0.09;
  stroke: none;
}

/* Sidebar: uniform glass icons instead of letter badges. */
#root .sidebar-nav .nav-symbol.nvx-premium-icon--nav {
  display: grid !important;
  flex: 0 0 28px !important;
  width: 28px !important;
  min-width: 28px !important;
  height: 28px !important;
  place-items: center !important;
  padding: 6px !important;
  color: #b7e1f8 !important;
  background: rgba(229, 246, 255, 0.08) !important;
  border: 1px solid rgba(205, 236, 253, 0.15) !important;
  border-radius: 9px !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 3px 9px rgba(1, 18, 35, 0.08) !important;
  font-size: 0 !important;
}

#root .sidebar-nav button:hover .nav-symbol.nvx-premium-icon--nav {
  color: #d9f2ff !important;
  background: rgba(235, 248, 255, 0.13) !important;
  border-color: rgba(210, 239, 255, 0.24) !important;
}

#root .sidebar-nav button.active .nav-symbol.nvx-premium-icon--nav {
  color: #0b6eaa !important;
  background: linear-gradient(180deg, #ffffff 0%, #e8f5fc 100%) !important;
  border-color: rgba(255, 255, 255, 0.82) !important;
  box-shadow:
    inset 0 1px 0 #ffffff,
    0 5px 13px rgba(0, 25, 46, 0.16) !important;
}

#root .sidebar-nav .nav-symbol.nvx-premium-icon--nav .nvx-premium-icon-svg {
  width: 16px;
  height: 16px;
  stroke-width: 1.75;
}

/* Dashboard KPI cards: restrained light semantic surfaces. */
#root .kpi-card .kpi-icon.nvx-premium-icon--kpi {
  display: grid !important;
  width: 38px !important;
  min-width: 38px !important;
  height: 38px !important;
  place-items: center !important;
  padding: 8px !important;
  color: var(--nvx-icon-color) !important;
  background: linear-gradient(180deg, #ffffff 0%, var(--nvx-icon-surface) 100%) !important;
  border: 1px solid color-mix(in srgb, var(--nvx-icon-color) 18%, white) !important;
  border-radius: 12px !important;
  box-shadow:
    inset 0 1px 0 #ffffff,
    0 5px 13px rgba(11, 53, 78, 0.07) !important;
  font-size: 0 !important;
}

#root .kpi-card .kpi-icon.nvx-premium-icon--kpi .nvx-premium-icon-svg {
  width: 20px;
  height: 20px;
}

/* Command Dashboard shortcuts. */
#root .nvx-command-shortcut-mark.nvx-premium-icon--shortcut {
  display: grid !important;
  width: 34px !important;
  min-width: 34px !important;
  height: 34px !important;
  place-items: center !important;
  padding: 7px !important;
  color: var(--nvx-icon-color) !important;
  background: linear-gradient(180deg, #ffffff 0%, var(--nvx-icon-surface) 100%) !important;
  border: 1px solid color-mix(in srgb, var(--nvx-icon-color) 18%, white) !important;
  border-radius: 10px !important;
  box-shadow:
    inset 0 1px 0 #ffffff,
    0 4px 11px rgba(9, 50, 75, 0.065) !important;
  font-size: 0 !important;
}

#root .nvx-command-shortcut-mark.nvx-premium-icon--shortcut .nvx-premium-icon-svg {
  width: 19px;
  height: 19px;
}

#root .nvx-command-shortcut-arrow.nvx-premium-icon--arrow {
  display: grid !important;
  width: 16px !important;
  height: 16px !important;
  color: var(--nvx-shortcut-accent, var(--nvx-icon-blue)) !important;
  font-size: 0 !important;
}

#root .nvx-command-shortcut-arrow.nvx-premium-icon--arrow .nvx-premium-icon-svg {
  width: 14px;
  height: 14px;
  stroke-width: 1.85;
}

/* Safeguards panel. */
#root .safeguard-grid > div > span.nvx-premium-icon--safeguard {
  display: grid !important;
  flex: 0 0 32px !important;
  width: 32px !important;
  min-width: 32px !important;
  height: 32px !important;
  place-items: center !important;
  padding: 7px !important;
  color: var(--nvx-icon-color) !important;
  background: linear-gradient(180deg, #ffffff 0%, var(--nvx-icon-surface) 100%) !important;
  border: 1px solid rgba(27, 112, 165, 0.14) !important;
  border-radius: 10px !important;
  box-shadow: inset 0 1px 0 #ffffff, 0 3px 9px rgba(9, 50, 75, 0.05) !important;
  font-size: 0 !important;
}

/* Search, notification, sign-out and Company Updates shell controls. */
#root .nav-search > span.nvx-premium-icon--search {
  display: grid !important;
  width: 17px !important;
  height: 17px !important;
  color: #8ecbea !important;
}

#root .nav-search > span.nvx-premium-icon--search .nvx-premium-icon-svg {
  width: 17px;
  height: 17px;
}

#root button.nvx-premium-icon--shell,
#root .notification-button > span.nvx-premium-icon--shell {
  color: #276b96 !important;
  font-size: 0 !important;
}

#root button.nvx-premium-icon--shell {
  display: grid !important;
  place-items: center !important;
  padding: 10px !important;
}

#root button.nvx-premium-icon--shell .nvx-premium-icon-svg,
#root .notification-button > span.nvx-premium-icon--shell .nvx-premium-icon-svg {
  width: 18px;
  height: 18px;
}

#root .sidebar-footer button.nvx-premium-icon--shell {
  width: 34px !important;
  min-width: 34px !important;
  height: 34px !important;
  padding: 8px !important;
  color: #b7e1f8 !important;
  background: rgba(229, 246, 255, 0.08) !important;
  border: 1px solid rgba(205, 236, 253, 0.14) !important;
  border-radius: 10px !important;
}

#nvx-ca-launcher .nvx-ca-launch-icon.nvx-premium-icon--company {
  display: grid !important;
  width: 20px !important;
  height: 20px !important;
  place-items: center !important;
  color: #167ab9 !important;
  font-size: 0 !important;
}

#nvx-ca-launcher .nvx-ca-launch-icon.nvx-premium-icon--company .nvx-premium-icon-svg {
  width: 17px;
  height: 17px;
  stroke-width: 1.8;
}

@media (max-width: 760px) {
  #root .sidebar-nav .nav-symbol.nvx-premium-icon--nav {
    flex-basis: 28px !important;
    width: 28px !important;
    min-width: 28px !important;
    height: 28px !important;
  }

  #root .kpi-card .kpi-icon.nvx-premium-icon--kpi {
    width: 36px !important;
    min-width: 36px !important;
    height: 36px !important;
  }
}

@media (prefers-reduced-motion: no-preference) {
  #root .sidebar-nav button:hover .nvx-premium-icon-svg,
  #root .nvx-command-shortcut:hover .nvx-premium-icon-svg {
    transform: translateY(-0.5px);
    transition: transform 160ms ease;
  }
}