/* ==========================================================================
   DataTables Core
   ========================================================================== */
table.table.dataTable {
  /* 共通：th, td */
  > thead > tr > th,
  > tbody > tr > td {
    vertical-align: middle;
    white-space: nowrap; /* 重複を整理し、一元化 */
  }

  /* ヘッダー全体（th） */
  > thead > tr > th {
    padding: 2px 1rem;
    color: white;
    background-color: var(--ftc-color);
    text-align: center;

    /* 【数値・日付共通】 */
    &.dt-type-numeric,
    &.dt-type-date {
      text-align: center; /* 自動の右寄せを強制左(中央)寄せ */

      /* タイトルとソートアイコンの順番を固定 */
      div.dt-column-header {
        flex-direction: row;
      }
      /* 右寄せ用のスタイルをOFF */
      .dt-column-order {
        left: auto;
      }
    }

    /* ソートアイコンの基本スタイル */
    > div.dt-column-header > span.dt-column-order {
      &:before, &:after {
        opacity: 0.3; /* 背景色が赤なので目立つよう濃く */
      }
    }

    /* ソートアイコン（アクティブ時） */
    &.dt-ordering-asc > div.dt-column-header > span.dt-column-order:before,
    &.dt-ordering-desc > div.dt-column-header > span.dt-column-order:after {
      opacity: 0.7;
    }
  }

  /* ボディ全体（td） */
  > tbody > tr > td {
    padding: 2px 0.5rem;
    color: #333;
    border-bottom-color: #dee2e6;

    /* 【日付】中央寄せ */
    &.dt-type-date {
      text-align: center;
    }
  }
}

/* td 選択行背景色 */
div.dt-scroll > div.dt-scroll-body > table.dataTable.table-hover > tbody > tr.selected > td {
  background-color: var(--ftc-middle-color);
  border-color: var(--ftc-middle-color);
  box-shadow: none;
  color: #333;
}


/* ==========================================================================
   DataTables Buttons
   ========================================================================== */
div.dt-container div.dt-buttons {
  /* 基本ボタン（btn-group内） */
  &.btn-group {
    button.btn {
      background: var(--ftc-color);
      border-color: transparent;
      color: white;
      font-size: 16px;
      opacity: 1;
      border-radius: 2px;
      margin-right: 10px; /* bootstrap打消し用を統合 */
    }

    /* ------------------------------------------------------------------------
       【追加】Submit無しボタン（基本ボタンと同じ階層なのでここに記述）
       ------------------------------------------------------------------------ */
    button.btn.non-submit-btn {
      background: no-repeat white;
      border-color: var(--ftc-color);
      color: var(--ftc-color);

      /* アクティブ・ホバー・フォーカス時（通常ボタンのホバーに勝つためにここにネスト） */
      &:active:not(.disabled),
      &:hover:not(.disabled),
      &:focus:not(.disabled) {
        background: no-repeat var(--ftc-light-color);
        border-color: var(--ftc-color);
      }
    }

    /* レスポンシブ対応（メディアクエリもネスト内に集約） */
    @media screen and (max-width: 991px) {
      justify-content: center;

      button.btn {
        margin: 5px;
        flex: unset;
      }
    }
  }

  /* 通常ボタン：アクティブ・ホバー・フォーカス時 */
  /* ※ :not(.non-submit-btn) を付与することで、Submit無しボタンへの干渉を確実に防ぎます */
  > button.btn:not(.non-submit-btn):active:not(.disabled):hover:not(.disabled),
  > button.btn:not(.non-submit-btn):hover,
  button.btn:not(.non-submit-btn):focus {
    background: var(--ftc-hover-color);
    border-color: transparent;
    text-shadow: none;
  }

  /* ボタン：非活性時 */
  button.btn.disabled {
    background: var(--button-disable-color);
  }
}

/* ==========================================================================
   Pagination
   ========================================================================== */
div.dt-paging ul.pagination li.dt-paging-button.page-item {
  background: none;
  border: none;
  box-shadow: none;
  padding: 0;
  margin: 0;
  width: 36px;

  &:hover {
    border: none;
  }

  /* 内包するbutton要素 */
  button.page-link {
    border: 1px solid #dee2e6;
    box-shadow: none;
    width: 100%;
    color: dimgray;
    padding: 0.5em 0;
  }

  /* アクティブ状態 */
  &.active button.page-link {
    color: white;
    background-color: var(--ftc-color);
    border-color: var(--ftc-color);
  }

  /* 非活性状態 */
  &.disabled button.page-link {
    background-color: gainsboro;
  }
}


/* ==========================================================================
   Search Box
   ========================================================================== */
div.dt-container div.dt-search > input.form-control-sm {
  background: no-repeat url(../../image/icon/search.svg);
  background-size: 20px;
  background-position: 5px 50%;
  border: 1px solid var(--default-border-color);
  border-radius: 2px;
  padding-left: 30px;

  &:focus {
    border-color: var(--ftc-color);
    box-shadow: none;
  }
}

/* ==========================================================================
   Table Inputs
   ========================================================================== */
table.table.dataTable > tbody > tr > td input.dt-input-value {
  width: 100%;
  min-width: 100px; /* 潰れすぎを防ぐための最低幅 */
  display: block;
}


/* ==========================================================================
   Processing
   ========================================================================== */
div.dt-processing {
  border: none;
  background-color: transparent;

  > div:last-child > div {
    outline: 1px solid white;
    background-color: var(--ftc-color);
  }
}