@import "@fontsource/dm-sans/400.css";
@import "@fontsource/dm-sans/500.css";
@import "@fontsource/dm-sans/600.css";
@import "@fontsource/dm-sans/700.css";

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

/* FoodCost Live Design System - Professional Restaurant Cost Management */

@layer base {
  :root {
    --background: 40 20% 96%;
    --foreground: 150 10% 15%;

    --card: 0 0% 100%;
    --card-foreground: 150 10% 15%;

    --popover: 0 0% 100%;
    --popover-foreground: 150 10% 15%;

    --primary: 143 21% 55%;
    --primary-foreground: 0 0% 100%;

    --secondary: 40 15% 90%;
    --secondary-foreground: 150 10% 20%;

    --muted: 40 15% 92%;
    --muted-foreground: 150 8% 45%;

    --accent: 143 21% 55%;
    --accent-foreground: 0 0% 100%;

    --destructive: 0 72% 51%;
    --destructive-foreground: 0 0% 100%;

    --success: 143 35% 45%;
    --success-foreground: 0 0% 100%;

    --warning: 38 92% 50%;
    --warning-foreground: 0 0% 100%;

    --border: 40 12% 87%;
    --input: 40 12% 87%;
    --ring: 143 21% 55%;

    --radius: 0.75rem;

    --sidebar-background: 150 15% 14%;
    --sidebar-foreground: 143 10% 85%;
    --sidebar-primary: 143 21% 55%;
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent: 150 15% 20%;
    --sidebar-accent-foreground: 143 10% 90%;
    --sidebar-border: 150 12% 22%;
    --sidebar-ring: 143 21% 55%;

    --chart-1: 143 21% 55%;
    --chart-2: 143 35% 45%;
    --chart-3: 200 70% 50%;
    --chart-4: 280 65% 60%;
    --chart-5: 340 75% 55%;
  }

  .dark {
    --background: 150 15% 8%;
    --foreground: 143 10% 95%;

    --card: 150 15% 11%;
    --card-foreground: 143 10% 95%;

    --popover: 150 15% 11%;
    --popover-foreground: 143 10% 95%;

    --primary: 143 21% 55%;
    --primary-foreground: 0 0% 100%;

    --secondary: 150 14% 16%;
    --secondary-foreground: 143 10% 90%;

    --muted: 150 14% 18%;
    --muted-foreground: 143 8% 55%;

    --accent: 143 21% 55%;
    --accent-foreground: 0 0% 100%;

    --destructive: 0 72% 51%;
    --destructive-foreground: 0 0% 100%;

    --success: 143 35% 45%;
    --success-foreground: 0 0% 100%;

    --warning: 38 92% 50%;
    --warning-foreground: 150 15% 10%;

    --border: 150 12% 18%;
    --input: 150 12% 18%;
    --ring: 143 21% 55%;

    --sidebar-background: 150 15% 6%;
    --sidebar-foreground: 143 10% 75%;
    --sidebar-primary: 143 21% 55%;
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent: 150 15% 12%;
    --sidebar-accent-foreground: 143 10% 90%;
    --sidebar-border: 150 12% 14%;
    --sidebar-ring: 143 21% 55%;
  }
}

@layer base {
  * {
    @apply border-border;
  }

  body {
    @apply bg-background text-foreground font-sans antialiased;
    font-family: "DM Sans", system-ui, sans-serif;
  }
}

@layer utilities {
  .glass {
    @apply bg-card/80 backdrop-blur-xl border border-border/50;
  }

  .glass-hover {
    @apply hover:bg-card/90 hover:border-border transition-all duration-200;
  }

  .gradient-primary {
    background: linear-gradient(135deg, hsl(143 21% 55%) 0%, hsl(143 25% 50%) 100%);
  }

  .gradient-success {
    background: linear-gradient(135deg, hsl(143 35% 45%) 0%, hsl(143 40% 50%) 100%);
  }

  .gradient-card {
    background: linear-gradient(180deg, hsl(var(--card)) 0%, hsl(var(--card) / 0.8) 100%);
  }

  .text-gradient {
    @apply bg-clip-text text-transparent;
    background-image: linear-gradient(135deg, hsl(143 21% 55%) 0%, hsl(143 30% 45%) 100%);
  }

  .animate-fade-in {
    animation: fadeIn 0.3s ease-out;
  }

  .animate-slide-up {
    animation: slideUp 0.4s ease-out;
  }

  .animate-scale-in {
    animation: scaleIn 0.2s ease-out;
  }

  .animate-float {
    animation: float 3s ease-in-out infinite;
  }

  .animate-float-delayed {
    animation: float 3s ease-in-out infinite 0.5s;
  }

  .animate-float-slow {
    animation: float 4s ease-in-out infinite 1s;
  }
}

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

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

@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

/* Print Styles for Inventory Count Sheet */
@media print {
  /*
    Hide everything by default using visibility (not display), so nested
    `.print-only` content can still be revealed even if it's inside `#root`.
  */
  body * {
    visibility: hidden !important;
  }

  /* Show and position print content */
  .print-only,
  .print-only * {
    visibility: visible !important;
  }

  .print-only {
    display: block !important;
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
  }

  /* Preserve table layout in print engines that try to reflow */
  .print-only table {
    display: table !important;
  }
  .print-only thead {
    display: table-header-group !important;
  }
  .print-only tbody {
    display: table-row-group !important;
  }
  .print-only tr {
    display: table-row !important;
  }
  .print-only th,
  .print-only td {
    display: table-cell !important;
  }

  /* Hide elements with print:hidden class */
  .print\\:hidden {
    display: none !important;
  }

  /* Page settings */
  @page {
    size: letter portrait;
    margin: 0.5in;
  }
}