@import "tailwindcss";

/* Exclude markdown docs from Tailwind's automatic source detection. They carry
   placeholder utility strings (e.g. `text-[length:var(--text-*)]`) that compile
   to invalid CSS like `var(--text-*)`. Utilities come from src/ code only. */
@source not "../../**/*.md";

/* Bridge the existing Tailwind 3 JS config into the v4 engine — preserves the
   brand/accent palette, container, custom animations, shadows, and display
   font sizes without rewriting them as CSS @theme tokens. */
@config "../../tailwind.config.ts";

@layer base {
  :root {
    --header-height: 4rem;
    color-scheme: light;

    /* Fluid text scale — min ~375px viewport, max ~1280px.
       Single source of truth: all font sizes in the app reference these vars. */
    --text-2xs: clamp(0.625rem,  0.3vw + 0.55rem, 0.6875rem);
    --text-xs:  clamp(0.6875rem, 0.4vw + 0.60rem, 0.75rem);
    --text-xs-fixed: 0.75rem; /* non-fluid 12px — table headers & labels that must not shrink */
    --text-sm:  clamp(0.75rem,   0.5vw + 0.65rem, 0.875rem);
    --text-sm-fixed: 0.875rem; /* non-fluid 14px — nav labels & chips that must not shrink */
    --text-base:clamp(0.875rem,  0.6vw + 0.75rem, 1rem);
    --text-base-fixed: 1rem; /* non-fluid 16px — dialog/drawer titles that must not shrink */
    --text-lg:  clamp(1rem,      0.7vw + 0.85rem, 1.125rem);
    --text-lg-fixed: 1.125rem; /* non-fluid 18px — emphasized totals that must not shrink */
    --text-xl:  clamp(1.125rem,  0.9vw + 0.95rem, 1.25rem);
    --text-2xl: clamp(1.25rem,   1.2vw + 1rem,    1.5rem);
    --text-3xl: clamp(1.5rem,    1.8vw + 1.1rem,  1.875rem);

    /* Icon sizes — single source of truth for all SVG icon dimensions */
    --icon-xs:  0.75rem;    /* 12px — h-3  w-3  */
    --icon-sm:  0.875rem;   /* 14px — h-3.5 w-3.5 */
    --icon-md:  1rem;       /* 16px — h-4  w-4  */
    --icon-lg:  1.25rem;    /* 20px — h-5  w-5  */
    --icon-xl:  1.5rem;     /* 24px — h-6  w-6  */
    --icon-2xl: 2rem;       /* 32px — h-8  w-8  */
    --icon-3xl: 2.5rem;     /* 40px — h-10 w-10 */

    /* Icon container sizes (the rounded wrapper divs) */
    --icon-box-sm:  2.5rem;   /* 40px  — h-10 w-10 */
    --icon-box-md:  3rem;     /* 48px  — h-12 w-12 */
    --icon-box-lg:  3.5rem;   /* 56px  — h-14 w-14 */
    --icon-box-xl:  5rem;     /* 80px  — h-20 w-20 */

    /* Badge tokens — single source for all status/type/label badges */
    --badge-px:            0.625rem;  /* 10px — equals Tailwind px-2.5 */
    --badge-py:            0.125rem;  /*  2px — equals Tailwind py-0.5 */
    --badge-radius:        9999px;
    --badge-weight:        600;       /* semibold */
    --badge-label-px:      0.5rem;    /*  8px — equals Tailwind px-2 */
    --badge-label-py:      0.125rem;

    /* <Button> size tokens — single source for height + padding of all Button instances */
    --btn-sm-h:   2.25rem;   /* 36px — h-9  */
    --btn-sm-px:  1rem;      /* 16px — px-4 */
    --btn-md-h:   2.75rem;   /* 44px — h-11 */
    --btn-md-px:  1.25rem;   /* 20px — px-5 */
    --btn-lg-h:   3rem;      /* 48px — h-12 */
    --btn-lg-px:  1.75rem;   /* 28px — px-7 */

    /* Icon-button tokens */
    --btn-icon-md:         2.25rem;   /* 36px — equals Tailwind h-9 w-9 */
    --btn-icon-sm:         2rem;      /* 32px — equals Tailwind h-8 w-8 */
    --btn-icon-radius:     0.75rem;   /* 12px — equals Tailwind rounded-xl */
    --btn-icon-sm-radius:  0.5rem;    /*  8px — equals Tailwind rounded-lg */
  }

  html.dark {
    color-scheme: dark;
  }

  html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    scroll-behavior: smooth;
    text-rendering: optimizeLegibility;
  }

  /* Honor user's motion preferences */
  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }

  body {
    @apply bg-white text-slate-900 dark:bg-slate-950 dark:text-slate-100;
    font-feature-settings: "cv11", "ss01", "ss03";
    background-image: radial-gradient(
        circle at 100% 0%,
        rgba(50, 109, 255, 0.06) 0%,
        transparent 35%
      ),
      radial-gradient(circle at 0% 100%, rgba(50, 109, 255, 0.04) 0%, transparent 35%);
  }

  html.dark body {
    background-image: radial-gradient(
        circle at 100% 0%,
        rgba(50, 109, 255, 0.1) 0%,
        transparent 40%
      ),
      radial-gradient(circle at 0% 100%, rgba(168, 85, 247, 0.08) 0%, transparent 40%);
  }

  ::selection {
    @apply bg-brand-200 text-brand-900;
  }
  html.dark ::selection {
    @apply bg-brand-500/40 text-white;
  }

  /* Custom scrollbar */
  ::-webkit-scrollbar {
    width: 4px;
    height: 4px;
  }
  ::-webkit-scrollbar-track {
    background: transparent;
  }
  ::-webkit-scrollbar-thumb {
    @apply rounded-full bg-slate-300/70 dark:bg-slate-700/70;
    transition: background 0.2s;
  }
  ::-webkit-scrollbar-thumb:hover {
    @apply bg-slate-400 dark:bg-slate-600;
  }

  /* Hide scrollbar while keeping the element scrollable (e.g. horizontal tab/filter strips) */
  .scrollbar-hide {
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .scrollbar-hide::-webkit-scrollbar {
    display: none;
  }

  /* Universal focus ring — accessible, brand-tinted */
  :focus-visible {
    @apply outline-none ring-2 ring-brand-500 ring-offset-2 ring-offset-white dark:ring-offset-slate-950;
    border-radius: 0.5rem;
  }

  /* Suppress focus ring on react-select's inner input — the control border handles focus state */
  .rs-wrapper input:focus,
  .rs-wrapper input:focus-visible {
    outline: none !important;
    box-shadow: none !important;
  }

  /* RTL-friendly */
  [dir="rtl"] input[type="search"] {
    text-align: right;
  }

  /* Disable number input spinners */
  input[type="number"]::-webkit-outer-spin-button,
  input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }
  input[type="number"] {
    -moz-appearance: textfield;
  }

  /* Tighter base heading defaults — using Manrope (--font-heading) */
  h1, h2, h3, h4, h5, h6 {
    @apply font-heading text-slate-900 dark:text-white;
    text-wrap: balance;
    font-family: var(--font-heading), system-ui, -apple-system, sans-serif;
  }

  /* Smooth focus offset color in light mode that's still visible on tinted bgs */
  :focus-visible.no-ring-offset {
    @apply ring-offset-0;
  }
}

