/* Generated by scripts/flatten-published-styles.mjs — do not edit. */
@source "../**/*.{js,mjs,cjs}";
/*
 * Shared package CSS imports — safe to use in any app.
 *
 * Import this when you need the package styles without the portal theme tokens:
 *   @import "@fluid-app/portal-sdk/packages.css";
 */

/* ── inlined from @fluid-app/company-switcher-ui/styles/company-switcher.css ── */

/* ── inlined from @fluid-app/contacts-ui/styles/contacts.css ── */

@keyframes highlight-fade {
  0% {
    background-color: color-mix(
      in oklch,
      var(--primary) 20%,
      var(--background)
    );
  }
  100% {
    background-color: transparent;
  }
}

.animate-highlight-fade {
  animation: highlight-fade 2s ease-out;
}

@keyframes badge-in {
  0% {
    opacity: 0;
    transform: scale(0.7);
    max-width: 0;
    padding-left: 0;
    padding-right: 0;
    margin-left: -4px;
  }
  50% {
    opacity: 1;
    transform: scale(1.05);
  }
  100% {
    opacity: 1;
    transform: scale(1);
    max-width: 200px;
  }
}

@keyframes badge-out {
  0% {
    opacity: 1;
    transform: scale(1);
    max-width: 200px;
  }
  100% {
    opacity: 0;
    transform: scale(0.7);
    max-width: 0;
    padding-left: 0;
    padding-right: 0;
    margin-left: -4px;
    margin-right: -4px;
  }
}

/*
 * Contacts domain design tokens — theme-driven.
 *
 * Every status / badge / activity color is a tint of the theme's --primary
 * (or --destructive, where the semantic *needs* to read as a warning),
 * derived via color-mix() in OKLCH. Because --primary and --destructive
 * already swap between light/dark mode through the theme engine, no
 * separate dark-mode block is needed — these tokens follow automatically.
 *
 * This is a deliberate trade-off: per-category hue differentiation
 * (blue=new, green=active, purple=customer) is lost, but the page reads
 * as cohesive with the tenant's brand. Differentiation now comes from the
 * badge *label* text, not the color.
 *
 * Pattern:
 *   - bg:         --primary mixed 12% with the page background
 *   - foreground: --primary mixed 90% with the page foreground (slight
 *                 desaturation so text stays comfortable to read)
 *   - border:     --primary mixed 24% with the page background
 *
 * For destructive variants (danger, engagement-low) we swap --primary
 * for --destructive so they still read as a warning regardless of brand.
 */

