/* Small app-shell helpers. Tailwind remains the primary visual layer. */

/*
 * Shared macOS-style activity indicator.
 *
 * The segmented dial replaces legacy page-specific loading indicators
 * across server-rendered and JavaScript-rendered loading states. Keep it in the
 * app shell so every Django base layout (authenticated, auth, chat and empty)
 * gets the same indicator without page-specific CSS.
 */
.macos-spinner,
.macos-preloader::after,
html.pwa-navigating body::after {
  --macos-spinner-size: 1.25rem;
  --macos-spinner-thickness: 0.24rem;
  box-sizing: border-box;
  width: var(--macos-spinner-size) !important;
  height: var(--macos-spinner-size) !important;
  flex: 0 0 var(--macos-spinner-size);
  border: 0 !important;
  border-radius: 50%;
  background: conic-gradient(
    from -15deg,
    rgb(63 63 70 / 0.12),
    rgb(63 63 70 / 0.32) 38%,
    rgb(63 63 70 / 0.95) 100%
  );
  -webkit-mask-image:
    radial-gradient(
      farthest-side,
      transparent calc(100% - var(--macos-spinner-thickness)),
      #000 calc(100% - var(--macos-spinner-thickness) + 0.5px)
    ),
    repeating-conic-gradient(#000 0deg 12deg, transparent 12deg 30deg);
  -webkit-mask-composite: source-in;
  mask-image:
    radial-gradient(
      farthest-side,
      transparent calc(100% - var(--macos-spinner-thickness)),
      #000 calc(100% - var(--macos-spinner-thickness) + 0.5px)
    ),
    repeating-conic-gradient(#000 0deg 12deg, transparent 12deg 30deg);
  mask-composite: intersect;
  animation: macos-spinner-turn 0.9s steps(12, end) infinite !important;
}

.macos-spinner {
  display: inline-block;
  color: transparent !important;
  vertical-align: -0.16em;
}

svg.macos-spinner {
  fill: transparent !important;
  stroke: transparent !important;
}

.macos-spinner--sm {
  --macos-spinner-size: 0.875rem;
  --macos-spinner-thickness: 0.18rem;
}

.macos-spinner--md {
  --macos-spinner-size: 1.25rem;
  --macos-spinner-thickness: 0.24rem;
}

.macos-spinner--lg,
.macos-preloader--lg::after {
  --macos-spinner-size: 2.25rem;
  --macos-spinner-thickness: 0.34rem;
}

.macos-spinner--xl {
  --macos-spinner-size: 3rem;
  --macos-spinner-thickness: 0.42rem;
}

.macos-loading {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  color: rgb(71 85 105);
}

.macos-loading--inline { flex-direction: row; }
.macos-loading--stacked { flex-direction: column; text-align: center; }
.dark .macos-loading { color: rgb(161 161 170); }

.macos-preloader {
  position: relative;
  min-height: 4rem;
}

.macos-preloader::after {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: calc(var(--macos-spinner-size) / -2);
  margin-left: calc(var(--macos-spinner-size) / -2);
}

.macos-preloader > :not(.sr-only) {
  display: none !important;
}

.dark .macos-spinner,
.dark .macos-preloader::after,
html.dark.pwa-navigating body::after {
  background: conic-gradient(
    from -15deg,
    rgb(212 212 216 / 0.12),
    rgb(212 212 216 / 0.32) 38%,
    rgb(212 212 216 / 0.95) 100%
  );
}

@keyframes macos-spinner-turn {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .macos-spinner,
  .macos-preloader::after,
  html.pwa-navigating body::after {
    animation: none !important;
  }
}

[x-cloak] { display: none !important; }

/* Canonical user identity image: always circular, including legacy rounded variants. */
.user-avatar {
  position: relative;
  display: inline-flex;
  width: 2.5rem;
  height: 2.5rem;
  flex: 0 0 2.5rem;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1px solid rgb(var(--color-brand-500-rgb, 51 65 85) / 0.18);
  border-radius: 999px;
  color: rgb(var(--color-brand-800-rgb, 35 44 58));
  background: rgb(var(--color-brand-500-rgb, 51 65 85) / 0.12);
  font-size: 0.75rem;
  font-weight: 750;
  line-height: 1;
  letter-spacing: 0.015em;
}

.user-avatar--xs { width: 1.5rem; height: 1.5rem; flex-basis: 1.5rem; font-size: 0.5625rem; }
.user-avatar--sm { width: 2rem; height: 2rem; flex-basis: 2rem; font-size: 0.625rem; }
.user-avatar--lg { width: 3rem; height: 3rem; flex-basis: 3rem; font-size: 0.875rem; }
.user-avatar--story { width: 3.5rem; height: 3.5rem; flex-basis: 3.5rem; font-size: 1rem; }
.user-avatar--xl { width: 5rem; height: 5rem; flex-basis: 5rem; font-size: 1.25rem; }
.user-avatar--rounded { border-radius: 50%; }

.user-avatar__image {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--ds-surface-muted, #f1f5f9);
}

.user-avatar__fallback {
  display: inline-flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
}

.user-avatar__fallback[hidden] { display: none; }
.dark .user-avatar { color: rgb(var(--color-brand-200-rgb, 226 232 240)); }

html,
body {
  scrollbar-gutter: stable;
}

body {
  overflow-y: scroll;
}

/* Keep the first rendered frame identical to Alpine's persisted sidebar state. */
html:not(.app-shell-ready) .app-shell-padding-transition,
html:not(.app-shell-ready) [data-testid="sidebar"],
html:not(.app-shell-ready) [data-testid="tree-sidebar"] {
  transition: none !important;
}

/* Slide only the panel. Animating width/padding/left relayouts every table,
   chart and container query in the page on every frame of a menu toggle. */
.navigation-shell--standard,
.navigation-tree-sidebar {
  transition-property: transform;
  transition-duration: 200ms;
  transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}

@media (max-width: 1023.98px) {
  html:not(.app-shell-ready) [data-testid="sidebar"] {
    transform: translateX(calc(-100% - 2rem));
  }
}

.navigation-shell--standard .navigation-sidebar-item {
  color: #52525b;
}
.navigation-shell--standard .navigation-sidebar-item:hover {
  background: #f4f4f5;
  color: #18181b;
}
.navigation-shell--standard .navigation-sidebar-parent[aria-expanded="true"] {
  background: #f4f4f5;
  color: #18181b;
}
.navigation-shell--standard .navigation-sidebar-chevron {
  width: 1rem;
  height: 1rem;
}
.navigation-shell--standard .navigation-sidebar-children {
  margin-top: 0.125rem;
  margin-bottom: 0.25rem;
}
.navigation-shell--standard .navigation-sidebar-item[aria-current="page"],
.navigation-shell--standard .navigation-sidebar-item.is-active {
  background: #ecfdf5;
  color: #047857;
  font-weight: 650;
  box-shadow: inset 3px 0 currentColor;
}
.navigation-shell--standard .navigation-sidebar-item[aria-current="page"] .ui-icon,
.navigation-shell--standard .navigation-sidebar-item.is-active .ui-icon {
  color: inherit;
}
.dark .navigation-shell--standard .navigation-sidebar-item { color: #d4d4d8; }
.dark .navigation-shell--standard .navigation-sidebar-item:hover { background: #27272a; color: #fafafa; }
.dark .navigation-shell--standard .navigation-sidebar-parent[aria-expanded="true"] { background: #27272a; color: #fafafa; }
.dark .navigation-shell--standard .navigation-sidebar-item[aria-current="page"],
.dark .navigation-shell--standard .navigation-sidebar-item.is-active {
  background: #052e27;
  color: #6ee7b7;
}

@media (min-width: 1024px) {
  html:not(.app-shell-ready).app-shell-sidebar-open[data-navigation-layout="standard_sidebar"] [data-testid="sidebar"][x-cloak] {
    display: flex !important;
    transform: translateX(0);
    width: var(--app-sidebar-expanded-width);
  }

  html:not(.app-shell-ready).app-shell-sidebar-open[data-navigation-layout="standard_sidebar"] #app-main,
  html:not(.app-shell-ready).app-shell-sidebar-open[data-navigation-layout="standard_sidebar"] #app-banner-shell {
    padding-left: var(--app-sidebar-expanded-width);
  }

  html:not(.app-shell-ready).app-shell-sidebar-open[data-navigation-layout="standard_sidebar"] .app-navigation-topbar {
    left: var(--app-sidebar-expanded-width);
  }

  html:not(.app-shell-ready).app-shell-sidebar-collapsed[data-navigation-layout="standard_sidebar"] [data-testid="sidebar"] {
    display: flex;
    width: var(--app-sidebar-rail-width);
  }

  html:not(.app-shell-ready).app-shell-sidebar-collapsed[data-navigation-layout="standard_sidebar"] #app-main,
  html:not(.app-shell-ready).app-shell-sidebar-collapsed[data-navigation-layout="standard_sidebar"] #app-banner-shell {
    padding-left: var(--app-sidebar-rail-width);
  }

  html:not(.app-shell-ready).app-shell-sidebar-collapsed[data-navigation-layout="standard_sidebar"] .app-navigation-topbar {
    left: var(--app-sidebar-rail-width);
  }

  html:not(.app-shell-ready).app-shell-sidebar-closed[data-navigation-layout="standard_sidebar"] [data-testid="sidebar"] {
    display: none !important;
  }

  html:not(.app-shell-ready).app-shell-sidebar-open[data-navigation-layout="tree_sidebar"] [data-testid="tree-sidebar"][x-cloak] {
    display: flex !important;
    width: var(--app-tree-sidebar-expanded-width);
  }

  html:not(.app-shell-ready).app-shell-sidebar-open[data-navigation-layout="tree_sidebar"] #app-main,
  html:not(.app-shell-ready).app-shell-sidebar-open[data-navigation-layout="tree_sidebar"] #app-banner-shell {
    padding-left: var(--app-tree-sidebar-expanded-width);
  }

  html:not(.app-shell-ready).app-shell-sidebar-open[data-navigation-layout="tree_sidebar"] .app-navigation-topbar {
    left: var(--app-tree-sidebar-expanded-width);
  }

  html:not(.app-shell-ready).app-shell-sidebar-collapsed[data-navigation-layout="tree_sidebar"] [data-testid="tree-sidebar"] {
    display: flex;
    width: var(--app-sidebar-rail-width);
  }

  html:not(.app-shell-ready).app-shell-sidebar-collapsed[data-navigation-layout="tree_sidebar"] #app-main,
  html:not(.app-shell-ready).app-shell-sidebar-collapsed[data-navigation-layout="tree_sidebar"] #app-banner-shell {
    padding-left: var(--app-sidebar-rail-width);
  }

  html:not(.app-shell-ready).app-shell-sidebar-collapsed[data-navigation-layout="tree_sidebar"] .app-navigation-topbar {
    left: var(--app-sidebar-rail-width);
  }

  html:not(.app-shell-ready).app-shell-sidebar-closed[data-navigation-layout="tree_sidebar"] [data-testid="tree-sidebar"] {
    display: none !important;
  }
}

@view-transition {
  navigation: none;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 1ms;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}

::view-transition-old(root) {
  animation-name: app-page-fade-out;
}

::view-transition-new(root) {
  animation-name: app-page-fade-in;
}

html.app-page-entering #app-main,
html.app-page-entering main#main-content {
  animation: app-content-enter 150ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

html.pwa-navigating body::after {
  content: "";
  position: fixed;
  top: calc(var(--app-safe-top) + 0.75rem);
  left: 50%;
  z-index: 2147483647;
  --macos-spinner-size: 1.5rem;
  --macos-spinner-thickness: 0.26rem;
  margin-left: calc(var(--macos-spinner-size) / -2);
  pointer-events: none;
}

@keyframes app-page-fade-out {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(4px);
  }
}

@keyframes app-page-fade-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes app-content-enter {
  from {
    opacity: 0.35;
  }
  to {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  @view-transition {
    navigation: none;
  }

  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: 1ms;
  }

  html.app-page-entering #app-main,
  html.app-page-entering main#main-content {
    animation: none;
  }

  html.pwa-navigating body::after {
    animation-duration: 1ms;
  }
}

html.ui-theme-changing,
html.ui-theme-changing *,
html.ui-theme-changing *::before,
html.ui-theme-changing *::after {
  transition: none !important;
  animation-duration: 0.01ms !important;
  animation-delay: 0s !important;
}

/* Prevent off-canvas drawers from creating page-level horizontal scroll. */
#app,
#app-shell,
#app-main {
  overflow-x: hidden;
}

/* Keep the mobile header in the document's sticky layer. Horizontal clipping
   must not create an intermediate scroll container around that layer. */
@supports (overflow: clip) {
  @media (max-width: 1023.98px) {
    #app,
    #app-shell {
      overflow-x: clip;
      overflow-y: visible;
    }

    #app-topbar-shell {
      position: sticky;
      top: 0;
      z-index: 40;
    }

    #app-topbar-shell .app-navigation-topbar {
      position: relative;
      top: auto;
      left: auto;
      right: auto;
    }
  }
}

/* Let the content column shrink inside navigation-offset layouts instead of
   adopting the intrinsic width of wide grids and toolbars. */
#app-main,
#app-content {
  min-width: 0;
  max-width: 100%;
}

.app-shell-padding-transition {
  transition-property: padding-left, padding-right;
}

/* Runtime-selectable authenticated navigation layouts. Only the selected
   desktop renderer is present in the DOM; mobile keeps its shared drawer. */
.navigation-topbar-menu {
  display: none !important;
}

