/* Utility -> token bridge, shared by every product surface.

   Extracted from owner_shell.css, where it was scoped to .owner-shell — which
   is precisely why dark mode worked on the owner dashboard and nowhere else.

   Two jobs. The neutral half maps Tailwind's gray scale and bg-white onto the
   surface and ink tokens, so thousands of gray utilities across the view layer
   become theme-aware without editing a single view. The brand half maps the
   coral and mint utilities onto the action accent, which is what enforces the
   decision that coral is a brand colour and never paints a control.

   !important is load-bearing: these must beat the Tailwind utility they
   shadow. This is a migration layer — as views adopt semantic token classes
   directly, rules here can be deleted.

   Applied via .fc-app on the body of each product layout. The member landing
   pages are excluded, where LandingPageSetting lets a tenant own the palette. */

.fc-app .bg-white,
.fc-app .card-dashboard,
.fc-app .stat-card-premium,
.fc-app .btn-premium-outline {
  background-color: var(--fc-surface) !important;
}

.fc-app .text-gray-900,
.fc-app .text-gray-800,
.fc-app .stat-value,
.fc-app .section-title-premium {
  color: var(--fc-text) !important;
}

.fc-app .text-gray-700,
.fc-app .text-gray-600,
.fc-app .text-gray-500,
.fc-app .text-gray-400,
.fc-app .stat-label,
.fc-app .section-subtitle-premium,
.fc-app .btn-premium-outline {
  color: var(--fc-text-muted) !important;
}

.fc-app .border-gray-200,
.fc-app .border-gray-300,
.fc-app .card-dashboard,
.fc-app .stat-card-premium,
.fc-app .btn-premium-outline {
  border-color: var(--fc-border) !important;
}

.fc-app .divide-gray-200 > :not([hidden]) ~ :not([hidden]),
.fc-app .divide-gray-100 > :not([hidden]) ~ :not([hidden]) {
  border-color: var(--fc-border) !important;
}

.fc-app .bg-gray-50,
.fc-app .bg-gray-100 {
  background-color: var(--fc-surface-muted) !important;
}

.fc-app .bg-gray-200 {
  background-color: var(--fc-surface-subtle) !important;
}

.fc-app .hover\:bg-gray-50:hover,
.fc-app .hover\:bg-gray-100:hover,
.fc-app .hover\:bg-gray-200:hover {
  background-color: var(--fc-accent-subtle) !important;
}

/* Slate is the same neutral job under a different name. It is a minority of the
   view layer next to gray (258 uses against 8,015) but it is not evenly spread:
   the platform admin sign-in and the member portal navigation are written in
   slate, so leaving it unmapped left dark text on dark surfaces there while the
   gray-written pages beside them themed correctly. */

.fc-app .text-slate-950,
.fc-app .text-slate-900,
.fc-app .text-slate-800 {
  color: var(--fc-text) !important;
}

.fc-app .text-slate-700,
.fc-app .text-slate-600,
.fc-app .text-slate-500,
.fc-app .text-slate-400 {
  color: var(--fc-text-muted) !important;
}

.fc-app .bg-slate-50,
.fc-app .bg-slate-100 {
  background-color: var(--fc-surface-muted) !important;
}

.fc-app .bg-slate-200 {
  background-color: var(--fc-surface-subtle) !important;
}

.fc-app .border-slate-200,
.fc-app .border-slate-300 {
  border-color: var(--fc-border) !important;
}

.fc-app .divide-slate-200 > :not([hidden]) ~ :not([hidden]),
.fc-app .divide-slate-100 > :not([hidden]) ~ :not([hidden]) {
  border-color: var(--fc-border) !important;
}

.fc-app .hover\:bg-slate-50:hover,
.fc-app .hover\:bg-slate-100:hover,
.fc-app .hover\:bg-slate-200:hover {
  background-color: var(--fc-accent-subtle) !important;
}

.fc-app .hover\:text-gray-900:hover,
.fc-app .hover\:text-gray-700:hover,
.fc-app .hover\:text-gray-600:hover {
  color: var(--fc-accent-fill) !important;
}

.fc-app .hover\:border-gray-300:hover,
.fc-app .hover\:border-gray-200:hover {
  border-color: var(--fc-accent-soft) !important;
}

