/* ==========================================================================
   テーブル共通スタイル（admin/shop共通）
   ========================================================================== */

/* レスポンシブテーブルコンテナ */
.table-responsive {
}

@media (max-width: var(--breakpoint-mobile)) {
    .table-responsive {
        overflow-x: auto;
    }
}

/* 基本テーブル */
.table {
    border-collapse: collapse;
    width: 100%;
    max-width: var(--container-max-width);
    margin: 0 auto;
    background: var(--background-light);
}

/* 検索結果テーブル・登録テーブル */
.table--search,
.table--register,
.table.table-search,
.table.table-register {
    border-collapse: inherit;
    border-radius: var(--border-radius);
    border-spacing: 0;
    box-shadow: var(--box-shadow);
    background: var(--background-card);
}

.table--register,
.table.table-register {
    border-spacing: var(--border-radius-small);
    box-shadow: none;
}

/* 詳細テーブル */
.table--detail,
.table.table-detail {
    background: var(--background-card);
    color: var(--text-color);
}

/* 検索テーブルの縞模様 */
.table--search tr:nth-of-type(2n),
.table.table-search tr:nth-of-type(2n) {
    background: var(--secondary-color);
}

/* テーブルセル */
.table th, .table td {
    border: none;
    border-bottom: 1px solid var(--border-dark);
    font-size: var(--font-size-lg);
    padding: 12px 8px;
}

.table--search th,
.table--search td,
.table--register th,
.table--register td,
.table.table-search th,
.table.table-search td,
.table.table-register th,
.table.table-register td {
    border-bottom: none;
    font-size: var(--font-size-base);
    word-break: break-all;
}

.table--register th,
.table.table-register th {
    width: 25%;
}

/* 登録テーブルは上揃え（バリデーションエラー表示時にズレないように） */
.table--register th,
.table--register td,
.table.table-register th,
.table.table-register td {
    vertical-align: top;
}

.table--detail th,
.table--detail td,
.table.table-detail th,
.table.table-detail td {
    border-bottom: 1px solid var(--border-light);
    color: var(--text-color);
    font-size: var(--font-size-base);
    padding: var(--spacing-lg);
}

.table--detail th,
.table.table-detail th {
    white-space: nowrap;
    width: 200px;
}

.table--detail td,
.table.table-detail td {
    word-break: break-all;
    word-wrap: break-word;
    overflow-wrap: anywhere;
}

.table th {
    font-weight: var(--font-weight-bold);
    min-width: 100px;
}

.table--search th,
.table.table-search th {
    color: var(--text-white);
    text-align: left;
}

/* 検索テーブルの列幅 */
.table--search th.col-shop-code,
.table.table-search th.col-shop-code {
    width: 200px;
}

.table--search th.col-detail,
.table.table-search th.col-detail {
    width: 80px;
}

/* ボタン・アクション列用（詳細、操作など） */
.table th.th-action,
.table td.td-action,
.table--search th.th-action,
.table.table-search th.th-action {
    text-align: center;
}

.table--search th:first-of-type,
.table.table-search th:first-of-type {
    border-radius: var(--border-radius) 0 0 0;
}

.table--search th:last-of-type,
.table.table-search th:last-of-type {
    border-radius: 0 var(--border-radius) 0 0;
}

.table td {
    min-width: 100px;
}

.table--search td,
.table.table-search td {
    font-size: var(--font-size-xs);
}

table.table--search tr:last-of-type td:first-of-type,
table.table-search tr:last-of-type td:first-of-type {
    border-radius: 0 0 0 var(--border-radius);
}

table.table--search tr:last-of-type td:last-of-type,
table.table-search tr:last-of-type td:last-of-type {
    border-radius: 0 0 var(--border-radius) 0;
}

.table thead {
    background: var(--border-color);
}

.table--search thead,
.table.table-search thead {
    background: var(--accent-color);
}

.table--search .text-primary,
.table.table-search .text-primary {
    color: var(--link-color) !important;
}

/* bootstrapの設定上書き */
.table>:not(caption)>*>* {
    background-color: transparent;
}

/* ==========================================================================
   テーブル列幅クラス
   ========================================================================== */
/* パーセンテージ指定 */
.col-width-25 {
    width: 25%;
}

/* ピクセル指定 */
.col-width-80 {
    width: 80px;
}

.col-width-100 {
    width: 100px;
}

.col-width-120 {
    width: 120px;
}

.col-width-130 {
    width: 130px;
}

.col-width-140 {
    width: 140px;
}

.col-width-160 {
    width: 160px;
}

.col-width-180 {
    width: 180px;
}