:root {
  /* ── Theme-tinted badge surfaces (the default for almost every category) */
  --badge-tint-bg: color-mix(in oklch, var(--primary) 12%, var(--background));
  --badge-tint-fg: color-mix(in oklch, var(--primary) 90%, var(--foreground));
  --badge-tint-border: color-mix(
    in oklch,
    var(--primary) 24%,
    var(--background)
  );

  /* Destructive variant — for danger / engagement-low only */
  --badge-warn-bg: color-mix(
    in oklch,
    var(--destructive) 12%,
    var(--background)
  );
  --badge-warn-fg: color-mix(
    in oklch,
    var(--destructive) 90%,
    var(--foreground)
  );
  --badge-warn-border: color-mix(
    in oklch,
    var(--destructive) 24%,
    var(--background)
  );

  /* Stronger primary fill — for engagement-top */
  --badge-primary-bg: color-mix(
    in oklch,
    var(--primary) 18%,
    var(--background)
  );
  --badge-primary-fg: color-mix(
    in oklch,
    var(--primary) 95%,
    var(--foreground)
  );
  --badge-primary-border: color-mix(
    in oklch,
    var(--primary) 32%,
    var(--background)
  );

  /* ── Contact statuses (new, active, lead, customer) — all theme-tinted */
  --status-new: var(--badge-tint-bg);
  --status-new-foreground: var(--badge-tint-fg);
  --status-new-border: var(--badge-tint-border);
  --status-active: var(--badge-tint-bg);
  --status-active-foreground: var(--badge-tint-fg);
  --status-active-border: var(--badge-tint-border);
  --status-lead: var(--badge-tint-bg);
  --status-lead-foreground: var(--badge-tint-fg);
  --status-lead-border: var(--badge-tint-border);
  --status-customer: var(--badge-tint-bg);
  --status-customer-foreground: var(--badge-tint-fg);
  --status-customer-border: var(--badge-tint-border);

  /* ── Activity types — all theme-tinted */
  --activity-commerce: var(--badge-tint-bg);
  --activity-commerce-foreground: var(--badge-tint-fg);
  --activity-message: var(--badge-tint-bg);
  --activity-message-foreground: var(--badge-tint-fg);
  --activity-video: var(--badge-tint-bg);
  --activity-video-foreground: var(--badge-tint-fg);
  --activity-lead: var(--badge-tint-bg);
  --activity-lead-foreground: var(--badge-tint-fg);
  --activity-pageview: var(--badge-tint-bg);
  --activity-pageview-foreground: var(--badge-tint-fg);
  --activity-event: var(--badge-tint-bg);
  --activity-event-foreground: var(--badge-tint-fg);
  --activity-review: var(--badge-tint-bg);
  --activity-review-foreground: var(--badge-tint-fg);
  --activity-task: var(--badge-tint-bg);
  --activity-task-foreground: var(--badge-tint-fg);
  --activity-announcement: var(--badge-tint-bg);
  --activity-announcement-foreground: var(--badge-tint-fg);
  --activity-points: var(--badge-tint-bg);
  --activity-points-foreground: var(--badge-tint-fg);
  --activity-default: var(--muted);
  --activity-default-foreground: var(--muted-foreground);

  /* ── Engagement scale — primary tints with stepped emphasis,
        except --engagement-low which uses destructive as a warning */
  --engagement-low: var(--badge-warn-fg);
  --engagement-medium: var(--badge-tint-fg);
  --engagement-high: var(--primary);
  --engagement-very-high: var(--primary);
  --engagement-top: var(--badge-primary-fg);

  /* ── Avatar accent — muted-on-muted, theme-driven */
  --contact-avatar: var(--muted);
  --contact-avatar-foreground: var(--muted-foreground);

  --badge-success: var(--badge-tint-bg);
  --badge-success-foreground: var(--badge-tint-fg);
  --badge-success-border: var(--badge-tint-border);
  --badge-warning: var(--badge-tint-bg);
  --badge-warning-foreground: var(--badge-tint-fg);
  --badge-warning-border: var(--badge-tint-border);
  --badge-danger: var(--badge-warn-bg);
  --badge-danger-foreground: var(--badge-warn-fg);
  --badge-danger-border: var(--badge-warn-border);
  --badge-info: var(--badge-tint-bg);
  --badge-info-foreground: var(--badge-tint-fg);
  --badge-info-border: var(--badge-tint-border);
  --badge-notice: var(--badge-tint-bg);
  --badge-notice-foreground: var(--badge-tint-fg);
  --badge-notice-border: var(--badge-tint-border);
  --badge-accent: var(--badge-tint-bg);
  --badge-accent-foreground: var(--badge-tint-fg);
  --badge-accent-border: var(--badge-tint-border);
}

/* ── inlined from @fluid-app/messaging-ui/styles/messaging.css ── */

@utility text-messaging-1 {
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.4;
}

@utility text-messaging-2 {
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.53846;
}

@utility text-messaging-3 {
  font-size: 0.8125rem;
  font-weight: 400;
  line-height: 1.53846;
}

@utility text-messaging-4 {
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.33333;
}

@utility text-messaging-5 {
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1.33333;
}

@utility text-messaging-6 {
  font-size: 0.5625rem;
  font-weight: 500;
  line-height: 1.55556;
}

@utility text-messaging-7 {
  font-size: 0.5rem;
  font-weight: 500;
  line-height: 1.5;
}

@utility messaging-gradient {
  background: linear-gradient(
    27deg,
    #111c28 8.33%,
    #1b2839 25.04%,
    #304054 88.17%,
    #314155 91.67%
  );
  background: linear-gradient(
    27deg,
    color(display-p3 0.0772 0.1087 0.1529) 8.33%,
    color(display-p3 0.1164 0.1572 0.2162) 25.04%,
    color(display-p3 0.2007 0.2475 0.3221) 88.17%,
    color(display-p3 0.2053 0.2525 0.328) 91.67%
  );
}

@utility capsize {
  text-box: trim-both cap alphabetic;
}

@utility children-pointer-events-auto {
  & > * {
    pointer-events: auto;
  }
}

@utility list-nested-ordered {
  list-style-type: decimal;

  & & {
    list-style-type: lower-alpha;
  }

  & & & {
    list-style-type: lower-roman;
  }

  & & & & {
    list-style-type: decimal;
  }

  & & & & & {
    list-style-type: lower-alpha;
  }

  & & & & & & {
    list-style-type: lower-roman;
  }

  & & & & & & & {
    list-style-type: decimal;

    & & {
      padding-left: 0;
    }
  }
}

