html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  overscroll-behavior-y: none;
  -webkit-tap-highlight-color: transparent;
}

#root {
  min-height: 100svh;
}

@supports (padding: max(0px)) {
  body {
    padding-bottom: env(safe-area-inset-bottom);
  }
}

@media (max-width: 768px) {
  /* Toasts were hidden here (display:none), which made task create/update feel broken on
     phones because Sonner/Radix success + error messages never appeared. Keep them visible
     and stack above the bottom nav. */

  :root {
    --mobile-bottom-nav-offset: calc(6.25rem + env(safe-area-inset-bottom));
  }

  /* Sonner + Radix toasts: show, allow taps, sit above bottom navigation */
  [data-sonner-toaster] {
    position: fixed !important;
    left: 0.5rem !important;
    right: 0.5rem !important;
    bottom: calc(var(--mobile-bottom-nav-offset, 6.25rem) + 0.35rem) !important;
    top: auto !important;
    width: auto !important;
    max-width: none !important;
    z-index: 200 !important;
    pointer-events: auto !important;
  }

  [data-sonner-toast],
  [data-sonner-toast] * {
    pointer-events: auto !important;
  }

  [data-radix-toast-viewport] {
    position: fixed !important;
    left: 0.5rem !important;
    right: 0.5rem !important;
    bottom: calc(var(--mobile-bottom-nav-offset, 6.25rem) + 0.35rem) !important;
    top: auto !important;
    z-index: 200 !important;
    max-width: none !important;
    pointer-events: auto !important;
  }

  [data-radix-toast-root],
  [data-radix-toast-root] * {
    pointer-events: auto !important;
  }

  html,
  body,
  #root {
    max-width: 100%;
    overflow-x: hidden;
  }

  html {
    font-size: 14px;
  }

  body {
    min-height: 100svh;
    background: var(--background, #f8fafc);
    touch-action: manipulation;
  }

  body::before {
    content: "";
    position: fixed;
    inset: 0;
    background:
      radial-gradient(circle at top, rgba(59, 130, 246, 0.08), transparent 34%),
      linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 250, 252, 0.98));
    pointer-events: none;
    z-index: -1;
  }

  main[style] {
    padding-left: 0 !important;
    padding-bottom: var(--mobile-bottom-nav-offset) !important;
    padding-top: 0.35rem !important;
  }

  .min-h-screen.transition-all.duration-300 {
    padding-left: 0 !important;
  }

  aside.border-r.border-sidebar-border.bg-sidebar.h-screen.flex.flex-col.fixed.left-0.top-0.z-20.transition-all.duration-300 {
    top: auto !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: auto !important;
    min-height: 4.75rem !important;
    border-top: 1px solid rgba(148, 163, 184, 0.22) !important;
    border-bottom: 0 !important;
    border-right: 0 !important;
    background: rgba(15, 23, 42, 0.94) !important;
    backdrop-filter: blur(18px);
    box-shadow: 0 -10px 30px rgba(15, 23, 42, 0.18);
    overflow: hidden !important;
    z-index: 80 !important;
  }

  aside.border-r.border-sidebar-border.bg-sidebar.h-screen.flex.flex-col.fixed.left-0.top-0.z-20.transition-all.duration-300 > div:first-child,
  aside.border-r.border-sidebar-border.bg-sidebar.h-screen.flex.flex-col.fixed.left-0.top-0.z-20.transition-all.duration-300 > button.absolute,
  aside.border-r.border-sidebar-border.bg-sidebar.h-screen.flex.flex-col.fixed.left-0.top-0.z-20.transition-all.duration-300 > .px-2.pt-2,
  aside.border-r.border-sidebar-border.bg-sidebar.h-screen.flex.flex-col.fixed.left-0.top-0.z-20.transition-all.duration-300 > .px-4,
  aside.border-r.border-sidebar-border.bg-sidebar.h-screen.flex.flex-col.fixed.left-0.top-0.z-20.transition-all.duration-300 > .border-t.border-sidebar-border\/50 {
    display: none !important;
  }

  aside.border-r.border-sidebar-border.bg-sidebar.h-screen.flex.flex-col.fixed.left-0.top-0.z-20.transition-all.duration-300 > .flex-1.py-2.space-y-1.overflow-y-auto.transition-all.duration-300 {
    display: flex !important;
    align-items: stretch !important;
    gap: 0.625rem !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding: 0.75rem 0.75rem calc(0.75rem + env(safe-area-inset-bottom)) !important;
    width: 100% !important;
    white-space: nowrap;
    scrollbar-width: none;
  }

  aside.border-r.border-sidebar-border.bg-sidebar.h-screen.flex.flex-col.fixed.left-0.top-0.z-20.transition-all.duration-300 > .flex-1.py-2.space-y-1.overflow-y-auto.transition-all.duration-300::-webkit-scrollbar {
    display: none;
  }

  aside .w-full.flex.items-center.justify-between.px-3.py-2.rounded-md.text-xs.font-semibold.uppercase.tracking-wider.transition-all.duration-200,
  aside .mt-4.mb-2.border-t.border-sidebar-border\/30.mx-2,
  aside .text-\[10px\].font-semibold.uppercase.tracking-wider.text-muted-foreground\/60 {
    display: none !important;
  }

  aside .overflow-hidden.transition-all.duration-300 {
    max-height: none !important;
    overflow: visible !important;
  }

  aside .overflow-hidden.transition-all.duration-300 > div {
    display: flex !important;
    flex-direction: row !important;
    gap: 0.625rem !important;
    align-items: stretch !important;
    border: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  aside a.flex.items-center.rounded-md.font-medium.transition-all.duration-200.relative {
    min-width: 4.5rem !important;
    max-width: 5.25rem !important;
    min-height: 3.5rem !important;
    padding: 0.55rem 0.45rem !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.25rem !important;
    border-radius: 1rem !important;
    font-size: 0.68rem !important;
    line-height: 1.15 !important;
    text-align: center !important;
    white-space: normal !important;
    color: rgba(226, 232, 240, 0.9) !important;
  }

  aside a.flex.items-center.rounded-md.font-medium.transition-all.duration-200.relative span {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  aside a.flex.items-center.rounded-md.font-medium.transition-all.duration-200.relative svg {
    width: 1.1rem !important;
    height: 1.1rem !important;
    flex-shrink: 0;
  }

  aside.border-r.border-sidebar-border.bg-sidebar.h-screen.flex.flex-col.fixed.left-0.top-0.z-20.transition-all.duration-300 a[href]:not([href="/dashboard"]):not([href="/today"]):not([href="/kanban"]):not([href="/task-calendar"]):not([href="/clients"]):not([href="/messages"]):not([href="/settings"]) {
    display: none !important;
  }

  aside a[href="/dashboard"],
  aside a[href="/today"],
  aside a[href="/kanban"],
  aside a[href="/task-calendar"],
  aside a[href="/clients"],
  aside a[href="/messages"],
  aside a[href="/settings"] {
    min-width: 4.2rem !important;
    max-width: 4.7rem !important;
  }

  aside a.flex.items-center.rounded-md.font-medium.transition-all.duration-200.relative.bg-sidebar-accent,
  aside a.flex.items-center.rounded-md.font-medium.transition-all.duration-200.relative.text-sidebar-accent-foreground {
    background: linear-gradient(180deg, rgba(59, 130, 246, 0.34), rgba(37, 99, 235, 0.22)) !important;
    color: #ffffff !important;
    box-shadow: 0 8px 20px rgba(37, 99, 235, 0.28) !important;
  }

  .text-4xl,
  .text-5xl {
    font-size: 1.8rem !important;
    line-height: 1.05 !important;
  }

  .text-3xl {
    font-size: 1.55rem !important;
    line-height: 1.1 !important;
  }

  .text-2xl {
    font-size: 1.3rem !important;
    line-height: 1.15 !important;
  }

  .text-xl {
    font-size: 1.1rem !important;
    line-height: 1.2 !important;
  }

  .text-lg {
    font-size: 1rem !important;
  }

  .h-16 {
    height: 3.5rem !important;
  }

  .p-4 {
    padding: 0.875rem !important;
  }

  .px-4 {
    padding-left: 0.875rem !important;
    padding-right: 0.875rem !important;
  }

  .py-4 {
    padding-top: 0.875rem !important;
    padding-bottom: 0.875rem !important;
  }

  .gap-4 {
    gap: 0.875rem !important;
  }

  .rounded-2xl,
  .rounded-3xl {
    border-radius: 1rem !important;
  }

  .rounded-xl.border.bg-card.text-card-foreground.shadow,
  .rounded-2xl.border.bg-card.text-card-foreground,
  .border.bg-card.text-card-foreground,
  .bg-card.border.text-card-foreground {
    border-color: rgba(148, 163, 184, 0.18) !important;
    background: rgba(255, 255, 255, 0.9) !important;
    color: #0f172a !important;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.07) !important;
    backdrop-filter: blur(12px);
  }

  .bg-white.text-white,
  .bg-card.text-white,
  [class*="bg-white/"].text-white,
  [class*="bg-card/"].text-white {
    color: #0f172a !important;
  }

  .border-b.shadow-sm.sticky.top-0,
  .sticky.top-0.bg-white,
  .sticky.top-0.bg-background,
  .sticky.top-0.bg-card {
    background: rgba(248, 250, 252, 0.92) !important;
    backdrop-filter: blur(14px);
    border-bottom-color: rgba(148, 163, 184, 0.18) !important;
  }

  [role="tablist"] {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 0.375rem !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding: 0.25rem !important;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  [role="tablist"]::-webkit-scrollbar {
    display: none;
  }

  [role="tablist"] > * {
    flex: 0 0 auto !important;
    min-height: 2.75rem !important;
    border-radius: 0.85rem !important;
    padding: 0.45rem 0.8rem !important;
  }

  .grid.grid-cols-2,
  .grid.grid-cols-3,
  .grid.grid-cols-4 {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .flex.items-center.justify-between,
  .flex.justify-between.items-center,
  .flex.items-start.justify-between {
    gap: 0.625rem !important;
  }

  .flex.items-center.gap-2,
  .flex.items-center.gap-3,
  .flex.items-center.gap-4 {
    flex-wrap: wrap;
  }

  .flex.items-center.gap-2 > .ml-auto,
  .flex.items-center.gap-3 > .ml-auto,
  .flex.items-center.gap-4 > .ml-auto {
    margin-left: 0 !important;
  }

  input,
  select,
  textarea {
    min-height: 2.75rem;
    border-radius: 0.85rem !important;
    border-color: rgba(148, 163, 184, 0.26) !important;
    background: rgba(255, 255, 255, 0.92) !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
  }

  textarea {
    min-height: 6.5rem;
  }

  button,
  [role="button"] {
    border-radius: 0.85rem !important;
  }

  /* Touch targets: prefer ~44px minimum (WCAG / Apple HIG) */
  .h-10,
  .h-11 {
    min-height: 2.75rem !important;
    height: auto !important;
  }

  .text-sm {
    font-size: 0.83rem !important;
  }

  .text-xs {
    font-size: 0.72rem !important;
  }

  .text-\[10px\] {
    font-size: 0.64rem !important;
  }

  .max-w-7xl,
  .max-w-6xl {
    padding-left: 0.875rem !important;
    padding-right: 0.875rem !important;
  }

  [data-route="/dashboard"] .grid.grid-cols-2.lg\:grid-cols-5,
  [data-route="/today"] .grid.grid-cols-2.lg\:grid-cols-5,
  [data-route^="/analytics"] .grid.grid-cols-2.lg\:grid-cols-4,
  [data-route^="/analytics"] .grid.grid-cols-1.md\:grid-cols-3,
  [data-route^="/clients"] .grid.grid-cols-1.md\:grid-cols-2.xl\:grid-cols-3,
  [data-route^="/workspaces"] .grid.grid-cols-1.md\:grid-cols-2.xl\:grid-cols-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.75rem !important;
  }

  [data-route="/dashboard"] .text-4xl.font-black,
  [data-route="/today"] .text-4xl.font-black,
  [data-route^="/analytics"] .text-4xl.font-black {
    font-size: 1.55rem !important;
  }

  [data-route="/dashboard"] .w-14.h-14,
  [data-route="/today"] .w-14.h-14,
  [data-route^="/analytics"] .w-14.h-14 {
    width: 2.75rem !important;
    height: 2.75rem !important;
    border-radius: 0.9rem !important;
  }

  [data-route^="/messages"] .flex.h-screen.bg-slate-100.overflow-hidden,
  [data-route^="/direct-messages"] .flex.h-screen.bg-slate-100.overflow-hidden {
    flex-direction: column !important;
    height: auto !important;
    min-height: calc(100svh - 6rem) !important;
  }

  [data-route^="/messages"] .flex.h-screen.bg-slate-100.overflow-hidden > *,
  [data-route^="/direct-messages"] .flex.h-screen.bg-slate-100.overflow-hidden > * {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  [data-route^="/messages"] .max-w-3xl.mx-auto,
  [data-route^="/direct-messages"] .max-w-3xl.mx-auto {
    max-width: 100% !important;
  }

  [data-route^="/messages"] .text-lg,
  [data-route^="/direct-messages"] .text-lg {
    font-size: 0.95rem !important;
  }

  [data-route^="/messages"] .rounded-2xl,
  [data-route^="/direct-messages"] .rounded-2xl,
  [data-route^="/messages"] .rounded-xl,
  [data-route^="/direct-messages"] .rounded-xl {
    border-radius: 0.85rem !important;
  }

  [data-route^="/messages"] .p-5,
  [data-route^="/messages"] .p-6,
  [data-route^="/direct-messages"] .p-5,
  [data-route^="/direct-messages"] .p-6 {
    padding: 0.8rem !important;
  }

  [data-route^="/client/"] .flex.h-\[calc\(100vh-2rem\)\],
  [data-route^="/workspaces"] .flex.h-\[calc\(100vh-2rem\)\] {
    flex-direction: column !important;
    height: auto !important;
    min-height: calc(100svh - 6rem) !important;
  }

  [data-route^="/client/"] .w-72.border-r.bg-card\/50,
  [data-route^="/workspaces"] .w-72.border-r.bg-card\/50 {
    width: 100% !important;
    border-right: 0 !important;
    border-bottom: 1px solid rgba(148, 163, 184, 0.18) !important;
  }

  [data-route^="/client/"] .w-72.border-r.bg-card\/50 .space-y-2,
  [data-route^="/workspaces"] .w-72.border-r.bg-card\/50 .space-y-2 {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 0.5rem !important;
    overflow-x: auto !important;
    padding-bottom: 0.25rem !important;
  }

  [data-route^="/client/"] .w-72.border-r.bg-card\/50 .space-y-2 > *,
  [data-route^="/workspaces"] .w-72.border-r.bg-card\/50 .space-y-2 > * {
    flex: 0 0 auto !important;
    min-width: 8.5rem !important;
  }

  [data-route^="/client/"] .w-72.border-r.bg-card\/50 .space-y-2 > * button,
  [data-route^="/workspaces"] .w-72.border-r.bg-card\/50 .space-y-2 > * button,
  [data-route^="/client/"] .w-72.border-r.bg-card\/50 .space-y-2 > * a,
  [data-route^="/workspaces"] .w-72.border-r.bg-card\/50 .space-y-2 > * a {
    min-height: 2.35rem !important;
    border-radius: 0.75rem !important;
    padding: 0.45rem 0.65rem !important;
    font-size: 0.72rem !important;
  }

  [data-route^="/client/"] .grid.grid-cols-2,
  [data-route^="/client/"] .grid.grid-cols-3,
  [data-route^="/workspaces"] .grid.grid-cols-2,
  [data-route^="/workspaces"] .grid.grid-cols-3 {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  @media (max-width: 480px) {
    html {
      font-size: 13.25px;
    }

    main[style] {
      padding-bottom: calc(5.15rem + env(safe-area-inset-bottom)) !important;
    }

    aside a[href="/dashboard"],
    aside a[href="/today"],
    aside a[href="/kanban"],
    aside a[href="/task-calendar"],
    aside a[href="/clients"],
    aside a[href="/messages"],
    aside a[href="/settings"] {
      min-width: 3.85rem !important;
      max-width: 4.3rem !important;
      min-height: 3.25rem !important;
      padding: 0.45rem 0.35rem !important;
      font-size: 0.63rem !important;
    }

    [role="tablist"] > * {
      min-height: 2.75rem !important;
      padding: 0.36rem 0.62rem !important;
      font-size: 0.68rem !important;
    }

    .max-w-7xl,
    .max-w-6xl {
      padding-left: 0.7rem !important;
      padding-right: 0.7rem !important;
    }

    .h-10,
    .h-11 {
      min-height: 2.75rem !important;
      height: auto !important;
    }
  }

  [data-radix-popper-content-wrapper],
  [role="dialog"],
  [role="menu"],
  [role="tooltip"] {
    max-width: min(100vw - 1rem, 100%) !important;
  }

  .w-80 {
    width: min(85vw, 20rem) !important;
  }

  .w-96,
  .w-\[320px\],
  .w-\[340px\],
  .w-\[360px\],
  .w-\[380px\],
  .w-\[400px\],
  .w-\[420px\],
  .w-\[450px\],
  .w-\[500px\],
  .w-\[600px\],
  .w-\[800px\],
  .w-\[1000px\],
  .w-\[1200px\],
  .max-w-\[420px\],
  .max-w-\[500px\],
  .max-w-\[580px\],
  .max-w-\[600px\],
  .max-w-\[640px\],
  .max-w-\[800px\],
  .max-w-\[900px\],
  .max-w-\[1200px\] {
    width: 100% !important;
    max-width: 100% !important;
  }

  .min-w-\[220px\],
  .min-w-\[320px\],
  .min-w-\[360px\],
  .min-w-\[380px\],
  .min-w-\[400px\],
  .min-w-\[420px\],
  .min-w-\[500px\],
  .min-w-\[600px\],
  .min-w-\[640px\] {
    min-width: 0 !important;
  }

  .h-\[calc\(100vh-220px\)\],
  .h-\[calc\(100vh-200px\)\] {
    height: auto !important;
    min-height: calc(100svh - 7rem) !important;
  }

  .p-6 {
    padding: 1rem !important;
  }

  .px-6 {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  .py-6 {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
  }

  .gap-6 {
    gap: 1rem !important;
  }

  .grid-cols-5,
  .grid-cols-6,
  .grid-cols-7,
  .grid-cols-10,
  .grid-cols-12 {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  [class*="overflow-x-auto"] {
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
  }

  [class*="overflow-x-auto"] > * {
    scroll-snap-align: start;
  }

  [data-export-device] {
    overflow-x: auto;
    padding-bottom: 0.75rem;
  }

  [data-export-device] > div,
  [data-export-device] .w-\[1200px\] {
    width: max(720px, 100%) !important;
    max-width: none !important;
    height: auto !important;
  }

  table {
    min-width: 100%;
  }

  input,
  select,
  textarea,
  button {
    font-size: 16px;
  }

  [data-route^="/kanban"] .h-full.overflow-x-auto.overflow-y-hidden,
  [data-route$="/board"] .h-full.overflow-x-auto.overflow-y-hidden {
    overflow-x: auto !important;
    overflow-y: visible !important;
  }

  [data-route^="/kanban"] .h-full.overflow-x-auto.overflow-y-hidden > .flex.gap-4.h-full.p-6.min-w-min.pb-6,
  [data-route$="/board"] .h-full.overflow-x-auto.overflow-y-hidden > .flex.gap-4.h-full.p-6.min-w-min.pb-6 {
    align-items: flex-start !important;
    gap: 0.75rem !important;
    height: auto !important;
    min-width: max-content !important;
    padding: 1rem !important;
  }

  [data-route^="/kanban"] .h-full.overflow-x-auto.overflow-y-hidden > .flex.gap-4.h-full.p-6.min-w-min.pb-6 > div,
  [data-route$="/board"] .h-full.overflow-x-auto.overflow-y-hidden > .flex.gap-4.h-full.p-6.min-w-min.pb-6 > div {
    flex: 0 0 auto !important;
    width: min(82vw, 22rem) !important;
    min-width: min(82vw, 22rem) !important;
    max-width: min(82vw, 22rem) !important;
    height: auto !important;
  }

  /* Horizontal scroll-snap (global rule below) steals taps on iOS; disable on Kanban/board. */
  [data-route^="/kanban"] [class*="overflow-x-auto"],
  [data-route$="/board"] [class*="overflow-x-auto"] {
    scroll-snap-type: none !important;
  }

  [data-route^="/kanban"] [class*="overflow-x-auto"] > *,
  [data-route$="/board"] [class*="overflow-x-auto"] > * {
    scroll-snap-align: unset !important;
  }

  /* DnD (@hello-pangea / rfd): let vertical scroll + taps coexist on cards and columns */
  [data-route^="/kanban"] [data-rfd-droppable-id],
  [data-route^="/kanban"] [data-rfd-draggable-id],
  [data-route$="/board"] [data-rfd-droppable-id],
  [data-route$="/board"] [data-rfd-draggable-id] {
    touch-action: auto !important;
  }

  [data-route^="/kanban"] [data-rfd-droppable-context-id] .overflow-y-auto,
  [data-route$="/board"] [data-rfd-droppable-context-id] .overflow-y-auto {
    touch-action: pan-y !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* Keep real controls above drag layers so taps reach buttons/links/inputs */
  [data-route^="/kanban"] button,
  [data-route^="/kanban"] a[href],
  [data-route^="/kanban"] [role="button"],
  [data-route^="/kanban"] input:not([type="hidden"]),
  [data-route^="/kanban"] textarea,
  [data-route^="/kanban"] select,
  [data-route$="/board"] button,
  [data-route$="/board"] a[href],
  [data-route$="/board"] [role="button"],
  [data-route$="/board"] input:not([type="hidden"]),
  [data-route$="/board"] textarea,
  [data-route$="/board"] select {
    touch-action: manipulation !important;
    position: relative;
    z-index: 3;
    -webkit-tap-highlight-color: rgba(59, 130, 246, 0.15);
  }


  [data-route^="/kanban"] .border-b.bg-background\/95,
  [data-route$="/board"] .border-b.bg-background\/95 {
    position: sticky;
    top: 0;
    z-index: 35;
  }

  [data-route^="/kanban"] .border-b.bg-background\/95 button,
  [data-route^="/kanban"] .border-b.bg-background\/95 [role="button"],
  [data-route$="/board"] .border-b.bg-background\/95 button,
  [data-route$="/board"] .border-b.bg-background\/95 [role="button"] {
    min-height: 2.75rem !important;
    min-width: 2.5rem !important;
    padding-left: 0.6rem !important;
    padding-right: 0.6rem !important;
  }

  [data-route^="/calendar"] .min-w-\[640px\],
  [data-route^="/master-calendar"] .min-w-\[640px\],
  [data-route^="/task-calendar"] .min-w-\[640px\],
  [data-route$="/calendar"] .min-w-\[640px\] {
    min-width: 44rem !important;
  }

  [data-route^="/calendar"] .grid.grid-cols-8,
  [data-route^="/master-calendar"] .grid.grid-cols-8,
  [data-route^="/task-calendar"] .grid.grid-cols-8,
  [data-route$="/calendar"] .grid.grid-cols-8 {
    min-width: 44rem !important;
  }

  [data-route^="/calendar"] .overflow-x-auto,
  [data-route^="/master-calendar"] .overflow-x-auto,
  [data-route^="/task-calendar"] .overflow-x-auto,
  [data-route$="/calendar"] .overflow-x-auto {
    overflow-x: auto !important;
    overflow-y: visible !important;
  }

  [data-route^="/calendar"] .sticky.top-0,
  [data-route^="/master-calendar"] .sticky.top-0,
  [data-route^="/task-calendar"] .sticky.top-0,
  [data-route$="/calendar"] .sticky.top-0 {
    top: 0 !important;
    z-index: 30 !important;
  }

  [data-route^="/calendar"] .px-6.py-4,
  [data-route^="/master-calendar"] .px-6.py-4,
  [data-route^="/task-calendar"] .px-6.py-4,
  [data-route$="/calendar"] .px-6.py-4 {
    padding: 0.875rem 1rem !important;
  }

  [data-route^="/kanban"] .lg\:grid-cols-\[320px_1fr\],
  [data-route$="/board"] .lg\:grid-cols-\[320px_1fr\],
  [data-route^="/calendar"] .lg\:grid-cols-\[320px_1fr\],
  [data-route^="/calendar"] .lg\:grid-cols-\[1fr\,380px\],
  [data-route^="/master-calendar"] .lg\:grid-cols-\[320px_1fr\],
  [data-route^="/master-calendar"] .lg\:grid-cols-\[1fr\,380px\],
  [data-route^="/task-calendar"] .lg\:grid-cols-\[320px_1fr\],
  [data-route^="/task-calendar"] .lg\:grid-cols-\[1fr\,380px\],
  [data-route$="/calendar"] .lg\:grid-cols-\[320px_1fr\],
  [data-route$="/calendar"] .lg\:grid-cols-\[1fr\,380px\] {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  [data-route^="/kanban"] .lg\:grid-cols-\[320px_1fr\] > :first-child,
  [data-route$="/board"] .lg\:grid-cols-\[320px_1fr\] > :first-child,
  [data-route^="/calendar"] .lg\:grid-cols-\[320px_1fr\] > :first-child,
  [data-route^="/calendar"] .lg\:grid-cols-\[1fr\,380px\] > :last-child,
  [data-route^="/master-calendar"] .lg\:grid-cols-\[320px_1fr\] > :first-child,
  [data-route^="/master-calendar"] .lg\:grid-cols-\[1fr\,380px\] > :last-child,
  [data-route^="/task-calendar"] .lg\:grid-cols-\[320px_1fr\] > :first-child,
  [data-route^="/task-calendar"] .lg\:grid-cols-\[1fr\,380px\] > :last-child,
  [data-route$="/calendar"] .lg\:grid-cols-\[320px_1fr\] > :first-child,
  [data-route$="/calendar"] .lg\:grid-cols-\[1fr\,380px\] > :last-child {
    order: -1;
    width: 100% !important;
    max-width: 100% !important;
  }

  [data-route^="/kanban"] [role="dialog"],
  [data-route$="/board"] [role="dialog"],
  [data-route^="/calendar"] [role="dialog"],
  [data-route^="/master-calendar"] [role="dialog"],
  [data-route^="/task-calendar"] [role="dialog"],
  [data-route$="/calendar"] [role="dialog"] {
    width: min(100vw - 0.75rem, 28rem) !important;
    max-width: min(100vw - 0.75rem, 28rem) !important;
    max-height: calc(100svh - 0.75rem) !important;
    margin: 0.375rem !important;
  }

  [data-route^="/kanban"] [role="dialog"] .grid-cols-2,
  [data-route^="/kanban"] [role="dialog"] .grid-cols-3,
  [data-route$="/board"] [role="dialog"] .grid-cols-2,
  [data-route$="/board"] [role="dialog"] .grid-cols-3,
  [data-route^="/calendar"] [role="dialog"] .grid-cols-2,
  [data-route^="/calendar"] [role="dialog"] .grid-cols-3,
  [data-route^="/master-calendar"] [role="dialog"] .grid-cols-2,
  [data-route^="/master-calendar"] [role="dialog"] .grid-cols-3,
  [data-route^="/task-calendar"] [role="dialog"] .grid-cols-2,
  [data-route^="/task-calendar"] [role="dialog"] .grid-cols-3,
  [data-route$="/calendar"] [role="dialog"] .grid-cols-2,
  [data-route$="/calendar"] [role="dialog"] .grid-cols-3 {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  [data-route^="/kanban"] [role="dialog"] .flex.items-center.justify-between,
  [data-route$="/board"] [role="dialog"] .flex.items-center.justify-between,
  [data-route^="/calendar"] [role="dialog"] .flex.items-center.justify-between,
  [data-route^="/master-calendar"] [role="dialog"] .flex.items-center.justify-between,
  [data-route^="/task-calendar"] [role="dialog"] .flex.items-center.justify-between,
  [data-route$="/calendar"] [role="dialog"] .flex.items-center.justify-between {
    align-items: flex-start !important;
    flex-wrap: wrap !important;
    gap: 0.75rem !important;
  }

  [data-route^="/kanban"] .space-y-4 > .flex.items-center.gap-2,
  [data-route$="/board"] .space-y-4 > .flex.items-center.gap-2,
  [data-route^="/calendar"] .space-y-4 > .flex.items-center.gap-2,
  [data-route^="/master-calendar"] .space-y-4 > .flex.items-center.gap-2,
  [data-route^="/task-calendar"] .space-y-4 > .flex.items-center.gap-2,
  [data-route$="/calendar"] .space-y-4 > .flex.items-center.gap-2 {
    align-items: stretch !important;
    flex-wrap: wrap !important;
  }

  [data-route^="/kanban"] .space-y-4 > .flex.items-center.gap-2 > *,
  [data-route$="/board"] .space-y-4 > .flex.items-center.gap-2 > *,
  [data-route^="/calendar"] .space-y-4 > .flex.items-center.gap-2 > *,
  [data-route^="/master-calendar"] .space-y-4 > .flex.items-center.gap-2 > *,
  [data-route^="/task-calendar"] .space-y-4 > .flex.items-center.gap-2 > *,
  [data-route$="/calendar"] .space-y-4 > .flex.items-center.gap-2 > * {
    flex: 1 1 100%;
    min-width: 0;
  }
}

@media (max-width: 768px) {
  html[data-route^="/task-calendar"],
  body[data-route^="/task-calendar"] {
    overflow-y: auto !important;
    overscroll-behavior-y: auto !important;
  }

  body[data-route^="/task-calendar"] main[style],
  body[data-route^="/task-calendar"] main {
    padding-bottom: calc(var(--mobile-bottom-nav-offset) + 3rem) !important;
  }

  [data-route^="/task-calendar"] main,
  [data-route^="/task-calendar"] main > div,
  [data-route^="/task-calendar"] .min-h-screen,
  [data-route^="/task-calendar"] .h-screen,
  [data-route^="/task-calendar"] .h-full,
  [data-route^="/task-calendar"] .overflow-hidden {
    overflow-y: visible !important;
  }

  [data-route^="/task-calendar"] .h-\[calc\(100vh-220px\)\],
  [data-route^="/task-calendar"] .h-\[calc\(100vh-200px\)\],
  [data-route^="/task-calendar"] .h-\[calc\(100vh-2rem\)\] {
    height: auto !important;
    min-height: auto !important;
  }

  [data-route^="/task-calendar"] [role="dialog"] {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }

  [data-route^="/task-calendar"] [role="dialog"] input,
  [data-route^="/task-calendar"] [role="dialog"] textarea,
  [data-route^="/task-calendar"] [role="dialog"] select,
  [data-route^="/task-calendar"] input,
  [data-route^="/task-calendar"] textarea,
  [data-route^="/task-calendar"] select {
    color: #0f172a !important;
    -webkit-text-fill-color: #0f172a !important;
    caret-color: #0f172a !important;
    background-color: #ffffff !important;
  }

  [data-route^="/task-calendar"] input::placeholder,
  [data-route^="/task-calendar"] textarea::placeholder {
    color: #64748b !important;
    opacity: 1 !important;
  }

  [data-route^="/task-calendar"] .fixed.bottom-0:not(aside),
  [data-route^="/task-calendar"] .fixed.inset-x-0.bottom-0:not(aside),
  [data-route^="/task-calendar"] [class*="fixed"][class*="bottom-0"]:not(aside) {
    bottom: var(--mobile-bottom-nav-offset) !important;
    z-index: 95 !important;
  }

  [data-route^="/task-calendar"] .sticky.bottom-0,
  [data-route^="/task-calendar"] [class*="sticky"][class*="bottom-0"] {
    bottom: var(--mobile-bottom-nav-offset) !important;
    z-index: 95 !important;
  }

  /* Task pages: keep add/create controls reachable and clear on mobile. */
  [data-route^="/task-calendar"] .sticky.top-0,
  [data-route^="/kanban"] .sticky.top-0,
  [data-route$="/board"] .sticky.top-0 {
    top: 0 !important;
    z-index: 40 !important;
    backdrop-filter: blur(8px);
  }

  [data-route^="/task-calendar"] .flex.items-center.gap-2,
  [data-route^="/task-calendar"] .flex.items-center.gap-3,
  [data-route^="/kanban"] .flex.items-center.gap-2,
  [data-route^="/kanban"] .flex.items-center.gap-3,
  [data-route$="/board"] .flex.items-center.gap-2,
  [data-route$="/board"] .flex.items-center.gap-3 {
    flex-wrap: wrap !important;
  }

  [data-route^="/task-calendar"] [role="toolbar"],
  [data-route^="/task-calendar"] [role="tablist"] {
    overflow-x: auto !important;
    white-space: nowrap !important;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 0.2rem !important;
  }

  [data-route^="/task-calendar"] [role="toolbar"] > *,
  [data-route^="/task-calendar"] [role="tablist"] > * {
    flex: 0 0 auto !important;
  }

  [data-route^="/task-calendar"] .grid.grid-cols-2,
  [data-route^="/task-calendar"] .grid.grid-cols-3,
  [data-route^="/task-calendar"] .grid.grid-cols-4 {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  [data-route^="/task-calendar"] .rounded-2xl,
  [data-route^="/kanban"] .rounded-2xl,
  [data-route$="/board"] .rounded-2xl {
    border-radius: 0.85rem !important;
  }

  [data-route^="/task-calendar"] [class*="text-3xl"],
  [data-route^="/task-calendar"] [class*="text-2xl"] {
    font-size: 1.25rem !important;
    line-height: 1.35 !important;
  }

  [data-route^="/task-calendar"] [role="dialog"] footer,
  [data-route^="/kanban"] [role="dialog"] footer,
  [data-route$="/board"] [role="dialog"] footer,
  [data-route^="/task-calendar"] [role="dialog"] .flex.justify-end,
  [data-route^="/kanban"] [role="dialog"] .flex.justify-end,
  [data-route$="/board"] [role="dialog"] .flex.justify-end {
    position: sticky;
    bottom: 0;
    background: inherit;
    padding-top: 0.75rem !important;
    z-index: 2;
  }

  [data-route^="/task-calendar"] [role="dialog"] footer button,
  [data-route^="/kanban"] [role="dialog"] footer button,
  [data-route$="/board"] [role="dialog"] footer button,
  [data-route^="/task-calendar"] [role="dialog"] .flex.justify-end button,
  [data-route^="/kanban"] [role="dialog"] .flex.justify-end button,
  [data-route$="/board"] [role="dialog"] .flex.justify-end button {
    min-height: 2.75rem !important;
    padding-left: 0.85rem !important;
    padding-right: 0.85rem !important;
    font-size: 0.8rem !important;
  }

  [data-route^="/task-calendar"] .h-\[calc\(100vh-220px\)\],
  [data-route^="/task-calendar"] .h-\[calc\(100vh-200px\)\] {
    min-height: calc(100svh - 8.5rem) !important;
  }

  [data-route^="/task-calendar"] .space-y-2 > .group,
  [data-route^="/task-calendar"] .space-y-2 > button,
  [data-route^="/kanban"] .space-y-2 > .group,
  [data-route$="/board"] .space-y-2 > .group {
    margin-bottom: 0.45rem !important;
  }

  [data-route^="/kanban"] .line-clamp-2,
  [data-route$="/board"] .line-clamp-2,
  [data-route^="/kanban"] .truncate,
  [data-route$="/board"] .truncate {
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: normal !important;
    display: block !important;
    -webkit-line-clamp: unset !important;
    -webkit-box-orient: unset !important;
  }

  [data-route^="/kanban"] .flex.gap-1.mb-3.transition-all.duration-300,
  [data-route$="/board"] .flex.gap-1.mb-3.transition-all.duration-300 {
    opacity: 1 !important;
    visibility: visible !important;
  }

  [data-route^="/kanban"] .h-7.w-7.p-0,
  [data-route$="/board"] .h-7.w-7.p-0 {
    width: 2rem !important;
    height: 2rem !important;
  }

  [data-route^="/kanban"] [role="menu"],
  [data-route$="/board"] [role="menu"],
  [data-route^="/kanban"] [role="tooltip"],
  [data-route$="/board"] [role="tooltip"] {
    z-index: 125 !important;
  }

  /* Mobile usability: keep task actions visible (details/delete/edit) without hover. */
  [data-route^="/task-calendar"] .opacity-0.group-hover\:opacity-100,
  [data-route^="/kanban"] .opacity-0.group-hover\:opacity-100,
  [data-route$="/board"] .opacity-0.group-hover\:opacity-100,
  [data-route^="/task-calendar"] .group-hover\:opacity-100,
  [data-route^="/kanban"] .group-hover\:opacity-100,
  [data-route$="/board"] .group-hover\:opacity-100 {
    opacity: 1 !important;
  }

  [data-route^="/task-calendar"] .transition-opacity,
  [data-route^="/kanban"] .transition-opacity,
  [data-route$="/board"] .transition-opacity {
    pointer-events: auto !important;
  }

  [data-route^="/task-calendar"] [role="dialog"],
  [data-route^="/kanban"] [role="dialog"],
  [data-route$="/board"] [role="dialog"] {
    z-index: 120 !important;
  }

  [data-route^="/task-calendar"] [role="dialog"] .max-h-\[85vh\],
  [data-route^="/kanban"] [role="dialog"] .max-h-\[85vh\],
  [data-route$="/board"] [role="dialog"] .max-h-\[85vh\] {
    max-height: calc(100svh - 1rem) !important;
  }

  /* Fallbacks when route attributes are missing or stale in browser cache. */
  input,
  textarea,
  select,
  [contenteditable="true"],
  [role="textbox"] {
    color: #0f172a !important;
    -webkit-text-fill-color: #0f172a !important;
    caret-color: #0f172a !important;
  }

  input::placeholder,
  textarea::placeholder,
  [contenteditable="true"]::placeholder,
  [role="textbox"]::placeholder {
    color: #64748b !important;
    opacity: 1 !important;
  }

  .fixed.bottom-0:not(aside),
  .fixed.inset-x-0.bottom-0:not(aside),
  [class*="fixed"][class*="bottom-0"]:not(aside),
  .sticky.bottom-0,
  [class*="sticky"][class*="bottom-0"] {
    bottom: var(--mobile-bottom-nav-offset) !important;
    z-index: 95 !important;
  }

  /* Dropdowns / selects from Radix must sit above dialogs (z-120) and bottom nav */
  [data-radix-select-content],
  [data-radix-dropdown-menu-content],
  [data-radix-popover-content],
  [data-radix-menubar-content],
  [data-radix-context-menu-content] {
    z-index: 140 !important;
  }

  [data-radix-popper-content-wrapper] {
    z-index: 140 !important;
  }
}