/* =========================
    ヘッダー
========================= */
header{
    text-align: center;
    background-color:black;
    color: white;
    padding: 10px 0;
}

header.navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 60px;
    background: black;
    color: white;
    display: flex;
    align-items: center;
    padding: 0 15px;
    z-index: 2000;  /* サイドバーより前に出す */
}

.navbar-brand{
    font-size: 1rem; 
    margin-left: 50px;
    color: white !important;
}

.navbar-brand:hover {
    color: white !important;    /* ホバー時の色を強制的に白にする */
}

/* 担当者名+アイコン */
header.navbar .dropdown-toggle,
header.navbar .dropdown-toggle strong,
header.navbar .dropdown-toggle i {
    color: blue !important;
    font-size: 0.85rem; /* 文字サイズ調整 */
}

/* =========================
    フッター
========================= */
.footer-btn {
    position: fixed;
    bottom: 3px;   /* 画面下からの距離 */
    right: 20px;    /* 画面右からの距離 */
    z-index: 9999;  /* 最前面に表示 */
    padding: 6px 12px;
    background-color: #007bff; /* Bootstrap青 */
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 16px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    cursor: pointer;
    /* ★ 幅を小さくする（お好みで調整） */
    width: 100px;
    padding: 6px 0;   /* ← これが上書きして高さが大きくなる原因 */
    text-align: center;
}

.footer-btn:hover {
    background-color: #0056b3;
}

/* フッター左ボタン：左固定 ＰＣ・スマホ共通 */
#footer-Left-Btn {
    position: fixed;
    bottom: 3px;
    left: 15px;
    z-index: 9999;
    background-color: #af0e03;
    /* Bootstrap青 */
}

/* フッター右から２つめボタン：固定 */
    #footer-Right2-Btn {
        position: fixed;
        bottom: 3px;
        right: 120px;
        z-index: 9999;
        background-color: #f81717;
    }

/* スマホ時だけ下に余白を作る */
@media (max-width: 576px) {

    /* 画面全体を固定し、スクロールを禁止する 
    html,
    body {
        height: 100%;
        overflow: hidden;
    }*/

    /* メインコンテンツ固定 
    #content {
        position: fixed;
        top: 60px;
        /* header.php の高さ 
        left: 0;
        right: 0;
        bottom: 70px;
        /* 発注確認ボタンの高さ 
        overflow: hidden;
        background: #fff;
    }*/

    .pagination-area {
        padding-bottom: 80px; /* ボタン高さ + 余裕 */
    }

    /* フッター右ボタン：固定 */
    #footer-Right-Btn {
        position: fixed;
        bottom: 3px;
        right: 15px;
        z-index: 9999;
    }
   

    /* フッター右ボタン：サイドバーが開いている時（グレーアウト） */
    body:not(.sidebar-closed) #footer-Right-Btn {
        background-color: #ccc !important;
        color: #666 !important;
        pointer-events: none;
        opacity: 0.7;
    }

    /* フッター左ボタン：サイドバーが開いている時（非表示） */
    body:not(.sidebar-closed) #footer-Left-Btn {
        display: none;
    }
}

/* PCサイズ（サイドメニュー連動） */
@media (min-width: 769px) {

    /* フッター左ボタン：サイドバーが開いている時（右へスライド） */
    body:not(.sidebar-closed) #footer-Left-Btn {
        left: 270px;
        /* サイドバー幅250px + 余白20px */
    }
}

/* =========================
    ハンバーガーボタン
========================= */
#hamburgerBtn {
    position: absolute;
    left: 10px;
    top: 10px;
    z-index: 3000;      /* サイドバーより前に出す */
    background: none;
    border: none;
    color: white;
    font-size: 1.6rem;
}

/* =========================
   サイドバー
========================= */
.sidebar {
    width: 250px;
    height: 100vh; 
    position: fixed;
    top: 60px;                  /* ヘッダーの下に配置 */
    left: 0;
    background: #222;
    color: white;
    padding: 20px;
    /*transform: translateX(0);*/
    overflow-y: auto;
    transition: transform 0.3s ease;
    z-index: 1500;
    transform: translateX(-250px);  /* デフォルト閉じる */
    /*transform: translateX(0);  /* デフォルト閉じる */
}

/* メニュー */
#sidebar .nav-link {
    color: #ddd;
    padding: 10px 20px;
    display: block;
    transition: all 0.2s;
}

#sidebar .nav-link:hover {
    background: #1e1e1e;
    color: #fff;
}

/* サブメニュー */
.submenu {
    display: none;
    padding-left: 20px;
}

.submenu.open {
    display: block;
}

/* 開閉アイコン */
.submenu-toggle .bi-chevron-down {
    transition: transform 0.3s ease;
}

