/* Final UI Kit v4.1 unification layer.
   This file intentionally loads last: legacy board CSS may set layout, but it
   cannot introduce a second typography, control or navigation language. */
:root {
  --ui-kit-font: "Onest Variable", "Onest", Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  --ui-kit-ease: cubic-bezier(.22,.8,.24,1);
  --ui-kit-hover: 160ms;
  --ui-kit-panel: 260ms;
}

body.workspace-open,
body.workspace-open :where(button, input, select, textarea, .view, .modal, .drawer, .notifications-panel, .global-popover, .board-builder-modal, .table-layout-modal) {
  font-family: var(--ui-kit-font) !important;
}

/* Route changes are state changes, not motion. The marketing page may keep
   smooth scrolling; the workspace must land at the next section immediately. */
html:has(body.workspace-open) {
  scroll-behavior: auto !important;
}

/* A compact technical identifier is the only justified type exception. */
body.workspace-open :where(code, kbd, .board-builder-grip) {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace !important;
}

/* No route receives a different working canvas or page width. */
body.workspace-open .main > .view {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  background: transparent !important;
}

/* The 72/64px system bar is measured as its complete border box, never as a
   content height plus inherited vertical borders/padding. */
body.workspace-open:has(.view.active) header.global-system-bar {
  box-sizing: border-box !important;
  display: grid !important;
  height: var(--shell-header-height) !important;
  min-height: var(--shell-header-height) !important;
}
body.workspace-open:has(#dashboard.view.active) header.global-system-bar {
  height: var(--shell-header-height) !important;
  min-height: var(--shell-header-height) !important;
  padding-block: 0 !important;
}

/* A board is never allowed to replace the application shell. Older scoped
   reference CSS tried to set a special 148px sidebar for promos and a special
   78px header for the dashboard; both caused the right canvas to jump. */
