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

/* Add flash animation */
@keyframes flash {
  0% { background-color: transparent; }
  25% { background-color: theme('colors.gray.100'); }
  100% { background-color: transparent; }
}

@keyframes flash-dark {
  0% { background-color: transparent; }
  25% { background-color: theme('colors.gray.300'); }
  100% { background-color: transparent; }
}

@layer base {
  :root {
    /* Core colors */
    --background: 0 0% 100%;
    --foreground: 222.2 84% 4.9%;
    --table-row-border-color: #e0e0e0;

    /* Component colors */
    --card: 0 0% 100%;
    --card-foreground: 222.2 84% 4.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 222.2 84% 4.9%;
    --primary: 222.2 47.4% 11.2%;
    --primary-foreground: 210 40% 98%;
    --secondary: 210 40% 96.1%;
    --secondary-foreground: 222.2 47.4% 11.2%;
    --muted: 210 40% 96.1%;
    --muted-foreground: 215.4 16.3% 46.9%;
    --accent: 210 40% 96.1%;
    --accent-foreground: 222.2 47.4% 11.2%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;
    
    /* UI elements */
    --border: 214.3 31.8% 91.4%;
    --input: 214.3 31.8% 91.4%;
    --ring: 222.2 84% 4.9%;
    --radius: 0.5rem;
    
    /* Pause button */
    --pause-bg: rgb(240,240,240);
    --pause-border: rgb(200,200,200);
    --pause-color: #000;
    
    /* Navigation */
    --nav-active-bg: rgb(66, 66, 66);
    --nav-active-color: rgb(240, 240, 240);
  }

  .dark {
    /* Core colors */
    --background: 222.2 84% 4.9%;
    --foreground: 210 40% 98%;
    --table-row-border-color: #333;

    /* Component colors */
    --card: 222.2 84% 4.9%;
    --card-foreground: 210 40% 98%;
    --popover: 222.2 84% 4.9%;
    --popover-foreground: 210 40% 98%;
    --primary: 210 40% 98%;
    --primary-foreground: 222.2 47.4% 11.2%;
    --secondary: 217.2 32.6% 17.5%;
    --secondary-foreground: 210 40% 98%;
    --muted: 217.2 32.6% 17.5%;
    --muted-foreground: 215 20.2% 65.1%;
    --accent: 217.2 32.6% 17.5%;
    --accent-foreground: 210 40% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 210 40% 98%;
    
    /* UI elements */
    --border: 217.2 32.6% 17.5%;
    --input: 217.2 32.6% 17.5%;
    --ring: 212.7 26.8% 83.9%;
    
    /* Pause button */
    --pause-bg: rgb(40,40,40);
    --pause-border: rgb(94,94,94);
    --pause-color: #fff;
    
    /* Navigation */
    --nav-active-bg: rgb(66, 66, 66);
    --nav-active-color: rgb(240, 240, 240);
  }

  .light {
    --background: 0,0%,100%;
    --foreground: 0,0%,3.9%;
    --card: 0,0%,100%;
    --card-foreground: 0,0%,3.9%;
    --popover: 0,0%,100%;
    --popover-foreground: 0,0%,3.9%;
    --table-row-border-color: #e0e0e0;
  }

  body {
    background-color: hsl(var(--background));
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace
  }

  /* Visualization column styling */
  .viz-column-wrapper {
    color: #9d9d9d;
  }

  /* Component-specific styles */
  /* Table styles */
  table, th, td, tr {
    border-color: var(--table-row-border-color);
  }
  
  /* Button styles */
  button.pause-button {
    background-color: var(--pause-bg);
    border: 1px solid var(--pause-border);
    color: var(--pause-color);
    border-radius: 0.25rem;
  }
  
  button.pause-button svg {
    fill: var(--pause-color);
    color: var(--pause-color);
  }
  
  /* Dropdown styles */
  .light .settings-dropdown {
    background-color: #fff !important;
    border-color: var(--table-row-border-color) !important;
  }
  
  /* Sort arrow styles */
  .dark .sort-arrow {
    color: #000;
    background-color: #fff;
  }
}

/* Component-specific styles */
@layer components {
  /* Table styles */
  table, th, td, tr {
    border-color: var(--table-row-border-color);
  }
  
  /* Button styles */
  button.pause-button {
    background-color: var(--pause-bg);
    border: 1px solid var(--pause-border);
    color: var(--pause-color);
    border-radius: 0.25rem;
  }
  
  button.pause-button svg {
    fill: var(--pause-color);
    color: var(--pause-color);
  }
  
  /* Dropdown styles */
  .light .settings-dropdown {
    background-color: #fff !important;
    border-color: var(--table-row-border-color) !important;
  }
  
  /* Sort arrow styles */
  .dark .sort-arrow {
    color: #000;
    background-color: #fff;
  }

  /* Flash animation application */
  .flash-update {
    animation: flash 1s ease-out;
  }

  .dark .flash-update {
    animation-name: flash-dark; 
  }
  
  /* Navigation active state */
  .nav-active {
    background-color: var(--nav-active-bg);
    color: var(--nav-active-color);
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  }
}