/* Tree navigation: compact hierarchy, clear active path, and generous targets. */
.navigation-tree-sidebar {
  border-right: 1px solid color-mix(in srgb, var(--ds-border, #e5e7eb) 82%, transparent);
  background:
    radial-gradient(circle at 0 0, rgb(var(--color-brand-500-rgb, 51 65 85) / 0.08), transparent 18rem),
    color-mix(in srgb, var(--ds-surface, #fff) 97%, var(--ds-canvas, #f8fafc));
  box-shadow: 12px 0 34px rgb(15 23 42 / 0.045);
}

.navigation-tree-scroll {
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--ds-text-muted, #64748b) 32%, transparent) transparent;
}

.navigation-tree-section {
  position: relative;
  border: 1px solid transparent;
  border-radius: 0.875rem;
}

.navigation-tree-section.is-active {
  border-color: rgb(var(--color-brand-500-rgb, 51 65 85) / 0.14);
  background: rgb(var(--color-brand-500-rgb, 51 65 85) / 0.045);
}

.navigation-tree-trigger,
.navigation-tree-node-trigger {
  color: var(--ds-text, #334155);
  transition: color 140ms ease, background-color 140ms ease, box-shadow 140ms ease;
}

.navigation-tree-trigger:hover,
.navigation-tree-node-trigger:hover {
  color: var(--ds-text-strong, #0f172a);
  background: color-mix(in srgb, var(--ds-surface-muted, #f1f5f9) 84%, transparent);
}

.navigation-tree-icon {
  color: rgb(var(--color-brand-700-rgb, 41 52 68));
  background: rgb(var(--color-brand-500-rgb, 51 65 85) / 0.11);
  box-shadow: inset 0 0 0 1px rgb(var(--color-brand-500-rgb, 51 65 85) / 0.09);
}

.navigation-tree-chevron {
  width: 0.875rem;
  height: 0.875rem;
  color: var(--ds-text-muted, #64748b);
}

.navigation-tree-branch {
  position: relative;
  margin: 0.125rem 0.5rem 0.5rem 1.75rem;
  padding: 0.125rem 0 0.125rem 0.75rem;
}

.navigation-tree-branch::before {
  content: "";
  position: absolute;
  top: 0.25rem;
  bottom: 0.625rem;
  left: 0;
  width: 1px;
  background: linear-gradient(to bottom, rgb(var(--color-brand-500-rgb, 51 65 85) / 0.38), var(--ds-border, #e5e7eb));
}

.navigation-tree-branch--nested {
  margin-left: 0.75rem;
}

.navigation-tree-node {
  position: relative;
  margin-top: 0.125rem;
}

.navigation-tree-node::before {
  content: "";
  position: absolute;
  top: 1.25rem;
  left: -0.75rem;
  width: 0.625rem;
  height: 1px;
  background: var(--ds-border, #e5e7eb);
}

.navigation-tree-node-icon {
  width: 1rem;
  height: 1rem;
  color: var(--ds-text-muted, #64748b);
}

.navigation-tree-link {
  position: relative;
  color: var(--ds-text-muted, #475569);
}

.navigation-tree-link:hover {
  color: var(--ds-text-strong, #0f172a);
  background: color-mix(in srgb, var(--ds-surface-muted, #f1f5f9) 84%, transparent);
}

.navigation-tree-link.is-active {
  color: rgb(var(--color-brand-800-rgb, 35 44 58));
  font-weight: 650;
  background: rgb(var(--color-brand-500-rgb, 51 65 85) / 0.12);
  box-shadow: inset 3px 0 0 rgb(var(--color-brand-600-rgb, 45 57 75));
}

.navigation-tree-link.is-active .navigation-tree-node-icon {
  color: rgb(var(--color-brand-700-rgb, 41 52 68));
}

/* Top-bar navigation: one quiet segmented strip with structured fly-outs. */
.topbar-menu-track {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem;
  border: 1px solid var(--ds-border, #e5e7eb);
  border-radius: 0.875rem;
  background: color-mix(in srgb, var(--ds-surface-muted, #f8fafc) 88%, transparent);
}

.topbar-menu-section-button {
  display: inline-flex;
  min-height: 2.5rem;
  flex: 0 0 auto;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.75rem 0.375rem 0.5rem;
  border: 1px solid transparent;
  border-radius: 0.625rem;
  color: var(--ds-text-muted, #475569);
  font-size: 0.8125rem;
  font-weight: 650;
  line-height: 1;
  transition: color 140ms ease, background-color 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
}

.topbar-menu-section-button:hover,
.topbar-menu-section-button[aria-expanded="true"] {
  color: var(--ds-text-strong, #0f172a);
  border-color: var(--ds-border, #e5e7eb);
  background: var(--ds-surface, #fff);
  box-shadow: 0 1px 2px rgb(15 23 42 / 0.06);
}

.topbar-menu-section-button.is-active {
  color: rgb(var(--color-brand-800-rgb, 35 44 58));
  border-color: rgb(var(--color-brand-500-rgb, 51 65 85) / 0.18);
  background: rgb(var(--color-brand-500-rgb, 51 65 85) / 0.1);
}

.topbar-menu-section-button:focus-visible {
  outline: 2px solid rgb(var(--color-brand-500-rgb, 51 65 85));
  outline-offset: 2px;
}

.topbar-menu-icon,
.topbar-menu-link-icon {
  display: inline-flex;
  width: 1.75rem;
  height: 1.75rem;
  flex: 0 0 1.75rem;
  align-items: center;
  justify-content: center;
  border-radius: 0.5rem;
  color: rgb(var(--color-brand-700-rgb, 41 52 68));
  background: rgb(var(--color-brand-500-rgb, 51 65 85) / 0.1);
}

.topbar-menu-icon .ui-icon,
.topbar-menu-link-icon .ui-icon {
  width: 1rem;
  height: 1rem;
}

.topbar-menu-section-chevron {
  width: 0.75rem;
  height: 0.75rem;
  color: var(--ds-text-muted, #64748b);
  transition: transform 140ms ease;
}

.topbar-menu-popover {
  position: absolute;
  top: calc(100% + 0.625rem);
  z-index: 220;
  /* Reserve the fixed header and bottom safe area even on short landscapes. */
  max-height: min(36rem, max(0px, calc(var(--app-viewport-height) - var(--app-topbar-current-height) - var(--app-safe-bottom) - 1.5rem)));
  overflow-y: auto;
  padding: 0.5rem;
  border: 1px solid var(--ds-border, #e5e7eb);
  border-radius: 1rem;
  color: var(--ds-text, #334155);
  background: color-mix(in srgb, var(--ds-surface, #fff) 96%, transparent);
  box-shadow: 0 20px 48px rgb(15 23 42 / 0.16), 0 2px 8px rgb(15 23 42 / 0.08);
  backdrop-filter: blur(18px);
}

.topbar-menu-popover--primary {
  left: 0;
  width: min(22rem, calc(100vw - 2rem));
}

.topbar-menu-popover--more {
  right: 0;
  width: min(28rem, calc(100vw - 2rem));
}

.topbar-menu-overflow-heading {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.375rem 0.5rem 0.625rem;
  color: var(--ds-text-strong, #0f172a);
}

.topbar-menu-overflow-heading {
  padding-top: 0.75rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.035em;
  text-transform: uppercase;
}

.topbar-menu-overflow-group + .topbar-menu-overflow-group {
  margin-top: 0.375rem;
  border-top: 1px solid var(--ds-border, #e5e7eb);
}

.topbar-menu-list {
  display: grid;
  gap: 0.125rem;
}

.topbar-menu-group {
  padding: 0.25rem 0;
}

.topbar-menu-group-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.625rem 0.25rem;
  color: var(--ds-text-muted, #64748b);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.055em;
  text-transform: uppercase;
}

.topbar-menu-group-label .ui-icon {
  width: 0.875rem;
  height: 0.875rem;
}

.topbar-menu-group-items {
  display: grid;
  gap: 0.125rem;
}

.topbar-menu-link {
  display: flex;
  min-height: 2.75rem;
  align-items: center;
  gap: 0.625rem;
  padding: 0.375rem 0.5rem;
  border-radius: 0.75rem;
  color: var(--ds-text, #334155);
  font-size: 0.875rem;
  font-weight: 550;
  transition: color 130ms ease, background-color 130ms ease;
}

.topbar-menu-link:hover,
.topbar-menu-link:focus-visible {
  color: var(--ds-text-strong, #0f172a);
  background: var(--ds-surface-muted, #f1f5f9);
  outline: none;
}

.topbar-menu-link:focus-visible {
  box-shadow: inset 0 0 0 2px rgb(var(--color-brand-500-rgb, 51 65 85));
}

.topbar-menu-link.is-active {
  color: rgb(var(--color-brand-800-rgb, 35 44 58));
  background: rgb(var(--color-brand-500-rgb, 51 65 85) / 0.11);
}

.topbar-menu-link.is-nested {
  padding-left: 0.75rem;
}

.topbar-menu-badge {
  min-width: 1.25rem;
  padding: 0.125rem 0.375rem;
  border-radius: 999px;
  color: #fff;
  background: rgb(var(--color-brand-700-rgb, 41 52 68));
  font-size: 0.625rem;
  font-weight: 750;
  line-height: 1rem;
  text-align: center;
}

/* Binary review metric switch. Keep state styling independent from generated
   utility classes so server-rendered aria-checked always matches the thumb. */
.review-metric-toggle__track {
  background: var(--color-slate-300, #cbd5e1);
}

.review-metric-toggle__thumb {
  transform: translateX(0);
  transition: transform 180ms cubic-bezier(0.22, 1, 0.36, 1);
}

.review-metric-toggle__track[aria-checked="true"] {
  background: var(--brand-primary, #334155);
}

.review-metric-toggle__track[aria-checked="true"] .review-metric-toggle__thumb {
  transform: translateX(1.25rem);
}

.dark .review-metric-toggle__track:not([aria-checked="true"]) {
  background: var(--color-slate-700, #334155);
}

.dark .navigation-tree-sidebar {
  background:
    radial-gradient(circle at 0 0, rgb(var(--color-brand-400-rgb, 148 163 184) / 0.08), transparent 18rem),
    var(--ds-surface, #09090b);
  box-shadow: 12px 0 34px rgb(0 0 0 / 0.16);
}

.dark .navigation-tree-icon,
.dark .topbar-menu-icon,
.dark .topbar-menu-link-icon {
  color: rgb(var(--color-brand-300-rgb, 203 213 225));
}

.dark .navigation-tree-link.is-active,
.dark .topbar-menu-section-button.is-active,
.dark .topbar-menu-link.is-active {
  color: rgb(var(--color-brand-200-rgb, 226 232 240));
}

/* Keep top-bar navigation on the dark surface even when tenant design tokens
   still contain light defaults. */
html.dark .topbar-menu-track {
  border-color: #3f3f46;
  background: rgb(24 24 27 / 0.88);
}

html.dark .topbar-menu-section-button {
  color: #d4d4d8;
}

html.dark .topbar-menu-section-button:hover,
html.dark .topbar-menu-section-button[aria-expanded="true"] {
  border-color: #52525b;
  background: #27272a;
  color: #fafafa;
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.3);
}

html.dark .topbar-menu-section-button.is-active {
  border-color: rgb(var(--color-brand-400-rgb, 148 163 184) / 0.32);
  background: rgb(var(--color-brand-400-rgb, 148 163 184) / 0.14);
}

html.dark .topbar-menu-popover {
  border-color: #3f3f46;
  background: rgb(9 9 11 / 0.96);
  color: #e4e4e7;
  box-shadow: 0 20px 48px rgb(0 0 0 / 0.45), 0 2px 8px rgb(0 0 0 / 0.3);
}

html.dark .topbar-menu-overflow-heading {
  color: #fafafa;
}

[data-global-search] { min-width: 0; }
[data-global-search] > [data-search-input] {
  display: block;
  width: 100%;
  height: 2.5rem;
  min-height: 2.5rem;
  margin: 0;
  padding: 0 2.75rem 0 2.5rem;
  line-height: 2.5rem;
  appearance: none;
  -webkit-appearance: none;
}
[data-global-search] > svg:first-child {
  top: 50%;
  transform: translateY(-50%);
}
[data-global-search] > [data-search-clear] {
  top: 50%;
  right: 0.375rem;
  width: 2rem;
  height: 2rem;
  min-height: 2rem;
  padding: 0;
  transform: translateY(-50%);
}
[data-global-search] > [data-search-clear] .ui-icon {
  width: 1rem;
  height: 1rem;
  font-size: 1rem !important;
}
[data-global-search] > [data-search-input]:placeholder-shown + [data-search-clear] {
  visibility: hidden;
  pointer-events: none;
}
[data-global-search] > [type='search']::-webkit-search-cancel-button,
[data-global-search] > [type='search']::-webkit-search-decoration {
  display: none;
  -webkit-appearance: none;
}

/* The dialog is teleported to <body>, so keep its icon spacing independent
   from generated utility CSS and from the inline topbar search selectors. */
[data-command-palette] .search-dialog__input {
  padding-left: 3rem;
}

[data-command-palette] .search-dialog__icon {
  z-index: 1;
  width: 1.25rem;
  height: 1.25rem;
  line-height: 1.25rem;
}

@media (min-width: 1024px) {
  html.app-shell-sidebar-open[data-navigation-layout="standard_sidebar"] .navigation-shell--standard {
    width: var(--app-sidebar-expanded-width);
  }
  html.app-shell-sidebar-open[data-navigation-layout="standard_sidebar"] .app-navigation-offset {
    padding-left: var(--app-sidebar-expanded-width);
  }
  html.app-shell-sidebar-open[data-navigation-layout="standard_sidebar"] .app-navigation-topbar {
    left: var(--app-sidebar-expanded-width);
  }

  html.app-shell-sidebar-collapsed[data-navigation-layout="standard_sidebar"] .navigation-shell--standard {
    width: var(--app-sidebar-rail-width);
  }
  html.app-shell-sidebar-collapsed[data-navigation-layout="standard_sidebar"] .app-navigation-offset {
    padding-left: var(--app-sidebar-rail-width);
  }
  html.app-shell-sidebar-collapsed[data-navigation-layout="standard_sidebar"] .app-navigation-topbar {
    left: var(--app-sidebar-rail-width);
  }
  html.app-shell-sidebar-collapsed[data-navigation-layout="standard_sidebar"] .navigation-sidebar-brand,
  html.app-shell-sidebar-collapsed[data-navigation-layout="standard_sidebar"] .navigation-sidebar-label,
  html.app-shell-sidebar-collapsed[data-navigation-layout="standard_sidebar"] .navigation-sidebar-badge,
  html.app-shell-sidebar-collapsed[data-navigation-layout="standard_sidebar"] .navigation-sidebar-chevron,
  html.app-shell-sidebar-collapsed[data-navigation-layout="standard_sidebar"] .navigation-sidebar-section-chevron,
  html.app-shell-sidebar-collapsed[data-navigation-layout="standard_sidebar"] .navigation-sidebar-section-heading {
    display: none !important;
  }
  html.app-shell-sidebar-collapsed[data-navigation-layout="standard_sidebar"] .navigation-sidebar-section-items {
    display: block !important;
    height: auto !important;
    padding-left: 0 !important;
  }
  html.app-shell-sidebar-collapsed[data-navigation-layout="standard_sidebar"] .navigation-sidebar-section {
    margin-bottom: 0.25rem;
  }
  html.app-shell-sidebar-collapsed[data-navigation-layout="standard_sidebar"] .navigation-sidebar-item {
    justify-content: center;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }
  html.app-shell-sidebar-collapsed[data-navigation-layout="standard_sidebar"] .navigation-sidebar-item > span {
    justify-content: center;
    gap: 0;
  }

  html.app-shell-sidebar-open[data-navigation-layout="tree_sidebar"] .navigation-tree-sidebar {
    width: var(--app-tree-sidebar-expanded-width);
  }
  html.app-shell-sidebar-open[data-navigation-layout="tree_sidebar"] .app-navigation-offset {
    padding-left: var(--app-tree-sidebar-expanded-width);
  }
  html.app-shell-sidebar-open[data-navigation-layout="tree_sidebar"] .app-navigation-topbar {
    left: var(--app-tree-sidebar-expanded-width);
  }

  html.app-shell-sidebar-collapsed[data-navigation-layout="tree_sidebar"] .navigation-tree-sidebar {
    width: var(--app-sidebar-rail-width);
  }
  html.app-shell-sidebar-collapsed[data-navigation-layout="tree_sidebar"] .app-navigation-offset {
    padding-left: var(--app-sidebar-rail-width);
  }
  html.app-shell-sidebar-collapsed[data-navigation-layout="tree_sidebar"] .app-navigation-topbar {
    left: var(--app-sidebar-rail-width);
  }
  html.app-shell-sidebar-collapsed[data-navigation-layout="tree_sidebar"] .navigation-sidebar-brand,
  html.app-shell-sidebar-collapsed[data-navigation-layout="tree_sidebar"] .navigation-tree-trigger > span:nth-of-type(2),
  html.app-shell-sidebar-collapsed[data-navigation-layout="tree_sidebar"] .navigation-tree-chevron,
  html.app-shell-sidebar-collapsed[data-navigation-layout="tree_sidebar"] .navigation-tree-branch {
    display: none !important;
  }
  html.app-shell-sidebar-collapsed[data-navigation-layout="tree_sidebar"] .navigation-tree-scroll {
    padding-left: 0.375rem;
    padding-right: 0.375rem;
  }
  html.app-shell-sidebar-collapsed[data-navigation-layout="tree_sidebar"] .navigation-tree-trigger {
    justify-content: center;
    padding-left: 0.375rem;
    padding-right: 0.375rem;
  }

  html[data-navigation-layout="topbar_sidebar"] .app-navigation-offset {
    padding-left: 0;
  }

  html[data-navigation-layout="topbar_sidebar"] {
    --app-topbar-current-height: calc(var(--app-safe-top) + var(--app-topbar-height-desktop));
  }

  html[data-navigation-layout="topbar_sidebar"] .app-navigation-topbar {
    left: 0;
  }

  html[data-navigation-layout="topbar_sidebar"] [data-testid="navbar-toggle"] {
    display: none !important;
  }

  html[data-navigation-layout="topbar_sidebar"] .topbar-inner {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  html[data-navigation-layout="topbar_sidebar"] .topbar-row {
    gap: 0.75rem;
  }

  html[data-navigation-layout="topbar_sidebar"] .topbar-search {
    flex: 1 1 20rem;
    max-width: 36rem;
  }

  html[data-navigation-layout="topbar_sidebar"] .topbar-search > div {
    max-width: none;
  }

  html[data-navigation-layout="topbar_sidebar"] .navigation-topbar-menu {
    display: block !important;
    width: 100%;
    overflow: visible;
  }

  html[data-navigation-layout="topbar_sidebar"] .topbar-menu-track {
    width: 100%;
  }

  html[data-navigation-layout="topbar_sidebar"] .topbar-actions {
    min-width: 0;
    flex: 0 0 auto;
    white-space: nowrap;
  }

  html[data-navigation-layout="topbar_sidebar"] .topbar-menu-section {
    flex: 0 0 auto;
  }

  @media (max-width: 1279px) {
    html[data-navigation-layout="topbar_sidebar"] .topbar-menu-section-label {
      display: none;
    }

    html[data-navigation-layout="topbar_sidebar"] .topbar-menu-section-button {
      min-width: 2.25rem;
      justify-content: center;
      padding-left: 0.5rem;
      padding-right: 0.5rem;
    }

    html[data-navigation-layout="topbar_sidebar"] .topbar-search {
      display: none !important;
    }
  }

  .app-navigation-offset,
  .app-navigation-topbar {
    /* Reserve the final sidebar space once; only the drawer slides. */
    transition: none;
  }
}

/* Keep the mobile sidebar fully off-canvas when closed. */
[data-testid="sidebar"].-translate-x-full {
  transform: translateX(calc(-100% - 2rem));
}

:root {
  --app-safe-top: env(safe-area-inset-top, 0px);
  --app-safe-right: env(safe-area-inset-right, 0px);
  --app-safe-bottom: env(safe-area-inset-bottom, 0px);
  --app-safe-left: env(safe-area-inset-left, 0px);
  --app-viewport-height: 100vh;
  --app-topbar-height-mobile: 120px;
  --app-topbar-height-desktop: 64px;
  --app-topbar-current-height: calc(var(--app-safe-top) + var(--app-topbar-height-mobile));
  --app-toast-top-offset: calc(var(--app-safe-top) + var(--app-topbar-height-mobile) + 16px);
  --app-bottom-nav-height: 74px;
  --app-bottom-nav-current-height: 0px;
  --app-z-backdrop: 1200;
  --app-z-dropdown: 1250;
  --app-z-popover: 1260;
  --app-z-tooltip: 1270;
  --app-z-modal: 1300;
  --app-z-toast: 1400;
  --app-content-max-width: 108rem;
  --app-content-gutter: clamp(16px, 2vw, 32px);
  --app-sidebar-expanded-width: 256px;
  --app-tree-sidebar-expanded-width: 288px;
  --app-sidebar-rail-width: 64px;
  --app-control-compact-height: 40px;
  --app-control-default-height: 44px;
  --app-table-header-height: 36px;
  --app-table-row-compact-height: 48px;
  --app-table-row-default-height: 52px;
  --app-detail-sidebar-width: 360px;
  --app-kanban-column-width: 320px;
  --app-kanban-column-min-width: 288px;
  --app-kanban-gap: 16px;
  --app-modal-sm: 400px;
  --app-modal-md: 560px;
  --app-modal-lg: 768px;
  --app-modal-xl: 1024px;

  /* Theme tokens (light default). Dark values are defined under `html.dark`. */
  --ds-app-bg: #f8fafc;
  --ds-surface-1: #ffffff;
  --ds-surface-2: #f8fafc;
  --ds-surface-3: #f1f5f9;
  --ds-border: #e2e8f0;
  --ds-border-strong: #cbd5e1;
  --ds-text: #0f172a;
  --ds-text-muted: #64748b;
  --ds-link: var(--brand-primary, #334155);
  --ds-link-hover: var(--brand-primary-hover, #115e59);
  --ds-lift-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05);
  --ds-lift-shadow-md: 0 10px 24px rgba(15, 23, 42, 0.08);
  --ds-lift-shadow-lg: 0 18px 40px rgba(15, 23, 42, 0.12);
  --ds-lift-shadow-hover: 0 16px 34px rgba(15, 23, 42, 0.12);
  --ds-lift-shadow-active: 0 0 0 1px color-mix(in srgb, var(--brand-primary, #334155) 22%, transparent), 0 12px 28px rgba(15, 23, 42, 0.1);
  --ds-night-shift-strength: 0.08;
  --ds-font-sans: "Inter Variable", "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ds-font-mono: "SFMono-Regular", "Cascadia Code", "Roboto Mono", Consolas, "Liberation Mono", monospace;
}

html.dark {
  /* Soft graphite dark: lighter than pure zinc-950, still low-glare. */
  --ds-app-bg: #141418;
  --ds-surface-1: #1c1c21;
  --ds-surface-2: #232329;
  --ds-surface-3: #2b2b32;
  --ds-border: #3a3a42;
  --ds-border-strong: #52525b;
  --ds-text: #fafafa;
  --ds-text-muted: #c4c4cc;
  /* Brand 400 misses AA for 12px text on graphite surfaces. */
  --ds-link: rgb(var(--color-brand-300-rgb));
  --ds-link-hover: rgb(var(--color-brand-200-rgb));
  --ds-lift-shadow-sm:
    0 0 0 1px rgba(255, 255, 255, 0.075),
    0 -1px 0 rgba(255, 255, 255, 0.055) inset,
    0 10px 24px rgba(0, 0, 0, 0.22);
  --ds-lift-shadow-md:
    0 0 0 1px rgba(255, 255, 255, 0.09),
    0 -1px 0 rgba(255, 255, 255, 0.065) inset,
    0 14px 32px rgba(0, 0, 0, 0.26);
  --ds-lift-shadow-lg:
    0 0 0 1px rgba(255, 255, 255, 0.105),
    0 0 22px rgba(244, 244, 245, 0.055),
    0 -1px 0 rgba(255, 255, 255, 0.075) inset,
    0 22px 52px rgba(0, 0, 0, 0.32);
  --ds-lift-shadow-hover:
    0 0 0 1px rgba(255, 255, 255, 0.15),
    0 0 0 4px rgba(255, 255, 255, 0.018),
    0 0 26px rgba(244, 244, 245, 0.065),
    0 -1px 0 rgba(255, 255, 255, 0.09) inset,
    0 18px 38px rgba(0, 0, 0, 0.34);
  --ds-lift-shadow-active:
    0 0 0 1px rgba(94, 234, 212, 0.28),
    0 0 0 4px color-mix(in srgb, rgb(var(--color-brand-400-rgb)) 4.5%, transparent),
    0 0 30px color-mix(in srgb, rgb(var(--color-brand-400-rgb)) 7.5%, transparent),
    0 -1px 0 rgba(255, 255, 255, 0.08) inset,
    0 16px 36px rgba(0, 0, 0, 0.4);
}

html,
body {
  min-height: 100%;
  background-color: var(--ds-app-bg);
  font-family: var(--ds-font-sans);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

html.pwa-standalone,
html.pwa-standalone body {
  width: 100%;
  min-height: var(--app-viewport-height);
  overscroll-behavior-y: none;
}

html.pwa-standalone body {
  min-height: var(--app-viewport-height);
  -webkit-overflow-scrolling: touch;
}

html.pwa-standalone input,
html.pwa-standalone textarea,
html.pwa-standalone [contenteditable="true"],
html.pwa-standalone .selectable,
html.pwa-standalone [data-selectable="true"] {
  user-select: text;
  -webkit-user-select: text;
}

html.pwa-standalone #app,
html.pwa-standalone #app-shell {
  min-height: var(--app-viewport-height);
}

html.pwa-standalone #app-main {
  min-height: calc(var(--app-viewport-height) - var(--app-topbar-current-height));
  overscroll-behavior-y: contain;
}

html.pwa-standalone #app-content {
  padding-left: max(var(--app-content-gutter), var(--app-safe-left)) !important;
  padding-right: max(var(--app-content-gutter), var(--app-safe-right)) !important;
}

html.pwa-standalone button,
html.pwa-standalone a,
html.pwa-standalone [role="button"] {
  -webkit-touch-callout: none;
}

html.pwa-standalone button,
html.pwa-standalone a,
html.pwa-standalone [role="button"],
html.pwa-standalone input,
html.pwa-standalone select,
html.pwa-standalone textarea {
  -webkit-tap-highlight-color: color-mix(in srgb, var(--brand-primary, #334155) 14%, transparent);
}

html.pwa-standalone button:active,
html.pwa-standalone a:active,
html.pwa-standalone [role="button"]:active {
  transform: scale(0.98);
}

html.pwa-standalone nav[role="navigation"][class*="bottom-0"] {
  border-top: 1px solid rgba(148, 163, 184, 0.22);
  box-shadow: 0 -10px 30px rgba(15, 23, 42, 0.08);
}

html.pwa-standalone.dark nav[role="navigation"][class*="bottom-0"] {
  border-top-color: rgba(63, 63, 70, 0.85);
  box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.35);
}

html.pwa-backgrounded #app {
  filter: saturate(0.92);
}

html.pwa-fullscreen nav[data-testid="navbar"],
html.pwa-standalone nav[data-testid="navbar"] {
  background-clip: padding-box;
}

body,
#app,
#app-shell,
#app-main,
#app-content {
  background-color: var(--ds-app-bg);
}

html.night-shift:not(.dark) body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 2147483646;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 244, 214, calc(var(--ds-night-shift-strength) * 0.85)), transparent 48%),
    rgba(255, 190, 92, var(--ds-night-shift-strength));
  mix-blend-mode: multiply;
}

html.dark body::before {
  content: none;
}

[data-night-shift-controls][data-enabled="false"] [data-night-shift-slider],
[data-night-shift-controls][data-enabled="false"] [data-night-shift-value] {
  opacity: 0.65;
}

@media print {
  html.night-shift:not(.dark) body::before {
    content: none;
  }
}

code,
kbd,
samp,
pre,
.font-mono {
  font-family: var(--ds-font-mono);
}

body.has-bottom-nav #app-main {
  padding-bottom: calc(var(--app-bottom-nav-height) + var(--app-safe-bottom));
}

body.has-bottom-nav {
  --app-bottom-nav-current-height: calc(var(--app-bottom-nav-height) + var(--app-safe-bottom));
}

@media (min-width: 1024px) {
  body.has-bottom-nav {
    --app-bottom-nav-current-height: 0px;
  }
}

@media (min-width: 640px) {
  body.has-bottom-nav #app-main {
    padding-bottom: 0;
  }

  :root {
    --app-toast-top-offset: calc(var(--app-safe-top) + var(--app-topbar-height-desktop) + 16px);
  }
}

/* Reserve the exact fixed header area so page content never slides under it. */
@supports (height: 100dvh) {
  :root {
    --app-viewport-height: 100dvh;
  }
}

body {
  padding-top: 0;
}

#app-topbar-shell {
  height: var(--app-topbar-current-height);
  min-height: var(--app-topbar-current-height);
  flex-shrink: 0;
}

nav[data-testid="navbar"] {
  padding-top: var(--app-safe-top);
}

/* Sidebar controls and scrollable navigation must fit the visible viewport,
   including display cutouts, without shrinking their touch targets. */
.navigation-shell {
  box-sizing: border-box;
  height: var(--app-viewport-height);
  min-height: 0;
  padding-top: var(--app-safe-top);
  padding-bottom: var(--app-safe-bottom);
}

.navigation-shell > :first-child {
  flex-shrink: 0;
}

nav[data-testid="navbar"] .topbar-inner {
  padding-left: max(var(--app-content-gutter), var(--app-safe-left));
  padding-right: max(var(--app-content-gutter), var(--app-safe-right));
}

nav[data-testid="navbar"] .topbar-search {
  min-width: 0;
}

nav[data-testid="navbar"] .topbar-row > :first-child > a img {
  max-width: min(132px, 100%);
}

/* Popovers are independent scroll regions; their last action remains reachable
   when the available height is smaller than the menu. */
nav[data-testid="navbar"] [data-search-results] {
  max-height: max(0px, calc(var(--app-viewport-height) - var(--app-topbar-current-height) - var(--app-safe-bottom) - 1rem));
  overscroll-behavior: contain;
}

@media (min-width: 768px) {
  :root {
    --app-topbar-current-height: calc(var(--app-safe-top) + var(--app-topbar-height-desktop));
  }

  #app-topbar-shell {
    height: var(--app-topbar-current-height);
    min-height: var(--app-topbar-current-height);
  }
}

/* Global desktop responsiveness. Structural geometry must remain exact across
   desktop viewports; density is expressed with component variants, never by
   scaling the root rem value. */
#app-main #app-content {
  /* Module layouts respond to the space left by an expanded desktop sidebar. */
  container-name: app-content;
  container-type: inline-size;
  width: 100%;
  max-width: var(--app-content-max-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: max(var(--app-content-gutter), var(--app-safe-left)) !important;
  padding-right: max(var(--app-content-gutter), var(--app-safe-right)) !important;
}

#app-main #app-content > * {
  min-width: 0;
}

html.dark body,
html.dark #app,
html.dark #app-shell,
html.dark #app-main,
html.dark #app-content {
  background-color: var(--ds-app-bg);
}

html.dark :is(.dark\:bg-zinc-950, .dark\:bg-slate-950) {
  background-color: var(--ds-app-bg) !important;
}

html.dark :is(
  .dark\:bg-zinc-950\/95,
  .dark\:bg-zinc-950\/92,
  .dark\:bg-zinc-950\/90,
  .dark\:bg-zinc-950\/85,
  .dark\:bg-zinc-950\/80,
  .dark\:bg-zinc-950\/70,
  .dark\:bg-zinc-950\/60,
  .dark\:bg-zinc-950\/45,
  .dark\:bg-zinc-950\/40,
  .dark\:bg-slate-950\/90,
  .dark\:bg-slate-950\/80
) {
  background-color: color-mix(in srgb, var(--ds-app-bg) 84%, var(--ds-surface-2)) !important;
}

html.dark :is(.dark\:bg-zinc-900, .dark\:bg-slate-900) {
  background-color: var(--ds-surface-1) !important;
}

html.dark :is(
  .dark\:bg-zinc-900\/95,
  .dark\:bg-zinc-900\/90,
  .dark\:bg-zinc-900\/85,
  .dark\:bg-zinc-900\/80,
  .dark\:bg-zinc-900\/70,
  .dark\:bg-slate-900\/90,
  .dark\:bg-slate-900\/80
) {
  background-color: color-mix(in srgb, var(--ds-surface-1) 86%, var(--ds-surface-2)) !important;
}

html.dark :is(.dark\:border-zinc-800, .dark\:border-slate-800) {
  border-color: var(--ds-border) !important;
}

[data-theme-choice][data-active="true"] {
  background-color: #ffffff;
  color: var(--ds-link);
  box-shadow: var(--ds-lift-shadow-sm);
}

[data-theme-choice="night"][data-active="true"] {
  color: #b45309;
}

html.dark [data-theme-choice][data-active="true"] {
  background-color: var(--ds-surface-3);
  color: var(--ds-link-hover);
}

html.dark [data-theme-choice="night"][data-active="true"] {
  color: #fcd34d;
}

html.dark #app-main #app-content :is(
  .ui-card,
  .generic-card,
  [data-table-shell],
  [data-chart-card],
  article[class*="dark:bg-zinc"],
  section[class*="dark:bg-zinc"],
  div[class*="dark:bg-zinc"],
  article[class*="dark:bg-slate"],
  section[class*="dark:bg-slate"],
  div[class*="dark:bg-slate"]
):is(.shadow-sm, .shadow, [class*="shadow-sm"]) {
  box-shadow: var(--ds-lift-shadow-sm);
}

html.dark #app-main #app-content :is(
  .ui-card,
  .generic-card,
  [data-table-shell],
  [data-chart-card],
  article[class*="dark:bg-zinc"],
  section[class*="dark:bg-zinc"],
  div[class*="dark:bg-zinc"],
  article[class*="dark:bg-slate"],
  section[class*="dark:bg-slate"],
  div[class*="dark:bg-slate"]
):is(.shadow-md, [class*="shadow-md"]) {
  box-shadow: var(--ds-lift-shadow-md);
}

html.dark #app-main #app-content :is(
  .ui-card,
  .generic-card,
  [data-table-shell],
  [data-chart-card],
  article[class*="dark:bg-zinc"],
  section[class*="dark:bg-zinc"],
  div[class*="dark:bg-zinc"],
  article[class*="dark:bg-slate"],
  section[class*="dark:bg-slate"],
  div[class*="dark:bg-slate"]
):is(.shadow-lg, .shadow-xl, .shadow-2xl, [class*="shadow-lg"], [class*="shadow-xl"], [class*="shadow-2xl"]) {
  box-shadow: var(--ds-lift-shadow-lg);
}

html.dark #app-main #app-content :is(
  .ui-card,
  .generic-card,
  [data-table-shell],
  [data-chart-card],
  article[class*="dark:bg-zinc"],
  section[class*="dark:bg-zinc"],
  div[class*="dark:bg-zinc"],
  article[class*="dark:bg-slate"],
  section[class*="dark:bg-slate"],
  div[class*="dark:bg-slate"]
):is(:hover, :focus-within) {
  box-shadow: var(--ds-lift-shadow-hover);
}

html.dark #app-main #app-content :is(
  [aria-current="page"],
  [aria-selected="true"],
  [aria-pressed="true"],
  .active,
  .is-active,
  [data-active="true"],
  [data-state="active"]
):is(.shadow-sm, .shadow, .shadow-md, [class*="shadow-sm"], [class*="shadow-md"]) {
  box-shadow: var(--ds-lift-shadow-active);
}

@media (min-width: 1024px) {
  html {
    font-size: 16px;
  }
}

/* Native-style tab bar behavior in standalone mode */
@media (display-mode: standalone) {
  nav[aria-label="Mobile navigation"] {
    padding-bottom: var(--app-safe-bottom);
    background-color: #ffffff;
  }
  html.dark nav[aria-label="Mobile navigation"] {
    background-color: var(--ds-surface-2);
    border-top: 1px solid var(--ds-border);
  }
}

/* Keep mobile bottom nav always visible while scrolling (especially iOS Safari). */
@media (max-width: 639px) {
  /* Avoid creating transformed containing blocks on mobile:
     this can break fixed positioning in Safari/Chrome. */
  #app-shell,
  #app-main {
    will-change: auto !important;
  }

  nav[aria-label="Mobile navigation"] {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 40;
    min-height: calc(var(--app-bottom-nav-height) + var(--app-safe-bottom));
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /* Checklist action bars are fixed independently from the global mobile
     navigation. Keep both controls reachable instead of stacking them over
     each other on phones and in standalone PWA mode. */
  :is([data-checklist-bottom-bar], [data-checklist-sticky-bottom-bar]) {
    bottom: calc(var(--app-bottom-nav-height) + var(--app-safe-bottom)) !important;
  }
}

/* Ensure touch target size and responsive gestures */
button,
a[role="button"],
[data-mobile-quick-create],
[data-mobile-quick-search],
[data-mobile-quick-settings] {
  min-height: 44px;
  touch-action: pan-y;
}

@media (pointer: fine) {
  button,
  a[role="button"],
  [data-mobile-quick-create],
  [data-mobile-quick-search],
  [data-mobile-quick-settings] {
    touch-action: manipulation;
  }
}

@media (max-width: 639px) {
  /* Ensure compact icon controls remain finger-friendly on mobile. */
  button[aria-label],
  a[aria-label],
  .ui-icon-btn {
    min-width: 40px;
    min-height: 40px;
  }
}

/* Smoother app transitions without heavy animation */
[data-bottom-sheet] {
  will-change: transform, opacity;
}

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

/* Global layer system: popups/modals/toasts must always sit above page content. */
#app-toast,
#toast-container,
.ui-toast-container {
  position: fixed !important;
  z-index: var(--app-z-toast);
  isolation: isolate;
}

#app-toast,
#app-global-toast {
  top: var(--app-toast-top-offset);
}

[role="dialog"],
[aria-modal="true"],
[data-modal],
.modal,
.popup,
.chat-dialog,
#slot-modal {
  z-index: var(--app-z-modal);
}

[data-modal-overlay],
.modal-backdrop,
.overlay,
.backdrop,
.chat-dialog-backdrop,
#chat-new-dialog-backdrop,
#chat-sidebar-backdrop {
  z-index: var(--app-z-backdrop);
}

.notif-dropdown {
  z-index: var(--app-z-dropdown);
}

[role="menu"],
.dropdown-menu,
[data-dropdown],
.ts-dropdown,
.select2-dropdown {
  z-index: var(--app-z-dropdown);
}

.popover,
[data-popover] {
  z-index: var(--app-z-popover);
}

[role="tooltip"],
.tooltip,
.tooltip-inner,
.apexcharts-tooltip,
.apexcharts-xaxistooltip,
.apexcharts-yaxistooltip {
  z-index: var(--app-z-tooltip);
}

.kanban-column,
.kanban-card,
.kanban-task {
  position: relative;
}

.kanban-column:focus-within {
  z-index: 3;
}

.kanban-card:focus-within,
.kanban-task:focus-within {
  z-index: 4;
}

/* Header overlays (notifications/profile) should not be clipped by page content. */
nav[data-testid="navbar"],
[data-testid="topbar"] {
  overflow: visible;
}

/* Topbar alignment contract: one control height, one baseline, one action rhythm. */
nav[data-testid="navbar"] .topbar-row {
  min-height: 4rem;
}

nav[data-testid="navbar"] .topbar-actions {
  align-items: center;
  gap: 0.625rem;
}

nav[data-testid="navbar"] :where(.topbar-action, .topbar-notification-button, .topbar-profile-button) {
  flex-shrink: 0;
  box-sizing: border-box;
}

nav[data-testid="navbar"] .topbar-action {
  min-width: 0;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.16);
}

nav[data-testid="navbar"] .topbar-action-primary {
  border-color: rgb(var(--color-brand-200-rgb));
  background: rgb(var(--color-brand-50-rgb));
  color: rgb(var(--color-brand-700-rgb));
}

nav[data-testid="navbar"] .topbar-action-primary:hover {
  border-color: rgb(var(--color-brand-300-rgb));
  background: rgb(var(--color-brand-100-rgb));
}

nav[data-testid="navbar"] .topbar-action-secondary {
  border-color: #d4d4d8;
  background: #fafafa;
  color: #3f3f46;
}

nav[data-testid="navbar"] .topbar-action-secondary:hover {
  border-color: rgb(var(--color-brand-200-rgb));
  background: rgb(var(--color-brand-50-rgb));
  color: rgb(var(--color-brand-700-rgb));
}

nav[data-testid="navbar"] .topbar-action-icon {
  background: rgb(var(--color-brand-100-rgb));
  color: rgb(var(--color-brand-700-rgb));
}

nav[data-testid="navbar"] :where(.topbar-notification-button, .topbar-profile-button) {
  border-color: #d4d4d8;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.18);
}

nav[data-testid="navbar"] .topbar-notification-button {
  margin-left: 0.125rem;
}

nav[data-testid="navbar"] .topbar-profile-button {
  padding: 0.125rem;
}

nav[data-testid="navbar"] .topbar-notification-badge {
  border: 2px solid #ffffff;
  background: #ef4444;
  box-shadow: 0 2px 6px rgba(239, 68, 68, 0.35);
}

html.dark nav[data-testid="navbar"] .topbar-action-primary {
  border-color: color-mix(in srgb, var(--brand-primary) 45%, transparent);
  background: color-mix(in srgb, var(--brand-primary) 10%, transparent);
  color: var(--color-brand-300);
}

html.dark nav[data-testid="navbar"] .topbar-action-primary:hover {
  border-color: color-mix(in srgb, var(--color-brand-400) 75%, transparent);
  background: color-mix(in srgb, var(--brand-primary) 18%, transparent);
}

html.dark nav[data-testid="navbar"] .topbar-action-secondary {
  border-color: rgba(161, 161, 170, 0.28);
  background: rgba(39, 39, 42, 0.35);
  color: #e4e4e7;
}

html.dark nav[data-testid="navbar"] .topbar-action-secondary:hover {
  border-color: color-mix(in srgb, var(--color-brand-400) 55%, transparent);
  background: rgba(39, 39, 42, 0.68);
  color: var(--color-brand-200);
}

html.dark nav[data-testid="navbar"] .topbar-action-icon {
  background: color-mix(in srgb, var(--color-brand-400) 12%, transparent);
  color: var(--color-brand-300);
}

html.dark nav[data-testid="navbar"] :where(.topbar-notification-button, .topbar-profile-button) {
  border-color: rgba(161, 161, 170, 0.32);
  background: rgba(39, 39, 42, 0.42);
}

html.dark nav[data-testid="navbar"] .topbar-notification-badge {
  border-color: #27272a;
}

@media (max-width: 639px) {
  nav[data-testid="navbar"] .topbar-actions {
    gap: 0.375rem;
  }

  nav[data-testid="navbar"] .topbar-action-primary {
    padding-inline: 0.625rem;
  }
}

/* Unified data tables/lists style (aligned with Tasks list visual language). */
#app-main #app-content .overflow-x-auto,
#app-main #app-content .overflow-auto,
#app-main #app-content .table-responsive,
#app-main #app-content [data-table-scroll] {
  scrollbar-gutter: stable;
}

#app-main #app-content .overflow-x-auto > table:not(.task-list-grid):not([role='presentation']),
#app-main #app-content .table-responsive > table:not(.task-list-grid):not([role='presentation']),
#app-main #app-content table.min-w-full:not(.task-list-grid):not([role='presentation']),
#app-main #app-content table.w-full:not(.task-list-grid):not([role='presentation']) {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--ds-surface-1);
  border: 1px solid var(--ds-border);
  border-radius: 0.9rem;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

/* A bordered table shell owns the outer contour; do not draw it again on the table. */
#app-main #app-content .border > :where(.overflow-x-auto, .overflow-auto, .table-responsive, [data-table-scroll]) > table:not(.task-list-grid):not([role='presentation']),
#app-main #app-content :is(.overflow-x-auto, .overflow-auto, .table-responsive, [data-table-scroll]).border > table:not(.task-list-grid):not([role='presentation']) {
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

#app-main #app-content table:not(.task-list-grid):not([role='presentation']) thead {
  background: var(--ds-surface-2);
}

#app-main #app-content table:not(.task-list-grid):not([role='presentation']) thead th {
  height: var(--app-table-header-height);
  padding: 0.375rem 0.75rem;
  border-bottom: 1px solid var(--ds-border);
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ds-text-muted);
  vertical-align: middle;
}

#app-main #app-content table:not(.task-list-grid):not([role='presentation']) tbody td {
  min-height: var(--app-table-row-default-height);
  padding: 0.625rem 0.75rem;
  border-bottom: 1px solid color-mix(in srgb, var(--ds-border) 72%, transparent);
  vertical-align: middle;
  color: var(--ds-text);
}

#app-main #app-content table:not(.task-list-grid):not([role='presentation']) tbody tr:nth-child(odd) {
  background: var(--ds-surface-1);
}

#app-main #app-content table:not(.task-list-grid):not([role='presentation']) tbody tr:nth-child(even) {
  background: color-mix(in srgb, var(--ds-surface-2) 55%, var(--ds-surface-1));
}

#app-main #app-content table:not(.task-list-grid):not([role='presentation']) tbody tr:hover {
  background: color-mix(in srgb, var(--ds-surface-3) 60%, var(--ds-surface-2));
}

#app-main #app-content table:not(.task-list-grid):not([role='presentation']) tbody tr:last-child td {
  border-bottom: none;
}

#app-main #app-content table.task-list-grid {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
  min-width: 92rem;
  table-layout: fixed;
  color: var(--ds-text);
}

#app-main #app-content table.task-list-grid .task-list-grid-actions {
  width: 15rem;
  min-width: 15rem;
  max-width: 15rem;
  right: 0;
}

#app-main #app-content table.audit-list-grid .task-list-grid-actions {
  width: 7rem;
  min-width: 7rem;
  max-width: 7rem;
}

#app-main #app-content table.task-list-grid col:nth-child(1) {
  width: 22rem;
}

#app-main #app-content table.task-list-grid col:nth-child(2),
#app-main #app-content table.task-list-grid col:nth-child(3),
#app-main #app-content table.task-list-grid col:nth-child(4) {
  width: 9rem;
}

#app-main #app-content table.task-list-grid col:nth-child(5) {
  width: 12rem;
}

#app-main #app-content table.task-list-grid col:nth-child(6),
#app-main #app-content table.task-list-grid col:nth-child(7) {
  width: 8rem;
}

#app-main #app-content table.task-list-grid col:nth-child(8) {
  width: 15rem;
}

#app-main #app-content .tasks-list-toolbar-sticky {
  position: sticky;
  top: 4.5rem;
  z-index: 35;
}

#app-main #app-content .task-list-grid-scroll {
  overflow: auto;
  max-height: clamp(30rem, calc(100dvh - 14.5rem), 50rem);
  scrollbar-gutter: stable;
}

#app-main #app-content .task-list-grid-header-scroll,
#app-main #app-content .task-list-grid-scroll {
  max-width: 100%;
}

