/* テーブルブロック拡張機能のスタイル */

/* 基本テーブルスタイル */
/* .wp-block-table, */
.wp-block-table table {
  border-collapse: collapse;
  width: 100%;
  font-size: 16px;
  line-height: 175%;
  border: 1px solid var(--border-color, #2b3c5c);
}

.wp-block-table th,
.wp-block-table td {
  padding: 28px 20px;
  border: 1px solid var(--border-color, #2b3c5c);
  vertical-align: middle;
}

.wp-block-table th {
  font-weight: 600;
  color: var(--header-text-color, #fff);
  background-color: var(--header-bg-color, #24bbfc) !important;
  position: relative !important;
}

/* ストライプ行スタイル */
.wp-block-table table[data-striped] tbody tr:nth-child(odd) {
  background-color: var(--striped-row-color, #f8f9fa);
}

.wp-block-table table[data-striped="true"] tbody tr:nth-child(even) {
  background-color: #ffffff;
}

/* ヘッダー背景色 - より高い優先度で適用 */
.wp-block-table table[data-header-bg] th,
.wp-block-table table[data-header-bg] thead th,
.wp-block-table table[data-header-bg] tbody th {
  background-color: var(--header-bg-color, #24bbfc) !important;
}

/* ヘッダー文字色 - より高い優先度で適用 */
.wp-block-table table[data-header-bg] th,
.wp-block-table table[data-header-bg] thead th,
.wp-block-table table[data-header-bg] tbody th {
  color: var(--header-text-color, #fff) !important;
}

/* エディタ内でのTHスタイル強化 */
.editor-styles-wrapper .wp-block-table table[data-header-bg] th,
.editor-styles-wrapper .wp-block-table table[data-header-bg] thead th,
.editor-styles-wrapper .wp-block-table table[data-header-bg] tbody th {
  background-color: var(--header-bg-color, #24bbfc) !important;
  color: var(--header-text-color, #fff) !important;
}

/* 罫線色 */
.wp-block-table table[data-border-color] {
  border-color: var(--border-color, #2b3c5c);
}

.wp-block-table table[data-border-color] th,
.wp-block-table table[data-border-color] td {
  border-color: var(--border-color, #2b3c5c);
}

/* スクロール可能テーブル */
.wp-block-table table[data-scrollable="true"] {
  min-width: 600px;
}

.table-scroll-wrapper {
  overflow-x: auto;
  max-width: 100%;
  border: 1px solid #ddd;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* エディター用スタイル */
.editor-styles-wrapper .wp-block-table td,
.editor-styles-wrapper .wp-block-table th {
  cursor: pointer;
  user-select: none;
  transition: background-color 0.2s ease;
}

.editor-styles-wrapper .wp-block-table td:hover,
.editor-styles-wrapper .wp-block-table th:hover {
  background-color: rgba(0, 124, 186, 0.1);
}

/* レスポンシブデザイン */
@media (max-width: 768px) {
  .wp-block-table {
    font-size: 13px;
  }

  .wp-block-table th,
  .wp-block-table td {
    padding: 8px 10px;
  }
}

@media (max-width: 480px) {
  .wp-block-table {
    font-size: 14px;
    line-height: 150%;
  }

  .wp-block-table th,
  .wp-block-table td {
    padding: 6px 8px;
  }
}

/* アニメーション */
.wp-block-table tbody tr {
  transition: background-color 0.2s ease;
}

.wp-block-table tbody tr:hover {
  background-color: rgba(0, 124, 186, 0.05);
}

/* 結合セルのスタイル */
.wp-block-table td[colspan],
.wp-block-table th[colspan],
.wp-block-table td[rowspan],
.wp-block-table th[rowspan] {
  background-color: #f8f9fa;
  font-weight: 500;
}

/* テーブルキャプション */
.wp-block-table figcaption {
  font-style: italic;
  color: #6c757d;
  margin-top: 8px;
  font-size: 13px;
}

/* アクセシビリティ */
.wp-block-table table[data-sortable="true"] th:focus {
  outline: 2px solid #007cba;
  outline-offset: -2px;
}

.wp-block-table table[data-sortable="true"] th:focus-visible {
  outline: 2px solid #007cba;
  outline-offset: -2px;
}

/* スクリーンリーダー用 */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ローディング状態 */
.table-loading {
  opacity: 0.6;
  pointer-events: none;
}

.table-loading::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  margin: -10px 0 0 -10px;
  border: 2px solid #f3f3f3;
  border-top: 2px solid #007cba;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.block-editor-block-inspector .ai-table-custom .components-base-control,
.block-editor-block-inspector .ai-table-custom .components-base-control div {
  margin-bottom: 0 !important;
}