@import "tailwindcss";
@source "../../../app/javascript/**/*.{svelte,js,ts}";
@source "../../../node_modules/layerchart/dist/**/*.{svelte,js}";
@import "./main.css";
@import "./nav.css";
@import "./filterable_dashboard.css";

body {
  @apply flex min-h-screen;
}

main {
  @apply flex-1 p-5 mb-24 transition-[margin-left,max-width] duration-300 ease-in-out;
}

@media (max-width: 1023px) {
  main {
    @apply ml-0 max-w-full p-5 pt-16;
  }
}

@theme {
  --color-darker: #1f1617;
  --color-dark: #2a1f21;
  --color-darkless: #4a2d31;
  --color-red: #c8394f;
  --color-orange: #ff8c37;
  --color-yellow: #f1c40f;
  --color-green: #33d6a6;
  --color-cyan: #5bc0de;
  --color-blue: #338eda;
  --color-purple: #a633d6;
  --color-primary: #c8394f;
  --color-secondary: #6e6468;

  --color-muted: #6e6468;
  --color-text-muted: #6e6468;

  --color-surface: #2a1f21;
  --color-surface-100: #3a292d;
  --color-surface-200: #4a3438;
  --color-surface-300: #5a3f44;
  --color-surface-content: #f3ecee;
  --color-info: #5bc0de;
  --color-success: #33d6a6;
  --color-warning: #f1c40f;
  --color-danger: #c8394f;
}

.project-toggle-group {
  @apply flex items-center gap-2 rounded-lg p-1;
  background-color: var(--color-darkless);
}

.project-toggle-btn {
  @apply px-3 py-1 rounded transition-all duration-200 font-medium cursor-pointer;
  color: var(--color-secondary);
}

.project-toggle-btn:hover {
  color: var(--color-cyan);
}

.project-toggle-btn.active {
  background-color: var(--color-primary);
  color: white;
}

.project-toggle-btn.active:hover {
  background-color: var(--color-primary);
  opacity: 0.9;
}

.project-toggle-btn.inactive {
  color: var(--color-secondary);
}

.interval-selector-button {
  background-color: var(--color-primary);
  color: white;
}

.interval-selector-button:hover {
  background-color: var(--color-primary);
  opacity: 0.9;
}