@layer components {
  /* Skip-link for keyboard users */
  .skip-link {
    @apply sr-only;
  }
  .skip-link:focus {
    @apply not-sr-only fixed left-4 top-4 z-[100] rounded-xl bg-brand-600 px-4 py-2 text-sm font-semibold text-white shadow-elevated;
  }

  /* Section base — consistent vertical rhythm */
  .section {
    @apply py-16 sm:py-20 lg:py-28;
  }
  .section-tight {
    @apply py-12 sm:py-16 lg:py-20;
  }

  /* Eyebrow pill */
  .eyebrow {
    @apply inline-flex items-center gap-2 rounded-full border border-brand-200/60 bg-brand-50/80 px-3 text-xs font-semibold uppercase leading-none tracking-wider text-brand-700 backdrop-blur dark:border-brand-400/20 dark:bg-brand-500/10 dark:text-brand-300;
    padding-top: 5px;
    padding-bottom: 3px;
  }

  /* Subtle card hover */
  .card-hover {
    @apply transition duration-300 ease-snappy hover:-translate-y-1 hover:shadow-card;
  }

  /* Glass surface */
  .glass {
    @apply border border-white/60 bg-white/70 backdrop-blur-xl dark:border-white/10 dark:bg-slate-900/60;
  }

  /* Skeleton shimmer */
  .skeleton {
    @apply animate-shimmer rounded-lg bg-gradient-to-r from-slate-200/60 via-slate-100 to-slate-200/60 bg-[length:200%_100%] dark:from-slate-800/60 dark:via-slate-700/40 dark:to-slate-800/60;
  }

  /* Status / type badge — consistent base across all agent screens.
     Color classes (bg-*, text-*, ring-*) are injected per-instance. */
  .badge {
    @apply inline-flex items-center whitespace-nowrap;
    border-radius: var(--badge-radius);
    padding-inline: var(--badge-px);
    padding-block: var(--badge-py);
    font-size: var(--text-xs);
    font-weight: var(--badge-weight);
  }

  /* Label / metadata badge — version numbers, counts, small tags.
     Smaller text, bold, uppercase tracking. */
  .badge-label {
    @apply inline-flex items-center whitespace-nowrap uppercase tracking-wider;
    border-radius: var(--badge-radius);
    padding-inline: var(--badge-label-px);
    padding-block: var(--badge-label-py);
    font-size: var(--text-2xs);
    font-weight: 700;
  }

  /* Icon-only button — header actions (h-9 w-9, rounded-xl) */
  .btn-icon {
    @apply inline-flex items-center justify-center transition-colors;
    width: var(--btn-icon-md);
    height: var(--btn-icon-md);
    border-radius: var(--btn-icon-radius);
  }

  /* Icon-only button — compact pagination controls (h-8 w-8, rounded-lg) */
  .btn-icon-sm {
    @apply inline-flex items-center justify-center transition-colors;
    width: var(--btn-icon-sm);
    height: var(--btn-icon-sm);
    border-radius: var(--btn-icon-sm-radius);
  }
}

