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

/***********************************************************
 * FlingShare Global Stylesheet – v2.0
 * ~350 lines – comprehensive utility & component layer
 ***********************************************************/

/* ========== DESIGN TOKENS & GLOBAL RESET ========== */
@layer base {
  :root {
    --brand-50 : theme(colors.teal.50);
    --brand-100: theme(colors.teal.100);
    --brand-200: theme(colors.teal.200);
    --brand-300: theme(colors.teal.300);
    --brand-400: theme(colors.teal.400);
    --brand-500: theme(colors.teal.500);
    --brand-600: theme(colors.teal.600);
    --brand-700: theme(colors.teal.700);
    --brand-800: theme(colors.teal.800);
    --brand-900: theme(colors.teal.900);

    --gray-950: theme(colors.gray.950);
    --gray-900: theme(colors.gray.900);
    --gray-800: theme(colors.gray.800);
    --gray-700: theme(colors.gray.700);
    --gray-600: theme(colors.gray.600);
    --gray-500: theme(colors.gray.500);
    --gray-400: theme(colors.gray.400);
    --gray-300: theme(colors.gray.300);
    --gray-200: theme(colors.gray.200);
    --gray-100: theme(colors.gray.100);

    --font-sans : "Inter", system-ui, sans-serif;
    --font-mono : "Roboto Mono", ui-monospace, monospace;

    --radius     : 1rem;
    --blur       : 18px;
    --header-h   : 4.5rem;

    --duration   : .35s;
    --easing-out : cubic-bezier(.4,0,.2,1);
  }

  *,*::before,*::after { @apply box-border; }
  html { scroll-behavior: smooth; }
  body {
    font-family: var(--font-sans);
    @apply bg-[color:var(--gray-950)] text-gray-100 min-h-screen antialiased leading-relaxed selection:bg-teal-500/70;
  }

  h1,h2,h3,h4,h5,h6 { @apply font-extrabold tracking-tight text-white break-words; }
  h1 { @apply text-4xl lg:text-5xl xl:text-6xl; }
  h2 { @apply text-3xl lg:text-4xl; }
  h3 { @apply text-2xl lg:text-3xl; }

  a { @apply text-teal-400 underline-offset-4 hover:text-teal-300 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-teal-500; }

  ul,ol { @apply list-disc ml-6 space-y-1; }
  code   { @apply font-mono text-pink-400; }
  pre    { @apply block bg-gray-900 p-4 rounded-lg overflow-x-auto text-sm; }

  img,svg { @apply max-w-full h-auto align-middle; }
}

/* ========== COMPONENTS ========== */
@layer components {
  /* ====== BUTTONS ====== */
  .btn-base {
    @apply inline-flex items-center gap-2 px-3 py-1 text-xs rounded font-semibold transition-colors duration-200 focus:outline-none;
  }
  .btn-primary {
    @apply btn-base bg-teal-500 text-gray-900 hover:bg-teal-400 active:bg-teal-600;
  }
  .btn-secondary {
    @apply btn-base bg-white/10 text-teal-300 ring-1 ring-teal-500/30 hover:bg-white/15;
  }
  .btn-danger {
    @apply btn-base bg-red-600 text-white hover:bg-red-500 ring-1 ring-red-500/30;
  }
  .btn-glass {
    @apply btn-base backdrop-blur-md bg-white/5 ring-1 ring-white/10 hover:bg-white/10;
  }
  .btn-disabled {
    @apply bg-gray-700 text-gray-400 cursor-default;
  }
  .membership-btn {
    @apply btn-primary w-full max-w-xs mt-4;
  }

  /* ====== NAVBAR ====== */
  .navbar {
    @apply sticky top-0 z-40 h-[var(--header-h)] flex items-center px-6 bg-gray-950/80 backdrop-blur supports-[backdrop-filter]:bg-gray-950/60;
  }
  .nav-list { @apply flex gap-8 text-sm font-medium; }
  .nav-item { @apply relative after:absolute after:-bottom-1 after:left-0 after:h-[2px] after:w-0 after:bg-teal-400 after:rounded-full after:transition-all after:duration-[var(--duration)] hover:after:w-full; }
  .nav-item.active { @apply after:w-full text-teal-300; }

  /* ====== HERO ====== */
  .hero {
    @apply relative isolate flex flex-col items-center text-center py-24 lg:py-32 px-6 overflow-hidden;
  }
  .hero::before{ content:""; @apply absolute inset-0 -z-10 bg-gradient-to-br from-teal-500/10 via-indigo-600/5 to-gray-900; }
  .hero::after { content:""; @apply absolute -top-32 -left-48 size-[500px] bg-teal-500/30 rounded-full blur-[120px] opacity-50 pointer-events-none -z-10; }

  /* ====== CARDS & TABLES ====== */
  .card {
    @apply bg-gray-900/60 ring-1 ring-white/5 backdrop-blur-[var(--blur)] rounded-[var(--radius)] shadow-lg;
  }
  .card-hover { @apply transition shadow-[0_6px_14px_rgba(0,0,0,.4)] hover:shadow-[0_10px_24px_rgba(0,0,0,.5)]; }

  /* ====== PRICING CARDS ====== */
  .plan-card {
    @apply card-hover card p-10 flex flex-col gap-6 text-left;
  }
  .plan-card .title { @apply text-3xl font-extrabold; }
  .plan-card .price { @apply text-5xl font-black text-teal-400 leading-none; }
  .plan-card .feature-list li {
    @apply flex items-start gap-3 before:content-[""] before:inline-block before:size-2.5 before:mt-2.5 before:bg-teal-400 before:rounded-full;
  }
  .plan-card.featured { @apply ring-2 ring-teal-500 scale-105; }

  /* ====== ACCORDION ====== */
  .accordion { @apply rounded-[var(--radius)] overflow-hidden divide-y divide-gray-800 w-full; }
  .accordion-item summary {
    @apply flex justify-between items-center cursor-pointer gap-4 py-4 px-6 bg-gray-900/50 hover:bg-gray-800/60 transition-colors list-none marker:hidden;
  }
  .accordion-item[open] summary{@apply bg-gray-800/70; }
  .accordion-item[open] summary svg{ @apply rotate-180; }
  .accordion-body { @apply p-6 text-gray-300 space-y-3; }

  /* ====== TOASTS ====== */
  .toast {
    @apply fixed left-1/2 -translate-x-1/2 mt-6 flex items-center gap-3 px-5 py-3 rounded-lg shadow-lg text-sm text-white backdrop-blur-lg animate-slide-up;
  }
  .toast-info    { @apply bg-teal-600/80; }
  .toast-success { @apply bg-emerald-600/80; }
  .toast-error   { @apply bg-rose-600/80; }

  /* ====== MODALS ====== */
  .modal-overlay{ @apply fixed inset-0 bg-black/70 backdrop-blur flex items-center justify-center z-[60] p-6; }
  .modal-dialog { @apply card p-8 max-w-lg w-full transition-transform translate-y-8 opacity-0 data-[state=open]:translate-y-0 data-[state=open]:opacity-100; }

  /* ====== DASHBOARD STATS ====== */
  .stat {
    @apply card-hover card p-8 text-center;
  }
  .stat-title  { @apply text-xs uppercase tracking-widest text-gray-400 mb-2; }
  .stat-value  { @apply text-4xl font-black text-teal-400; }

  /* ====== SKELETON LOADER ====== */
  .skeleton { @apply animate-pulse bg-gray-800 rounded-md; }

  /* ====== MISC ====== */
  .tilt {
    perspective: 1000px;
    transform-style: preserve-3d;
    transition: transform .4s cubic-bezier(.16,.84,.44,1);
  }
  .tilt:hover { transform: rotateX(8deg) rotateY(-8deg) scale(1.02); }

  .hoverable-plan {
    @apply transition-all duration-300 border-2 border-transparent transform;
  }
  .hoverable-plan:hover {
    @apply border-teal-500 scale-105;
  }
}

