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

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

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"] {
  transition: none !important;
}

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

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

  html:not(.app-shell-ready).app-shell-sidebar-open #app-main,
  html:not(.app-shell-ready).app-shell-sidebar-open #app-banner-shell {
    padding-left: 16rem;
  }

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

@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: var(--app-safe-top);
  left: 0;
  z-index: 2147483647;
  width: 100%;
  height: 3px;
  pointer-events: none;
  background:
    linear-gradient(90deg, transparent, rgba(20, 184, 166, 0.95), transparent),
    rgba(20, 184, 166, 0.22);
  transform-origin: left center;
  animation: app-native-progress 920ms cubic-bezier(0.22, 1, 0.36, 1) infinite;
}

@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;
    transform: translateY(5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes app-native-progress {
  0% {
    transform: translateX(-65%) scaleX(0.35);
  }
  55% {
    transform: translateX(18%) scaleX(0.72);
  }
  100% {
    transform: translateX(115%) scaleX(0.42);
  }
}

@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;
}

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

/* 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: 100dvh;
  --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-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(0.75rem, 1.7vw, 2rem);

  /* 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: #0f766e;
  --ds-link-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 rgba(15, 118, 110, 0.22), 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;
  --ds-link: #2dd4bf;          /* teal-400 (accent) */
  --ds-link-hover: #5eead4;    /* teal-300 */
  --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 rgba(45, 212, 191, 0.045),
    0 0 30px rgba(45, 212, 191, 0.075),
    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;
  user-select: none;
  -webkit-user-select: none;
}

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: rgba(20, 184, 166, 0.14);
}

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));
}

@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. */
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);
}

@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:
   keep content fluid by viewport width and slightly reduce UI scale
   on smaller desktop displays to avoid manual browser zoom. */
#app-main #app-content {
  width: 100%;
  max-width: var(--app-content-max-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--app-content-gutter) !important;
  padding-right: var(--app-content-gutter) !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: #0f766e;
  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,
  .evos-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,
  .evos-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,
  .evos-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,
  .evos-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) and (max-width: 1599px) {
  html {
    font-size: clamp(13.5px, 0.36vw + 9.8px, 15.5px);
  }
}

/* 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;
  }
}

/* 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: #99f6e4;
  background: #f0fdfa;
  color: #0f766e;
}

nav[data-testid="navbar"] .topbar-action-primary:hover {
  border-color: #5eead4;
  background: #ccfbf1;
}

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

nav[data-testid="navbar"] .topbar-action-secondary:hover {
  border-color: #99f6e4;
  background: #f0fdfa;
  color: #0f766e;
}

nav[data-testid="navbar"] .topbar-action-icon {
  background: #ccfbf1;
  color: #0f766e;
}

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: rgba(20, 184, 166, 0.45);
  background: rgba(13, 148, 136, 0.1);
  color: #5eead4;
}

html.dark nav[data-testid="navbar"] .topbar-action-primary:hover {
  border-color: rgba(45, 212, 191, 0.75);
  background: rgba(13, 148, 136, 0.18);
}

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: rgba(45, 212, 191, 0.55);
  background: rgba(39, 39, 42, 0.68);
  color: #99f6e4;
}

html.dark nav[data-testid="navbar"] .topbar-action-icon {
  background: rgba(45, 212, 191, 0.12);
  color: #5eead4;
}

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 {
  padding: 0.75rem 0.9rem;
  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 {
  padding: 0.78rem 0.9rem;
  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;
}

#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: 3rem;
  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] {
  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);
}

#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%;
}

/* 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: #0d9488;
  --ui-accent-ink: #0f766e;
}

html.dark #app-main #app-content {
  --ui-accent: #2dd4bf;
  --ui-accent-ink: #5eead4;
}

#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 rgba(13, 148, 136, 0.16);
  border-color: var(--ui-accent);
}

html.dark #app-main #app-content :where(a[role='button'], .btn):focus-visible {
  box-shadow: 0 0 0 3px rgba(45, 212, 191, 0.18);
}

#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 rgba(13, 148, 136, 0.18) !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 rgba(45, 212, 191, 0.2) !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(--ui-accent-ink) !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 rgba(37, 99, 235, 0.12);
}

html.dark #app-main #app-content :where(input:not([type='checkbox']):not([type='radio']), select, textarea):focus {
  box-shadow: 0 0 0 3px rgba(45, 212, 191, 0.16);
}

#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: 2.75rem;
  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):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, #0f9f91 0%, #0f766e 100%);
  box-shadow: 0 4px 12px rgba(13, 148, 136, 0.22);
}

#app-main #app-content :where(.ui-button-primary):hover {
  background-image: linear-gradient(135deg, #14b8a6 0%, #0f766e 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: 2.75rem;
  border-radius: 0.625rem;
  background: var(--ds-surface-1);
}

#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: calc(100dvh - 5.5rem);
}

#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;
    max-height: calc(100dvh - 6rem) !important;
  }
}

@media (min-width: 1024px) {
  #notifications-panel,
  #profile-menu-panel {
    width: min(88vw, 420px) !important;
    max-width: 420px !important;
    max-height: min(calc(100dvh - 6.5rem), 680px) !important;
  }
}

/* ---- 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; }

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;
}

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: rgba(20, 184, 166, 0.12) !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: #0f766e !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 [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: rgba(20, 184, 166, 0.32) !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;
}

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: rgba(20, 184, 166, 0.16) !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: rgba(45, 212, 191, 0.26) !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: rgba(45, 212, 191, 0.28) !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, .evos-input, .evos-select, .evos-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: #14b8a6 !important;
}

html.dark :where(input, select, textarea, button, a, [role='button'], [tabindex]):focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(45, 212, 191, 0.2) !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: #14b8a6 !important;
  color: #09090b !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 :where(.skeleton, [class*='skeleton'], .animate-pulse) {
  background-color: var(--ds-surface-3) !important;
}

html.dark ::selection {
  background: rgba(45, 212, 191, 0.28);
  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: 3rem;
  border-bottom: 1px solid rgb(226 232 240) !important;
  background: rgb(248 250 252) !important;
  padding: 0.75rem 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;
}

#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);
}

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;
  }
}