#app-main #app-content .task-list-grid-header-scroll {
  overflow-x: hidden;
  overflow-y: scroll;
  scrollbar-color: transparent transparent;
  scrollbar-gutter: stable;
}

#app-main #app-content .task-list-grid-header-scroll::-webkit-scrollbar {
  width: 15px;
  height: 0;
}

#app-main #app-content .task-list-grid-header-scroll::-webkit-scrollbar-thumb,
#app-main #app-content .task-list-grid-header-scroll::-webkit-scrollbar-track {
  background: transparent;
}

#app-main #app-content .task-list-grid-scroll[data-no-natural-table-scroll] {
  cursor: default;
  overscroll-behavior-x: auto;
}

/* The tasks list follows the page scroll so its infinite-scroll sentinel can
   enter the viewport. Keep only the wide table's horizontal overflow local. */
#app-main #app-content .task-list-grid-scroll[data-task-list-infinite-scroll] {
  max-height: none;
  overflow-x: auto;
  overflow-y: visible;
  overscroll-behavior-x: contain;
  overscroll-behavior-y: auto;
  scrollbar-gutter: auto;
}

#app-main #app-content [data-table-scroll].is-h-scrollable {
  cursor: grab;
  overscroll-behavior-x: contain;
  scrollbar-gutter: stable;
}

