/* ==========================================
   Bootstrap 4 タブ高視認性＆スマホ対応CSS
========================================== */

/* 1. タブ全体の土台（下の境界線を太くして存在感を出す） */
ul.nav-tabs {
    display: flex !important;
    flex-wrap: nowrap !important; /* スマホでの予期せぬ折り返しを防止 */
    border-bottom: 3px solid #007bff !important; /* 全体の下線を太い青に */
    margin-bottom: 20px;
    padding: 0;
}

/* 2. 各タブの枠組み（スマホで左右均等に50%ずつ広げる） */
ul.nav-tabs .nav-item {
    flex: 1 1 0% !important; /* 2つのタブを完全に等幅にする */
    text-align: center;
}

/* 3. 通常のタブボタン（未選択：Receive側など）のデザイン */
ul.nav-tabs .nav-item .nav-link {
    display: block !important;
    font-size: 16px !important;
    font-weight: bold !important;
    color: #495057 !important;           /* 文字色：濃いグレー */
    background-color: #f8f9fa !important;     /* 背景色：薄いグレー */
    border: 1px solid #dee2e6 !important;
    border-bottom: none !important;
    padding: 14px 10px !important;        /* 上下にしっかり余白をとり押しやすく */
    margin-right: 2px !important;         /* タブ同士の間にわずかな隙間 */
    margin-left: 2px !important;
    border-top-left-radius: 6px !important;   /* 角を丸く */
    border-top-right-radius: 6px !important;
    transition: all 0.2s ease-in-out !important; /* パッと変わるのではなく滑らかに変化 */
}

/* 4. パソコンなどでマウスを乗せたとき（ホバー）の変化 */
ul.nav-tabs .nav-item .nav-link:hover {
    color: #000000 !important;
    background-color: #e2e6ea !important;     /* 少し濃いグレーにして反応を返す */
    border-color: #ced4da #ced4da #007bff !important;
}

/* 5. 【最重要】現在選択されているタブ（active：Return側など） */
ul.nav-tabs .nav-item .nav-link.active {
    color: #ffffff !important;             /* 文字色：純白 */
    background-color: #007bff !important;     /* 背景色：鮮やかなブルー */
    border-color: #007bff !important;
    /* ボタンが浮き上がって見えるような立体的な影（3D効果） */
    box-shadow: 0 -4px 10px rgba(0, 123, 255, 0.15), 0 4px 15px rgba(0, 123, 255, 0.3) !important;
}