.submenu-toggle.open .bi-chevron-down {
    transform: rotate(180deg);
}

/* サブメニューの選択状態 */
.submenu a.active {
    background: #1ABB9C;   /* Gentelella のアクセント色 */
    color: #fff !important;
}

/* アクティブメニュー */
#sidebar .nav-link.active {
    background: #1f2d3d;
    color: #fff;
}

/* 閉じた状態（左に隠す） 
.sidebar.closed {
    transform: translateX(-250px);  /* デフォルト閉じる 
}
*/

/* PC：デフォルトは開く 
@media (min-width: 769px) { 
    .sidebar { 
        transform: translateX(0); 
    } 
    .sidebar.closed { 
        transform: translateX(-250px); 
    } 
}
*/


/* PC：sidebar-closed が付いていないときだけ開く */ 
@media (min-width: 769px) { 
    body:not(.sidebar-closed) .sidebar { 
        transform: translateX(0); 
    } 
}

/* スマホではデフォルト非表示 */
@media (max-width: 768px) {
    .sidebar {
        transform: translateX(-250px); 
    } 
    .sidebar.open {
        transform: translateX(0);   /* open で開く */
    } 
}

/* ページ遷移時だけアニメーションを無効化 */
.sidebar.no-transition {
    transition: none !important;
}

/* =========================
    コンテンツ
========================= */
#content {
    /* margin-left: 250px; */
    padding: 20px;
    transition: margin-left 0.3s ease;
}

/* PC ではサイドバー分ずらす */ 
@media (min-width: 769px) { 
    #content {
        margin-left: 250px; 
    } 
    body.sidebar-closed #content { 
        margin-left: 0; 
    }
}

/* サイドバーが閉じた時、メインコンテンツを左に戻す */
#content.shifted {
    margin-left: 0px;
}

/* =========================
    オーバーレイ（スマホ用）
========================= */
@media (max-width: 768px) {
#overlay { 
    display: none; 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    background: rgba(0,0,0,0.4); 
    z-index: 1400; 
} 
}

#overlay.active { 
    display: block; 
}

/* =========================
    基本レイアウト
========================= */
body{
    background-color: #f8f9fa;
    padding-top: 45px; /* ヘッダーの高さに合わせて調整 */
    margin: 0;
}

/* body に sidebar-closed が付いたときの動き 
@media (min-width: 769px) { 
    body.sidebar-closed #sidebar {
        margin-left: -250px; 
    } 
    
    body.sidebar-closed #content {
        margin-left: 0px; 
    }
}
*/ 

/* 見出し        */
/* ページヘッダー */
h1 {
    font-size: 1.4rem;
    font-weight: 600;
    text-align: left;
    background-color: #fff;
    padding: 5px 0;
    margin-bottom: 5px;
    border-bottom: 2px solid #e5e5e5;
    letter-spacing: 0.5px;
}

.form-label{
    font-size:.9rem;
}

/* ボタンの余白
.btn{
    padding: 10px;
}
*/

.table{
    background-color: white;
}

.card{
    border: none;
}

.card-title{
    font-size: 1rem;
    padding-bottom: 20px;
}

.complete-icon{
    font-size: 3rem;
    color: green;
}

.error-icon{
    font-size: 3rem;
    color: red;
}

.nav-icon{
    font-size: 1.3rem; 
}

.confirm-table th {
    min-width: 80px;
}

/* #content の余白を完全にゼロ化 
#content {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;   /* PC時の250pxを打ち消す 
    width: 100% !important;
}
*/

/* =========================
    datatables
========================= */

/* CSS でハイライト用のクラスを作る */
#users tbody tr.highlight-row>td {
    background-color: #fff3cd !important;   /* 薄い黄色 */
}

/* 行の高さを調整する（内容に応じて自然に詰まる） */
table.dataTable tbody td {
    padding: 3px 8px !important;
}

/* ヘッダーの高さを調整する（内容に応じて自然に詰まる） */
table.dataTable thead th {
    padding: 4px 8px !important;
}

/* =========================
    モーダル
========================= */

/* サイドバーより全面に表示させる */
.modal {
    z-index: 2000 !important;
}

.modal-backdrop {
    z-index: 1990 !important;
}

/* =========================
    iPhone・Safari向け dataTablesのヘッダー
========================= */

/* iPhone・Safari向けのヘッダー・明細幅強制同期 */
.dataTables_scrollHead,
.dataTables_scrollBody {
    width: 100% !important;
}

.dataTables_scrollHeadInner,
.dataTables_scrollHeadInner > table,
.dataTables_scrollBody > table {
    width: 100% !important;
    table-layout: auto !important; 
}