@media (min-width: 761px) {
  body.workspace-open:has(.view.active) .sidebar {
    display: flex !important;
    width: var(--shell-current-sidebar) !important;
    min-width: var(--shell-current-sidebar) !important;
    max-width: var(--shell-current-sidebar) !important;
  }
  body.workspace-open:has(.view.active) .main {
    width: calc(100% - var(--shell-current-sidebar)) !important;
    margin-left: var(--shell-current-sidebar) !important;
  }
  body.workspace-open:has(#promos.view.active) .sidebar {
    width: var(--shell-current-sidebar) !important;
    min-width: var(--shell-current-sidebar) !important;
    max-width: var(--shell-current-sidebar) !important;
  }
  body.workspace-open:has(#promos.view.active) .main {
    width: calc(100% - var(--shell-current-sidebar)) !important;
    margin-left: var(--shell-current-sidebar) !important;
  }
  body.workspace-open:has(#promos.view.active) .sidebar > .brand {
    min-height: 56px !important;
    padding: 2px 44px 14px 4px !important;
  }
  body.workspace-open:has(#promos.view.active) .sidebar .brand-copy,
  body.workspace-open:has(#promos.view.active) .sidebar .nav-label,
  body.workspace-open:has(#promos.view.active) .sidebar .nav-text,
  body.workspace-open:has(#promos.view.active) .sidebar .profile-copy {
    display: block !important;
  }
  body.workspace-open:has(#promos.view.active) .sidebar .brand-copy strong {
    font-size: 15px !important;
    line-height: 20px !important;
  }
  body.workspace-open:has(#promos.view.active) .sidebar .brand-copy small {
    font-size: 11px !important;
  }
  body.workspace-open:has(#promos.view.active) .sidebar .nav-label {
    font-size: 11px !important;
    line-height: 16px !important;
  }
  body.workspace-open:has(#promos.view.active) .sidebar .nav-item {
    width: 100% !important;
    min-height: 46px !important;
    padding: 0 10px !important;
  }
  body.workspace-open:has(#promos.view.active) .sidebar .nav-text {
    font-size: 14px !important;
    line-height: 20px !important;
  }

  /* Outrank the obsolete `not(dashboard/ads) → 224px` board skin. This is the
     actual invariant for every non-dashboard route as well. */
  body.workspace-open:not(:has(#dashboard.active)):not(:has(#ads.active)):has(.view.active) .sidebar {
    width: var(--shell-current-sidebar) !important;
    min-width: var(--shell-current-sidebar) !important;
    max-width: var(--shell-current-sidebar) !important;
  }
  body.workspace-open:not(:has(#dashboard.active)):not(:has(#ads.active)):has(.view.active) .main {
    width: calc(100% - var(--shell-current-sidebar)) !important;
    margin-left: var(--shell-current-sidebar) !important;
  }
}

/* One outline-icon language for every operational control. Chart SVGs are not
   included: their series fills and strokes stay data-bearing. */
body.workspace-open :is(
  .nav-icon, .sidebar-toggle, .sidebar-mobile-close, .menu-button,
  .global-system-bar, .topbar-command-bar, .table-toolbar, .filter-group,
  .board-builder-dialog, .table-layout-modal, .modal-card, .drawer,
  .profile-menu, .notifications-panel, .mobile-bottom-nav, .section-heading
) svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Navigation is intentionally neutral at rest; active state carries the
   single brand accent instead of route-specific rainbow icons. */
body.workspace-open .sidebar.fs-sidebar .nav-item[data-view] .nav-icon {
  color: #98a2b3 !important;
}
body.workspace-open .sidebar.fs-sidebar .nav-item[data-view]:hover .nav-icon {
  color: #d0d5dd !important;
}
body.workspace-open .sidebar.fs-sidebar .nav-item[data-view].active .nav-icon,
body.workspace-open .sidebar.fs-sidebar .nav-item[data-view][aria-current="page"] .nav-icon {
  color: #fff !important;
}

/* Ads used to repeat the section title inside the board after the global page
   header had already rendered it. The common header owns H1 on every route. */
body.workspace-open #ads .mr-crumb,
body.workspace-open #ads .mr-page > h2 {
  display: none !important;
}
body.workspace-open #ads .mr-subtitle {
  margin-top: 0 !important;
}

/* The shell never changes the right work surface geometry independently of a
   route. The only desktop widths are the v4 expanded sidebar and compact rail. */
body.workspace-open .sidebar,
body.workspace-open .main {
  transition-duration: var(--ui-kit-panel) !important;
  transition-timing-function: var(--ui-kit-ease) !important;
}
body.workspace-open.sidebar-collapsed .sidebar .nav-item {
  transform-origin: center !important;
  transition: transform var(--ui-kit-hover) var(--ui-kit-ease), background-color var(--ui-kit-hover) var(--ui-kit-ease), color var(--ui-kit-hover) var(--ui-kit-ease) !important;
}
body.workspace-open.sidebar-collapsed .sidebar .nav-item:hover,
body.workspace-open.sidebar-collapsed .sidebar .nav-item:focus-visible {
  transform: scale(1.14) !important;
  z-index: 5 !important;
}
body.workspace-open.sidebar-collapsed .sidebar .nav-item:has(+ .nav-item:hover),
body.workspace-open.sidebar-collapsed .sidebar .nav-item:hover + .nav-item {
  transform: scale(1.065) !important;
  z-index: 4 !important;
}
body.workspace-open.sidebar-collapsed .sidebar .nav-item:has(+ .nav-item + .nav-item:hover),
body.workspace-open.sidebar-collapsed .sidebar .nav-item:hover + .nav-item + .nav-item {
  transform: scale(1.025) !important;
  z-index: 3 !important;
}

/* Wide operational tables preserve their column density and scroll inside the
   table region; no page-level horizontal shift is introduced. */
body.workspace-open :is(.table-wrap, .mr-table-scroll, .wide-table-wrap) {
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-color: #c9c3e9 transparent;
  scrollbar-width: thin;
}
body.workspace-open :is(.table-wrap, .mr-table-scroll, .wide-table-wrap)::-webkit-scrollbar { height: 10px; }
body.workspace-open :is(.table-wrap, .mr-table-scroll, .wide-table-wrap)::-webkit-scrollbar-thumb {
  border: 3px solid transparent;
  border-radius: 999px;
  background: #c9c3e9;
  background-clip: padding-box;
}

/* Board and column personalisation are part of the same product, not a legacy
   mini application. */
body.workspace-open .board-builder-modal,
body.workspace-open .table-layout-modal {
  color: var(--fs-text) !important;
}
body.workspace-open .board-builder-dialog,
body.workspace-open .table-layout-dialog {
  background: var(--fs-bg-app) !important;
  border-color: var(--fs-border) !important;
}
body.workspace-open .board-builder-dialog :is(header, footer),
body.workspace-open .table-layout-dialog :is(header, footer) {
  background: var(--fs-surface) !important;
  border-color: var(--fs-border) !important;
}
body.workspace-open .board-builder-dialog :is(button, select, input),
body.workspace-open .table-layout-dialog :is(button, select, input) {
  min-height: 40px;
  border-color: var(--fs-border) !important;
  border-radius: var(--fs-radius-sm) !important;
}

/* Keep actual product imagery consistent without cropping or enlarging rows. */
body.workspace-open :is(.product-image, .product-thumb, .sku-image, .table-product-image) {
  object-fit: cover;
  background: var(--fs-surface-muted);
  border: 1px solid var(--fs-border-soft);
}

@media (prefers-reduced-motion: reduce) {
  body.workspace-open .sidebar,
  body.workspace-open .main,
  body.workspace-open.sidebar-collapsed .sidebar .nav-item {
    transition: none !important;
    transform: none !important;
  }
}

/* Desktop navigation has one owner for product identity: the global system
   bar. Removing the duplicate sidebar brand frees a stable, non-scrollable
   vertical rhythm for every section. */
@media (min-width: 761px) {
  body.workspace-open .sidebar.fs-sidebar > .brand,
  body.workspace-open .sidebar.fs-sidebar .sidebar-toggle {
    display: none !important;
  }
  body.workspace-open .sidebar.fs-sidebar > .nav {
    flex: 0 0 auto !important;
    margin-top: 0 !important;
    overflow: hidden !important;
    padding: 0 2px 6px 0 !important;
  }
  body.workspace-open .sidebar.fs-sidebar .nav-label {
    margin: 7px 0 2px !important;
    padding: 0 10px !important;
    font-size: 10px !important;
    line-height: 14px !important;
  }
  body.workspace-open .sidebar.fs-sidebar .nav-item {
    min-height: 40px !important;
    gap: 10px !important;
    padding: 0 10px !important;
    border-radius: 11px !important;
    font-size: 13px !important;
    line-height: 18px !important;
  }
  body.workspace-open .sidebar.fs-sidebar .sidebar-bottom {
    padding-top: 10px !important;
  }
  body.workspace-open .sidebar.fs-sidebar .sidebar-account-link {
    min-height: 40px !important;
    margin-bottom: 7px !important;
  }

  /* The actual SVG is the notification icon. A legacy pseudo-element created
     a second glyph in the same hit target. */
  body.workspace-open .notifications-root #notificationsButton::before {
    content: none !important;
    display: none !important;
  }
}

/* A route change must never scroll the desktop navigation itself.  At compact
   laptop heights the whole left menu stays in one fixed frame instead. */
@media (min-width: 761px) and (max-height: 820px) {
  body.workspace-open .sidebar.fs-sidebar {
    padding: 12px 12px 10px !important;
  }
  body.workspace-open .sidebar.fs-sidebar > .nav {
    flex: 0 0 auto !important;
    overflow: hidden !important;
    padding: 0 2px 4px 0 !important;
  }
  body.workspace-open .sidebar.fs-sidebar .nav-label {
    margin: 4px 0 1px !important;
    padding: 0 8px !important;
    font-size: 9px !important;
    line-height: 13px !important;
  }
  body.workspace-open .sidebar.fs-sidebar .nav-item {
    min-height: 34px !important;
    gap: 9px !important;
    padding: 0 8px !important;
    border-radius: 9px !important;
    font-size: 11px !important;
    line-height: 14px !important;
  }
  body.workspace-open .sidebar.fs-sidebar .nav-icon {
    width: 19px !important;
    height: 19px !important;
    min-width: 19px !important;
  }
  body.workspace-open .sidebar.fs-sidebar .nav-icon svg {
    width: 18px !important;
    height: 18px !important;
  }
  body.workspace-open .sidebar.fs-sidebar .nav-item > b,
  body.workspace-open .sidebar.fs-sidebar .nav-item > i:not(.sidebar-data-status) {
    min-width: 18px !important;
    height: 18px !important;
    padding: 0 5px !important;
    font-size: 9px !important;
  }
  body.workspace-open .sidebar.fs-sidebar .sidebar-data-status {
    width: 8px !important;
    min-width: 8px !important;
    height: 8px !important;
  }
  body.workspace-open .sidebar.fs-sidebar .sidebar-bottom {
    padding-top: 8px !important;
  }
  body.workspace-open .sidebar.fs-sidebar .sidebar-account-link {
    min-height: 34px !important;
    margin-bottom: 5px !important;
    padding: 0 8px !important;
    border-radius: 9px !important;
    font-size: 11px !important;
  }
  body.workspace-open .sidebar.fs-sidebar .profile {
    gap: 7px !important;
    padding: 5px !important;
    border-radius: 11px !important;
  }
  body.workspace-open .sidebar.fs-sidebar .avatar {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    font-size: 11px !important;
  }
  body.workspace-open .sidebar.fs-sidebar .profile-copy strong {
    font-size: 10px !important;
    line-height: 13px !important;
  }
  body.workspace-open .sidebar.fs-sidebar .profile-copy small {
    font-size: 9px !important;
  }
}