#app-main #app-content [data-table-scroll].is-h-scrollable.is-table-drag-ready,
#app-main #app-content [data-table-scroll].is-h-scrollable.is-table-dragging {
  cursor: grabbing;
}

#app-main #app-content [data-table-scroll].is-table-dragging {
  user-select: none;
}

#app-main #app-content .task-list-grid-header-sticky {
  position: relative;
  top: auto;
  z-index: 30;
}

#app-main #app-content .task-list-grid-header-inline {
  position: relative;
  top: auto;
}

#app-main #app-content .task-list-grid th,
#app-main #app-content .task-list-grid td {
  box-sizing: border-box;
  line-height: 1.35;
}

#app-main #app-content .task-list-grid th {
  height: var(--app-table-header-height);
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
  vertical-align: middle;
}

#app-main #app-content .task-list-grid td {
  height: 4.75rem;
  vertical-align: middle;
}

#app-main #app-content .task-list-grid :where(select, button, a) {
  max-width: 100%;
}

#app-main #app-content [data-task-card] {
  min-width: 0;
  max-width: 100%;
  border-radius: 0.5rem;
  border: 1px solid var(--ds-border);
  background: var(--ds-surface-1);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
}

/* Task cards retain their mobile layout; the desktop collection shares the
   four-column contract with other explicitly marked card collections below. */