/* ========== UTILITIES ========== */
@layer utilities {
  .scrollbar {
    scrollbar-width: thin;
    scrollbar-color: var(--brand-500) transparent;
  }
  .scrollbar::-webkit-scrollbar { width: 8px; }
  .scrollbar::-webkit-scrollbar-thumb { @apply bg-teal-500/80 rounded-full; }

  .backdrop {
    background: rgba(0,0,0,.45);
    backdrop-filter: blur(var(--blur));
  }

  @keyframes fade { from{opacity:0} to{opacity:1} }
  @keyframes slide-up { from{opacity:0; transform:translateY(20px);} to{opacity:1; transform:translateY(0);} }

  .fade      { animation: fade var(--duration) var(--easing-out) both; }
  .slide-up  { animation: slide-up var(--duration) var(--easing-out) both; }

  /* --- Fade-in for uploads, table rows, modals, toasts --- */
  @keyframes fade-in {
    from { opacity: 0; transform: scale(0.97);}
    to   { opacity: 1; transform: scale(1);}
  }
  .animate-fade-in {
    animation: fade-in 0.35s cubic-bezier(.4,0,.2,1);
  }

  /* --- Table row hover effect --- */
  tr.hover\:bg-gray-800\/50:hover {
    background-color: rgb(31 41 55 / 0.5) !important;
    box-shadow: 0 1px 6px 0 rgba(20,184,166,0.07);
    transition: background .2s, box-shadow .25s;
  }

  /* --- Strong focus ring (optional, for accessibility) --- */
  .focus-strong:focus-visible {
    box-shadow: 0 0 0 3px var(--brand-400), 0 1px 8px 0 rgba(20,184,166,0.10) !important;
  }

  .sr-focusable:focus {
    position: static !important;
    width: auto !important;
    height: auto !important;
    clip: auto !important;
    @apply m-0 p-2 overflow-visible whitespace-normal;
  }

  @container plan (min-width: 24rem) {
    .plan-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  }
  @container plan (min-width: 48rem) {
    .plan-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
  }
}

/* ========== MEDIA QUERIES & MOTION ========== */
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

@media (prefers-color-scheme: dark) {
  body { @apply bg-gray-950 text-gray-100; }
  .card { @apply bg-gray-900/70 ring-white/10; }
  .btn-secondary { @apply text-teal-300 ring-teal-500/50 bg-white/5 hover:bg-white/10; }
}

@media print {
  @page { margin: .75in; }
  body { @apply bg-white text-black; }
  .navbar, .hero::after { display:none !important; }
  a::after { content: " (" attr(href) ")"; font-size: .85em; }
}

/* ===================== Account Dropdown Free Tier Styles ===================== */
.account-tooltip {
  display: none;
  position: fixed;
  z-index: 1000;
  background: #222;
  color: #fff;
  padding: 6px 12px;
  border-radius: 4px;
  font-size: 0.95em;
  pointer-events: none;
  white-space: nowrap;
  opacity: 0.97;
}
.free-tier-item {
  cursor: not-allowed !important;
  user-select: none;
  color: #9ca3af !important; /* Tailwind gray-400 */
}

/* ========== Legacy Fade-in Animation (for older modals/toasts) ========== */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(0.25rem); }
  to { opacity: 1; transform: translateY(0); }
}
.animate-fadeIn {
  animation: fadeIn 0.3s ease forwards;
}

#animatedPricingHeadline {
  transition: opacity 0.4s ease;
}