/*
 * Portal SDK – automatically imports and sets up all fluid required CSS.
 *
 * Import this in your app's main CSS file:
 *   @import "@fluid-app/portal-sdk/globals.css";
 *
 * For package styles without portal theme tokens (e.g. in fluid-admin):
 *   @import "@fluid-app/portal-sdk/packages.css";
 */

/* ── Package CSS imports ─────────────────────────────────────────────────── */
@import "./packages.css";

/* ── Source ──────────────────────────────────────────────────────────────── */
@source "../src/**/*.{ts,tsx}";
/* This is required for the published version */
@source "../dist/**/*.{js,mjs}";

/*
 * Register CSS variables as Tailwind theme values.
 * `inline` means Tailwind won't emit its own --color-* declarations —
 * we define them ourselves in :root below (and the theme engine overrides
 * them at runtime via [data-theme="..."]).
 */
@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--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-destructive-foreground: var(--destructive-foreground);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-sidebar: var(--sidebar);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-ring: var(--sidebar-ring);
  --radius: var(--radius);

  /*
   * Radius scale derived from the single --radius token, so every
   * rounded-* utility (rounded-sm/md/lg/xl/2xl) responds to the theme.
   * Tailwind 4 ships these as fixed pixel defaults; without this block,
   * a tenant theme that sets --radius: 0 (sharp) or --radius: 1.25rem
   * (very round) only affects components that explicitly use --radius,
   * not anything written with the standard rounded-* utilities.
   * rounded-full stays 9999px universally — pills shouldn't change.
   * max(0px, ...) keeps --radius-sm/--radius-md non-negative when a
   * tenant sets --radius: 0; raw calc() would produce -4px / -2px,
   * which is invalid for border-radius and rejected by some tooling.
   */
  --radius-sm: max(0px, calc(var(--radius) - 4px));
  --radius-md: max(0px, calc(var(--radius) - 2px));
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --radius-2xl: calc(var(--radius) + 8px);
}

/* Light mode fallback tokens (OKLCH format) */
:root {
  --color-background: oklch(1 0 0);
  --color-foreground: oklch(0.145 0 0);
  /* Canonical default: oklch form of theme-engine defaults.ts primary (#3b82f6). */
  --color-primary: oklch(0.546 0.245 262.881);
  --color-primary-foreground: oklch(0.985 0 0);
  --color-secondary: oklch(0.97 0 0);
  --color-secondary-foreground: oklch(0.205 0 0);
  --color-muted: oklch(0.97 0 0);
  --color-muted-foreground: oklch(0.556 0 0);
  --color-accent: oklch(0.97 0 0);
  --color-accent-foreground: oklch(0.205 0 0);
  --color-destructive: oklch(0.577 0.245 27.325);
  --color-destructive-foreground: oklch(0.985 0 0);
  --color-border: oklch(0.922 0 0);

  /* Short-name aliases (match css-generator globalCSSOverride) */
  --background: var(--color-background);
  --foreground: var(--color-foreground);
  --primary: var(--color-primary);
  --primary-foreground: var(--color-primary-foreground);
  --secondary: var(--color-secondary);
  --secondary-foreground: var(--color-secondary-foreground);
  --muted: var(--color-muted);
  --muted-foreground: var(--color-muted-foreground);
  --accent: var(--color-accent);
  --accent-foreground: var(--color-accent-foreground);
  --destructive: var(--color-destructive);
  --destructive-foreground: var(--color-destructive-foreground);
  --border: var(--color-border);
  --input: var(--color-border);
  --ring: var(--color-primary);
  --radius: 0.625rem;

  /* Popover / Card aliases */
  --popover: var(--color-background);
  --popover-foreground: var(--color-foreground);
  --card: var(--color-background);
  --card-foreground: var(--color-foreground);

  /* Sidebar aliases */
  --sidebar: var(--color-muted);
  --sidebar-foreground: var(--color-muted-foreground);
  --sidebar-primary: var(--color-primary);
  --sidebar-primary-foreground: var(--color-primary-foreground);
  --sidebar-accent: var(--color-accent);
  --sidebar-accent-foreground: var(--color-accent-foreground);
  --sidebar-border: var(--color-border);
  --sidebar-ring: var(--color-primary);
}

/*
 * Dark-mode fallback tokens.
 * Applied when the user toggles dark mode but no API theme is loaded.
 * The theme engine will override these with richer palette-derived values
 * once a theme is fetched from the API.
 */
[data-theme-mode="dark"] {
  --color-background: oklch(0.145 0 0);
  --color-foreground: oklch(0.985 0 0);
  --color-primary: oklch(0.985 0 0);
  --color-primary-foreground: oklch(0.205 0 0);
  --color-secondary: oklch(0.215 0 0);
  --color-secondary-foreground: oklch(0.985 0 0);
  --color-muted: oklch(0.215 0 0);
  --color-muted-foreground: oklch(0.708 0 0);
  --color-accent: oklch(0.215 0 0);
  --color-accent-foreground: oklch(0.985 0 0);
  --color-destructive: oklch(0.577 0.245 27.325);
  --color-destructive-foreground: oklch(0.985 0 0);
  --color-border: oklch(0.3 0 0);

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

  --popover: var(--color-background);
  --popover-foreground: var(--color-foreground);
  --card: var(--color-background);
  --card-foreground: var(--color-foreground);

  --sidebar: var(--color-muted);
  --sidebar-foreground: var(--color-muted-foreground);
  --sidebar-primary: var(--color-primary);
  --sidebar-primary-foreground: var(--color-primary-foreground);
  --sidebar-accent: var(--color-accent);
  --sidebar-accent-foreground: var(--color-accent-foreground);
  --sidebar-border: var(--color-border);
  --sidebar-ring: var(--color-primary);
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
  }
}

@media (max-width: 767px) {
  input:not([type]),
  input[type="date"],
  input[type="datetime-local"],
  input[type="email"],
  input[type="month"],
  input[type="number"],
  input[type="password"],
  input[type="search"],
  input[type="tel"],
  input[type="text"],
  input[type="time"],
  input[type="url"],
  input[type="week"],
  textarea,
  select,
  [data-slot="command-input"],
  [data-slot="input"],
  [data-slot="textarea"] {
    font-size: 16px;
  }

  [data-mobile-bottom-sheet] > button:first-child {
    display: none;
  }
}

/* Radix sets pointer-events: none on body while a dialog is open, and toasts
   render outside it. Scoped to visible: hidden toasts would intercept clicks.
   Paired with the pointerdown guard in AppShell, so it stays portal local. */
[data-sonner-toast][data-visible="true"] {
  pointer-events: auto;
}

/* Hide scrollbars while preserving scroll functionality */
@layer utilities {
  .scrollbar-none {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  .scrollbar-none::-webkit-scrollbar {
    display: none;
  }
}