#app-main #app-content .task-card-grid {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  grid-template-columns: minmax(0, 1fr);
}

#app-main #app-content [data-task-card]:hover {
  border-color: color-mix(in srgb, var(--ds-brand) 35%, var(--ds-border));
  box-shadow: 0 14px 32px rgba(15, 23, 42, 0.08);
}

#app-main #app-content [data-dashboard-layout='canonical'] :where([data-sortable-cards]) {
  align-items: stretch;
}

#app-main #app-content [data-dashboard-layout='canonical'] :where([data-chart-card], [data-dashboard-section], [data-dashboard-table], [data-table-shell]) {
  min-width: 0;
}

#app-main #app-content [data-dashboard-layout='canonical'] canvas {
  max-width: 100%;
}

/* Dashboard cards follow the compact task-card rhythm. Google colors are
   accents for scanability; surfaces remain neutral in both color schemes. */
#app-main #app-content [data-dashboard-kpi] {
  min-height: 7.25rem !important;
  padding: 1rem !important;
  overflow: visible;
  isolation: isolate;
  border-color: var(--ds-border) !important;
  border-top: 3px solid var(--dashboard-accent, #4285f4) !important;
  background: var(--ds-surface-1) !important;
  color: var(--ds-text) !important;
  box-shadow: var(--ds-lift-shadow-sm) !important;
}

#app-main #app-content [data-dashboard-kpi-tone='primary'],
#app-main #app-content [data-dashboard-kpi-tone='neutral'] { --dashboard-accent: #4285f4; }
#app-main #app-content [data-dashboard-kpi-tone='danger'] { --dashboard-accent: #ea4335; }
#app-main #app-content [data-dashboard-kpi-tone='warning'] { --dashboard-accent: #fbbc05; }
#app-main #app-content [data-dashboard-kpi-tone='success'] { --dashboard-accent: #34a853; }

#app-main #app-content [data-dashboard-kpi] :where(p, span) {
  color: inherit !important;
}

/* KPI help text must not inherit the card's foreground onto its dark surface. */
#app-main #app-content [data-dashboard-kpi] [role='tooltip'] {
  border-color: #334155 !important;
  background: #0f172a !important;
  color: #f8fafc !important;
  box-shadow: 0 12px 30px rgb(15 23 42 / 28%) !important;
}

#app-main #app-content [data-dashboard-kpi] [role='tooltip'] :where(span, strong) {
  color: #f8fafc !important;
}

#app-main #app-content [data-dashboard-kpi] [data-dashboard-metric-value] {
  font-size: 1.75rem;
  letter-spacing: -0.025em;
}

/* Secondary controls stay quiet so the metric remains the focal point. */
#app-main #app-content [data-dashboard-kpi] :where(.dashboard-kpi-icon, .dashboard-kpi-info) {
  background: transparent !important;
  color: var(--ds-text-muted) !important;
}

#app-main #app-content [data-dashboard-kpi] :where(.dashboard-kpi-icon, .dashboard-kpi-info) > .ui-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent !important;
  color: inherit !important;
  line-height: 1;
}

#app-main #app-content [data-dashboard-kpi] .drag-handle {
  cursor: grab;
}

/* Touch devices retain a visible handle; mouse users reveal it on interaction. */
@media (hover: hover) and (pointer: fine) {
  #app-main #app-content [data-dashboard-kpi] .drag-handle {
    opacity: 0;
  }

  #app-main #app-content [data-dashboard-kpi]:is(:hover, :focus-within) .drag-handle {
    opacity: 1;
  }
}

#app-main #app-content [data-dashboard-kpi]:is(:hover, :focus-visible, :focus-within) {
  z-index: 10;
  border-color: color-mix(in srgb, var(--dashboard-accent) 48%, var(--ds-border)) !important;
  box-shadow: var(--ds-lift-shadow-hover) !important;
  transform: translateY(-1px);
}

#app-main #app-content .dashboard-chart-card {
  min-height: 22rem;
  padding: 1rem;
  border-color: var(--ds-border) !important;
  background: var(--ds-surface-1) !important;
  box-shadow: var(--ds-lift-shadow-sm);
}

#app-main #app-content .dashboard-chart-card__header {
  min-height: 2.25rem;
  margin-bottom: 0.75rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--ds-border);
}

#app-main #app-content .dashboard-chart-card__plot {
  height: 17rem;
}

#app-main #app-content .dashboard-chart-card:has(.dashboard-chart-card__plot--empty) {
  min-height: 12rem;
}

#app-main #app-content .dashboard-chart-card__plot--empty {
  height: 7rem;
}

#app-main #app-content .dashboard-chart-empty {
  display: flex;
  height: 100%;
  align-items: center;
  justify-content: center;
  border-radius: 0.5rem;
  background: var(--ds-surface-2);
  color: var(--ds-text-muted);
  font-size: 0.875rem;
  font-weight: 600;
}

@media (max-width: 639px) {
  #app-main #app-content .dashboard-chart-card {
    min-height: 19rem;
    padding: 0.875rem;
  }

  #app-main #app-content .dashboard-chart-card__plot {
    height: 14rem;
  }
}

/* Lists that represent data rows should follow the same row rhythm as task list. */
#app-main #app-content .divide-y.divide-slate-200 > *,
#app-main #app-content .divide-y > li,
#app-main #app-content .space-y-2 > li,
#app-main #app-content .space-y-3 > li {
  border-color: var(--ds-border) !important;
}

#app-main #app-content ul.list-disc,
#app-main #app-content ol.list-decimal {
  padding: 0.65rem 0.85rem 0.65rem 1.5rem;
  border: 1px solid var(--ds-border);
  border-radius: 0.85rem;
  background: var(--ds-surface-1);
}

/* Unified controls and surface elements (inputs/cards/badges/links).
   Do not force every <button> into a pill/button visual. Many templates
   use buttons as inline row actions, dropdown options, or text controls. */
#app-main #app-content {
  --ui-border: var(--ds-border);
  --ui-border-strong: var(--ds-border-strong);
  --ui-text: var(--ds-text);
  --ui-text-muted: var(--ds-text-muted);
  --ui-bg: var(--ds-surface-1);
  --ui-bg-soft: var(--ds-surface-2);
  --ui-accent: var(--brand-primary, #334155);
  --ui-accent-ink: var(--brand-primary-hover, #334155);
}

html.dark #app-main #app-content {
  --ui-accent: rgb(var(--color-brand-400-rgb));
  --ui-accent-ink: rgb(var(--color-brand-300-rgb));
}

#app-main #app-content :where(a[role='button'], .btn) {
  border-radius: 0.75rem;
  border: 1px solid var(--ui-border);
  background: var(--ui-bg);
  color: var(--ui-text);
  font-weight: 600;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

#app-main #app-content :where(a[role='button'], .btn):hover {
  border-color: var(--ui-border-strong);
  background: color-mix(in srgb, var(--ui-bg-soft) 60%, transparent);
}

#app-main #app-content :where(a[role='button'], .btn):focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-focus, #334155) 16%, transparent);
  border-color: var(--ui-accent);
}

html.dark #app-main #app-content :where(a[role='button'], .btn):focus-visible {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-focus, #94a3b8) 18%, transparent);
}

#app-main #app-content :where(a[role='button'], .btn):disabled {
  opacity: 0.6;
}

/* Table header sort controls should stay lightweight, not button-like pills. */
#app-main #app-content table thead th :where(a[role='button'], .btn) {
  border: 0 !important;
  background: transparent !important;
  border-radius: 0 !important;
  padding: 0 !important;
  min-height: 0 !important;
  box-shadow: none !important;
  color: inherit !important;
  font: inherit !important;
}

#app-main #app-content table thead th :where(a[role='button'], .btn):hover {
  background: transparent !important;
  border: 0 !important;
  color: var(--ui-text) !important;
}

#app-main #app-content table thead th :where(a[role='button'], .btn):focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand-focus, #334155) 18%, transparent) !important;
  border-radius: 0.35rem !important;
}

html.dark #app-main #app-content table thead th :where(a[role='button'], .btn):focus-visible {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand-focus, #94a3b8) 20%, transparent) !important;
}

/* Explicit escape hatch for semantic buttons that should look like text rows/links. */
#app-main #app-content .ui-control-reset {
  min-height: 0 !important;
  min-width: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Keep semantic buttons consistent with existing project accents. */
#app-main #app-content :where(.bg-slate-900, .bg-teal-600, .bg-teal-700, .bg-blue-600, .bg-blue-700, .btn-primary) {
  border-color: transparent !important;
  color: #ffffff !important;
}

#app-main #app-content :where(.bg-slate-900, .btn-primary):hover {
  background: #1e293b !important;
}

#app-main #app-content :where(.bg-teal-600, .bg-teal-700, .bg-blue-600, .bg-blue-700):hover {
  background: var(--brand-primary-hover) !important;
}

#app-main #app-content :where(.text-red-600, .text-red-700).btn,
#app-main #app-content :where(.btn-danger, .border-red-200.bg-red-50) {
  border-color: #fecaca !important;
}

#app-main #app-content :where(input:not([type='checkbox']):not([type='radio']), select, textarea) {
  border-radius: 0.7rem;
  border: 1px solid var(--ui-border);
  background: var(--ui-bg);
  color: var(--ui-text);
}

#app-main #app-content :where(input:not([type='checkbox']):not([type='radio']), select, textarea)::placeholder {
  color: color-mix(in srgb, var(--ui-text-muted) 70%, transparent);
}

#app-main #app-content :where(input:not([type='checkbox']):not([type='radio']), select, textarea):focus {
  outline: none;
  border-color: var(--ui-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-focus, #2563eb) 12%, transparent);
}

html.dark #app-main #app-content :where(input:not([type='checkbox']):not([type='radio']), select, textarea):focus {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-focus, #94a3b8) 16%, transparent);
}

#app-main #app-content :where(.rounded-2xl, .rounded-xl).border {
  border-color: var(--ds-border);
}

#app-main #app-content :where(.shadow-sm, .shadow, .shadow-md) {
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
}

#app-main #app-content :where(.badge, .chip, .tag, [class*='rounded-full'][class*='px-']) {
  border: 1px solid color-mix(in srgb, var(--ds-border) 85%, transparent);
}

#app-main #app-content a:not([role='button']) {
  color: var(--ds-link);
}

/* Canonical Django component contract. Templates opt into these hooks so the
   same Tailwind primitives remain stable across legacy and newer screens. */
#app-main #app-content :where(.ui-card, [data-ui-component='card'], [data-ui-component='table']) {
  border-radius: 0.875rem;
  border-color: var(--ds-border);
  background: var(--ds-surface-1);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

#app-main #app-content :where(.ui-card, [data-ui-component='card'], [data-ui-component='table']):focus-within {
  border-color: color-mix(in srgb, var(--ds-brand) 34%, var(--ds-border));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ds-brand) 12%, transparent);
}

#app-main #app-content :where(.ui-card-header) {
  border-color: var(--ds-border);
}

#app-main #app-content :where(.ui-button, a[role='button'], .btn) {
  min-height: var(--app-control-default-height);
  border-radius: 0.625rem;
  letter-spacing: -0.01em;
}

#app-main #app-content :where(.ui-button) {
  border-width: 1px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06), 0 3px 8px rgba(15, 23, 42, 0.04);
}

#app-main #app-content :where(.ui-button-size-sm, .ui-control-compact) {
  height: var(--app-control-compact-height) !important;
  min-height: var(--app-control-compact-height) !important;
}

#app-main #app-content :where(.ui-button-size-md, .ui-control-default) {
  height: var(--app-control-default-height) !important;
  min-height: var(--app-control-default-height) !important;
}

#app-main #app-content :where(.ui-button):hover {
  transform: translateY(-1px);
  box-shadow: 0 3px 6px rgba(15, 23, 42, 0.08), 0 8px 16px rgba(15, 23, 42, 0.06);
}

#app-main #app-content :where(.ui-button):active {
  transform: translateY(0);
}

#app-main #app-content :where(.ui-button-primary) {
  background-image: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-primary-hover) 100%);
  color: var(--brand-on-primary) !important;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--brand-primary) 22%, transparent);
}

#app-main #app-content :where(.ui-button-primary):hover {
  background-image: linear-gradient(135deg, var(--color-brand-400) 0%, var(--brand-primary-hover) 100%);
}

#app-main #app-content :where(.ui-button-danger) {
  box-shadow: 0 4px 12px rgba(225, 29, 72, 0.16);
}

#app-main #app-content :where(.ui-button-ghost) {
  box-shadow: none;
}

#app-main #app-content :where(.ui-form-actions) {
  margin-top: 0.25rem;
}

#app-main #app-content :where(.ui-form-actions) .ui-button {
  min-width: 7.5rem;
}

#app-main #app-content :where(.ui-card-actions) .ui-button {
  min-width: 8.5rem;
}

@media (max-width: 639px) {
  #app-main #app-content :where(.ui-card-actions) .ui-button {
    min-width: 0;
  }
}

#app-main #app-content :where(.ui-button-secondary) .ui-button-icon,
#app-main #app-content :where(.ui-button-ghost) .ui-button-icon {
  background: rgba(15, 23, 42, 0.06);
}

/* Compact actions used in table rows, cards, and contextual menus. */
#app-main #app-content :where(.ui-action-icon, .ui-action-button) {
  min-height: 2.25rem;
  min-width: 2.25rem;
  border-radius: 0.625rem;
  border-color: var(--ds-border);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
}

#app-main #app-content :where(.ui-action-icon):hover,
#app-main #app-content :where(.ui-action-button):hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--ds-brand) 38%, var(--ds-border));
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.09);
}

#app-main #app-content :where(.ui-action-icon-danger):hover {
  border-color: rgba(225, 29, 72, 0.45);
  background: rgba(255, 241, 242, 0.95);
}

#app-main #app-content :where(.ui-action-menu-item) {
  min-height: 2.5rem;
}

#app-main #app-content :where(.ui-action-menu-item-danger):hover,
#app-main #app-content :where(.ui-action-menu-item-danger):focus {
  background: rgba(255, 241, 242, 0.9);
}

#app-main #app-content :where(table) :where(.ui-action-icon, .ui-action-button) {
  margin-block: 0.125rem;
}

html.dark #app-main #app-content :where(.ui-action-icon-danger):hover,
html.dark #app-main #app-content :where(.ui-action-menu-item-danger):hover,
html.dark #app-main #app-content :where(.ui-action-menu-item-danger):focus {
  background: rgba(76, 5, 25, 0.35);
}

html.dark #app-main #app-content :where(.ui-button-secondary) .ui-button-icon,
html.dark #app-main #app-content :where(.ui-button-ghost) .ui-button-icon {
  background: rgba(255, 255, 255, 0.08);
}

#app-main #app-content :where(.ui-input, .ui-select, .ui-textarea) {
  min-height: var(--app-control-default-height);
  border-radius: 0.625rem;
  background: var(--ds-surface-1);
}

#app-main #app-content :where(.ui-input-compact, .ui-select-compact) {
  height: var(--app-control-compact-height) !important;
  min-height: var(--app-control-compact-height) !important;
}