@utility list-nested-unordered {
  list-style-type: disc;

  & & {
    list-style-type: circle;
  }

  & & & {
    list-style-type: square;
  }

  & & & & {
    list-style-type: disc;
  }

  & & & & & {
    list-style-type: circle;
  }

  & & & & & & {
    list-style-type: square;
  }

  & & & & & & & {
    list-style-type: disc;

    & & {
      padding-left: 0;
    }
  }
}

@utility overlapping-children {
  display: grid;

  & > * {
    grid-area: 1 / 1 / 2 / 2;
  }
}

@utility content-auto {
  content-visibility: auto;
}

@utility hide-date-picker {
  /* Select the calendar picker indicator pseudo-element */
  &::-webkit-calendar-picker-indicator {
    /* Hide it */
    display: none;

    /* Optional: Remove the default appearance */
    -webkit-appearance: none;
  }
}

/* ── inlined from @fluid-app/orders-ui/styles/orders.css ── */

/* ── inlined from @fluid-app/cart-ui/styles/cart.css ── */

/* ── inlined from @fluid-app/shop-ui/styles/shop.css ── */

/* ── inlined from @fluid-app/profile-ui/styles/profile.css ── */

/* ── inlined from @fluid-app/fluid-pay-ui/styles/fluid-pay.css ── */

/* Animate transform (compositor-only) instead of `left` so the loop never
 * forces layout/reflow per frame. translateX percentages are relative to the
 * pill itself (30% of the track width), so -100% / 167% / 334% land on the
 * same track positions as the previous left: -30% / 50% / 100%. */
@keyframes threeds-progress-slide {
  0% {
    transform: translateX(-100%);
  }
  50% {
    transform: translateX(167%);
  }
  100% {
    transform: translateX(334%);
  }
}

.threeds-progress-pill {
  animation: threeds-progress-slide 1.6s ease-in-out infinite;
  left: 0;
  transform: translateX(-100%);
}

/* Respect WCAG 2.3.3: stop the looping slide for users who request reduced
 * motion. Static centered pill still indicates "in progress" without motion. */
@media (prefers-reduced-motion: reduce) {
  .threeds-progress-pill {
    animation: none;
    transform: translateX(117%);
  }
}

/* ── inlined from @fluid-app/shareables-ui/styles/shareables.css ── */

/* ── inlined from @fluid-app/subscriptions-ui/styles/subscriptions.css ── */

/* ── inlined from @fluid-app/mysite-ui/styles/mysite.css ── */

/* ── inlined from @fluid-app/ui-components/styles/ui-components.css ── */

/* ── inlined from @fluid-app/ui-primitives/styles/ui-primitives.css ── */
/* ui-primitives: source-scan directive + canonical Tailwind semantic tokens for the Fluid platform. */
/* Apps consume via `@import "@fluid-app/ui-primitives/styles/ui-primitives.css"`. */


:root {
  --background: oklch(1 0 0);
  --foreground: oklch(0.145 0 0);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.145 0 0);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.145 0 0);
  --primary: oklch(0.546 0.245 262.881); /* blue-600 */
  --primary-foreground: oklch(1 0 0); /* white for contrast */
  --secondary: oklch(0.97 0 0);
  --secondary-foreground: oklch(0.205 0 0);
  --muted: oklch(0.97 0 0);
  --muted-foreground: oklch(0.556 0 0);
  --accent: oklch(0.97 0 0);
  --accent-foreground: oklch(0.205 0 0);
  --destructive: oklch(0.577 0.245 27.325);
  --destructive-foreground: oklch(0.985 0 0);
  --border: oklch(0.922 0 0);
  --input: oklch(0.922 0 0);
  --ring: oklch(0.708 0 0);
  --chart-1: oklch(0.646 0.222 41.116);
  --chart-2: oklch(0.6 0.118 184.704);
  --chart-3: oklch(0.398 0.07 227.392);
  --chart-4: oklch(0.828 0.189 84.429);
  --chart-5: oklch(0.769 0.188 70.08);
  --radius: 0.625rem;
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --sidebar: oklch(0.985 0 0);
  --sidebar-foreground: oklch(0.145 0 0);
  --sidebar-primary: oklch(0.205 0 0);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.97 0 0);
  --sidebar-accent-foreground: oklch(0.205 0 0);
  --sidebar-border: oklch(0.922 0 0);
  --sidebar-ring: oklch(0.708 0 0);
  --contrast: oklch(0.205 0 0); /* gray-900 */
  --input-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-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-chart-1: var(--chart-1);
  --color-chart-2: var(--chart-2);
  --color-chart-3: var(--chart-3);
  --color-chart-4: var(--chart-4);
  --color-chart-5: var(--chart-5);
  --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);
  --color-contrast: var(--contrast);
  --shadow-input: var(--input-shadow);
}