.fc-app input[type="checkbox"],
.fc-app input[type="radio"],
.fc-app .text-fitcloud-coral,
.fc-app .text-fitcloud-coral\/80,
.fc-app .hover\:text-fitcloud-coral:hover,
.fc-app .hover\:text-fitcloud-coral-dark:hover,
.fc-app .focus\:ring-fitcloud-coral:focus,
.fc-app .btn-premium-outline:hover {
  color: var(--fc-accent-fill) !important;
  accent-color: var(--fc-accent-fill);
}

.fc-app .border-fitcloud-coral,
.fc-app .border-fitcloud-coral\/50,
.fc-app .hover\:border-fitcloud-coral\/50:hover,
.fc-app .hover\:border-fitcloud-coral:hover,
.fc-app .focus\:border-fitcloud-coral:focus,
.fc-app .btn-premium-outline:hover {
  border-color: var(--fc-accent-fill) !important;
}

.fc-app .bg-fitcloud-mint,
.fc-app .bg-fitcloud-mint\/50,
.fc-app .bg-fitcloud-mint\/60,
.fc-app .hover\:bg-fitcloud-mint:hover,
.fc-app .hover\:bg-fitcloud-mint\/50:hover,
.fc-app .file\:bg-fitcloud-mint\/50::file-selector-button {
  background-color: var(--fc-accent-subtle) !important;
}

.fc-app .bg-fitcloud-mint-dark,
.fc-app .bg-fitcloud-mint\/30 {
  background-color: var(--fc-accent-soft) !important;
}

.fc-app .via-white {
  --tw-gradient-via: var(--fc-surface) !important;
  --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position) !important;
}

.fc-app .from-fitcloud-coral {
  --tw-gradient-from: var(--fc-accent-fill) !important;
  --tw-gradient-to: rgb(var(--fc-accent-rgb) / 0) !important;
  --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)) !important;
}

.fc-app .to-fitcloud-coral-dark {
  --tw-gradient-to: var(--fc-accent-hover) !important;
}

.fc-app .from-fitcloud-coral\/10,
.fc-app .from-fitcloud-coral\/15,
.fc-app .from-fitcloud-coral\/20,
.fc-app .from-fitcloud-mint,
.fc-app .from-fitcloud-mint\/30,
.fc-app .from-fitcloud-mint\/50,
.fc-app .from-fitcloud-mint\/60 {
  --tw-gradient-from: var(--fc-accent-subtle) !important;
  --tw-gradient-to: rgb(var(--fc-accent-rgb) / 0) !important;
  --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)) !important;
}

.fc-app .to-fitcloud-coral\/5,
.fc-app .to-fitcloud-coral\/10,
.fc-app .to-fitcloud-coral\/20,
.fc-app .to-fitcloud-mint,
.fc-app .to-fitcloud-mint\/30,
.fc-app .to-fitcloud-mint\/50,
.fc-app .to-fitcloud-mint\/60 {
  --tw-gradient-to: color-mix(in srgb, var(--fc-accent-fill) 4%, transparent) !important;
}


/* A region that is dark in BOTH themes -- a brand panel, a dark hero. The
   neutral bridge above must not reach inside it. Its white chips are white
   precisely because the panel behind them is dark, so mapping them to
   --fc-surface turned them navy-on-navy in dark mode and the labels on them
   disappeared entirely. Anything inside keeps the literal colour it was
   written with. */

.fc-app .fc-on-brand .bg-white {
  background-color: #ffffff !important;
}

.fc-app .fc-on-brand .border-white\/10 {
  border-color: rgb(255 255 255 / 0.1) !important;
}

/* Alpha-suffixed neutrals are a separate class of utility and the bridge above
   never saw them: .bg-gray-50 is mapped, .bg-gray-50\/50 is a different class.
   They read as a light wash over a light page and as a light wash over a DARK
   page, which is how the member dashboard ended up with pale rows carrying
   barely-legible detail lines in dark mode.

   Only the opaque end is remapped. The low-alpha whites (/5 to /20, about a
   hundred uses) are deliberate: they sit on panels that are dark in both
   themes and are correct exactly as written. */

.fc-app .bg-gray-50\/50,
.fc-app .bg-gray-100\/50,
.fc-app .bg-slate-50\/50,
.fc-app .bg-slate-100\/50 {
  background-color: color-mix(in srgb, var(--fc-surface-muted) 60%, transparent) !important;
}