#app-main #app-content :where(.ui-filter-bar) {
  display: grid;
  grid-template-columns: minmax(16rem, 1fr) repeat(3, minmax(10rem, 13rem)) auto;
  align-items: end;
  gap: 0.75rem;
}

#app-main #app-content :where(.ui-form-actions) {
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.75rem;
}

/* Responsive hidden action groups own their visibility (for example the
   checklist page's hidden sm:flex group beside its phone-only save bar). */
#app-main #app-content :where(.ui-form-actions):not(.hidden):not([hidden]) {
  display: flex;
}

#app-main #app-content :where(.task-form-layout) {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
}

@media (min-width: 1024px) {
  #app-main #app-content :where(.task-form-layout) {
    grid-template-columns: minmax(0, 1fr) var(--app-detail-sidebar-width);
  }

  #app-main #app-content :where(.task-form-sidebar) {
    position: sticky;
    top: 1rem;
    align-self: start;
  }
}

#app-main #app-content :where(.ui-table-compact) tbody tr {
  height: var(--app-table-row-compact-height);
}

#app-main #app-content :where(.ui-table-default) tbody tr {
  height: var(--app-table-row-default-height);
}

#app-main #app-content :where(.ui-table-clamp-2) td {
  max-height: 64px;
}

#app-main #app-content :where(.ui-modal-sm) { width: min(100%, var(--app-modal-sm)); }
#app-main #app-content :where(.ui-modal-md) { width: min(100%, var(--app-modal-md)); }
#app-main #app-content :where(.ui-modal-lg) { width: min(100%, var(--app-modal-lg)); }
#app-main #app-content :where(.ui-modal-xl) { width: min(100%, var(--app-modal-xl)); }

@media (max-width: 1279px) {
  #app-main #app-content :where(.ui-filter-bar) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  #app-main #app-content :where(.ui-filter-bar) {
    grid-template-columns: minmax(0, 1fr);
  }
}

#app-main #app-content :where(.ui-page-title) h1 {
  letter-spacing: -0.02em;
}

#app-main #app-content :where(.ui-page-stack) {
  min-width: 0;
}

#app-main #app-content :where(.ui-alert) {
  border-radius: 0.75rem;
}

@media (max-width: 639px) {
  #app-main #app-content :where(.ui-button, a[role='button'], .btn) {
    min-height: 2.75rem;
  }

  #app-main #app-content :where(.ui-card-header) {
    padding: 0.875rem 1rem;
  }
}

#app-main #app-content a:not([role='button']):hover {
  color: var(--ds-link-hover);
}

/* Global task create/edit modals: keep centered card layout across browsers. */
#task-create-root,
#task-edit-root {
  align-items: center;
  justify-content: center;
  overflow-y: auto;
  padding: 1rem;
}

#task-create-root > .task-modal-backdrop,
#task-edit-root > .task-modal-backdrop {
  z-index: 0;
}

#task-create-root > .task-modal-panel,
#task-edit-root > .task-modal-panel {
  z-index: 1;
  width: min(100%, 48rem);
  max-height: calc(100vh - 2rem);
  max-height: calc(100dvh - 2rem);
}

@media (min-width: 640px) {
  #task-create-root > .task-modal-panel,
  #task-edit-root > .task-modal-panel {
    max-height: calc(100vh - 4rem);
    max-height: calc(100dvh - 4rem);
  }
}

[x-data="notificationDropdown"] [role="menu"],
[x-data*="profileMenuOpen"] [x-show="profileMenuOpen"] {
  z-index: var(--app-z-dropdown);
}

/* Header dropdowns share the canonical dropdown layer. */
#notifications-panel,
#profile-menu-panel {
  position: fixed;
  top: calc(var(--app-safe-top) + 72px);
  right: max(16px, var(--app-safe-right));
  z-index: var(--app-z-dropdown);
  width: min(92vw, 360px);
  min-width: 0;
  max-width: calc(100vw - 2rem);
  height: auto;
  min-height: 0;
  max-height: max(0px, calc(var(--app-viewport-height) - var(--app-safe-top) - 72px - var(--app-safe-bottom) - 16px));
  overscroll-behavior: contain;
}

#profile-menu-panel {
  overflow-x: hidden;
  overflow-y: auto;
}

@media (min-width: 640px) {
  #notifications-panel,
  #profile-menu-panel {
    width: min(90vw, 380px) !important;
    max-width: calc(100vw - 2rem) !important;
  }
}

@media (min-width: 1024px) {
  #notifications-panel,
  #profile-menu-panel {
    width: min(88vw, 420px) !important;
    max-width: 420px !important;
    max-height: min(680px, max(0px, calc(var(--app-viewport-height) - var(--app-safe-top) - 72px - var(--app-safe-bottom) - 16px)));
  }
}

/* ---- Dark-mode compatibility remaps for existing Tailwind utility usage ----
   Goal: enable full-app dark mode without rewriting every template, while
   avoiding cool-hue dashboards as the *actual* dominant palette. */
html.dark .bg-slate-50 { background-color: var(--ds-app-bg) !important; }
html.dark .bg-slate-100 { background-color: var(--ds-surface-1) !important; }
html.dark [class*="bg-slate-100/"] { background-color: var(--ds-app-bg) !important; }
html.dark .bg-slate-200 { background-color: var(--ds-surface-2) !important; }
html.dark .bg-white { background-color: var(--ds-surface-2) !important; }
html.dark .bg-white\\/80 { background-color: color-mix(in srgb, var(--ds-surface-2) 82%, transparent) !important; }
html.dark .bg-slate-900 { background-color: #0a0a0c !important; }

html.dark .text-slate-900 { color: var(--ds-text) !important; }
html.dark .text-slate-800 { color: color-mix(in srgb, var(--ds-text) 92%, var(--ds-text-muted)) !important; }
html.dark .text-slate-700 { color: color-mix(in srgb, var(--ds-text) 82%, var(--ds-text-muted)) !important; }
html.dark .text-slate-600 { color: color-mix(in srgb, var(--ds-text) 72%, var(--ds-text-muted)) !important; }
html.dark .text-slate-500 { color: var(--ds-text-muted) !important; }
html.dark .text-slate-400 { color: color-mix(in srgb, var(--ds-text-muted) 85%, transparent) !important; }

/* WCAG AA: muted utility text must remain legible on white and tinted cards. */
html:not(.dark) body .text-slate-400,
html:not(.dark) body .text-gray-400 { color: rgb(71 85 105) !important; }
html:not(.dark) body .text-slate-500,
html:not(.dark) body .text-neutral-500,
html:not(.dark) body .text-gray-500 { color: rgb(71 85 105) !important; }
html:not(.dark) body .bg-brand-100.text-brand-800,
html:not(.dark) body .bg-brand-50.text-brand-500 { color: rgb(var(--color-brand-950-rgb, 21 27 36)) !important; }

html.dark .border-slate-100 { border-color: var(--ds-border) !important; }
html.dark .border-slate-200 { border-color: var(--ds-border) !important; }
html.dark .border-slate-300 { border-color: var(--ds-border-strong) !important; }
html.dark .divide-slate-200 > :not([hidden]) ~ :not([hidden]) { border-color: var(--ds-border) !important; }

html.dark .hover\\:bg-slate-50:hover { background-color: var(--ds-surface-3) !important; }
html.dark .hover\\:bg-slate-100:hover { background-color: var(--ds-surface-3) !important; }
html.dark .hover\\:bg-white:hover { background-color: var(--ds-surface-3) !important; }

html.dark,
html.dark body {
  background: var(--ds-app-bg) !important;
  color: var(--ds-text) !important;
}

html.dark #app,
html.dark #app-shell,
html.dark #app-main,
html.dark #app-content,
html.dark main {
  background-color: var(--ds-app-bg);
  color: var(--ds-text);
}

html.dark [class~="bg-white"],
html.dark [class*="bg-white/"],
html.dark [class*="bg-slate-50/"],
html.dark [class*="bg-slate-100/"],
html.dark [class~="bg-gray-50"],
html.dark [class~="bg-gray-100"],
html.dark [class~="bg-neutral-50"],
html.dark [class~="bg-neutral-100"],
html.dark [class~="bg-stone-50"],
html.dark [class~="bg-stone-100"],
html.dark [class~="bg-zinc-50"],
html.dark [class~="bg-zinc-100"] {
  background-color: var(--ds-surface-2) !important;
}

html.dark [class~="bg-gray-200"],
html.dark [class~="bg-neutral-200"],
html.dark [class~="bg-stone-200"],
html.dark [class~="bg-zinc-200"],
html.dark [class~="bg-slate-300"],
html.dark [class~="bg-gray-300"] {
  background-color: var(--ds-surface-3) !important;
}

html.dark [class~="bg-black"],
html.dark [class*="bg-black/"],
html.dark [class~="bg-slate-800"],
html.dark [class~="bg-gray-800"],
html.dark [class~="bg-neutral-800"],
html.dark [class~="bg-zinc-800"],
html.dark [class~="bg-stone-800"],
html.dark [class~="bg-slate-900"],
html.dark [class~="bg-gray-900"],
html.dark [class~="bg-neutral-900"],
html.dark [class~="bg-zinc-900"],
html.dark [class~="bg-stone-900"] {
  background-color: var(--ds-surface-1) !important;
}

html.dark [class~="text-black"],
html.dark [class~="text-gray-950"],
html.dark [class~="text-gray-900"],
html.dark [class~="text-gray-800"],
html.dark [class~="text-neutral-950"],
html.dark [class~="text-neutral-900"],
html.dark [class~="text-neutral-800"],
html.dark [class~="text-stone-950"],
html.dark [class~="text-stone-900"],
html.dark [class~="text-stone-800"],
html.dark [class~="text-zinc-950"],
html.dark [class~="text-zinc-900"],
html.dark [class~="text-zinc-800"],
html.dark [class~="text-slate-950"] {
  color: var(--ds-text) !important;
}

html.dark [class~="text-gray-700"],
html.dark [class~="text-gray-600"],
html.dark [class~="text-neutral-700"],
html.dark [class~="text-neutral-600"],
html.dark [class~="text-stone-700"],
html.dark [class~="text-stone-600"],
html.dark [class~="text-zinc-700"],
html.dark [class~="text-zinc-600"] {
  color: color-mix(in srgb, var(--ds-text) 78%, var(--ds-text-muted)) !important;
}

html.dark [class~="text-gray-500"],
html.dark [class~="text-gray-400"],
html.dark [class~="text-neutral-500"],
html.dark [class~="text-neutral-400"],
html.dark [class~="text-stone-500"],
html.dark [class~="text-stone-400"],
html.dark [class~="text-zinc-500"],
html.dark [class~="text-zinc-400"] {
  color: var(--ds-text-muted) !important;
}

html.dark [class~="text-white"],
html.dark [class*="text-white/"] {
  color: #fafafa !important;
}

/* Filled warning cards remain light in dark mode and need dark ink. */
html.dark :is([class~="bg-amber-300"], [class~="bg-amber-400"], [class~="bg-yellow-300"], [class~="bg-yellow-400"]):is([class~="text-neutral-950"], [class~="text-neutral-900"], [class~="text-slate-950"], [class~="text-slate-900"]),
html.dark :is([class~="bg-amber-300"], [class~="bg-amber-400"], [class~="bg-yellow-300"], [class~="bg-yellow-400"]) :is([class~="text-neutral-950"], [class~="text-neutral-900"], [class~="text-slate-950"], [class~="text-slate-900"]) {
  color: #171717 !important;
}

html.dark [data-testid="tasks-page"] {
  background-color: var(--ds-app-bg) !important;
  color: var(--ds-text);
}

html.dark [data-testid="tasks-page"] :where(.bg-white, .bg-slate-50, .bg-slate-100, [class*="bg-slate-50/"], [class*="bg-slate-100/"]) {
  background-color: var(--ds-surface-2) !important;
}

html.dark [data-testid="tasks-page"] :where(.border-slate-200, .border-slate-300) {
  border-color: var(--ds-border) !important;
}

html.dark [data-testid="tasks-page"] :where(.text-slate-900, .text-gray-900) {
  color: var(--ds-text) !important;
}

html.dark [data-testid="tasks-page"] :where(.text-slate-700, .text-slate-800, .text-gray-700, .text-gray-800) {
  color: color-mix(in srgb, var(--ds-text) 84%, var(--ds-text-muted)) !important;
}

html.dark [data-testid="tasks-page"] :where(.text-slate-500, .text-slate-600, .text-gray-500, .text-gray-600) {
  color: var(--ds-text-muted) !important;
}

html.dark [data-testid="tasks-page"] :where(.hover\:bg-slate-50:hover, .hover\:bg-gray-50:hover, .hover\:bg-slate-100:hover) {
  background-color: var(--ds-surface-3) !important;
}

html.dark [data-testid="tasks-page"] :where(input:not([type='checkbox']):not([type='radio']), select, textarea) {
  background-color: color-mix(in srgb, var(--ds-surface-1) 78%, transparent) !important;
  border-color: var(--ds-border-strong) !important;
  color: var(--ds-text) !important;
}

html.dark [data-testid="tasks-page"] :where(thead, th, th.bg-slate-50) {
  background-color: var(--ds-surface-1) !important;
  color: var(--ds-text-muted) !important;
}

html.dark [data-testid="tasks-page"] :where(tbody tr, [data-task-card]) {
  background-color: var(--ds-surface-2) !important;
}

html.dark [data-testid="tasks-page"] :where(tbody tr:hover, [data-task-card]:hover) {
  background-color: var(--ds-surface-3) !important;
}

html.dark [class~="border-gray-100"],
html.dark [class~="border-gray-200"],
html.dark [class~="border-neutral-100"],
html.dark [class~="border-neutral-200"],
html.dark [class~="border-stone-100"],
html.dark [class~="border-stone-200"],
html.dark [class~="border-zinc-100"],
html.dark [class~="border-zinc-200"] {
  border-color: var(--ds-border) !important;
}

html.dark [class~="border-gray-300"],
html.dark [class~="border-gray-400"],
html.dark [class~="border-neutral-300"],
html.dark [class~="border-neutral-400"],
html.dark [class~="border-stone-300"],
html.dark [class~="border-stone-400"],
html.dark [class~="border-zinc-300"],
html.dark [class~="border-zinc-400"] {
  border-color: var(--ds-border-strong) !important;
}

html.dark [class~="divide-gray-100"] > :not([hidden]) ~ :not([hidden]),
html.dark [class~="divide-gray-200"] > :not([hidden]) ~ :not([hidden]),
html.dark [class~="divide-neutral-200"] > :not([hidden]) ~ :not([hidden]),
html.dark [class~="divide-stone-200"] > :not([hidden]) ~ :not([hidden]),
html.dark [class~="divide-zinc-200"] > :not([hidden]) ~ :not([hidden]) {
  border-color: var(--ds-border) !important;
}

html.dark [class~="hover:bg-gray-50"]:hover,
html.dark [class~="hover:bg-gray-100"]:hover,
html.dark [class~="hover:bg-neutral-50"]:hover,
html.dark [class~="hover:bg-neutral-100"]:hover,
html.dark [class~="hover:bg-stone-50"]:hover,
html.dark [class~="hover:bg-stone-100"]:hover,
html.dark [class~="hover:bg-zinc-50"]:hover,
html.dark [class~="hover:bg-zinc-100"]:hover {
  background-color: var(--ds-surface-3) !important;
}

html.dark [class~="bg-blue-50"],
html.dark [class~="bg-blue-100"],
html.dark [class~="bg-sky-50"],
html.dark [class~="bg-sky-100"],
html.dark [class~="bg-indigo-50"],
html.dark [class~="bg-indigo-100"],
html.dark [class~="bg-cyan-50"],
html.dark [class~="bg-cyan-100"] {
  background-color: color-mix(in srgb, var(--brand-primary) 12%, transparent) !important;
}

html.dark [class~="bg-blue-500"],
html.dark [class~="bg-blue-600"],
html.dark [class~="bg-blue-700"],
html.dark [class~="bg-sky-500"],
html.dark [class~="bg-sky-600"],
html.dark [class~="bg-indigo-500"],
html.dark [class~="bg-indigo-600"] {
  background-color: var(--brand-primary-hover) !important;
}

html.dark [class~="text-blue-500"],
html.dark [class~="text-blue-600"],
html.dark [class~="text-blue-700"],
html.dark [class~="text-blue-800"],
html.dark [class~="text-sky-500"],
html.dark [class~="text-sky-600"],
html.dark [class~="text-indigo-500"],
html.dark [class~="text-indigo-600"],
html.dark [class~="text-cyan-500"],
html.dark [class~="text-cyan-600"],
html.dark [class~="text-cyan-700"] {
  color: var(--ds-link) !important;
}

html.dark :is([class~="text-danger-600"], [class~="text-danger-700"], [class~="text-red-600"], [class~="text-red-700"], [class~="text-rose-600"], [class~="text-rose-700"]) {
  color: rgb(253 164 175) !important;
}

html.dark :is([class~="text-success-600"], [class~="text-success-700"], [class~="text-green-600"], [class~="text-green-700"]) {
  color: rgb(134 239 172) !important;
}

html.dark :is([class~="text-amber-600"], [class~="text-amber-700"], [class~="text-yellow-600"], [class~="text-yellow-700"]) {
  color: rgb(252 211 77) !important;
}

/* When a legacy status chip deliberately keeps a pale surface, keep its dark ink. */
html.dark :is([class~="bg-amber-50"], [class~="bg-amber-100"], [class~="bg-yellow-50"], [class~="bg-yellow-100"]):not([class*="dark:bg-"]):is([class~="text-amber-600"], [class~="text-amber-700"], [class~="text-yellow-600"], [class~="text-yellow-700"]) {
  color: #92400e !important;
}

html.dark :is([class~="bg-success-50"], [class~="bg-success-100"], [class~="bg-green-50"], [class~="bg-green-100"]):not([class*="dark:bg-"]):is([class~="text-success-600"], [class~="text-success-700"], [class~="text-green-600"], [class~="text-green-700"]) {
  color: #166534 !important;
}

html.dark :is([class~="bg-danger-50"], [class~="bg-danger-100"], [class~="bg-red-50"], [class~="bg-red-100"], [class~="bg-rose-50"], [class~="bg-rose-100"]):not([class*="dark:bg-"]):is([class~="text-danger-600"], [class~="text-danger-700"], [class~="text-red-600"], [class~="text-red-700"], [class~="text-rose-600"], [class~="text-rose-700"]) {
  color: #9f1239 !important;
}

/* Light success/lime CTAs keep dark ink even when legacy text-white is present. */
html.dark :is([class~="dark:bg-success-300"], [class~="dark:bg-lime-300"]):is([class~="dark:text-slate-950"], [class~="text-white"]) {
  color: #0f172a !important;
}

html.dark :is([class~="text-brand-600"], [class~="text-brand-700"], [class~="text-brand-800"], [class~="text-teal-600"], [class~="text-teal-700"], [class~="text-teal-800"]) {
  color: var(--ds-link) !important;
}

/* Some compact status cards intentionally keep their pale brand surface. */
html.dark :is([class~="bg-brand-50"], [class~="bg-brand-100"]):not([class*="dark:bg-"]) :is([class~="text-slate-600"], [class~="text-slate-700"], [class~="text-slate-800"], [class~="text-slate-900"], [class~="text-neutral-600"], [class~="text-neutral-700"], [class~="text-neutral-800"], [class~="text-neutral-900"]),
html.dark :is([class~="bg-brand-50"], [class~="bg-brand-100"]):not([class*="dark:bg-"]):is([class~="text-brand-600"], [class~="text-brand-700"], [class~="text-brand-800"]) {
  color: #1f2937 !important;
}

html.dark [class~="dark:bg-zinc-100"][class~="dark:text-zinc-950"] {
  background-color: #f4f4f5 !important;
  color: #09090b !important;
}

html.dark [class~="border-blue-100"],
html.dark [class~="border-blue-200"],
html.dark [class~="border-blue-300"],
html.dark [class~="border-sky-200"],
html.dark [class~="border-indigo-200"],
html.dark [class~="border-cyan-200"] {
  border-color: color-mix(in srgb, var(--brand-primary) 32%, transparent) !important;
}

html.dark [class~="hover:text-blue-600"]:hover,
html.dark [class~="hover:text-blue-700"]:hover,
html.dark [class~="hover:text-blue-800"]:hover,
html.dark [class~="hover:text-indigo-700"]:hover,
html.dark [class~="hover:text-sky-700"]:hover {
  color: var(--ds-link-hover) !important;
}

.telegram-primary-cta,
.telegram-primary-cta:visited {
  color: #fff !important;
}

html.dark [class~="hover:bg-blue-50"]:hover,
html.dark [class~="hover:bg-blue-100"]:hover,
html.dark [class~="hover:bg-indigo-50"]:hover,
html.dark [class~="hover:bg-indigo-100"]:hover,
html.dark [class~="hover:bg-sky-50"]:hover,
html.dark [class~="hover:bg-cyan-50"]:hover {
  background-color: color-mix(in srgb, var(--brand-primary) 16%, transparent) !important;
}

html.dark [class~="focus:ring-blue-100"]:focus,
html.dark [class~="focus:ring-blue-200"]:focus,
html.dark [class~="focus:ring-blue-300"]:focus,
html.dark [class~="focus:ring-blue-500"]:focus,
html.dark [class~="focus-visible:ring-blue-500"]:focus-visible,
html.dark [class~="focus-visible:ring-blue-600"]:focus-visible,
html.dark [class~="focus-visible:ring-blue-300"]:focus-visible,
html.dark [class~="focus-visible:ring-indigo-500"]:focus-visible {
  --tw-ring-color: color-mix(in srgb, var(--brand-focus) 26%, transparent) !important;
}

html.dark [class~="focus:border-blue-300"]:focus,
html.dark [class~="focus:border-blue-400"]:focus,
html.dark [class~="focus:border-blue-500"]:focus,
html.dark [class~="focus:border-indigo-500"]:focus {
  border-color: var(--ds-link) !important;
}

html.dark [class~="ring-blue-200"],
html.dark [class~="ring-blue-300"],
html.dark [class~="ring-indigo-200"],
html.dark [class~="ring-indigo-300"] {
  --tw-ring-color: color-mix(in srgb, var(--brand-focus) 28%, transparent) !important;
}

html.dark :where(input:not([type='checkbox']):not([type='radio']):not([type='range']):not([type='color']), select, textarea, .form-input, .form-select, .form-textarea, .ui-input, .ui-select, .generic-input, .generic-select, .generic-textarea) {
  background-color: color-mix(in srgb, var(--ds-surface-1) 88%, transparent) !important;
  border-color: var(--ds-border) !important;
  color: var(--ds-text) !important;
  caret-color: var(--ds-link) !important;
}

html.dark :where(input, textarea)::placeholder {
  color: color-mix(in srgb, var(--ds-text-muted) 72%, transparent) !important;
}

html.dark :where(input, select, textarea):disabled,
html.dark :where(.disabled, [aria-disabled='true']) {
  background-color: rgba(39, 39, 42, 0.55) !important;
  color: color-mix(in srgb, var(--ds-text-muted) 70%, transparent) !important;
  cursor: not-allowed;
}

html.dark :where(input[type='checkbox'], input[type='radio']) {
  background-color: var(--ds-surface-1) !important;
  border-color: var(--ds-border-strong) !important;
  color: var(--brand-primary) !important;
}

html.dark :where(input, select, textarea, button, a, [role='button'], [tabindex]):focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-focus) 20%, transparent) !important;
}