/* ── inlined from @fluid-app/portal-widgets/globals.css ── */
/* ── inlined from @fluid-app/portal-core/globals.css ── */

@theme inline {
  --font-body: var(--font-body);
  --font-header: var(--font-header);
}

@import "tw-animate-css";
/* prettier-ignore */
@source inline("{even:,placeholder:,hover:,}{bg,text,border}-{background,foreground,primary,secondary,accent,border,muted,destructive}{-foreground,}{/{5..100..5},}");
/* CarouselWidget composes `from-${frameColor}`, `via-${frameColor}/65`,
   `to-${frameColor}/10`, and `ring-${headerColor}/15` at runtime.
   These dynamic compositions can't be detected by source scanning, so the
   utilities must be pre-generated explicitly. */
/* prettier-ignore */
@source inline("{from,via,to}-{background,foreground,primary,secondary,accent,muted,destructive}{/{5..100..5},}");
/* prettier-ignore */
@source inline("ring-{background,foreground,primary,secondary,accent,muted,destructive}{/{5..100..5},}");
@source inline("border-{0,2,4}");
@source inline("p{x,y,t,b,}-{0..10..2}");
@source inline("text-{2xl,xl,lg,md,base,sm,xs}");
@source inline("font-{normal,medium,semibold,bold}");
@source inline("rounded-{none,sm,md,lg,xl,full}");
@source inline("flex-{row,col,row-reverse,col-reverse}");
@source inline("justify-{start,end,center,between,around,evenly}");
@source inline("items-{start,end,center,stretch,baseline}");
@source inline("grid-cols-{{1..12..1}}");
@source inline("grid-rows-{auto,{1..12..1}}");
@source inline("gap-{1,{0..8..2}}");
@source inline("h-{2,4,8,16,24,32}");
@source inline("object-{contain,cover,fill,none}");
@source inline("aspect-{square,video}");
@source inline("@md:grid-cols-{2,3}");

/* Editorial keyframes used by CarouselWidget — kept in this file so the widget
   remains a single-file change in this PR. Other redesigns add their own. */
@keyframes fluidCarouselProgressFill {
  from {
    width: 0%;
  }
  to {
    width: 100%;
  }
}

@keyframes fluidCarouselKenBurns {
  from {
    transform: scale(1.06);
  }
  to {
    transform: scale(1);
  }
}

@keyframes fluidCarouselTextRise {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fluidVideoPopIn {
  from {
    opacity: 0;
    transform: scale(0.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* ── inlined from @fluid-app/portal-react/globals.css ── */

/* ── inlined from ./remote-widget-fullscreen.css ── */
[data-fluid-portal-screen-area][data-fluid-portal-fullscreen-active] {
  overflow: hidden;
}

[data-fluid-remote-dom-widget-frame] {
  position: relative;
  isolation: isolate;
  contain: layout paint;
  overflow: clip;
}

[data-fluid-remote-dom-widget-frame][data-fluid-remote-dom-widget-fullscreen] {
  position: fixed;
  z-index: 20;
  top: var(--fluid-portal-fullscreen-top);
  left: var(--fluid-portal-fullscreen-left);
  box-sizing: border-box;
  display: flex;
  width: var(--fluid-portal-fullscreen-width);
  height: var(--fluid-portal-fullscreen-height);
  min-width: 0;
  min-height: 0;
  flex-direction: column;
  overflow: hidden;
  background: var(--background);
  color: var(--foreground);
}

[data-fluid-remote-dom-widget-frame][data-fluid-remote-dom-widget-fullscreen]
  > [data-fluid-remote-dom-widget] {
  min-width: 0;
  min-height: 0;
  flex: 1;
  overflow: auto;
}

.fluid-portal-fullscreen-exit {
  display: inline-flex;
  min-height: 2rem;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) - 2px);
  background: var(--background);
  color: var(--foreground);
  padding: 0.375rem 0.75rem;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.25rem;
  cursor: pointer;
}

.fluid-portal-fullscreen-exit:hover {
  background: var(--accent);
  color: var(--accent-foreground);
}

.fluid-portal-fullscreen-exit:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}