/**
 * Main Stylesheet
 * すべてのCSSモジュールをインポート
 */

/* ===== Base Styles ===== */
@import './base/variables.css';
@import './base/reset.css';
@import './base/typography.css';

/* ===== Layout ===== */
@import './layout/layout.css';

/* ===== Components ===== */
@import './components/buttons.css';
@import './components/forms.css';
@import './components/table.css';
@import './components/modal.css';
@import './components/utilities.css';

/* ===== Legacy Styles (to be refactored) ===== */
/* 以下のスタイルは既存のコードとの互換性のために残しています */

/* レスポンシブデザインの微調整 */
@media (max-width: 768px) {
  .search-bar {
    flex-direction: column;
  }

  .search-bar input,
  .search-bar button {
    width: 100%;
  }

  .file-upload {
    flex-direction: column;
  }

  .file-upload input,
  #import-btn {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .search-bar {
    flex-direction: column;
    gap: var(--spacing-xs);
  }

  .search-bar button {
    font-size: var(--font-size-xs);
  }

  .form-actions {
    flex-direction: column;
  }
}