html.dark :where(option, optgroup) {
  background-color: var(--ds-surface-2);
  color: var(--ds-text);
}

html.dark :where(.modal-content, .modal-panel, .task-modal-panel, [role='dialog'], [data-modal], .dropdown-menu, [role='menu'], .popover, .tooltip-inner) {
  background-color: var(--ds-surface-2) !important;
  border-color: var(--ds-border) !important;
  color: var(--ds-text) !important;
}

html.dark :where(.modal-header, .modal-footer, .card-header, .card-footer) {
  background-color: var(--ds-surface-1) !important;
  border-color: var(--ds-border) !important;
}

html.dark .bulk-action-modal .modal-overlay {
  background: rgba(9, 9, 11, 0.72) !important;
  backdrop-filter: blur(2px);
}

html.dark .bulk-action-modal .modal-footer {
  background: rgba(9, 9, 11, 0.42) !important;
}

html.dark .bulk-action-modal :where(.modal-close-btn, .modal-cancel-btn, .status-option, .priority-option, .user-search-input, .category-select, .user-list) {
  background-color: rgba(9, 9, 11, 0.45) !important;
  border-color: var(--ds-border) !important;
  color: var(--ds-text) !important;
}

html.dark .bulk-action-modal :where(.modal-close-btn, .modal-cancel-btn, .status-option, .priority-option):hover {
  background-color: var(--ds-surface-3) !important;
}

html.dark .bulk-action-modal .modal-apply-btn.primary {
  background-color: var(--brand-primary) !important;
  color: var(--brand-on-primary) !important;
}

html.dark :where(.shadow-sm, .shadow, .shadow-md, .shadow-lg, .shadow-xl, .shadow-2xl) {
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35) !important;
}

html.dark ::selection {
  background: color-mix(in srgb, var(--brand-primary) 28%, transparent);
  color: var(--ds-text);
}

/* Tracker-style tables, aligned with the task list grid. */
#app-main :where(table:not(.task-list-grid):not([role='presentation'])) {
  width: 100%;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  table-layout: fixed;
  text-indent: 0;
  font-size: 0.875rem;
  color: rgb(51 65 85);
}

#app-main :where(table:not(.task-list-grid):not([role='presentation'])) :where(thead) {
  background: rgb(248 250 252) !important;
  color: rgb(71 85 105);
  box-shadow: 0 1px 0 rgb(226 232 240);
}

#app-main :where(table:not(.task-list-grid):not([role='presentation'])) :where(th) {
  box-sizing: border-box;
  height: var(--app-table-header-height);
  border-bottom: 1px solid rgb(226 232 240) !important;
  background: rgb(248 250 252) !important;
  padding: 0.375rem 1rem !important;
  text-align: left !important;
  font-size: 0.6875rem !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  line-height: 1.25 !important;
  text-transform: uppercase;
  color: rgb(71 85 105) !important;
  vertical-align: middle !important;
  white-space: nowrap;
}

#app-main :where(table:not(.task-list-grid):not([role='presentation'])) :where(td) {
  box-sizing: border-box;
  height: 4.25rem;
  border-bottom: 1px solid rgb(241 245 249) !important;
  padding: 0.75rem 1rem !important;
  text-align: left;
  vertical-align: middle !important;
  line-height: 1.35 !important;
  overflow-wrap: anywhere;
}

#app-main :where(table:not(.task-list-grid):not([role='presentation'])) :where(tbody) {
  background: rgb(255 255 255);
}

#app-main :where(table:not(.task-list-grid):not([role='presentation'])) :where(tbody tr) {
  height: 4.25rem;
  transition: background-color 150ms ease, box-shadow 150ms ease;
}

#app-main :where(table:not(.task-list-grid):not([role='presentation'])) :where(tbody tr:hover) {
  background: rgb(248 250 252 / 0.8);
}

#app-main :where(table:not(.task-list-grid):not([role='presentation'])) :where(tbody tr:focus-within) {
  background: rgb(248 250 252 / 0.8);
}

#app-main :where(table:not(.task-list-grid):not([role='presentation'])) :where(th:first-child, td:first-child) {
  padding-left: 1rem !important;
}

#app-main :where(table:not(.task-list-grid):not([role='presentation'])) :where(th:last-child, td:last-child) {
  padding-right: 1rem !important;
}

#app-main :where(.overflow-x-auto, .overflow-auto, [data-mobile-card]) > :where(table:not(.task-list-grid):not([role='presentation'])) {
  min-width: 860px;
}

#app-main :where(.overflow-x-auto, .overflow-auto, .table-responsive, [data-table-scroll]) {
  scrollbar-gutter: stable;
}

/* Runtime table enhancements are injected by frontend_unification.js so legacy
   and dynamically-rendered Django tables share the same interaction contract. */
#app-main .generic-resizable-table > thead > tr > th {
  position: relative;
}

#app-main .generic-column-resizer {
  position: absolute;
  z-index: 3;
  inset-block: 0;
  inset-inline-end: -5px;
  width: 10px;
  cursor: col-resize;
  touch-action: none;
}

#app-main .generic-column-resizer::after {
  content: "";
  position: absolute;
  inset-block: 20%;
  inset-inline-start: 4px;
  width: 2px;
  border-radius: 999px;
  background: transparent;
}

@media (pointer: coarse) {
  #app-main .generic-column-resizer {
    width: 28px;
    inset-inline-end: -14px;
  }

  #app-main .generic-column-resizer::after {
    inset-inline-start: 13px;
  }
}

#app-main .generic-column-resizer:hover::after,
#app-main .generic-column-resizer:focus-visible::after,
#app-main .generic-column-resizer.is-resizing::after {
  background: var(--ds-brand);
}

#app-main .generic-column-resizer:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--ds-brand) 45%, transparent);
  outline-offset: -2px;
}

html.is-resizing-table-column,
html.is-resizing-table-column * {
  cursor: col-resize !important;
  user-select: none !important;
}

#app-main .generic-sort-header {
  padding-inline-end: 1.75rem !important;
}

#app-main .generic-sort-trigger {
  display: inline-flex;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  align-items: center;
  justify-content: flex-start;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-align: inherit;
  text-transform: inherit;
  cursor: pointer;
}

#app-main .generic-sort-trigger::after {
  content: "↕";
  position: absolute;
  inset-inline-end: 0.75rem;
  color: var(--ds-text-muted);
  opacity: 0.45;
}

#app-main .generic-sort-header[aria-sort="ascending"] .generic-sort-trigger::after { content: "↑"; opacity: 1; }
#app-main .generic-sort-header[aria-sort="descending"] .generic-sort-trigger::after { content: "↓"; opacity: 1; }

#app-main .generic-sort-trigger:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--ds-brand) 55%, transparent);
  outline-offset: -2px;
}

#app-main :where(table:not(.task-list-grid):not([role='presentation'])) :where(th > *, td > *) {
  max-width: 100%;
}

html.dark #app-main :where(table:not(.task-list-grid):not([role='presentation'])) {
  color: rgb(212 212 216);
}

html.dark #app-main :where(table:not(.task-list-grid):not([role='presentation'])) :where(thead),
html.dark #app-main :where(table:not(.task-list-grid):not([role='presentation'])) :where(th) {
  background: rgb(24 24 27) !important;
  border-color: rgb(39 39 42) !important;
  color: rgb(212 212 216) !important;
}

html.dark #app-main :where(table:not(.task-list-grid):not([role='presentation'])) :where(tbody) {
  background: rgb(9 9 11);
}

html.dark #app-main :where(table:not(.task-list-grid):not([role='presentation'])) :where(td) {
  border-color: rgb(24 24 27) !important;
}

html.dark #app-main :where(table:not(.task-list-grid):not([role='presentation'])) :where(tbody tr:hover),
html.dark #app-main :where(table:not(.task-list-grid):not([role='presentation'])) :where(tbody tr:focus-within) {
  background: rgb(24 24 27 / 0.8);
}

.reference-layout-shell {
  min-height: 0;
}

.reference-layout-body,
.reference-sidebar-panel {
  min-height: 0;
}

.reference-sidebar-panel {
  max-height: 62dvh;
}

