@tailwind base;
@tailwind components;
@tailwind utilities;

/* ── Design tokens ─────────────────────────────────────────────────────────
   CSS variables for the app's visual language. Reference with var(--rs-*).
   Colour values mirror the Tailwind palette so both systems stay in sync.
────────────────────────────────────────────────────────────────────────── */
@layer base {
  :root {
    --rs-accent:        theme('colors.indigo.600');
    --rs-accent-hover:  theme('colors.indigo.700');
    --rs-accent-light:  theme('colors.indigo.50');
    --rs-success:       theme('colors.emerald.600');
    --rs-warning:       theme('colors.amber.600');
    --rs-danger:        theme('colors.red.600');
    --rs-border:        theme('colors.gray.200');
    --rs-surface:       #ffffff;
    --rsp-brand-blue:   #2f489c;
    --rsp-brand-indigo: theme('colors.indigo.500');
    --rsp-brand-rose:   #ea356a;
    --rsp-brand-orange: #f78f28;
    --rsp-brand-ink:    theme('colors.slate.900');
  }
}

@layer utilities {
  .text-ui-base { @apply text-[12.5px]; }
  .text-ui-sm { @apply text-[12px]; }
  .text-ui-xs { @apply text-[11.5px]; }
  .text-ui-tiny { @apply text-[11px]; }
  .text-ui-micro { @apply text-[10.5px]; }
}