@layer utilities {
  .text-balance {
    text-wrap: balance;
  }
  .text-pretty {
    text-wrap: pretty;
  }

  /* Icon size utilities — use on SVG icon components instead of h-X w-X pairs */
  .icon-xs  { width: var(--icon-xs);  height: var(--icon-xs);  }
  .icon-sm  { width: var(--icon-sm);  height: var(--icon-sm);  }
  .icon-md  { width: var(--icon-md);  height: var(--icon-md);  }
  .icon-lg  { width: var(--icon-lg);  height: var(--icon-lg);  }
  .icon-xl  { width: var(--icon-xl);  height: var(--icon-xl);  }
  .icon-2xl { width: var(--icon-2xl); height: var(--icon-2xl); }
  .icon-3xl { width: var(--icon-3xl); height: var(--icon-3xl); }

  /* Icon container utilities — use on the rounded wrapper divs */
  .icon-box-sm { width: var(--icon-box-sm); height: var(--icon-box-sm); flex-shrink: 0; }
  .icon-box-md { width: var(--icon-box-md); height: var(--icon-box-md); flex-shrink: 0; }
  .icon-box-lg { width: var(--icon-box-lg); height: var(--icon-box-lg); flex-shrink: 0; }
  .icon-box-xl { width: var(--icon-box-xl); height: var(--icon-box-xl); flex-shrink: 0; }

  .grid-pattern {
    background-image: linear-gradient(
        to right,
        rgba(15, 23, 42, 0.04) 1px,
        transparent 1px
      ),
      linear-gradient(to bottom, rgba(15, 23, 42, 0.04) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: radial-gradient(ellipse at center, black 40%, transparent 80%);
    -webkit-mask-image: radial-gradient(ellipse at center, black 40%, transparent 80%);
  }
  .dark .grid-pattern {
    background-image: linear-gradient(
        to right,
        rgba(255, 255, 255, 0.05) 1px,
        transparent 1px
      ),
      linear-gradient(to bottom, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  }

  .gradient-text {
    background: linear-gradient(135deg, #326dff 0%, #a855f7 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }

  .gradient-text-animated {
    background: linear-gradient(135deg, #326dff 0%, #a855f7 50%, #326dff 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: gradientShift 6s ease infinite;
  }

  /* Soft conic mesh for hero backgrounds */
  .bg-mesh {
    background-image:
      radial-gradient(at 20% 20%, rgba(50, 109, 255, 0.18) 0px, transparent 50%),
      radial-gradient(at 80% 0%, rgba(168, 85, 247, 0.12) 0px, transparent 50%),
      radial-gradient(at 0% 50%, rgba(16, 185, 129, 0.08) 0px, transparent 50%),
      radial-gradient(at 80% 80%, rgba(50, 109, 255, 0.1) 0px, transparent 50%);
  }
  .dark .bg-mesh {
    background-image:
      radial-gradient(at 20% 20%, rgba(50, 109, 255, 0.22) 0px, transparent 50%),
      radial-gradient(at 80% 0%, rgba(168, 85, 247, 0.18) 0px, transparent 50%),
      radial-gradient(at 0% 50%, rgba(16, 185, 129, 0.1) 0px, transparent 50%),
      radial-gradient(at 80% 80%, rgba(50, 109, 255, 0.14) 0px, transparent 50%);
  }

  /* Tabular numerals for money values */
  .tabular-nums {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
  }
}

/* Page load entry */
main {
  animation: fadeIn 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes gradientShift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}