@media (min-width: 1024px) {
  .reference-layout-shell {
    height: calc(100dvh - var(--app-topbar-current-height, 4rem) - 5.5rem);
    min-height: 32rem;
    overflow: hidden;
  }

  .reference-layout-body,
  .reference-sidebar-panel {
    height: 100%;
  }

  .reference-sidebar-panel {
    max-height: none;
  }
}
[data-nav-item][aria-current="page"] {
  background-color: var(--brand-primary-soft) !important;
  color: var(--brand-primary) !important;
  font-weight: 600 !important;
}

[data-nav-section-panel]:not([hidden]) {
  display: flex;
}

.dark [data-nav-item][aria-current="page"] {
  background-color: rgb(var(--color-brand-950-rgb) / 0.4) !important;
  color: rgb(var(--color-brand-300-rgb)) !important;
}

/* Compact page heading shared by every module; content tables are unaffected. */
#app-main #app-content > header {margin-bottom:8px; padding-block:0; min-height:0;}
#app-main #app-content > header > div {gap:6px;}
#app-main #app-content > header h1 {font-size:18px; line-height:24px; margin-block:0;}
#app-main #app-content > header :is(.ui-page-title, .hrm-page-title-copy) > p {font-size:12px; line-height:18px; margin-top:2px; min-height:0;}
#app-main #app-content > header .hrm-page-title-copy,
#app-main #app-content > header [data-qrfikr-page-header] > .ui-page-title {height:auto; min-height:0; overflow:visible;}
#app-main #app-content > header [data-page-actions] {min-height:0;}
#app-main #app-content > header [data-page-actions]:not(:has(*)) {display:none;}
#app-main #app-content > header .ui-page-title h1 svg {width:20px; height:20px;}
@media(max-width:639px) {
  #app-main #app-content > header h1 {font-size:16px; line-height:22px;}
  #app-main #app-content > header :is(.ui-page-title, .hrm-page-title-copy) > p {white-space:normal;}
}

#app-main #app-content > header [data-page-actions]:not(:has(a, button, input, select, textarea, [role="button"])) {display:none;}

/* Switch visuals follow native checked state, including nested thumbs. */
[data-ui-switch] {position:relative; display:inline-flex; flex-shrink:0; width:44px; height:24px;}
[data-ui-switch] > input[type=checkbox] {position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; z-index:2; cursor:pointer; clip:auto; clip-path:none;}
[data-ui-switch] > input[type=checkbox] ~ span,
[data-ui-switch] > input[type=checkbox] ~ label {pointer-events:none;}
[data-ui-switch] > input[type=checkbox]:checked + :is(span,label) {background:var(--brand-primary,#334155)!important;}
[data-ui-switch] > input[type=checkbox]:checked ~ span.absolute,
[data-ui-switch] > input[type=checkbox]:checked + span > span,
[data-ui-switch] > input[type=checkbox]:checked ~ label.absolute {transform:translateX(20px)!important;}
[data-ui-switch] > input[type=checkbox]:focus-visible + :is(span,label) {outline:2px solid var(--brand-primary,#334155);outline-offset:3px;}
[data-ui-switch]:has(input:disabled) {opacity:.5;}
[data-ui-switch] > input:disabled {cursor:not-allowed;}
@media(prefers-reduced-motion:reduce) {[data-ui-switch] span {transition:none!important;}}

/* Explicit collections of entity, metric and module cards use four equal
   columns on desktop. Mark the collection, never forms, chart layouts, card
   internals or Kanban lanes. Screen-only rules preserve printed layouts.
   The column override intentionally wins later module/container breakpoints;
   display is not important, so hidden views and inline visibility still work. */
@media screen and (min-width: 1024px) {
  #app-main #app-content [data-card-grid][hidden] { display: none !important; }
  #app-main #app-content [data-card-grid-panel] {
    grid-column: 1 / -1;
    min-width: 0;
  }

  #app-main #app-content .flex:has(> [data-card-grid]) { flex-wrap: wrap; }
  #app-main #app-content [data-card-grid] { flex-basis: 100%; width: 100%; }
  #app-main #app-content [data-card-grid] > :is([data-empty-state], .health-workspace-empty) {
    grid-column: 1 / -1 !important;
  }
  #app-main #app-content [data-card-grid]:not([hidden]):not(.hidden):not(.sm\:hidden):not(.md\:hidden):not(.lg\:hidden):not(.xl\:hidden):not([class~="2xl:hidden"]) {
    display: grid;
  }

  #app-main #app-content :is([data-card-grid], .task-card-grid, .hrm-dashboard-metrics, .hrm-approvals-metrics, .dashboard-kpi-grid, #kpi-cards-container, [data-sortable-cards][data-sortable-item-selector="[data-task-kpi-card]"], [data-sortable-cards][data-sortable-storage-key$=":kpi-cards"], .portal-summary, .grid:has(> .dashboard-catalog-card), [x-show="$store.equipmentDashboard.hasData"] > .grid:has(> .ui-stat-card), #control-diagnostics > dl.grid, .ui-page-stack .grid:has(> .ui-stat-card), [data-menu-view-mode="cards"] [data-menu-dishes-list]) {
    grid-template-columns: var(--card-grid-columns, repeat(4, minmax(0, 1fr))) !important;
    min-width: 0;
    max-width: 100%;
    align-items: start;
    gap: var(--ui-density-gap, 0.75rem);
  }

  #app-main #app-content :is([data-card-grid], .task-card-grid, .hrm-dashboard-metrics, .hrm-approvals-metrics, .dashboard-kpi-grid, #kpi-cards-container, [data-sortable-cards][data-sortable-item-selector="[data-task-kpi-card]"], [data-sortable-cards][data-sortable-storage-key$=":kpi-cards"], .portal-summary, .grid:has(> .dashboard-catalog-card), [x-show="$store.equipmentDashboard.hasData"] > .grid:has(> .ui-stat-card), #control-diagnostics > dl.grid, .ui-page-stack .grid:has(> .ui-stat-card), [data-menu-view-mode="cards"] [data-menu-dishes-list]) > :not(template):not(script):not(style):not([data-empty-state]):not(.health-workspace-empty):not([data-card-grid-panel]) {
    min-width: 0;
    max-width: 100%;
    grid-column: auto !important;
    align-self: start;
    margin-top: 0;
    margin-bottom: 0;
    overflow-wrap: anywhere;
  }

  #app-main #app-content :is([data-card-grid], .task-card-grid, .hrm-dashboard-metrics, .hrm-approvals-metrics, .dashboard-kpi-grid, #kpi-cards-container, [data-sortable-cards][data-sortable-item-selector="[data-task-kpi-card]"], [data-sortable-cards][data-sortable-storage-key$=":kpi-cards"], .portal-summary, .grid:has(> .dashboard-catalog-card), [x-show="$store.equipmentDashboard.hasData"] > .grid:has(> .ui-stat-card), #control-diagnostics > dl.grid, .ui-page-stack .grid:has(> .ui-stat-card), [data-menu-view-mode="cards"] [data-menu-dishes-list]) :where(.flex > :not([role="tooltip"]), label, input, select, textarea, button, a[role="button"]) {
    min-width: 0;
    max-width: 100%;
  }

  #app-main #app-content :is([data-card-grid], .task-card-grid, .hrm-dashboard-metrics, .hrm-approvals-metrics, .dashboard-kpi-grid, #kpi-cards-container, [data-sortable-cards][data-sortable-item-selector="[data-task-kpi-card]"], [data-sortable-cards][data-sortable-storage-key$=":kpi-cards"], .portal-summary, .grid:has(> .dashboard-catalog-card), [x-show="$store.equipmentDashboard.hasData"] > .grid:has(> .ui-stat-card), #control-diagnostics > dl.grid, .ui-page-stack .grid:has(> .ui-stat-card), [data-menu-view-mode="cards"] [data-menu-dishes-list]) :where(.truncate, .whitespace-nowrap, button, a[role="button"], label) {
    white-space: normal;
    overflow-wrap: anywhere;
  }

  #app-main #app-content :is([data-card-grid], .task-card-grid, .hrm-dashboard-metrics, .hrm-approvals-metrics, .dashboard-kpi-grid, #kpi-cards-container, [data-sortable-cards][data-sortable-item-selector="[data-task-kpi-card]"], [data-sortable-cards][data-sortable-storage-key$=":kpi-cards"], .portal-summary, .grid:has(> .dashboard-catalog-card), [x-show="$store.equipmentDashboard.hasData"] > .grid:has(> .ui-stat-card), #control-diagnostics > dl.grid, .ui-page-stack .grid:has(> .ui-stat-card), [data-menu-view-mode="cards"] [data-menu-dishes-list]) .truncate {
    overflow: visible;
    text-overflow: clip;
  }
}

/* Box shadows disappear in Windows forced colors; retain keyboard focus. */
@media (forced-colors: active) {
  :is(a,button,input,select,textarea,summary,[tabindex]):focus-visible {
    outline: 2px solid Highlight !important;
    outline-offset: 3px !important;
  }
}

/* A checklist editor drawer owns inline Cancel/Save actions. Its cloned page
   footer must not become a second viewport-fixed action bar inside the drawer. */
[data-form-modal-shell] [data-checklist-template-editor] > [data-checklist-bottom-bar] {
  display: none !important;
}

@media screen and (max-width: 639px) {
  [data-form-modal-shell] [data-checklist-template-editor] [data-checklist-template-actions] {
    display: flex;
    flex-wrap: wrap;
    min-width: 0;
  }
  [data-form-modal-shell] [data-checklist-template-editor] [data-checklist-template-actions] > :is(a, button) {
    width: 100%;
    min-width: 0;
    min-height: 2.75rem;
    height: auto;
    white-space: normal;
    overflow-wrap: anywhere;
  }
}

/* Explicit page action docks clear the persistent mobile navigation. Modal
   actions retain their own scroll container instead of a viewport bottom dock. */
@media screen and (max-width: 1023px) {
  body.has-bottom-nav #app-main {
    padding-bottom: var(--app-bottom-nav-current-height, 0px) !important;
  }
  body.has-bottom-nav :is([data-page-action-dock], [data-checklist-bottom-bar], [data-checklist-sticky-bottom-bar], [data-module-revision-notice]):not(dialog *):not([role="dialog"] *):not([data-form-modal-shell] *) {
    bottom: calc(var(--app-bottom-nav-current-height, 0px) + 0.5rem) !important;
  }
  :is(dialog, [role="dialog"], [data-form-modal-shell]) [data-page-action-dock] {
    position: static !important;
    bottom: auto !important;
  }
  :is(#app-main #app-content, body) :is([data-checklist-bottom-bar], [data-checklist-sticky-bottom-bar]) > div {
    flex-wrap: wrap;
    min-width: 0;
    max-width: 100%;
  }
  :is(#app-main #app-content, body) :is([data-checklist-bottom-bar], [data-checklist-sticky-bottom-bar]) > div > :is(a, button) {
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 2.75rem !important;
    white-space: normal !important;
    overflow-wrap: anywhere;
  }
  :is(#app-main #app-content, body) [data-report-step-navigation] li {
    min-width: 0;
    max-width: 100%;
  }
  [data-module-revision-notice] > span {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
  }
}

/* Mobile control rows wrap; this includes the requested story thumbnail buttons.
   Tables, charts, Kanban and calendars retain native touch/keyboard scrolling;
   only scrollbar chrome is hidden throughout the mobile shell. */
@media screen and (max-width: 1023px) {
  html,
  html * {
    scrollbar-width: none !important;
    scrollbar-gutter: auto !important;
  }
  html::-webkit-scrollbar,
  html *::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
  }

  :is(#app-main #app-content, body) :is(
    .ui-tabs, [role="tablist"], [data-tabs-list], [data-segmented-control],
    [data-checklist-section-index], [data-mobile-control-row],
    [data-product-category-navigation], [data-product-category-pagination],
    nav.overflow-x-auto, .portal-tabs, .health-workspace-navigation,
    .ui-form-actions, .modal-footer, .portal-actions, .portal-toolbar,
    .expiry-print-primary-actions, [data-page-action-dock], [data-module-revision-notice],
    .work-schedules-tabs, .timesheet-command-bar, .timesheet-command-section,
    .expiry-print-compact-bar, .expiry-print-list-actions, .expiry-print-category-tabs,
    .expiry-production-categories, .hrm-dashboard-actions,
    [data-page-actions], [data-page-toolbar], [role="toolbar"],
    .dashboard-date-presets, [data-filter-quick-periods], [data-period-presets],
    [data-dashboard-tabs]:not(:has([data-ui-component="tabs"])),
    [data-filter-panel] .filter-actions,
    .flex.overflow-x-auto:has(> button):not(table *):not([role="grid"] *):not(.fc *)
  ) {
    flex-wrap: wrap !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    white-space: normal !important;
    overflow: visible !important;
  }
  :is(#app-main #app-content, body) .overflow-x-auto:has(> [role="tablist"]) {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: visible !important;
  }
  #app-main #app-content > header > div:has([data-page-actions]) {
    flex-wrap: wrap !important;
    min-width: 0;
    max-width: 100%;
  }

  :is(#app-main #app-content, body) :is(
    .ui-tabs, [role="tablist"], [data-tabs-list], [data-segmented-control],
    [data-checklist-section-index], [data-mobile-control-row],
    [data-product-category-navigation], [data-product-category-pagination],
    nav.overflow-x-auto, .portal-tabs, .health-workspace-navigation,
    .ui-form-actions, .modal-footer, .portal-actions, .portal-toolbar,
    .expiry-print-primary-actions, [data-page-action-dock], [data-module-revision-notice],
    .work-schedules-tabs, .timesheet-command-bar, .timesheet-command-section,
    .expiry-print-compact-bar, .expiry-print-list-actions, .expiry-print-category-tabs,
    .expiry-production-categories, .hrm-dashboard-actions,
    [data-page-actions], [data-page-toolbar], [role="toolbar"],
    .dashboard-date-presets, [data-filter-quick-periods], [data-period-presets],
    [data-dashboard-tabs]:not(:has([data-ui-component="tabs"])),
    [data-filter-panel] .filter-actions,
    .flex.overflow-x-auto:has(> button):not(table *):not([role="grid"] *):not(.fc *)
  ) > :is(a, button, [role="tab"], [role="button"], .expiry-print-list-actions) {
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 2.75rem !important;
    white-space: normal !important;
    overflow-wrap: anywhere;
    flex-shrink: 1;
  }
  :is(#app-main #app-content, body) :is(.ui-tabs, [role="tablist"], [data-tabs-list], [data-segmented-control]) > :is(a, button, [role="tab"], [role="button"]) {
    min-width: min(2.75rem, 100%) !important;
  }
  :is(#app-main #app-content, body) :is(
    .ui-tabs, [role="tablist"], [data-tabs-list], [data-segmented-control],
    [data-checklist-section-index], [data-mobile-control-row],
    [data-product-category-navigation], [data-product-category-pagination],
    nav.overflow-x-auto, .portal-tabs, .health-workspace-navigation,
    .ui-form-actions, .modal-footer, .portal-actions, .portal-toolbar,
    .expiry-print-primary-actions, [data-page-action-dock], [data-module-revision-notice],
    .work-schedules-tabs, .timesheet-command-bar, .timesheet-command-section,
    .expiry-print-compact-bar, .expiry-print-list-actions, .expiry-print-category-tabs,
    .hrm-dashboard-actions, [data-page-actions], [data-page-toolbar], [role="toolbar"],
    .dashboard-date-presets, [data-filter-quick-periods], [data-period-presets],
    [data-dashboard-tabs]:not(:has([data-ui-component="tabs"])), [data-filter-panel] .filter-actions
  ) > :is(a, button, [role="tab"], [role="button"]) :is(span, [data-dashboard-action-label]) {
    white-space: normal !important;
    overflow-wrap: anywhere;
  }
}