/* Primary CRM navigation theme.
 *
 * This stylesheet deliberately scopes the palette to Twenty's native navigation
 * drawer.  Record pages, settings, dialogs, and light/dark mode elsewhere retain
 * their normal Twenty theme and accessibility behavior.
 */
:root {
  --navigation-drawer-width: 252px !important;
}

[data-click-outside-id="navigation-drawer"] {
  --t-background-primary: #211c42;
  --t-background-secondary: #27214d;
  --t-background-tertiary: #31295d;
  --t-background-quaternary: #3b326c;
  --t-background-transparent-light: rgba(255, 255, 255, 0.08);
  --t-background-transparent-lighter: rgba(255, 255, 255, 0.045);
  --t-border-color-light: rgba(255, 255, 255, 0.08);
  --t-border-color-medium: rgba(255, 255, 255, 0.12);
  --t-border-color-strong: rgba(255, 255, 255, 0.2);
  --t-font-color-primary: #ffffff;
  --t-font-color-secondary: #d9d5ef;
  --t-font-color-tertiary: #a9a2ce;
  --t-font-color-light: #8880b3;

  background:
    radial-gradient(circle at 20% 0%, rgba(114, 91, 194, 0.18), transparent 34%),
    linear-gradient(180deg, #28214f 0%, #211c42 100%);
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  color: #d9d5ef;
}

[data-click-outside-id="navigation-drawer"] > div,
[data-click-outside-id="navigation-drawer"] .sv8w7uw,
[data-click-outside-id="navigation-drawer"] .s184wrs0,
[data-click-outside-id="navigation-drawer"] .sdua9on {
  background: transparent;
}

[data-click-outside-id="navigation-drawer"] .sv8w7uw {
  gap: 10px;
  padding: 10px 8px 14px;
}

[data-click-outside-id="navigation-drawer"] .serrpma,
[data-click-outside-id="navigation-drawer"] .s1icc7o6 {
  gap: 7px;
}

[data-click-outside-id="navigation-drawer"] .section-title-container {
  min-height: 25px;
  padding: 4px 8px;
}

[data-click-outside-id="navigation-drawer"] .section-title-label {
  color: #938bbd;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.105em;
  line-height: 1.2;
  text-transform: uppercase;
}

[data-click-outside-id="navigation-drawer"] .navigation-drawer-item {
  border: 1px solid transparent;
  border-radius: 6px;
  color: #d6d1ea;
  font-size: 13px;
  font-weight: 500;
  min-height: 30px;
  transition:
    background-color 120ms ease,
    border-color 120ms ease,
    color 120ms ease,
    transform 120ms ease;
}

[data-click-outside-id="navigation-drawer"] .navigation-drawer-item:hover {
  background: rgba(255, 255, 255, 0.075) !important;
  border-color: rgba(255, 255, 255, 0.06) !important;
  color: #ffffff !important;
}

[data-click-outside-id="navigation-drawer"] .navigation-drawer-item[aria-selected="true"] {
  background: linear-gradient(90deg, #50438d 0%, #443977 100%) !important;
  border-color: rgba(191, 179, 255, 0.22) !important;
  box-shadow:
    inset 3px 0 0 #a997ff,
    0 5px 14px rgba(9, 6, 28, 0.17);
  color: #ffffff !important;
}

[data-click-outside-id="navigation-drawer"] .navigation-drawer-item svg {
  color: currentColor !important;
  opacity: 0.88;
}

[data-click-outside-id="navigation-drawer"] .navigation-drawer-item[aria-selected="true"] svg {
  opacity: 1;
}

/* Twenty renders one folder level in the drawer. Keep the device views
   visually nested while retaining real routes for every visible row. */
[data-click-outside-id="navigation-drawer"] a[href*="viewId=e2000000-0000-4000-8000-000000000001"],
[data-click-outside-id="navigation-drawer"] a[href*="viewId=e3000000-0000-4000-8000-000000000001"] {
  margin-left: 18px;
  width: calc(100% - 18px);
}

[data-click-outside-id="navigation-drawer"] .navigation-drawer-item:focus-visible {
  outline: 2px solid #b9aaff;
  outline-offset: 1px;
}

[data-click-outside-id="navigation-drawer"] a,
[data-click-outside-id="navigation-drawer"] button {
  color: inherit;
}

[data-click-outside-id="navigation-drawer"] * {
  scrollbar-color: #514878 transparent;
  scrollbar-width: thin;
}

[data-click-outside-id="navigation-drawer"] *::-webkit-scrollbar {
  width: 5px;
}

[data-click-outside-id="navigation-drawer"] *::-webkit-scrollbar-thumb {
  background: #514878;
  border-radius: 999px;
}

@media (max-width: 768px) {
  [data-click-outside-id="navigation-drawer"] .sv8w7uw {
    padding: 12px;
  }

  [data-click-outside-id="navigation-drawer"] .navigation-drawer-item {
    min-height: 36px;
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-click-outside-id="navigation-drawer"] .navigation-drawer-item {
    transition: none;
  }
}

@media print {
  [data-click-outside-id="navigation-drawer"] {
    display: none !important;
  }
}