.fc-app .bg-white\/60,
.fc-app .bg-white\/80,
.fc-app .bg-white\/90,
.fc-app .bg-white\/95 {
  background-color: color-mix(in srgb, var(--fc-surface) 88%, transparent) !important;
}

.fc-app .hover\:bg-white\/80:hover {
  background-color: color-mix(in srgb, var(--fc-surface) 94%, transparent) !important;
}

/* Pale tint gradients carry meaning -- blue for subscription, green for done,
   amber for attention -- so dark mode wants a dark tint of the same hue rather
   than a neutral surface. Flattening the gradient is deliberate: a two-stop
   pale ramp has nothing left to say once both stops are near the surface. */

.fc-app[data-theme="dark"] [class*="from-gray-50"],
.fc-app[data-theme="dark"] [class*="from-gray-100"],
.fc-app[data-theme="dark"] [class*="from-slate-50"] {
  background-image: none !important;
  background-color: var(--fc-surface-muted) !important;
}

.fc-app[data-theme="dark"] [class*="from-blue-50"],
.fc-app[data-theme="dark"] [class*="from-blue-100"] {
  background-image: none !important;
  background-color: color-mix(in srgb, #3b82f6 13%, var(--fc-surface)) !important;
}

.fc-app[data-theme="dark"] [class*="from-green-50"],
.fc-app[data-theme="dark"] [class*="from-green-100"] {
  background-image: none !important;
  background-color: color-mix(in srgb, #22c55e 13%, var(--fc-surface)) !important;
}

.fc-app[data-theme="dark"] [class*="from-yellow-50"],
.fc-app[data-theme="dark"] [class*="from-amber-50"] {
  background-image: none !important;
  background-color: color-mix(in srgb, #f59e0b 13%, var(--fc-surface)) !important;
}

.fc-app[data-theme="dark"] [class*="from-red-50"],
.fc-app[data-theme="dark"] [class*="from-pink-50"] {
  background-image: none !important;
  background-color: color-mix(in srgb, #ef4444 13%, var(--fc-surface)) !important;
}

.fc-app[data-theme="dark"] [class*="from-purple-50"] {
  background-image: none !important;
  background-color: color-mix(in srgb, #a855f7 13%, var(--fc-surface)) !important;
}

/* The solid tint chips those cards carry -- an icon tile, a small badge --
   follow the same rule, otherwise a pale chip sits on the dark tint. */

.fc-app[data-theme="dark"] .bg-blue-100 { background-color: color-mix(in srgb, #3b82f6 22%, var(--fc-surface)) !important; }
.fc-app[data-theme="dark"] .bg-green-100 { background-color: color-mix(in srgb, #22c55e 22%, var(--fc-surface)) !important; }
.fc-app[data-theme="dark"] .bg-amber-100,
.fc-app[data-theme="dark"] .bg-yellow-100 { background-color: color-mix(in srgb, #f59e0b 22%, var(--fc-surface)) !important; }
.fc-app[data-theme="dark"] .bg-red-100 { background-color: color-mix(in srgb, #ef4444 22%, var(--fc-surface)) !important; }
.fc-app[data-theme="dark"] .bg-purple-100 { background-color: color-mix(in srgb, #a855f7 22%, var(--fc-surface)) !important; }

/* The neutral text bridge has the same problem inside an always-dark region as
   .bg-white did. Mapping .text-slate-400 to --fc-text-muted is right on a
   themed page and wrong in the marketing footer, which is #102033 in both
   themes: the light theme's muted ink measured 2.76:1 there, worse than the
   Tailwind value it replaced. */

.fc-app .fc-on-brand .text-slate-300 { color: #cbd5e1 !important; }

.fc-app .fc-on-brand .text-slate-400,
.fc-app .fc-on-brand .text-slate-500,
.fc-app .fc-on-brand .text-gray-400,
.fc-app .fc-on-brand .text-gray-500 { color: #94a3b8 !important; }

.fc-app .fc-on-brand .text-slate-900,
.fc-app .fc-on-brand .text-slate-950,
.fc-app .fc-on-brand .text-gray-900 { color: #f8fafc !important; }

/* .fc-on-brand on the element itself, not an ancestor. A single white button
   sitting on a dark hero needs the bridge held off without dragging the
   on-brand text rules through everything else in that hero -- the hero here
   contains a white mockup card, and marking the whole section turned its
   slate-950 heading near-white on white. */

.fc-app .fc-on-brand.bg-white {
  background-color: #ffffff !important;
}