/**
 * @file globals.css
 * @description グローバルスタイルとコンポーネントスタイルの定義
 * 
 * このファイルには以下が含まれます：
 * - Tailwind CSSの基本設定
 * - プロジェクト共通のコンポーネントスタイル
 * - ダークモード設定
 * - カラーテーマ変数
 */

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

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem 1rem;
}

@layer components {
  /* プロジェクトタイプのバッジスタイル */
  .project-type-badge {
    @apply px-2 py-0.5 text-xs rounded;
  }

  .project-type-spine {
    @apply bg-blue-100 text-blue-800;
  }

  .project-type-3d {
    @apply bg-red-100 text-red-800;
  }

  .project-type-2d {
    @apply bg-green-100 text-green-800;
  }

  .project-type-training {
    @apply bg-orange-100 text-orange-800;
  }

  /* ガントチャートのタスクバースタイル */
  .task-bar {
    @apply absolute h-8 flex items-center transition-all duration-300;
  }

  .task-bar-spine {
    @apply bg-blue-500;
  }

  .task-bar-3d {
    @apply bg-red-500;
  }

  .task-bar-2d {
    @apply bg-green-500;
  }

  .task-bar-training {
    @apply bg-orange-500;
  }

  /* アサインメントのステータスバッジ */
  .assignment-badge {
    @apply px-1.5 py-0.5 text-xs rounded;
  }

  .assignment-badge-external {
    @apply bg-blue-50 text-blue-600;
  }

  .assignment-badge-concurrent {
    @apply bg-orange-50 text-orange-600;
  }

  /* フォームコンポーネント */
  .form-section {
    @apply space-y-4 p-4 rounded-lg;
  }

  .form-section-primary {
    @apply bg-blue-50;
  }

  .form-section-secondary {
    @apply bg-green-50;
  }

  .form-label {
    @apply text-sm font-medium;
  }

  .form-label-primary {
    @apply text-blue-800;
  }

  .form-label-secondary {
    @apply text-green-800;
  }

  /* カードスタイル */
  .project-card {
    @apply bg-white p-3 rounded-lg shadow-sm;
  }

  .project-card-header {
    @apply flex items-center gap-2;
  }

  /* ガントチャートのグリッドスタイル */
  .gantt-grid {
    @apply border-r border-gray-200;
  }

  .gantt-grid-today {
    @apply bg-blue-100 opacity-30;
  }

  .gantt-header {
    @apply flex h-8 border-b border-gray-200 bg-white sticky top-0 z-10;
  }

  .gantt-month-cell {
    @apply flex-none border-r border-gray-200 px-2 font-medium bg-white;
  }

  .gantt-day-cell {
    @apply flex-none relative border-r border-gray-200 px-2 text-sm;
  }
}

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 222.2 84% 4.9%;
    --card: 0 0% 100%;
    --card-foreground: 222.2 84% 4.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 222.2 84% 4.9%;
    --primary: 221.2 83.2% 53.3%;
    --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%;
    --border: 214.3 31.8% 91.4%;
    --input: 214.3 31.8% 91.4%;
    --ring: 221.2 83.2% 53.3%;
    --radius: 0.5rem;
  }
 
  .dark {
    --background: 222.2 84% 4.9%;
    --foreground: 210 40% 98%;
    --card: 222.2 84% 4.9%;
    --card-foreground: 210 40% 98%;
    --popover: 222.2 84% 4.9%;
    --popover-foreground: 210 40% 98%;
    --primary: 217.2 91.2% 59.8%;
    --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%;
    --border: 217.2 32.6% 17.5%;
    --input: 217.2 32.6% 17.5%;
    --ring: 224.3 76.3% 48%;
  }
}