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

:root {
  --background: 250 250 250;
  --foreground: 17 24 39;
  --card: 255 255 255;
  --card-foreground: 17 24 39;
  --popover: 255 255 255;
  --popover-foreground: 17 24 39;
  --primary: 59 130 246;
  --primary-foreground: 255 255 255;
  --secondary: 243 244 246;
  --secondary-foreground: 17 24 39;
  --muted: 243 244 246;
  --muted-foreground: 107 114 128;
  --accent: 243 244 246;
  --accent-foreground: 17 24 39;
  --destructive: 239 68 68;
  --destructive-foreground: 255 255 255;
  --border: 229 231 235;
  --input: 229 231 235;
  --ring: 59 130 246;
}

.dark {
  --background: 26 32 44;
  --foreground: 237 242 247;
  --card: 45 55 72;
  --card-foreground: 237 242 247;
  --popover: 45 55 72;
  --popover-foreground: 237 242 247;
  --primary: 49 130 206;
  --primary-foreground: 255 255 255;
  --secondary: 74 85 104;
  --secondary-foreground: 237 242 247;
  --muted: 74 85 104;
  --muted-foreground: 203 213 224;
  --accent: 74 85 104;
  --accent-foreground: 237 242 247;
  --destructive: 239 68 68;
  --destructive-foreground: 255 255 255;
  --border: 74 85 104;
  --input: 74 85 104;
  --ring: 49 130 206;
}

@layer base {
  body {
    @apply bg-background text-foreground transition-colors duration-300;
  }
  h1, h2, h3, h4, h5, h6 {
    @apply text-foreground;
  }
  a {
    @apply text-primary hover:text-primary-foreground transition-colors duration-200;
  }
  input,
  select,
  textarea {
    @apply bg-background text-foreground border-input p-2 rounded-md w-full mt-2;
  }
  button,
  .btn {
    @apply bg-primary text-primary-foreground py-2 px-4 rounded transition-colors duration-200 hover:bg-primary/90;
  }
}

@layer components {
  .container {
    @apply w-full max-w-6xl mx-auto px-4 pt-4;
  }
  .menu-item {
    @apply text-foreground hover:bg-secondary hover:text-secondary-foreground transition-colors duration-200;
  }
  .menu-item.active {
    @apply bg-primary text-primary-foreground;
  }
  .action-link {
    @apply bg-secondary text-secondary-foreground hover:bg-accent hover:text-accent-foreground transition-colors duration-200;
  }
  #darkModeToggle {
    @apply relative w-16 h-8 rounded-full p-0.5 transition-colors duration-300 ease-in-out bg-gray-200 dark:bg-gray-700;
  }
  #darkModeToggle:focus {
    @apply outline-none ring-2 ring-primary;
  }
  #darkModeSlider {
    @apply absolute left-1 top-1 w-6 h-6 rounded-full bg-white shadow-md transform transition-transform duration-300 ease-in-out;
  }
  .dark #darkModeSlider {
    @apply translate-x-7 bg-gray-300;
  }
  .login-form {
    @apply bg-card text-card-foreground p-8 rounded-lg shadow-lg w-full max-w-md mx-auto mt-8;
  }
  .login-form h1 {
    @apply text-center mb-6;
  }
  .login-form .error-message {
    @apply text-destructive mb-4;
  }
  .media-table {
    @apply w-full table-fixed;
  }
  .media-table th,
  .media-table td {
    @apply p-2 overflow-hidden text-ellipsis whitespace-nowrap;
  }
  .media-table .col-name {
    @apply w-3/5;
  }
  .media-table .col-size,
  .media-table .col-modified {
    @apply w-1/5;
  }
}

@layer utilities {
  .chart-container {
    @apply text-foreground;
  }
  .chart-container .chart-title,
  .chart-container .chart-label {
    @apply fill-current;
  }
  .chart-container .chart-grid line {
    @apply stroke-border;
  }
  .chart-container .chart-axis path,
  .chart-container .chart-axis line {
    @apply stroke-foreground;
  }
}

@media (max-width: 640px) {
  body {
    @apply text-sm;
  }
  h1 {
    @apply text-xl;
  }
  .container {
    @apply px-4;
  }
  .chart-container {
    height: 300px;
  }
}

@media (min-width: 641px) and (max-width: 1024px) {
  .container {
    @apply px-3;
  }
  .chart-container {
    height: 400px;
  }
}

@media (min-width: 1025px) {
  .container {
    @apply px-4;
  }
  .chart-container {
    height: 500px;
  }
}

.hidden {
    display: none !important;
}