@import "tailwindcss";

@custom-variant dark (&:is(.dark *));

@source "../**/*.{ts,tsx}";
@source "../../../../apps/local/src/**/*.{ts,tsx}";
@source "../../../../apps/cloud/src/**/*.{ts,tsx}";
@source "../../../plugins/*/src/react/**/*.{ts,tsx}";

@theme inline {
  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  --font-display: "Instrument Serif", Georgia, serif;

  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);

  --color-sidebar: var(--sidebar);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-active: var(--sidebar-active);

  --radius-sm: calc(var(--radius) * 0.6);
  --radius-md: calc(var(--radius) * 0.8);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) * 1.4);
  --color-sidebar-ring: var(--sidebar-ring);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
}

/* ——— Light theme ——— */
:root {
  color-scheme: light dark;
  --radius: 0.625rem;

  --background: oklch(0.985 0.002 260);
  --foreground: oklch(0.145 0.005 260);
  --card: oklch(0.99 0.001 260);
  --card-foreground: oklch(0.145 0.005 260);
  --popover: oklch(0.99 0.001 260);
  --popover-foreground: oklch(0.145 0.005 260);
  --primary: oklch(0.55 0.17 175);
  --primary-foreground: oklch(0.98 0.005 175);
  --secondary: oklch(0.94 0.005 260);
  --secondary-foreground: oklch(0.32 0.008 260);
  --muted: oklch(0.955 0.004 260);
  --muted-foreground: oklch(0.5 0.01 250);
  --accent: oklch(0.94 0.006 260);
  --accent-foreground: oklch(0.145 0.005 260);
  --destructive: oklch(0.55 0.22 25);
  --border: oklch(0.88 0.006 260);
  --input: oklch(0.88 0.006 260);
  --ring: oklch(0.55 0.17 175);

  --sidebar: oklch(0.97 0.003 260);
  --sidebar-foreground: oklch(0.32 0.008 260);
  --sidebar-border: oklch(0.9 0.005 260);
  --sidebar-active: oklch(0.935 0.006 260);

  --scrollbar-thumb: oklch(0.78 0.005 260);
  --scrollbar-thumb-hover: oklch(0.68 0.005 260);
  --sidebar-primary: hsl(240 5.9% 10%);
  --sidebar-primary-foreground: hsl(0 0% 98%);
  --sidebar-accent: hsl(240 4.8% 95.9%);
  --sidebar-accent-foreground: hsl(240 5.9% 10%);
  --sidebar-ring: hsl(217.2 91.2% 59.8%);
}

/* ——— Dark theme ——— */
@media (prefers-color-scheme: dark) {
  :root {
    --background: oklch(0.115 0.005 260);
    --foreground: oklch(0.9 0.008 250);
    --card: oklch(0.145 0.005 260);
    --card-foreground: oklch(0.9 0.008 250);
    --popover: oklch(0.145 0.005 260);
    --popover-foreground: oklch(0.9 0.008 250);
    --primary: oklch(0.72 0.15 175);
    --primary-foreground: oklch(0.12 0.01 175);
    --secondary: oklch(0.195 0.007 260);
    --secondary-foreground: oklch(0.78 0.008 250);
    --muted: oklch(0.175 0.005 260);
    --muted-foreground: oklch(0.65 0.01 250);
    --accent: oklch(0.195 0.008 260);
    --accent-foreground: oklch(0.9 0.008 250);
    --destructive: oklch(0.62 0.22 25);
    --border: oklch(0.28 0.007 260);
    --input: oklch(0.195 0.007 260);
    --ring: oklch(0.72 0.15 175);

    --sidebar: oklch(0.105 0.005 260);
    --sidebar-foreground: oklch(0.78 0.008 250);
    --sidebar-border: oklch(0.2 0.006 260);
    --sidebar-active: oklch(0.18 0.008 260);

    --scrollbar-thumb: oklch(0.3 0.005 260);
    --scrollbar-thumb-hover: oklch(0.38 0.005 260);
  }
}

@layer base {
  * {
    @apply border-border;
  }

  html,
  body,
  #root {
    min-height: 100%;
    height: 100%;
  }

  body {
    @apply bg-background font-sans text-foreground antialiased;
  }

  ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }
  ::-webkit-scrollbar-track {
    background: transparent;
  }
  ::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
    border-radius: 3px;
  }
  ::-webkit-scrollbar-thumb:hover {
    background: var(--scrollbar-thumb-hover);
  }
}

/* The sidebar header sits at the top-left of the desktop window, under the
   native macOS traffic-light controls (trafficLightPosition {x:16,y:17} in
   apps/desktop/src/main/index.ts). Offset its content past the lights and make
   the freed strip draggable like a native title bar. The desktop window stays
   at or above the mobile breakpoint (minWidth 768), so the sidebar header is
   the only header the lights ever overlap. */
.executor-desktop-macos .desktop-macos-titlebar {
  -webkit-app-region: drag;
  padding-left: 88px;
}

.executor-desktop-macos .desktop-macos-no-drag {
  -webkit-app-region: no-drag;
}

/* The main content area sits to the right of the sidebar. On the frameless
   desktop window it renders page content straight to the top edge with nothing
   marked as a drag region, so the window could not be moved or
   double-clicked-to-zoom from there (only the sidebar header worked, see
   .desktop-macos-titlebar above). Reserve a title-bar-height strip along the
   top of the main area and make it draggable so the whole top row behaves like
   the native title bar. Hidden off-desktop. It reserves space rather than
   overlaying, so no page content sits under the drag region (a drag region
   would otherwise swallow clicks on anything beneath it). The traffic lights
   sit over the sidebar, never the main area, so no left offset is needed here. */
.desktop-macos-main-titlebar {
  display: none;
}

.executor-desktop-macos .desktop-macos-main-titlebar {
  display: block;
  height: 3rem; /* matches the sidebar header (h-12) */
  flex-shrink: 0;
  -webkit-app-region: drag;
}

/* The 88px title-bar offset eats into the sidebar's width; without extra room
   the brand wordmark and the server-connection menu collide. Widen the macOS
   sidebar so both clear the traffic lights with comfortable spacing. */
.executor-desktop-macos .desktop-macos-sidebar {
  width: 15rem;
}

.dark {
  --sidebar: hsl(240 5.9% 10%);
  --sidebar-foreground: hsl(240 4.8% 95.9%);
  --sidebar-primary: hsl(224.3 76.3% 48%);
  --sidebar-primary-foreground: hsl(0 0% 100%);
  --sidebar-accent: hsl(240 3.7% 15.9%);
  --sidebar-accent-foreground: hsl(240 4.8% 95.9%);
  --sidebar-border: hsl(240 3.7% 15.9%);
  --sidebar-ring: hsl(217.2 91.2% 59.8%);
}

@keyframes ios-spinner-fade {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0.25;
  }
}