/* =========================================
    Bootstrap 拡張・独自スタイル
   ========================================= */

/* Googleログインボタン (Bootstrapにない独自デザイン) */
.btn-google {
    display: inline-flex;
    align-items: center;
    padding: 10px 15px;
    background-color: #2711a7;
    color: white;
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
    transition: background-color 0.2s;
}
.btn-google:hover {
    background-color: #1b0b7a;
    color: white;
}
.btn-google img {
    margin-right: 10px;
}

/* 円形ボタン (アイコン用) */
.btn-circle {
    border-radius: 50%;
    width: 35px;
    height: 35px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

/* =========================================
    テーブル拡張スタイル (固定ヘッダー・列)
    ※Bootstrap標準には「列固定」機能がないため保持
   ========================================= */

/* スクロール領域のラッパー（囲い） */
.table-wrapper-scroll-y {
    max-height: 600px; /* 必要に応じて調整 */
    overflow-y: auto;
    overflow-x: auto;
    width: 100%;
    border-bottom: 1px solid #dee2e6;
}

/* テキストの折り返し制御 */
.table.text-nowrap th,
.table.text-nowrap td {
    white-space: nowrap;
    vertical-align: middle;
}
.table.text-nowrap td.text-wrap {
    white-space: normal;
    min-width: 200px; /* 折り返す場合の最小幅確保 */
}

/* ヘッダー固定 (縦スクロール時) */
.table-wrapper-scroll-y thead th {
    position: sticky;
    top: 0;
    z-index: 10;
    background-color: #f8f9fa; /* Bootstrapのlightグレー */
    box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.1);
}

/* 列固定 (横スクロール時：左端の操作列など) */
.sticky-col-header {
    position: sticky;
    left: 0;
    z-index: 20 !important; /* ヘッダーかつ固定列なので最前面 */
    background-color: #f8f9fa;
    border-right: 2px solid #dee2e6;
}

.sticky-col-cell {
    position: sticky;
    left: 0;
    z-index: 5;
    background-color: #fff; /* 透明だと透けるため背景色必須 */
    border-right: 2px solid #dee2e6 !important;
    box-shadow: 2px 0 5px rgba(0,0,0,0.05);
}

/* リンクのホバーエフェクト微調整 */
.text-decoration-hover:hover {
    text-decoration: underline !important;
}