@layer components {
  .rsp-brand-sync {
    color: var(--rsp-brand-indigo);
  }

  .rsp-marketing-header {
    background:
      linear-gradient(90deg,
        rgba(47, 72, 156, 0.10) 0%,
        rgba(99, 102, 241, 0.08) 34%,
        rgba(247, 143, 40, 0.07) 68%,
        rgba(234, 53, 106, 0.06) 100%),
      rgba(255, 255, 255, 0.78);
  }

  .rsp-marketing-mobile-scrim {
    background:
      radial-gradient(circle at 18% 0%, rgba(99, 102, 241, 0.20), transparent 34%),
      radial-gradient(circle at 88% 16%, rgba(247, 143, 40, 0.16), transparent 30%),
      rgba(15, 23, 42, 0.34);
  }

  .rsp-marketing-mobile-panel {
    background:
      linear-gradient(135deg,
        rgba(47, 72, 156, 0.11) 0%,
        rgba(99, 102, 241, 0.08) 42%,
        rgba(247, 143, 40, 0.07) 74%,
        rgba(234, 53, 106, 0.06) 100%),
      #ffffff;
    box-shadow:
      0 26px 70px rgba(15, 23, 42, 0.18),
      0 8px 22px rgba(15, 23, 42, 0.08),
      inset 0 1px 0 rgba(255, 255, 255, 0.82);
  }

  #landing-mobile-menu .rsp-marketing-mobile-scrim {
    opacity: 0;
    transition-property: opacity;
    transition-duration: 160ms;
    transition-timing-function: cubic-bezier(0.2, 0, 0, 1);
  }

  #landing-mobile-menu .rsp-marketing-mobile-panel {
    opacity: 0;
    transform: translate3d(0, -8px, 0) scale(0.985);
    transform-origin: top right;
    transition-property: opacity, transform;
    transition-duration: 180ms;
    transition-timing-function: cubic-bezier(0.2, 0, 0, 1);
    will-change: opacity, transform;
  }

  #landing-mobile-menu[data-state="open"] .rsp-marketing-mobile-scrim {
    opacity: 1;
  }

  #landing-mobile-menu[data-state="open"] .rsp-marketing-mobile-panel {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }

  @media (prefers-reduced-motion: reduce) {
    #landing-mobile-menu .rsp-marketing-mobile-scrim,
    #landing-mobile-menu .rsp-marketing-mobile-panel {
      transition-duration: 1ms;
    }
  }

  .rsp-auth-background {
    background:
      linear-gradient(120deg, rgba(47, 72, 156, 0.12) 0%, transparent 38%),
      linear-gradient(240deg, rgba(247, 143, 40, 0.10) 0%, transparent 34%),
      linear-gradient(180deg, rgba(234, 53, 106, 0.06) 0%, transparent 42%),
      linear-gradient(180deg, #fafaf9 0%, #f8fafc 48%, #eef2ff 100%);
  }

  .rsp-auth-card {
    background: #ffffff;
    box-shadow:
      0 24px 70px rgba(15, 23, 42, 0.10),
      0 8px 24px rgba(15, 23, 42, 0.06),
      inset 0 1px 0 rgba(255, 255, 255, 0.90);
  }

  .rsp-auth-visual-panel {
    position: relative;
    background:
      linear-gradient(135deg,
        rgba(47, 72, 156, 0.96) 0%,
        rgba(49, 46, 129, 0.96) 52%,
        rgba(15, 23, 42, 0.98) 100%);
    box-shadow:
      0 26px 70px rgba(15, 23, 42, 0.22),
      inset 0 1px 0 rgba(255, 255, 255, 0.16);
  }

  .rsp-auth-visual-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
      linear-gradient(115deg, rgba(255, 255, 255, 0.15) 0%, transparent 30%),
      linear-gradient(290deg, rgba(247, 143, 40, 0.14) 0%, transparent 36%);
    pointer-events: none;
  }

  .rsp-auth-input {
    @apply h-11 w-full rounded-md border border-slate-200 bg-white px-3 py-2 text-[13px] text-slate-800 shadow-sm outline-none transition-colors placeholder:text-slate-400 focus:border-indigo-400 focus:ring-4 focus:ring-indigo-100;
  }

  .rsp-auth-primary-button {
    @apply flex min-h-11 w-full items-center justify-center rounded-md bg-indigo-600 px-4 py-2.5 text-center text-sm font-bold leading-5 text-white shadow-sm shadow-indigo-600/20 transition-[background-color,box-shadow,transform] active:scale-[0.96] hover:bg-indigo-500 disabled:cursor-not-allowed disabled:opacity-60;
  }

  .rsp-auth-secondary-button {
    @apply flex min-h-11 w-full items-center justify-center gap-2 rounded-md bg-white px-4 py-2.5 text-center text-sm font-bold text-slate-700 shadow-sm ring-1 ring-slate-200 transition-[background-color,color,transform] active:scale-[0.96] hover:bg-slate-50 hover:text-slate-950;
  }

  .rsp-auth-link {
    @apply font-semibold text-indigo-600 transition-colors hover:text-indigo-500 hover:underline;
  }

  .rsp-faq-card {
    transition-property: background-color, box-shadow, transform;
    transition-duration: 180ms;
    transition-timing-function: cubic-bezier(0.2, 0, 0, 1);
  }

  .rsp-faq-card[open] {
    transform: translateY(-1px);
  }

  .rsp-faq-toggle-icon {
    transition-property: background-color, color, transform;
    transition-duration: 180ms;
    transition-timing-function: cubic-bezier(0.2, 0, 0, 1);
  }

  .rsp-faq-card[open] .rsp-faq-toggle-icon {
    transform: rotate(45deg);
  }

  .rsp-faq-answer {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    transform: translateY(-4px);
    transition-property: grid-template-rows, opacity, transform;
    transition-duration: 220ms;
    transition-timing-function: cubic-bezier(0.2, 0, 0, 1);
  }

  .rsp-faq-answer-inner {
    min-height: 0;
    overflow: hidden;
  }

  .rsp-faq-card[open] .rsp-faq-answer {
    grid-template-rows: 1fr;
    opacity: 1;
    transform: translateY(0);
  }

  @media (prefers-reduced-motion: reduce) {
    .rsp-faq-card,
    .rsp-faq-toggle-icon,
    .rsp-faq-answer {
      transition-duration: 1ms;
    }
  }

  /* ── Button system ─────────────────────────────────────────────
     All variants extend .btn so they share the same border and
     padding — ensuring equal rendered height regardless of variant.

     Usage:
       <a class="btn btn-primary">Save</a>
       <a class="btn btn-secondary">Cancel</a>
       <a class="btn btn-danger">Delete</a>
       <a class="btn btn-lg btn-primary">Large action</a>
  ──────────────────────────────────────────────────────────────── */
  .btn {
    @apply inline-flex items-center gap-1.5 rounded-md border px-3 py-1.5 text-[12.5px] font-medium transition-colors cursor-pointer;
  }

  /* Filled indigo — primary actions (Save, Add, Submit) */
  .btn-primary {
    @apply border-transparent bg-indigo-600 font-semibold text-white shadow-sm
           hover:bg-indigo-500
           focus:outline-none focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2;
  }

  /* White with gray border — secondary/neutral actions (Cancel, Export, Send Invites) */
  .btn-secondary {
    @apply border-gray-200 bg-white text-gray-600 hover:bg-gray-50;
  }

  /* Transparent background, subtle text — for inline cancel actions */
  .btn-ghost {
    @apply border-transparent bg-transparent text-slate-500 hover:bg-slate-100 hover:text-slate-800;
  }

  /* White background, red border/text — for secondary destructive actions */
  .btn-ghost-danger {
    @apply border-red-200 bg-white text-red-600 hover:border-red-400 hover:bg-red-50;
  }

  /* Pagination & Table Footer */
  .pagination-info {
    @apply text-[11.5px] text-slate-500;
  }
  .pagination-actions {
    @apply flex items-center gap-2 text-[11.5px] text-slate-500;
  }
  .pagination-link {
    @apply font-medium text-indigo-600 hover:text-indigo-800 transition-colors;
  }

  /* Filled red — destructive actions (Delete, Deactivate) */
  .btn-danger {
    @apply border-red-600 bg-red-600 text-white hover:border-red-700 hover:bg-red-700;
  }

  /* Size modifier — use with any variant for larger touch targets */
  .btn-lg {
    @apply px-4 py-2.5 text-sm;
  }

  /* Size modifier — use with any variant for smaller touch targets (e.g., inside tables) */
  .btn-sm {
    @apply px-2 py-1 text-[11.5px];
  }

  /* Toolbar-sized action used in compact page headers */
  .btn-toolbar {
    @apply h-9 px-3 py-2 text-[12px] font-semibold shadow-sm;
  }

  /* Smaller actions for the fixed app topbar */
  .btn-topbar {
    @apply h-7 rounded-md px-2.5 py-1 text-[11.5px] font-semibold shadow-sm;
  }

  /* Square icon-only button sized specifically for the fixed app topbar */
  .btn-topbar-icon {
    @apply h-7 w-7 justify-center p-0;
  }

  /* Square icon-only button that matches toolbar button height */
  .btn-icon {
    @apply h-9 w-9 flex-none justify-center gap-0 p-0;
    min-width: 2.25rem;
    min-height: 2.25rem;
  }

  /* Inline text link — not a button shape, just styled text */
  .btn-link {
    @apply font-medium text-indigo-600 hover:text-indigo-700 hover:underline;
  }

  .flash-stack {
    @apply pointer-events-none fixed inset-x-0 top-14 z-50 flex justify-center px-4 sm:justify-end sm:px-6;
  }

  .flash-stack-inner {
    @apply flex w-full max-w-md flex-col gap-2;
  }

  .flash-toast {
    @apply pointer-events-auto w-full overflow-hidden rounded-xl border shadow-lg ring-1 ring-black/5 transform-gpu;
    will-change: transform, opacity;
    opacity: 1;
    transform: translate3d(0, 0, 0);
    animation: flash-toast-enter 560ms cubic-bezier(0.16, 1, 0.3, 1) both;
  }

  .flash-toast-exit {
    animation: flash-toast-exit 280ms cubic-bezier(0.4, 0, 1, 1) forwards;
  }

  .flash-toast-body {
    @apply flex items-start gap-3 px-4 py-3.5;
  }

  .flash-toast-icon {
    @apply mt-0.5 flex h-8 w-8 shrink-0 items-center justify-center rounded-full;
  }

  .flash-toast-title {
    @apply text-[12px] font-semibold text-slate-900;
  }

  .flash-toast-message {
    @apply mt-0.5 text-[11.5px] leading-relaxed text-slate-600;
  }

  .flash-toast-close {
    @apply inline-flex h-7 w-7 shrink-0 items-center justify-center rounded-md text-slate-400 transition-colors hover:bg-slate-100 hover:text-slate-700;
  }

  /* ── Tooltip / popover notes ───────────────────────────────────
     Used by the tooltip Stimulus controller for short remarks and
     disabled-action explanations. Keep this as a quiet app surface
     rather than the browser/default black tooltip treatment.
  ──────────────────────────────────────────────────────────────── */
  .app-tooltip {
    @apply pointer-events-none fixed z-50 inline-block w-64 rounded-lg border border-slate-200 bg-white text-slate-600 shadow-lg ring-1 ring-black/5 transition-opacity duration-150 ease-out;
    max-width: calc(100vw - 2rem);
  }

  .app-tooltip-body {
    @apply px-3 py-2.5 text-left text-[11.5px] font-medium leading-5;
    text-wrap: pretty;
  }

  .app-tooltip-arrow,
  .app-tooltip-arrow::before {
    position: absolute;
    width: 8px;
    height: 8px;
    background: inherit;
  }

  .app-tooltip-arrow {
    visibility: hidden;
  }

  .app-tooltip-arrow::before {
    content: "";
    visibility: visible;
    transform: rotate(45deg);
    box-shadow: 1px 1px 0 0 rgb(226 232 240);
  }

  .app-tooltip[data-tooltip-placement^="top"] > .app-tooltip-arrow {
    bottom: -4px;
  }

  .app-tooltip[data-tooltip-placement^="bottom"] > .app-tooltip-arrow {
    top: -4px;
  }

  .app-tooltip[data-tooltip-placement^="bottom"] > .app-tooltip-arrow::before {
    box-shadow: -1px -1px 0 0 rgb(226 232 240);
  }

  .app-tooltip[data-tooltip-placement^="left"] > .app-tooltip-arrow {
    right: -4px;
  }

  .app-tooltip[data-tooltip-placement^="right"] > .app-tooltip-arrow {
    left: -4px;
  }

  /* ── Public profile themes ─────────────────────────────────────
     CompanyPublicProfile is the canonical theme registry. These
     component variables are safe fallbacks for previews or public
     profile fragments rendered before inline theme tokens are applied.
  ──────────────────────────────────────────────────────────────── */
  .public-profile-theme {
    --pp-page-bg: #f8fafc;
    --pp-page-bg-deep: #eef2ff;
    --pp-glow: rgba(99, 102, 241, 0.18);
    --pp-card: #ffffff;
    --pp-card-muted: rgba(248, 250, 252, 0.82);
    --pp-border: #e2e8f0;
    --pp-accent: #4f46e5;
    --pp-accent-hover: #4338ca;
    --pp-accent-soft: #eef2ff;
    --pp-accent-border: #c7d2fe;
    --pp-accent-text: #4338ca;
    --pp-primary: #0f172a;
    --pp-primary-hover: #1e293b;
    --pp-primary-text: #ffffff;
    --pp-hero-start: #172554;
    --pp-hero-end: #334155;
    --pp-body-font: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --pp-heading-font: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --pp-heading-weight: 700;
    --pp-page-texture: linear-gradient(transparent, transparent);
    --pp-page-texture-size: 24px 24px;
    --pp-card-bg: rgba(255, 255, 255, 0.94);
    --pp-section-bg: rgba(255, 255, 255, 0.94);
    --pp-card-radius: 14px;
    --pp-section-radius: 12px;
    --pp-inner-radius: 8px;
    --pp-button-radius: 8px;
    --pp-chip-radius: 999px;
    --pp-logo-radius: 10px;
    --pp-media-radius: 10px;
    --pp-action-gap: 0.5rem;
    --pp-action-padding-x: 1rem;
    --pp-action-font-size: 13px;
    --pp-action-min-height: 44px;
    --pp-hero-actions-max-width: 400px;
    --pp-card-shadow: 0 18px 48px rgba(15, 23, 42, 0.07);
    --pp-section-shadow: 0 14px 36px rgba(15, 23, 42, 0.055);
    --pp-media-shadow: 0 1px 2px rgba(15, 23, 42, 0.12);
    --pp-logo-shadow: var(--pp-media-shadow);
    --pp-gallery-shadow: var(--pp-media-shadow);
    --pp-menu-card-shadow: var(--pp-media-shadow);
    --pp-promotion-card-shadow: var(--pp-section-shadow);
    --pp-social-shadow: var(--pp-media-shadow);
    --pp-chip-shadow: 0 8px 18px rgba(15, 23, 42, 0.08), 0 1px 2px rgba(15, 23, 42, 0.06);
    --pp-media-outline: rgba(0, 0, 0, 0.1);
    --pp-fallback-surface: var(--pp-promotion-media-bg);
    --pp-scroll-fade: var(--pp-section-bg);
    --pp-surface-inset-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.48);
    --pp-button-shadow: 0 1px 2px rgba(15, 23, 42, 0.12);
    --pp-hero-detail: radial-gradient(circle at top right, rgba(255, 255, 255, 0.24), transparent 28%);
    --pp-promotion-media-bg: linear-gradient(135deg, var(--pp-accent-soft), #ffffff);
    --pp-premium-hero-body-detail: linear-gradient(transparent, transparent);
    --pp-premium-section-rule: linear-gradient(90deg, var(--pp-accent), transparent);
    --pp-premium-promo-accent: var(--pp-accent);
  }

  .public-profile-page {
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    font-family: var(--pp-body-font);
    background-image:
      var(--pp-page-texture),
      radial-gradient(circle at top left, var(--pp-glow), transparent 30rem),
      linear-gradient(180deg, var(--pp-page-bg), var(--pp-page-bg-deep));
    background-repeat: repeat, no-repeat, no-repeat;
    background-size: var(--pp-page-texture-size), auto, auto;
  }

  .public-profile-shell,
  .public-profile-card {
    min-width: 0;
    max-width: 100%;
  }

  .public-profile-hero-title,
  .public-profile-section-title,
  .public-profile-promotion-title,
  .public-profile-promotion-featured-date strong,
  .public-profile-banner-logo-placeholder {
    font-family: var(--pp-heading-font);
    font-weight: var(--pp-heading-weight);
  }

  @media (max-width: 639px) {
    .public-profile-page {
      overflow-x: hidden;
    }

    .public-profile-shell,
    .public-profile-card,
    .public-profile-section,
    .public-profile-hero-body,
    .public-profile-menu-scroll,
    .public-profile-gallery-scroll,
    .public-profile-hours-list,
    .public-profile-info-box {
      min-width: 0;
      max-width: 100%;
    }
  }

  .public-profile-card {
    @apply overflow-hidden border;
    border-width: 0 0 1px;
    border-radius: 0;
    border-color: var(--pp-border);
    background: var(--pp-card-bg);
    box-shadow: none;
  }

  .public-profile-section {
    @apply border p-5 sm:p-6;
    min-width: 0;
    max-width: 100%;
    scroll-margin-top: 1rem;
    border-right-width: 0;
    border-left-width: 0;
    border-radius: 0;
    border-color: var(--pp-border);
    background: var(--pp-section-bg);
    box-shadow: none;
  }

  @media (min-width: 640px) {
    .public-profile-card {
      border-width: 1px;
      border-radius: var(--pp-card-radius);
      box-shadow: var(--pp-card-shadow);
    }

    .public-profile-section {
      border-width: 1px;
      border-radius: var(--pp-section-radius);
      box-shadow: var(--pp-section-shadow);
    }
  }

  @media (min-width: 640px) {
    :is(.public-profile-theme-onyx, .public-profile-theme-bordeaux, .public-profile-theme-midnight, .public-profile-theme-heritage, .public-profile-theme-pop, .public-profile-theme-kinetic) .public-profile-card {
      box-shadow: var(--pp-card-shadow), var(--pp-surface-inset-shadow);
    }

    :is(.public-profile-theme-onyx, .public-profile-theme-bordeaux, .public-profile-theme-midnight, .public-profile-theme-heritage, .public-profile-theme-pop, .public-profile-theme-kinetic) .public-profile-section {
      box-shadow: var(--pp-section-shadow), var(--pp-surface-inset-shadow);
    }
  }

  .public-profile-soft-panel {
    border-color: var(--pp-border);
    background-color: var(--pp-card-muted);
  }

  .public-profile-hero-media {
    @apply relative h-[220px] bg-cover bg-center sm:h-[280px];
  }

  .public-profile-hero-overlay {
    @apply absolute inset-0;
    background:
      var(--pp-hero-detail),
      linear-gradient(180deg, rgba(15, 23, 42, 0.05), rgba(15, 23, 42, 0.26));
  }

  .public-profile-banner-bar {
    @apply absolute bottom-4 left-4 right-4 flex items-end justify-between gap-4;
    min-width: 0;
  }

  .public-profile-banner-logo-shell {
    @apply flex h-20 w-20 shrink-0 items-center justify-center overflow-hidden rounded-[10px] border border-white/40 bg-white/95 p-2 shadow-lg sm:h-28 sm:w-28 sm:p-3;
    border-radius: var(--pp-logo-radius);
    outline: 1px solid var(--pp-media-outline);
    box-shadow: var(--pp-logo-shadow);
  }

  .public-profile-banner-logo-placeholder {
    @apply flex h-20 w-20 shrink-0 items-center justify-center rounded-[10px] border border-white/40 bg-white/95 text-2xl font-bold shadow-lg sm:h-28 sm:w-28 sm:text-3xl;
    border-radius: var(--pp-logo-radius);
    color: var(--pp-accent-text);
    background:
      var(--pp-page-texture),
      var(--pp-fallback-surface);
    background-size: var(--pp-page-texture-size), cover;
    outline: 1px solid var(--pp-media-outline);
    box-shadow: var(--pp-logo-shadow);
  }

  .public-profile-banner-pills {
    @apply flex max-w-[72%] flex-wrap justify-end gap-2;
    min-width: 0;
  }

  .public-profile-banner-pill {
    @apply inline-flex items-center rounded-full border border-white/25 bg-white/15 px-3 py-1.5 text-[11px] font-semibold text-white shadow-sm backdrop-blur;
    border-radius: var(--pp-chip-radius);
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  .public-profile-open-status-pill {
    @apply inline-flex h-7 min-w-[86px] shrink-0 items-center justify-center gap-1.5 rounded-full bg-slate-50/90 px-2.5 text-[10.5px] font-semibold leading-none text-slate-600 shadow-[0_1px_0_rgba(15,23,42,0.04)] backdrop-blur;
    border-radius: var(--pp-chip-radius);
    height: auto;
    min-height: 1.75rem;
    padding-block: 0.25rem;
    line-height: 1.2;
  }

  .public-profile-open-status-pill .truncate {
    line-height: 1.2;
  }

  .public-profile-open-status-pill-link {
    @apply transition-[background-color,border-color,color,box-shadow,transform] duration-150 ease-out hover:bg-white focus:outline-none focus:ring-2 focus:ring-white/80 focus:ring-offset-2 focus:ring-offset-slate-900;
  }

  .public-profile-open-status-pill-surface {
    @apply border border-slate-200 bg-white text-slate-700 shadow-sm;
  }

  .public-profile-open-status-pill-muted {
    @apply bg-slate-50 text-slate-500;
  }

  .public-profile-open-status-dot {
    @apply h-1.5 w-1.5 shrink-0 rounded-full bg-emerald-500 ring-2 ring-emerald-100/80;
  }

  .public-profile-banner-preview-pill {
    @apply border-amber-200/70 bg-amber-50/95 text-amber-800;
  }

  .public-profile-banner-pill-link {
    @apply transition-[background-color,border-color,box-shadow,transform] duration-150 ease-out hover:border-white/40 hover:bg-white/25 focus:outline-none focus:ring-2 focus:ring-white/80 focus:ring-offset-2 focus:ring-offset-slate-900;
  }

  .public-profile-hero-body {
    @apply grid items-start gap-6 px-5 py-6 sm:px-6 lg:grid-cols-[minmax(0,1fr)_auto] lg:px-7 lg:py-7;
  }

  :is(.public-profile-theme-onyx, .public-profile-theme-bordeaux, .public-profile-theme-midnight, .public-profile-theme-heritage, .public-profile-theme-pop, .public-profile-theme-kinetic) .public-profile-hero-body {
    position: relative;
    isolation: isolate;
    background:
      var(--pp-premium-hero-body-detail),
      var(--pp-card-bg);
  }

  :is(.public-profile-theme-onyx, .public-profile-theme-bordeaux, .public-profile-theme-midnight, .public-profile-theme-heritage, .public-profile-theme-pop, .public-profile-theme-kinetic) .public-profile-hero-body::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 3px;
    background: var(--pp-premium-section-rule);
    pointer-events: none;
  }

  @media (min-width: 640px) {
    :is(.public-profile-theme-onyx, .public-profile-theme-bordeaux, .public-profile-theme-midnight, .public-profile-theme-heritage, .public-profile-theme-pop, .public-profile-theme-kinetic) .public-profile-banner-logo-shell,
    :is(.public-profile-theme-onyx, .public-profile-theme-bordeaux, .public-profile-theme-midnight, .public-profile-theme-heritage, .public-profile-theme-pop, .public-profile-theme-kinetic) .public-profile-banner-logo-placeholder {
      transform: translateY(0.35rem);
    }

    .public-profile-theme-bordeaux .public-profile-banner-logo-shell,
    .public-profile-theme-bordeaux .public-profile-banner-logo-placeholder,
    .public-profile-theme-pop .public-profile-banner-logo-shell,
    .public-profile-theme-pop .public-profile-banner-logo-placeholder {
      transform: translateY(0.45rem) scale(1.02);
    }

    .public-profile-theme-kinetic .public-profile-banner-logo-shell,
    .public-profile-theme-kinetic .public-profile-banner-logo-placeholder {
      transform: translateY(0.35rem) rotate(-1deg);
    }
  }

  .public-profile-hero-title {
    @apply text-3xl font-bold leading-tight text-slate-950 sm:text-4xl lg:text-5xl;
    font-family: var(--pp-heading-font);
    font-weight: var(--pp-heading-weight);
    overflow-wrap: anywhere;
    text-wrap: balance;
  }

  .public-profile-hero-copy {
    @apply mt-3 max-w-3xl text-[15px] leading-7 text-slate-600 sm:text-[16px];
    overflow-wrap: anywhere;
    text-wrap: pretty;
  }

  .public-profile-hero-website {
    @apply mt-2 block max-w-3xl truncate text-[13px] font-semibold opacity-60 transition-[color,opacity];
    color: var(--pp-accent-text);
    min-width: 0;
  }

  .public-profile-hero-website:hover {
    color: var(--pp-accent-hover);
    opacity: 1;
  }

  .public-profile-hero-rail {
    @apply flex w-full flex-col items-end gap-4 self-start lg:w-auto lg:self-stretch;
  }

  .public-profile-hero-actions {
    @apply hidden w-full flex-col items-stretch self-start md:flex md:w-auto md:flex-row md:flex-wrap md:items-center lg:justify-end;
    gap: var(--pp-action-gap);
  }

  @media (min-width: 1024px) {
    .public-profile-hero-actions {
      max-width: var(--pp-hero-actions-max-width);
    }
  }

  .public-profile-share-link {
    @apply hidden min-h-10 items-center gap-1.5 rounded-full border bg-white/80 px-3.5 py-2 text-[12px] font-semibold text-slate-600 shadow-sm transition-[background-color,border-color,color,box-shadow,transform] duration-150 ease-out hover:bg-white hover:text-slate-900 focus:outline-none focus:ring-2 focus:ring-slate-900 focus:ring-offset-2 md:inline-flex;
    border-radius: var(--pp-button-radius);
    border-color: var(--pp-border);
    box-shadow: var(--pp-button-shadow);
  }

  .public-profile-share-link:hover {
    border-color: var(--pp-accent-border);
    color: var(--pp-accent-text);
  }

  .public-profile-social-actions {
    @apply flex flex-row flex-nowrap items-center gap-2 sm:justify-end lg:mt-auto;
  }

  .public-profile-social-button {
    @apply inline-flex h-10 w-10 shrink-0 items-center justify-center rounded-full text-white transition-[background-color,border-color] duration-150 ease-out focus:outline-none focus:ring-2 focus:ring-slate-900 focus:ring-offset-2;
    border-radius: var(--pp-chip-radius);
    border: 1px solid rgba(255, 255, 255, 0.35);
    background-color: var(--pp-social-bg);
    box-shadow: var(--pp-social-shadow);
  }

  .public-profile-social-button:hover {
    border-color: rgba(255, 255, 255, 0.55);
    background-color: var(--pp-social-hover);
  }

  .public-profile-social-button svg {
    display: block;
    height: 1.125rem;
    width: 1.125rem;
    shape-rendering: geometricPrecision;
  }

  .public-profile-social-button-facebook {
    --pp-social-bg: #1877f2;
    --pp-social-hover: #166fe5;
  }

  .public-profile-social-button-instagram {
    --pp-social-bg: #e1306c;
    --pp-social-hover: #c92b61;
  }

  .public-profile-social-button-tiktok,
  .public-profile-social-button-x_twitter {
    --pp-social-bg: #0f172a;
    --pp-social-hover: #1e293b;
  }

  .public-profile-social-button-youtube {
    --pp-social-bg: #ff0033;
    --pp-social-hover: #dc2626;
  }

  .public-profile-social-button-linkedin {
    --pp-social-bg: #0a66c2;
    --pp-social-hover: #075aa8;
  }

  .public-profile-tag {
    @apply inline-flex items-center rounded-full border px-2.5 py-1 text-[10.5px] font-semibold uppercase tracking-[0.08em];
    border-radius: var(--pp-chip-radius);
    border-color: var(--pp-border);
    background-color: var(--pp-card-muted);
    color: #334155;
    line-height: 1.1;
    box-shadow: var(--pp-chip-shadow);
    overflow-wrap: anywhere;
  }

  .public-profile-known-for-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .public-profile-section-header {
    @apply mb-4 flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between;
  }

  .public-profile-section-kicker {
    @apply text-[11px] font-semibold uppercase tracking-[0.18em] text-slate-400;
    color: color-mix(in srgb, var(--pp-accent-text) 62%, #94a3b8);
  }

  :is(.public-profile-theme-onyx, .public-profile-theme-bordeaux, .public-profile-theme-midnight, .public-profile-theme-heritage, .public-profile-theme-pop, .public-profile-theme-kinetic) .public-profile-section-kicker {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    width: fit-content;
  }

  :is(.public-profile-theme-onyx, .public-profile-theme-bordeaux, .public-profile-theme-midnight, .public-profile-theme-heritage, .public-profile-theme-pop, .public-profile-theme-kinetic) .public-profile-section-kicker::after {
    content: "";
    display: inline-block;
    width: 2.25rem;
    height: 1px;
    background: var(--pp-premium-section-rule);
  }

  .public-profile-section-title {
    @apply mt-2 text-[22px] font-semibold leading-tight text-slate-950 sm:text-2xl;
    font-family: var(--pp-heading-font);
    font-weight: var(--pp-heading-weight);
    overflow-wrap: anywhere;
    text-wrap: balance;
  }

  .public-profile-section-copy {
    @apply mt-2 text-[13px] leading-6 text-slate-500;
    overflow-wrap: anywhere;
    text-wrap: pretty;
  }

  .public-profile-hero-fallback {
    background-image: var(--pp-page-texture), linear-gradient(135deg, var(--pp-hero-start), var(--pp-hero-end));
    background-repeat: repeat, no-repeat;
    background-size: var(--pp-page-texture-size), cover;
  }

  .public-profile-scroll-fade {
    position: relative;
  }

  .public-profile-scroll-fade::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    width: 2rem;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0), var(--pp-scroll-fade) 82%);
    opacity: 0.92;
    pointer-events: none;
  }

  .public-profile-scroll-fade:focus-within::after {
    opacity: 0.45;
  }

  .public-profile-gallery-section {
    @apply mt-5 overflow-hidden p-2 sm:p-3;
  }

  .public-profile-gallery-scroll-shell::after {
    border-radius: 0 var(--pp-inner-radius) var(--pp-inner-radius) 0;
  }

  .public-profile-gallery-scroll {
    @apply overflow-x-auto pb-1;
  }

  .public-profile-gallery-grid {
    display: grid;
    grid-auto-columns: 9.5rem;
    grid-auto-flow: column;
    grid-template-rows: repeat(2, minmax(0, 7rem));
    gap: 0.5rem;
    width: max-content;
  }

  @media (min-width: 640px) {
    .public-profile-gallery-grid {
      grid-auto-columns: 12rem;
      grid-template-rows: repeat(2, minmax(0, 8rem));
    }
  }

  @media (min-width: 1024px) {
    .public-profile-gallery-grid {
      grid-auto-columns: 13rem;
      grid-template-rows: repeat(2, minmax(0, 8.5rem));
    }
  }

  .public-profile-gallery-tile {
    @apply relative h-full cursor-zoom-in overflow-hidden bg-slate-100 text-left shadow-sm outline-none transition-transform duration-150 ease-out hover:-translate-y-0.5 focus-visible:ring-2 focus-visible:ring-slate-900 focus-visible:ring-offset-2;
    border-radius: var(--pp-media-radius);
    box-shadow: var(--pp-gallery-shadow);
  }

  .public-profile-gallery-tile::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: inset 0 0 0 1px var(--pp-media-outline);
    pointer-events: none;
  }

  .public-profile-gallery-tile-featured {
    grid-column: span 2;
    grid-row: span 2;
  }

  .public-profile-gallery-tile-tall {
    grid-row: span 2;
  }

  .public-profile-gallery-image {
    @apply h-full w-full object-cover;
    transition: transform 220ms cubic-bezier(0.2, 0, 0, 1);
  }

  .public-profile-gallery-tile:hover .public-profile-gallery-image,
  .public-profile-gallery-tile:focus-visible .public-profile-gallery-image {
    transform: scale(1.03);
  }

  .public-profile-primary-link {
    @apply inline-flex min-h-11 items-center justify-center px-4 py-2.5 text-[13px] font-semibold shadow-sm transition-[background-color,border-color,color,box-shadow,transform] duration-150 ease-out;
    border-radius: var(--pp-button-radius);
    background-color: var(--pp-primary);
    color: var(--pp-primary-text);
    box-shadow: var(--pp-button-shadow);
  }

  .public-profile-primary-link:hover {
    background-color: var(--pp-primary-hover);
  }

  .public-profile-neutral-link {
    @apply inline-flex min-h-11 items-center justify-center border bg-white px-4 py-2.5 text-[13px] font-semibold text-slate-700 transition-[background-color,border-color,color,box-shadow,transform] duration-150 ease-out;
    border-radius: var(--pp-button-radius);
    border-color: var(--pp-border);
    background: var(--pp-card-bg);
    box-shadow: var(--pp-button-shadow);
  }

  .public-profile-neutral-link:hover,
  .public-profile-accent-link:hover {
    border-color: var(--pp-accent-border);
    color: var(--pp-accent-text);
  }

  .public-profile-accent-link {
    @apply inline-flex min-h-11 items-center justify-center border px-4 py-2.5 text-[13px] font-semibold transition-[background-color,border-color,color,box-shadow,transform] duration-150 ease-out;
    border-radius: var(--pp-button-radius);
    border-color: var(--pp-accent-border);
    background-color: var(--pp-accent-soft);
    color: var(--pp-accent-text);
    box-shadow: var(--pp-button-shadow);
  }

  .public-profile-accent-link:hover {
    transform: translateY(-1px);
  }

  .public-profile-hero-actions .public-profile-primary-link,
  .public-profile-hero-actions .public-profile-neutral-link,
  .public-profile-hero-actions .public-profile-accent-link {
    flex: 0 0 auto;
    min-height: var(--pp-action-min-height);
    padding-inline: var(--pp-action-padding-x);
    font-size: var(--pp-action-font-size);
    line-height: 1.1;
    white-space: nowrap;
  }

  :is(.public-profile-theme-onyx, .public-profile-theme-bordeaux, .public-profile-theme-midnight, .public-profile-theme-heritage, .public-profile-theme-pop, .public-profile-theme-kinetic) :is(.public-profile-primary-link, .public-profile-neutral-link, .public-profile-accent-link, .public-profile-share-link, .public-profile-footer-brand) {
    position: relative;
    overflow: hidden;
    box-shadow:
      var(--pp-button-shadow),
      inset 0 1px 0 rgba(255, 255, 255, 0.28);
  }

  @media (prefers-reduced-motion: no-preference) {
    :is(.public-profile-theme-onyx, .public-profile-theme-bordeaux, .public-profile-theme-midnight, .public-profile-theme-heritage, .public-profile-theme-pop, .public-profile-theme-kinetic) :is(.public-profile-primary-link, .public-profile-neutral-link, .public-profile-accent-link, .public-profile-share-link, .public-profile-footer-brand, .public-profile-promotion-card) {
      transition-property: background-color, border-color, color, box-shadow, transform;
      transition-duration: 180ms;
      transition-timing-function: cubic-bezier(0.2, 0, 0, 1);
    }

    :is(.public-profile-theme-onyx, .public-profile-theme-bordeaux, .public-profile-theme-midnight, .public-profile-theme-heritage, .public-profile-theme-pop, .public-profile-theme-kinetic) .public-profile-promotion-card:hover {
      transform: translateY(-2px);
    }
  }

  .public-profile-booking-section {
    border-color: rgba(34, 197, 94, 0.28);
    background: linear-gradient(135deg, #f0fdf4, var(--pp-card-bg));
  }

  .public-profile-whatsapp-link {
    @apply inline-flex min-h-11 items-center justify-center gap-2 px-4 py-2.5 text-[13px] font-semibold text-white shadow-sm transition-colors duration-150 ease-out focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-offset-2;
    border-radius: var(--pp-button-radius);
    background-color: #16a34a;
    box-shadow: var(--pp-button-shadow);
  }

  .public-profile-whatsapp-link:hover {
    background-color: #15803d;
  }

  .public-profile-accent-badge {
    border-color: var(--pp-accent-border);
    background-color: var(--pp-accent-soft);
    color: var(--pp-accent-text);
  }

  .public-profile-promotions-section {
    background:
      radial-gradient(circle at top right, var(--pp-accent-soft), transparent 20rem),
      var(--pp-section-bg);
  }

  .public-profile-promotion-count {
    @apply inline-flex h-8 shrink-0 items-center rounded-full border px-3 text-[11px] font-semibold;
    border-radius: var(--pp-chip-radius);
    border-color: var(--pp-accent-border);
    background-color: var(--pp-accent-soft);
    color: var(--pp-accent-text);
  }

  .public-profile-promotions-grid {
    @apply grid gap-4 lg:grid-cols-2;
  }

  .public-profile-promotions-grid-single {
    @apply lg:grid-cols-1;
  }

  .public-profile-promotion-card {
    @apply overflow-hidden rounded-[12px] border bg-white shadow-sm;
    border-radius: var(--pp-section-radius);
    border-color: var(--pp-border);
    background: var(--pp-card-bg);
    box-shadow: var(--pp-promotion-card-shadow);
  }

  :is(.public-profile-theme-onyx, .public-profile-theme-bordeaux, .public-profile-theme-midnight, .public-profile-theme-heritage, .public-profile-theme-pop, .public-profile-theme-kinetic) .public-profile-promotion-card {
    position: relative;
    box-shadow: var(--pp-promotion-card-shadow), var(--pp-surface-inset-shadow);
  }

  :is(.public-profile-theme-onyx, .public-profile-theme-bordeaux, .public-profile-theme-midnight, .public-profile-theme-heritage, .public-profile-theme-pop, .public-profile-theme-kinetic) .public-profile-promotion-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    z-index: 1;
    height: 3px;
    background: var(--pp-premium-section-rule);
    pointer-events: none;
  }

  .public-profile-promotions-grid:not(.public-profile-promotions-grid-single) .public-profile-promotion-card {
    @apply flex flex-col;
  }

  @media (min-width: 768px) {
    .public-profile-promotion-card-featured {
      display: grid;
      grid-template-columns: minmax(300px, 0.95fr) minmax(0, 1.05fr);
    }

    .public-profile-promotion-card-featured .public-profile-promotion-media,
    .public-profile-promotion-card-featured .public-profile-promotion-fallback {
      @apply h-[300px] min-h-[300px] max-h-[300px];
      aspect-ratio: auto;
      align-self: stretch;
    }

    .public-profile-promotion-card-featured .public-profile-promotion-image {
      @apply h-auto max-h-[300px] w-full;
    }

    .public-profile-promotion-card-featured .public-profile-promotion-body {
      @apply flex min-h-[300px] flex-col p-4 sm:p-5;
    }

    .public-profile-promotion-card-featured .public-profile-promotion-body-featured {
      @apply flex flex-col;
      row-gap: 0.75rem;
      padding: 1rem 1.15rem 1rem;
    }

    .public-profile-promotion-card-featured .public-profile-promotion-featured-header {
      @apply items-start gap-2;
    }

    .public-profile-promotion-card-featured .public-profile-promotion-featured-date {
      @apply text-left;
      background-color: transparent;
      border-color: transparent;
    }

    .public-profile-promotion-card-featured .public-profile-promotion-featured-date span {
      @apply text-[10px] leading-none;
    }

    .public-profile-promotion-card-featured .public-profile-promotion-featured-date strong {
      @apply mt-1 text-[13px] leading-none sm:text-[13px];
      text-wrap: balance;
    }
  }

  .public-profile-promotion-media,
  .public-profile-promotion-fallback {
    @apply aspect-[16/9] overflow-hidden;
  }

  .public-profile-promotion-image {
    @apply h-full w-full object-contain;
  }

  @media (min-width: 768px) {
    .public-profile-promotion-card-featured .public-profile-promotion-media-landscape .public-profile-promotion-image {
      @apply h-full max-h-none w-full object-cover;
    }

    .public-profile-promotion-card-featured .public-profile-promotion-media-portrait .public-profile-promotion-image {
      @apply h-auto max-h-[300px] w-auto max-w-full object-contain;
    }
  }

  .public-profile-promotion-media {
    @apply flex items-center justify-center;
    background:
      radial-gradient(circle at 20% 20%, var(--pp-glow), transparent 8rem),
      var(--pp-fallback-surface);
  }

  .public-profile-promotion-fallback {
    @apply flex items-center justify-center;
    background:
      var(--pp-page-texture),
      radial-gradient(circle at 20% 20%, var(--pp-glow), transparent 8rem),
      var(--pp-fallback-surface);
    background-size: var(--pp-page-texture-size), auto, cover;
  }

  .public-profile-promotion-fallback span {
    @apply rounded-full px-3 py-1.5 text-[11px] font-semibold uppercase tracking-[0.14em] shadow-sm;
    background: color-mix(in srgb, var(--pp-card-bg) 88%, white);
    color: var(--pp-accent-text);
    box-shadow: var(--pp-chip-shadow);
  }

  .public-profile-promotion-body {
    @apply p-4 sm:p-5;
  }

  .public-profile-promotion-body-stacked {
    @apply flex flex-1 flex-col;
  }

  .public-profile-promotion-body-featured {
    @apply gap-0;
  }

  .public-profile-promotion-featured-header {
    @apply flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between;
  }

  .public-profile-promotion-featured-labels {
    @apply flex min-w-0 flex-wrap items-center gap-2;
  }

  .public-profile-promotion-title-block {
    @apply mt-3 min-w-0;
  }

  .public-profile-promotion-title-block .public-profile-promotion-featured-date {
    max-width: none;
    text-align: left;
  }

  @media (min-width: 768px) {
    .public-profile-promotion-card-featured .public-profile-promotion-title-block {
      @apply mt-0;
    }
  }

  @media (min-width: 1024px) {
    .public-profile-promotions-grid:not(.public-profile-promotions-grid-single) .public-profile-promotion-body-stacked {
      @apply flex flex-col;
      gap: 0.75rem;
      padding: 1rem 1.15rem 1.1rem;
    }

    .public-profile-promotions-grid:not(.public-profile-promotions-grid-single) .public-profile-promotion-title-block {
      @apply mt-0;
    }

    .public-profile-promotions-grid:not(.public-profile-promotions-grid-single) .public-profile-promotion-title {
      @apply mt-1.5 text-[22px] leading-snug;
    }

    .public-profile-promotions-grid:not(.public-profile-promotions-grid-single) .public-profile-promotion-featured-date {
      @apply text-left;
      max-width: none;
    }

    .public-profile-promotions-grid:not(.public-profile-promotions-grid-single) .public-profile-promotion-featured-date span {
      @apply text-[10px] leading-none;
    }

    .public-profile-promotions-grid:not(.public-profile-promotions-grid-single) .public-profile-promotion-featured-date strong {
      @apply mt-1 text-[13px] leading-none sm:text-[13px];
    }
  }

  .public-profile-promotion-type {
    @apply inline-flex rounded-full px-2.5 py-1 text-[10.5px] font-semibold uppercase tracking-[0.08em];
    border-radius: var(--pp-chip-radius);
    background-color: var(--pp-accent-soft);
    color: var(--pp-accent-text);
  }

  .public-profile-promotion-code-chip {
    @apply inline-flex max-w-full items-center gap-2 rounded-full border border-dashed px-2.5 py-1 text-[10.5px] font-semibold;
    border-radius: var(--pp-chip-radius);
    border-color: var(--pp-accent-border);
    background-color: var(--pp-accent-soft);
    color: var(--pp-accent-text);
  }

  .public-profile-promotion-code-chip span {
    @apply uppercase tracking-[0.12em] opacity-70;
  }

  .public-profile-promotion-code-chip strong {
    @apply min-w-0 truncate text-[11px] font-bold;
  }

  .public-profile-promotion-featured-date {
    @apply shrink-0 text-left sm:max-w-[260px] sm:text-right;
  }

  .public-profile-promotion-featured-date span {
    @apply block text-[10px] font-semibold uppercase tracking-[0.16em] text-slate-400;
  }

  .public-profile-promotion-featured-date strong {
    @apply mt-1 block text-[18px] font-semibold leading-tight text-slate-950 tabular-nums sm:text-[21px];
    font-family: var(--pp-heading-font);
    font-weight: var(--pp-heading-weight);
    text-wrap: balance;
  }

  .public-profile-promotion-date {
    @apply inline-flex rounded-full border border-slate-200 bg-slate-50 px-2.5 py-1 text-[10.5px] font-semibold text-slate-500;
    border-radius: var(--pp-chip-radius);
  }

  .public-profile-promotion-title {
    @apply mt-3 text-[20px] font-semibold leading-tight text-slate-950;
    font-family: var(--pp-heading-font);
    font-weight: var(--pp-heading-weight);
    overflow-wrap: anywhere;
    text-wrap: balance;
  }

  .public-profile-promotion-card-featured .public-profile-promotion-title {
    @apply mt-1 text-[23px] leading-snug sm:text-[25px];
  }

  @media (min-width: 768px) {
    .public-profile-promotion-card-featured .public-profile-promotion-title {
      @apply mt-1.5 text-[24px] leading-snug sm:text-[25px];
    }
  }

  .public-profile-promotion-copy {
    @apply mt-2 whitespace-pre-wrap text-[13.5px] leading-6 text-slate-600;
    overflow-wrap: anywhere;
    text-wrap: pretty;
  }

  .public-profile-promotion-description-shell .public-profile-promotion-copy {
    @apply mt-0;
  }

  .public-profile-promotion-card-featured .public-profile-promotion-copy {
    @apply mt-0 text-[14px];
  }

  @media (min-width: 768px) {
    .public-profile-promotion-card-featured .public-profile-promotion-copy {
      @apply text-[14px] leading-6;
    }
  }

  .public-profile-promotion-card-featured .public-profile-promotion-featured-description {
    max-height: 4.5rem;
  }

  @media (min-width: 768px) {
    .public-profile-promotion-card-featured .public-profile-promotion-description-shell-featured {
      @apply mt-0;
    }

    .public-profile-promotion-card-featured .public-profile-promotion-featured-terms {
      @apply mt-auto;
    }
  }

  @media (min-width: 1024px) {
    .public-profile-promotions-grid:not(.public-profile-promotions-grid-single) .public-profile-promotion-copy {
      @apply mt-0 text-[14px] leading-6;
    }
  }

  .public-profile-promotion-stacked-description {
    @apply min-h-0 overflow-hidden;
    max-height: 3rem;
  }

  .public-profile-promotion-stacked-description:focus-visible {
    outline: 2px solid var(--pp-accent);
    outline-offset: 2px;
  }

  .public-profile-promotion-description-shell {
    @apply mt-3 min-w-0;
  }

  .public-profile-promotion-description-expanded {
    max-height: none !important;
    overflow: visible;
  }

  .public-profile-promotion-description-toggle {
    @apply mt-1 inline-flex min-h-10 min-w-10 items-center rounded-md px-0 text-[12px] font-semibold;
    color: var(--pp-accent-text);
  }

  .public-profile-promotion-description-toggle:focus-visible {
    outline: 2px solid var(--pp-accent);
    outline-offset: 2px;
  }

  .public-profile-promotion-stacked-terms {
    @apply mt-3 rounded-[10px] border border-slate-200 bg-slate-50/80 px-3 py-2.5 text-[12.5px] leading-5 text-slate-600;
    border-radius: var(--pp-inner-radius);
    border-color: var(--pp-border);
    background: var(--pp-card-muted);
  }

  .public-profile-promotion-stacked-terms summary {
    @apply cursor-pointer text-[10px] font-semibold uppercase tracking-[0.16em] text-slate-500;
  }

  .public-profile-promotion-stacked-terms p {
    @apply mt-2 whitespace-pre-wrap;
  }

  .public-profile-promotion-description-shell-collapsed {
    @apply relative;
  }

  .public-profile-promotion-description-shell-collapsed .public-profile-promotion-description-toggle {
    @apply absolute bottom-0 right-0 mt-0 min-h-0 min-w-0 rounded-sm pl-5 text-[12px] leading-6;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0), var(--pp-card-bg) 1rem, var(--pp-card-bg));
  }

  .public-profile-promotion-description-shell-collapsed .public-profile-promotion-description-toggle::before {
    @apply mr-1 font-medium text-slate-500;
    content: "...";
  }

  .public-profile-promotion-description-shell-collapsed .public-profile-promotion-description-toggle::after {
    content: "";
    position: absolute;
    inset: -0.5rem 0 -0.5rem -1rem;
  }

  @media (min-width: 1024px) {
    .public-profile-promotions-grid:not(.public-profile-promotions-grid-single) .public-profile-promotion-description-shell {
      @apply mt-0;
    }
  }

  @media (min-width: 1024px) {
    .public-profile-promotions-grid:not(.public-profile-promotions-grid-single) .public-profile-promotion-stacked-terms {
      @apply mt-auto;
    }
  }

  .public-profile-menu-scroll {
    @apply overflow-x-auto;
    max-width: none;
    margin-top: -1rem;
    margin-left: -1.25rem;
    margin-right: -1.25rem;
    margin-bottom: -2rem;
    width: calc(100% + 2.5rem);
    padding-top: 1rem;
    padding-right: 1.25rem;
    padding-bottom: 2.5rem;
    padding-left: 1.25rem;
  }

  .public-profile-menu-scroll-shell::after {
    right: -1.25rem;
    width: 2.75rem;
  }

  @media (min-width: 640px) {
    .public-profile-menu-scroll {
      margin-left: -1rem;
      margin-right: -1rem;
      margin-bottom: -1.5rem;
      width: calc(100% + 2rem);
      padding-right: 1rem;
      padding-bottom: 2rem;
      padding-left: 1rem;
    }

    .public-profile-menu-scroll-shell::after {
      right: -1rem;
      width: 2.5rem;
    }
  }

  .public-profile-menu-rail {
    @apply flex min-w-full gap-3;
    width: max-content;
  }

  .public-profile-menu-card {
    @apply flex w-44 shrink-0 flex-col gap-2 rounded-[10px] border border-slate-200 bg-slate-50 p-2 text-left shadow-sm transition-[border-color,transform,box-shadow] duration-150 ease-out hover:-translate-y-0.5 focus:outline-none focus:ring-2 focus:ring-slate-900 focus:ring-offset-2;
    border-radius: var(--pp-inner-radius);
    border-color: var(--pp-border);
    background: var(--pp-card-muted);
    box-shadow: var(--pp-menu-card-shadow);
  }

  .public-profile-menu-card:hover,
  .public-profile-menu-card:focus-visible {
    border-color: var(--pp-accent-border);
    box-shadow: var(--pp-menu-card-shadow);
  }

  .public-profile-menu-preview {
    @apply flex h-32 items-center justify-center overflow-hidden rounded-[8px] bg-white;
    border-radius: var(--pp-media-radius);
    background: var(--pp-card-bg);
    outline: 1px solid var(--pp-media-outline);
  }

  .public-profile-menu-image {
    @apply h-full w-full object-cover;
  }

  .public-profile-menu-file-preview {
    @apply flex h-full w-full items-center justify-center bg-slate-100;
    background:
      var(--pp-page-texture),
      var(--pp-fallback-surface);
    background-size: var(--pp-page-texture-size), cover;
  }

  .public-profile-menu-pdf-icon {
    @apply flex h-14 w-12 items-center justify-center rounded-[6px] border bg-white text-[10px] font-bold tracking-[0.12em] shadow-sm;
    border-color: var(--pp-accent-border);
    color: var(--pp-accent-text);
    box-shadow: inset 0 -12px 0 color-mix(in srgb, var(--pp-accent-soft) 78%, transparent), 0 1px 2px rgba(15, 23, 42, 0.08);
  }

  .public-profile-hours-list {
    @apply grid gap-2 sm:grid-cols-2 lg:grid-cols-4;
  }

  .public-profile-hours-day {
    @apply flex min-h-[106px] flex-col gap-2.5 border px-3 py-3;
    border-radius: var(--pp-inner-radius);
    border-color: var(--pp-border);
    background-color: var(--pp-card-muted);
  }

  .public-profile-hours-day-today {
    border-color: var(--pp-accent-border);
    background-color: var(--pp-accent-soft);
    box-shadow: inset 3px 0 0 var(--pp-accent);
  }

  .public-profile-today-pill {
    @apply rounded-full bg-white px-2 py-0.5 text-[10px] font-semibold uppercase tracking-wide;
    border-radius: var(--pp-chip-radius);
    color: var(--pp-accent-text);
  }

  .public-profile-hours-day-label {
    @apply flex flex-wrap items-center gap-1.5;
  }

  .public-profile-hours-day-content {
    @apply min-w-0 flex-1 text-left;
  }

  .public-profile-business-hours-stack,
  .public-profile-business-period-row {
    @apply flex flex-col gap-1;
  }

  @media (max-width: 639px) {
    .public-profile-hours-list {
      gap: 0.5rem;
    }

    .public-profile-hours-day {
      min-height: 0;
      gap: 0.375rem;
      padding: 0.65rem 0.75rem;
    }

    .public-profile-hours-day-content > div {
      gap: 0.25rem;
    }

    .public-profile-business-period-row {
      @apply w-full flex-row flex-wrap items-center gap-1.5;
    }

    .public-profile-business-period-row > span:last-child {
      margin-left: auto;
    }
  }

  @media (max-width: 767px) {
    .public-profile-side-rail > .public-profile-booking-section + #visit {
      margin-top: 0 !important;
    }
  }

  .public-profile-info-box {
    @apply rounded-[8px] border p-4;
    border-radius: var(--pp-inner-radius);
    border-color: var(--pp-border);
    background-color: var(--pp-card-muted);
  }

  .public-profile-info-label {
    @apply text-[10.5px] font-semibold uppercase tracking-[0.16em] text-slate-400;
  }

  .public-profile-info-value {
    @apply mt-1 block break-words text-[14px] font-semibold leading-6 text-slate-800;
    overflow-wrap: anywhere;
  }

  .public-profile-body-copy {
    @apply max-w-none whitespace-pre-wrap text-[15px] leading-8 text-slate-600;
    overflow-wrap: anywhere;
    text-wrap: pretty;
  }

  .public-profile-highlight-grid {
    @apply grid gap-2 sm:grid-cols-2;
  }

  .public-profile-hero-highlights {
    @apply -mx-5 mt-4 flex max-w-[100vw] flex-nowrap items-start gap-2 overflow-x-auto px-5 pt-1;
    margin-bottom: -1rem;
    padding-bottom: 1.5rem;
  }

  .public-profile-hero-highlights .public-profile-highlight-card {
    @apply w-fit max-w-[82vw] shrink-0;
  }

  @media (min-width: 640px) {
    .public-profile-hero-highlights {
      @apply mx-0 max-w-full flex-wrap overflow-visible px-0 pb-0;
      margin-bottom: 0;
      padding-top: 0;
    }

    .public-profile-hero-highlights .public-profile-highlight-card {
      @apply max-w-full shrink;
    }
  }

  .public-profile-highlight-card {
    @apply flex items-center gap-2 rounded-[8px] border px-3 py-2.5 text-[12.5px] font-semibold leading-5 shadow-sm;
    border-radius: var(--pp-inner-radius);
    border-color: var(--pp-accent-border);
    background-color: var(--pp-accent-soft);
    color: var(--pp-accent-text);
    box-shadow: var(--pp-chip-shadow);
    overflow-wrap: anywhere;
  }

  .public-profile-highlight-icon {
    @apply flex h-5 w-5 shrink-0 items-center justify-center rounded-full text-white;
    background-color: var(--pp-accent);
  }

  .public-profile-mobile-bar {
    @apply fixed inset-x-0 bottom-0 z-30 flex gap-2 rounded-t-[14px] border-t bg-white/95 p-2 shadow-[0_-10px_30px_rgba(15,23,42,0.12)] backdrop-blur md:hidden;
    border-color: var(--pp-border);
    background: var(--pp-card-bg);
    padding-bottom: max(0.5rem, env(safe-area-inset-bottom));
    box-shadow: var(--pp-section-shadow);
  }

  .public-profile-mobile-link {
    @apply flex min-h-12 min-w-0 flex-1 flex-col items-center justify-center gap-1 rounded-[10px] px-2 py-2 text-center text-[11.5px] font-semibold leading-none transition-colors;
    border-radius: var(--pp-button-radius);
  }

  .public-profile-mobile-link-whatsapp {
    @apply text-white shadow-sm;
    background-color: #16a34a;
    box-shadow: var(--pp-button-shadow);
  }

  .public-profile-mobile-link-neutral {
    @apply border border-slate-200 bg-white text-slate-700;
    border-color: var(--pp-border);
    background: var(--pp-card-bg);
  }

  .public-profile-mobile-link-dark {
    @apply bg-slate-900 text-white shadow-sm;
    box-shadow: var(--pp-button-shadow);
  }

  .public-profile-mobile-link-share {
    @apply border border-slate-200 bg-white text-slate-700;
    border-color: var(--pp-border);
    background: var(--pp-card-bg);
  }

  .public-profile-footer {
    @apply mt-6 flex flex-col items-center justify-center gap-2 px-5 pb-8 pt-2 text-center text-slate-500 sm:pb-2;
  }

  .public-profile-footer-brand {
    @apply inline-flex min-h-10 items-center gap-2 rounded-full border bg-white/70 px-3.5 py-2 text-[13px] font-semibold text-slate-700 shadow-sm transition-[background-color,border-color,color,box-shadow,transform] duration-150 ease-out hover:bg-white hover:text-slate-950 focus:outline-none focus:ring-2 focus:ring-slate-900 focus:ring-offset-2;
    border-radius: var(--pp-button-radius);
    border-color: var(--pp-border);
    background: var(--pp-card-bg);
    box-shadow: var(--pp-button-shadow);
  }

  .public-profile-open-status-pill-link:active,
  .public-profile-banner-pill-link:active,
  .public-profile-primary-link:active,
  .public-profile-neutral-link:active,
  .public-profile-accent-link:active,
  .public-profile-share-link:active,
  .public-profile-footer-brand:active {
    transform: scale(0.96);
  }

  .public-profile-theme-preview {
    @apply relative h-32 overflow-hidden rounded-lg border;
    border-color: var(--pp-border);
    background-color: var(--pp-page-bg);
    font-family: var(--pp-body-font);
  }

  .public-profile-theme-option-personality {
    @apply inline-flex rounded-full bg-slate-100 px-1.5 py-0.5 text-[9px] font-bold uppercase tracking-[0.12em] text-slate-500 ring-1 ring-slate-200;
  }

  .public-profile-theme-option-premium {
    @apply inline-flex rounded-full bg-amber-100 px-1.5 py-0.5 text-[9px] font-bold uppercase tracking-[0.12em] text-amber-700 ring-1 ring-amber-200;
  }

  .public-profile-theme-preview-hero {
    position: absolute;
    inset: 0 0 auto;
    height: 4.6rem;
    background:
      var(--pp-hero-detail),
      linear-gradient(135deg, var(--pp-hero-start), var(--pp-hero-end));
  }

  .public-profile-theme-preview-hero::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 1px;
    background: var(--pp-premium-section-rule);
    opacity: 0.72;
  }

  .public-profile-theme-preview-logo {
    position: absolute;
    left: 0.55rem;
    bottom: -0.75rem;
    width: 2rem;
    height: 2rem;
    border: 1px solid rgba(255, 255, 255, 0.58);
    border-radius: var(--pp-logo-radius);
    background:
      linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0.78)),
      var(--pp-accent-soft);
    box-shadow: var(--pp-logo-shadow);
  }

  .public-profile-theme-preview-pills {
    position: absolute;
    right: 0.55rem;
    bottom: 0.55rem;
    display: flex;
    gap: 0.25rem;
  }

  .public-profile-theme-preview-pill {
    width: 2.3rem;
    height: 0.55rem;
    border-radius: var(--pp-chip-radius);
    background-color: rgba(255, 255, 255, 0.34);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.24);
  }

  .public-profile-theme-preview-pill-short {
    width: 1.45rem;
  }

  .public-profile-theme-preview-card {
    @apply absolute bottom-2 left-2 right-2 border p-2;
    border-radius: var(--pp-inner-radius);
    border-color: var(--pp-border);
    background: var(--pp-card-bg);
    box-shadow: var(--pp-card-shadow), var(--pp-surface-inset-shadow);
  }

  .public-profile-theme-preview-card-row {
    display: flex;
    align-items: center;
    gap: 0.45rem;
  }

  .public-profile-theme-preview-line {
    width: 62%;
    height: 0.38rem;
    border-radius: 999px;
    background-color: var(--pp-primary);
  }

  .public-profile-theme-preview-muted-line {
    width: 84%;
    height: 0.26rem;
    margin-top: 0.35rem;
    border-radius: 999px;
    background-color: var(--pp-card-muted);
    border: 1px solid var(--pp-border);
  }

  .public-profile-theme-preview-button {
    width: 2.35rem;
    height: 1rem;
    flex: 0 0 auto;
    border-radius: var(--pp-button-radius);
    background-color: var(--pp-primary);
    box-shadow: var(--pp-button-shadow);
  }

  .public-profile-theme-preview-chip-row {
    display: flex;
    gap: 0.3rem;
    margin-top: 0.55rem;
  }

  .public-profile-theme-preview-chip {
    width: 2.15rem;
    height: 0.52rem;
    border-radius: var(--pp-chip-radius);
    background-color: var(--pp-accent-soft);
    border: 1px solid var(--pp-accent-border);
    box-shadow: var(--pp-chip-shadow);
  }

  .public-profile-theme-preview-chip-muted {
    width: 1.55rem;
    background-color: var(--pp-card-muted);
    border-color: var(--pp-border);
  }

  .public-profile-theme-preview-section {
    margin-top: 0.45rem;
    padding: 0.35rem;
    border-radius: var(--pp-inner-radius);
    background: var(--pp-section-bg);
    box-shadow: inset 0 0 0 1px var(--pp-border);
  }

  .public-profile-theme-preview-kicker {
    width: 1.55rem;
    height: 0.22rem;
    border-radius: 999px;
    background: var(--pp-premium-section-rule);
  }

  .public-profile-theme-preview-section-line {
    width: 72%;
    height: 0.28rem;
    margin-top: 0.25rem;
    border-radius: 999px;
    background-color: var(--pp-card-muted);
  }

  .public-profile-tag-select {
    @apply w-full;
  }

  .public-profile-tag-select .ts-control {
    @apply min-h-[42px] rounded-lg border border-slate-200 bg-white px-2 py-1.5 text-[12.5px] text-slate-700 shadow-sm transition-[border-color,box-shadow];
  }

  .public-profile-tag-select.focus .ts-control {
    @apply border-indigo-400 shadow-[0_0_0_3px_rgba(99,102,241,0.1)];
  }

  .public-profile-tag-select.multi .ts-control > div {
    @apply my-0.5 inline-flex items-center gap-1 rounded-full border border-indigo-200 bg-indigo-50 px-2.5 py-1 text-[11.5px] font-semibold leading-none text-indigo-700;
  }

  .public-profile-tag-select.multi .ts-control > div.active {
    @apply border-indigo-300 bg-indigo-100 text-indigo-800;
  }

  .public-profile-tag-select .ts-control input {
    @apply min-w-[8rem] text-[12.5px] placeholder:text-slate-400;
  }

  .public-profile-tag-select.plugin-remove_button .item .remove {
    @apply ml-1 inline-flex h-4 w-4 items-center justify-center rounded-full border-0 text-indigo-400 transition-colors hover:bg-indigo-100 hover:text-indigo-700;
  }

  .public-profile-tag-select .ts-dropdown {
    @apply mt-1 rounded-lg border border-slate-200 bg-white text-[12.5px] shadow-lg ring-1 ring-black/5;
  }

  .public-profile-tag-select .ts-dropdown .create {
    @apply px-3 py-2 text-slate-600;
  }

  @keyframes flash-toast-enter {
    0% {
      opacity: 0;
      transform: translate3d(0, -1rem, 0);
    }

    65% {
      opacity: 1;
      transform: translate3d(0, 0.1rem, 0);
    }

    100% {
      opacity: 1;
      transform: translate3d(0, 0, 0);
    }
  }

  @keyframes flash-toast-exit {
    0% {
      opacity: 1;
      transform: translate3d(0, 0, 0);
    }

    100% {
      opacity: 0;
      transform: translate3d(0, -0.625rem, 0);
    }
  }

  .calendar-badge {
    @apply border text-[10px] font-semibold me-2 px-2 py-0.5 mb-1 w-full rounded-lg inline-flex items-center justify-center;
  }

  .pagy {
    @apply flex space-x-1 font-semibold text-xs text-gray-500;
    a:not(.gap) {
      @apply block rounded-lg px-2 py-1 bg-gray-200;
      &:hover {
        @apply bg-gray-300;
      }
      &:not([href]) { /* disabled links */
        @apply text-gray-300 bg-gray-100 cursor-default;
      }
      &.current {
        @apply text-white bg-gray-400;
      }
    }
    label {
      @apply inline-block whitespace-nowrap bg-gray-200 rounded-lg px-3 py-0.5;
      input {
        @apply bg-gray-100 border-none rounded-md;
      }
    }
  }

  /* ── Toggle switch (toggle-pill) ──────────────────────────────────
     Wrap a hidden checkbox with .toggle-pill. The checked-state colour
     is intentionally NOT baked in — pass it as an inline modifier so
     each usage can express its own meaning:

       peer-checked:bg-blue-500   affirmative (enabled / on)
       peer-checked:bg-red-400    negative    (closed / off / danger)

     Usage:
       <label class="toggle-pill">
         <input type="checkbox" class="sr-only peer" ...>
         <span class="toggle-pill-track peer-checked:bg-red-400"></span>
         <span class="text-[11.5px] text-gray-500">Closed</span>
       </label>
  ──────────────────────────────────────────────────────────────── */
  .toggle-pill {
    @apply relative flex cursor-pointer select-none items-center gap-2;
  }
  .toggle-pill-track {
    @apply relative h-5 w-9 flex-shrink-0 rounded-full bg-gray-200
           transition-colors duration-200
           after:absolute after:left-0.5 after:top-0.5
           after:h-4 after:w-4 after:rounded-full after:bg-white
           after:shadow-sm after:transition-transform after:duration-200
           after:content-[''] peer-checked:after:translate-x-4;
  }

  /* ── Drawer ────────────────────────────────────────────────────── */
  .drawer-panel {
    @apply fixed inset-y-0 right-0 z-[60] flex w-[560px] max-w-full translate-x-full flex-col overflow-hidden bg-white shadow-xl transition-transform duration-300 ease-in-out;
  }
  .drawer-panel.is-open {
    @apply translate-x-0;
  }
  .drawer-backdrop {
    @apply fixed inset-0 z-[55] bg-black/40 opacity-0 pointer-events-none transition-opacity duration-200;
  }
  .drawer-backdrop.is-open {
    @apply opacity-100 pointer-events-auto;
  }

  .mobile-drawer-panel {
    @apply fixed inset-x-0 bottom-0 z-[60] mx-auto flex max-h-[82vh] w-full max-w-[560px] translate-y-full flex-col overflow-hidden rounded-t-2xl bg-white shadow-[0_-18px_45px_rgba(15,23,42,0.18)] transition-transform duration-300 ease-out;
  }
  .mobile-drawer-panel.is-open {
    @apply translate-y-0;
  }
  .mobile-drawer-backdrop {
    @apply fixed inset-0 z-[55] bg-slate-950/40 opacity-0 pointer-events-none transition-opacity duration-200;
  }
  .mobile-drawer-backdrop.is-open {
    @apply opacity-100 pointer-events-auto;
  }
  .mobile-company-switcher-summary::-webkit-details-marker {
    display: none;
  }
  .mobile-company-switcher-menu {
    max-height: min(60vh, 24rem);
    overscroll-behavior: contain;
  }

  /* ── Page card ──────────────────────────────────────────────────
     Standard white rounded card used as the primary content wrapper
     on settings pages. Add shadow-sm for a slightly elevated look.

     Usage:
       <div class="page-card">...</div>
       <div class="page-card shadow-sm">...</div>
  ──────────────────────────────────────────────────────────────── */
  .page-card {
    @apply rounded-xl border border-gray-200 bg-white p-6;
  }

  /* ── Admin index surfaces ───────────────────────────────────────
     Compact admin pages use these for reusable panels, filters,
     tables, metric cards, and empty states.
  ──────────────────────────────────────────────────────────────── */
  .admin-page-title {
    @apply m-0 text-[17px] font-bold text-slate-950;
  }
  .admin-index-title {
    @apply text-[15px] font-semibold text-slate-900;
  }
  .admin-page-subtitle {
    @apply mt-1 text-xs text-slate-500;
  }
  .admin-index-subtitle {
    @apply mt-0.5 text-[12px] text-slate-400;
  }
  .admin-panel {
    @apply overflow-hidden rounded-lg border border-slate-200 bg-white;
  }
  .admin-panel-elevated {
    @apply overflow-hidden rounded-xl border border-slate-200 bg-white shadow-sm;
  }
  .admin-panel-header {
    @apply flex flex-col gap-3 border-b border-slate-100 px-5 py-4 lg:flex-row lg:items-start lg:justify-between;
  }
  .admin-section {
    @apply rounded-lg border border-slate-200 bg-white;
  }
  .admin-section-overflow {
    @apply overflow-hidden rounded-lg border border-slate-200 bg-white;
  }
  .admin-section-header {
    @apply border-b border-slate-100 px-4 py-3;
  }
  .admin-section-header-row {
    @apply flex items-center justify-between border-b border-slate-100 px-5 py-4;
  }
  .admin-filter-input {
    @apply rounded-md border border-slate-200 text-[12px] text-slate-700 focus:border-indigo-400 focus:ring-indigo-100;
  }
  .admin-filter-search {
    @apply w-full rounded-md border-slate-200 pl-9 text-[12px] text-slate-800 placeholder:text-slate-400 focus:border-indigo-400 focus:ring-indigo-100;
  }
  .admin-select {
    @apply w-full appearance-none rounded-lg border border-slate-200 bg-white py-2 pl-3 pr-8 text-[12.5px] text-slate-600 outline-none transition focus:border-indigo-400 focus:ring-4 focus:ring-indigo-100;
  }
  .admin-icon-button {
    @apply inline-flex h-[34px] w-full items-center justify-center rounded-md border border-slate-200 bg-white text-slate-400 transition-colors hover:border-slate-300 hover:bg-slate-50 hover:text-slate-700 sm:w-[34px];
  }
  .admin-table {
    @apply min-w-full border-collapse;
  }
  .admin-table-wrap {
    @apply relative mb-5 overflow-x-auto rounded-lg border border-slate-200 bg-white;
  }
  .admin-table-heading {
    @apply whitespace-nowrap border-b border-slate-100 bg-slate-50 px-4 py-2.5 text-left text-[10.5px] font-medium uppercase tracking-wider text-slate-400;
  }
  .admin-table-cell {
    @apply border-b border-slate-50 px-4 py-3 align-middle;
  }
  .admin-table-date-cell {
    @apply whitespace-nowrap border-b border-slate-50 px-4 py-3 align-middle;
  }
  .admin-table-action-cell {
    @apply border-b border-slate-50 px-4 py-3 text-right align-middle;
  }
  .admin-table-row {
    @apply bg-white transition-colors hover:bg-indigo-50/30;
  }
  .import-progress {
    @apply mb-5 flex items-center gap-2;
  }
  .import-progress-step {
    @apply flex items-center gap-1.5;
  }
  .import-progress-marker {
    @apply flex h-6 w-6 flex-shrink-0 items-center justify-center rounded-full text-[11px] font-bold;
  }
  .import-progress-marker-active {
    @apply bg-indigo-600 text-white;
  }
  .import-progress-marker-complete {
    @apply bg-emerald-500 text-white;
  }
  .import-progress-marker-pending {
    @apply bg-slate-200 text-slate-400;
  }
  .import-progress-label {
    @apply text-xs font-semibold text-slate-800;
  }
  .import-progress-label-pending {
    @apply text-xs text-slate-400;
  }
  .import-progress-connector {
    @apply h-[1.5px] w-8 bg-slate-200;
  }
  .import-progress-connector-complete {
    @apply bg-emerald-500;
  }
  .import-guide-card {
    @apply flex items-start gap-2 rounded-lg bg-slate-50 px-3 py-2.5;
  }
  .import-upload-panel {
    @apply rounded-lg border border-slate-200 bg-slate-50 p-3;
  }
  .import-file-input {
    @apply block w-full text-sm text-slate-500 transition-colors file:mr-4 file:cursor-pointer file:rounded-md file:border-0 file:bg-indigo-50 file:px-4 file:py-2 file:text-sm file:font-medium file:text-indigo-700 hover:file:bg-indigo-100;
  }
  .import-reference-list {
    @apply max-h-[400px] space-y-3 overflow-y-auto pr-2;
  }
  .import-reference-group {
    @apply rounded-lg border border-slate-100 bg-slate-50/70 p-3;
  }
  .import-reference-items {
    @apply ml-3 mt-2 flex flex-wrap gap-1.5;
  }
  .import-reference-chip {
    @apply inline-flex items-center rounded-md border border-slate-200 bg-white px-2 py-1 text-[11px] text-slate-600;
  }
  .admin-table-footer {
    @apply flex flex-col gap-3 border-t border-slate-100 bg-white px-4 py-3 sm:flex-row sm:items-center sm:justify-between;
  }
  .admin-empty-state {
    @apply flex flex-col items-center justify-center rounded-lg border border-dashed border-slate-200 bg-white px-6 py-16 text-center;
  }
  .admin-empty-state-icon {
    @apply mb-3 flex h-10 w-10 items-center justify-center rounded-lg bg-slate-100;
  }
  .admin-empty-state-title {
    @apply text-[13.5px] font-semibold text-slate-900;
  }
  .admin-empty-state-copy {
    @apply mt-1 max-w-sm text-[12.5px] text-slate-400;
  }
  .admin-stat-tile {
    @apply rounded-lg bg-slate-50 px-3 py-2;
  }
  .admin-stat-label {
    @apply text-[10.5px] font-semibold uppercase tracking-[0.08em] text-slate-400;
  }
  .admin-stat-value {
    @apply mt-1 text-[13px] font-semibold text-slate-900;
  }
  .admin-info-row {
    @apply flex items-center justify-between gap-3 rounded-lg bg-slate-50 px-3 py-2;
  }

  /* ── Compact metrics, tabs, and chips ─────────────────────────── */
  .metric-card {
    @apply rounded-[10px] border border-slate-200 bg-white px-4 py-3 shadow-sm;
  }
  .metric-card-warning {
    @apply rounded-[10px] border border-amber-200 bg-gradient-to-br from-white to-amber-50 px-4 py-3 shadow-sm;
  }
  .metric-card-danger {
    @apply rounded-[10px] border border-red-300 bg-gradient-to-br from-white to-red-50 px-4 py-3 shadow-sm;
  }
  .metric-card-success {
    @apply rounded-[10px] border border-emerald-200 bg-gradient-to-br from-white to-emerald-50 px-4 py-3 shadow-sm;
  }
  .metric-value {
    @apply text-[22px] font-bold leading-none text-slate-950;
  }
  .metric-label {
    @apply mt-2 text-[11px] font-medium uppercase tracking-[0.06em] text-slate-400;
  }
  .metric-help {
    @apply mt-1 text-[11px] text-slate-500;
  }
  .nav-pill-bar {
    @apply inline-flex min-w-max items-center gap-1 rounded-full border border-slate-200 bg-slate-50 p-1;
  }
  .nav-pill {
    @apply inline-flex items-center gap-1.5 whitespace-nowrap rounded-full px-3 py-1.5 text-[12px] font-medium transition-colors;
  }
  .nav-pill-active {
    @apply bg-white font-semibold text-slate-900 shadow-sm;
  }
  .nav-pill-inactive {
    @apply text-slate-500 hover:text-slate-700;
  }
  .nav-pill-count {
    @apply inline-flex h-4 min-w-[1rem] items-center justify-center rounded-full border border-slate-200 bg-white px-1 text-[10px] font-semibold text-slate-500;
  }
  .nav-pill-count-active {
    @apply inline-flex h-4 min-w-[1rem] items-center justify-center rounded-full border border-indigo-200 bg-indigo-50 px-1 text-[10px] font-semibold text-indigo-600;
  }
  .segmented-toggle {
    @apply inline-flex min-w-max items-center gap-1 rounded-md border border-slate-200 bg-slate-50 p-0.5 shadow-sm;
  }
  .segmented-toggle-option {
    @apply inline-flex items-center gap-1.5 whitespace-nowrap rounded px-3 py-1.5 text-[12px] font-semibold transition-colors;
  }
  .segmented-toggle-option-active {
    @apply bg-white text-indigo-600 shadow-sm;
  }
  .segmented-toggle-option-inactive {
    @apply text-slate-500 hover:text-slate-800;
  }
  .otp-input-toggle-active {
    @apply bg-white text-indigo-600 shadow-sm;
  }
  .otp-input-toggle-inactive {
    @apply text-slate-500 hover:text-slate-800;
  }
  .otp-code-field {
    @apply h-11 w-full min-w-0 rounded-lg border border-slate-200 bg-white text-center text-[18px] font-semibold text-slate-900 shadow-sm outline-none transition focus:border-indigo-400 focus:ring-4 focus:ring-indigo-100;
  }
  .filter-chip {
    @apply inline-flex items-center gap-1.5 rounded-lg border border-indigo-200 bg-indigo-50 px-2.5 py-1.5 text-xs font-medium text-indigo-700;
  }
  .quick-filter-chip {
    @apply inline-flex items-center gap-1.5 rounded-lg border border-slate-200 bg-white px-2.5 py-1.5 text-xs font-medium text-slate-500 transition-colors hover:border-slate-300 hover:text-slate-700;
  }
  .badge-compact {
    @apply inline-flex items-center gap-1 rounded-full border px-2 py-0.5 text-[10.5px] font-semibold;
  }
  .badge-compact-muted {
    @apply inline-flex rounded border border-slate-200 bg-slate-50 px-1.5 py-0.5 text-[10.5px] font-medium text-slate-500;
  }

  /* ── Staff profile shell ─────────────────────────────────────── */
  .staff-profile-shell {
    @apply flex flex-col gap-5;
  }
  .staff-profile-header {
    @apply sticky top-0 z-20 overflow-hidden rounded-xl border border-slate-200 bg-white shadow-sm;
  }
  .staff-profile-header-main {
    @apply flex flex-col gap-4 px-5 py-5 sm:flex-row sm:items-start sm:justify-between sm:px-6 sm:py-6;
  }
  .staff-profile-identity {
    @apply flex min-w-0 items-start gap-4;
  }
  .staff-profile-avatar {
    @apply flex h-20 w-20 flex-shrink-0 items-center justify-center overflow-hidden rounded-full border border-slate-200 bg-indigo-50 text-[22px] font-bold text-indigo-600 shadow-inner;
  }
  .staff-profile-avatar-pending {
    @apply border-amber-200 bg-amber-50 text-amber-700;
  }
  .staff-profile-avatar-muted {
    @apply border-slate-200 bg-slate-100 text-slate-500;
  }
  .staff-profile-title {
    @apply truncate text-[17px] font-bold text-slate-950;
  }
  .staff-profile-subtitle {
    @apply mt-1 text-[12.5px] text-slate-500;
  }
  .staff-profile-meta {
    @apply mt-2 flex flex-wrap items-center gap-2 text-[11.5px] text-slate-500;
  }
  .staff-profile-completion {
    @apply mt-3 max-w-xl;
  }
  .staff-profile-completion-header {
    @apply flex flex-wrap items-center justify-between gap-2;
  }
  .staff-profile-completion-label {
    @apply text-[11.5px] font-medium text-slate-500;
  }
  .staff-profile-completion-value {
    @apply text-[11.5px] font-semibold text-indigo-700;
  }
  .staff-profile-completion-bar {
    @apply mt-2 h-1.5 overflow-hidden rounded-full bg-slate-100;
  }
  .staff-profile-completion-bar-fill {
    @apply h-full rounded-full bg-indigo-600;
  }
  .staff-profile-completion-missing {
    @apply mt-2 flex flex-wrap items-center gap-1.5 text-[11px] text-slate-400;
  }
  .staff-profile-completion-link {
    @apply font-medium text-indigo-600 hover:text-indigo-700 hover:underline;
  }
  .staff-profile-completion-ready {
    @apply mt-2 text-[11px] text-emerald-700;
  }
  .staff-profile-meta-separator {
    @apply hidden h-4 w-px bg-slate-200 sm:inline-block;
  }
  .staff-profile-tabs {
    @apply overflow-x-auto;
  }
  .profile-subnav-section {
    @apply px-5 py-4;
  }
  .profile-subnav-content {
    @apply pt-4;
  }
  .staff-profile-panel {
    @apply w-full overflow-hidden rounded-lg border border-slate-200 bg-white shadow-sm;
  }
  .staff-profile-panel-body {
    @apply p-6 md:p-10;
  }

  /* ── Companies index ──────────────────────────────────────────── */
  .company-recent-card {
    @apply flex w-[216px] flex-shrink-0 items-center gap-2.5 rounded-lg border border-slate-200 bg-white px-3 py-2.5 text-left no-underline transition-all hover:border-indigo-200 hover:shadow-sm;
  }
  .company-avatar {
    @apply flex flex-shrink-0 items-center justify-center overflow-hidden font-bold leading-none;
  }
  .company-avatar-sm {
    @apply h-8 w-8 rounded-md text-[11px];
  }
  .company-avatar-md {
    @apply h-9 w-9 rounded-lg text-[12px];
  }
  .company-name {
    @apply truncate text-[12.5px] font-medium text-slate-900;
  }
  .company-meta {
    @apply mt-0.5 truncate text-[11px] text-slate-400;
  }
  .company-plan-badge {
    @apply inline-flex rounded-full px-2 py-0.5 text-[10px] font-semibold;
  }
  .company-open-link {
    @apply inline-flex items-center gap-1 rounded-md border border-slate-200 bg-white px-2.5 py-1 text-[11.5px] font-medium text-slate-500 opacity-100 transition-colors hover:border-indigo-200 hover:bg-white hover:text-indigo-600 lg:opacity-0 lg:group-hover:opacity-100;
  }
  .usage-meter {
    @apply mt-1 h-1 w-[90px] overflow-hidden rounded-full bg-slate-100;
  }

  /* ── Action items index ───────────────────────────────────────── */
  .action-item-card {
    @apply flex overflow-hidden rounded-[10px] border border-slate-200 bg-white text-inherit no-underline shadow-sm transition hover:border-indigo-200 hover:shadow-md;
  }
  .action-item-body {
    @apply flex min-w-0 flex-1 flex-col gap-3 p-4 sm:flex-row sm:items-center;
  }
  .action-item-review {
    @apply inline-flex items-center rounded-md border border-slate-200 bg-white px-3 py-1.5 text-[11.5px] font-medium text-slate-500 transition group-hover:border-slate-300 group-hover:bg-slate-50 group-hover:text-slate-700;
  }
  .action-item-section-label {
    @apply px-1 pt-1 text-[10px] font-bold uppercase tracking-[0.08em] text-slate-400;
  }

  /* ── Settings tab bar ───────────────────────────────────────────
     Horizontal underline-style tab navigation used across all
     Company Settings sub-pages. Each link gets exactly one class.

     Usage:
       <a class="settings-tab-active">General Info</a>
       <a class="settings-tab">Operating Hours</a>
  ──────────────────────────────────────────────────────────────── */
  .settings-tab {
    @apply inline-flex items-center whitespace-nowrap border-b-2 border-transparent
           px-0.5 py-2.5 mr-5 text-[12.5px] font-medium text-gray-500
           transition-colors hover:border-gray-300 hover:text-gray-700;
  }
  .settings-tab-active {
    @apply inline-flex items-center whitespace-nowrap border-b-2 border-indigo-600
           px-0.5 py-2.5 mr-5 text-[12.5px] font-medium text-indigo-600
           transition-colors;
  }

  /* ── Section eyebrow ────────────────────────────────────────────
     ALL-CAPS label above a section. Sits above a title, not alone.

     Usage:
       <p class="section-eyebrow">Staff</p>
       <h3 class="text-[13px] font-semibold">Active Members</h3>
  ──────────────────────────────────────────────────────────────── */
  .section-eyebrow {
    @apply text-[10px] font-bold uppercase tracking-wider text-gray-400;
  }

  /* ── Status & boolean badges ────────────────────────────────────
     .badge          — shared shape (pill)
     .badge-active   — green  with status dot — entity is live
     .badge-inactive — gray   with status dot — entity is off
     .badge-yes      — green  no dot          — boolean true
     .badge-no       — gray   no dot          — boolean false

     Add a dot by including a <span class="badge-dot"> child inside
     the badge when using .badge-active / .badge-inactive.

     Usage:
       <span class="badge badge-active"><span class="badge-dot"></span>Active</span>
       <span class="badge badge-yes">Yes</span>
  ──────────────────────────────────────────────────────────────── */
  .badge {
    @apply inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-[11px] font-medium;
  }
  .badge-active   { @apply bg-emerald-50 text-emerald-700; }
  .badge-inactive { @apply bg-gray-100 text-gray-500; }
  .badge-yes      { @apply bg-emerald-50 text-emerald-700; }
  .badge-no       { @apply bg-gray-100 text-gray-500; }

  /* Dot inside .badge-active / .badge-inactive */
  .badge-dot {
    @apply h-1.5 w-1.5 flex-shrink-0 rounded-full;
  }
  .badge-active .badge-dot   { @apply bg-emerald-500; }
  .badge-inactive .badge-dot { @apply bg-gray-400; }

  /* ── Inline alert banners ───────────────────────────────────────
     Usage:
       <div class="banner banner-warning">Low stock</div>
       <div class="banner banner-info">Tip: ...</div>
  ──────────────────────────────────────────────────────────────── */
  .banner {
    @apply flex items-start gap-3 rounded-lg border p-3 text-[12px];
  }
  .banner-warning { @apply border-amber-200 bg-amber-50 text-amber-800; }
  .banner-info    { @apply border-indigo-200 bg-indigo-50 text-indigo-800; }
  .banner-success { @apply border-emerald-200 bg-emerald-50 text-emerald-800; }
  .banner-danger  { @apply border-rose-200 bg-rose-50 text-rose-800; }

  /* ── Staff avatars ──────────────────────────────────────────────
     .avatar       — single initials circle
     .avatar-stack — overlapping row of avatars (add ring-2 ring-white to each child)
     .count-pill   — "+3" overflow counter pill

     Usage:
       <div class="avatar-stack">
         <span class="avatar ring-2 ring-white">AB</span>
         <span class="avatar ring-2 ring-white">CD</span>
         <span class="count-pill">+2</span>
       </div>
  ──────────────────────────────────────────────────────────────── */
  .avatar {
    @apply inline-flex h-6 w-6 flex-shrink-0 items-center justify-center
           rounded-full bg-indigo-100 text-[10px] font-semibold text-indigo-700;
  }
  .avatar-stack {
    @apply flex -space-x-1.5;
  }
  .count-pill {
    @apply inline-flex items-center rounded-full bg-gray-100
           px-2 py-0.5 text-[11px] font-medium text-gray-600;
  }
}