@charset "UTF-8";

/*

ThemeColor
    main #18603A;
    sub #;
    
*/
/*=================================
    common
=================================*/
/* ページ全体の横揺れ・はみ出しを根本から防止 */
html, body {
    background: #f8f9fa;
    width: 100%;
}

/* --- サイドバーとレイアウトの基本 --- */
.wrapper {
    display: flex;
    width: 100%;
    overflow: hidden; /* ラッパーからはみ出させない */
}

#content {
    flex: 1;
    /* 【最重要】これが無いと、中のテーブルの幅に合わせて #content 自体が広がってしまいます */
    min-width: 0; 
    padding: 20px;
    box-sizing: border-box;
    overflow: hidden; /* 子要素のはみ出しをここでカットする */
}

/* スマホ時 */
@media (max-width: 768px) {
    #content {
        padding: 15px;
        width: 100%;
        /* 画面幅を絶対に超えないように制限 */
        max-width: 100vw; 
    }
}

#sidebar {
    width: 250px;
    min-height: 100vh;
    background: #343a40;
    transition: all 0.3s;
    /* flexの縮小を防止 */
    flex-shrink: 0; 
}

#content {
    /* width: 100% を削除（flexアイテムなので自動で広がります） */
    flex-grow: 1;
    min-width: 0; /* flex内の要素がはみ出すのを防ぐための重要なプロパティ */
    padding: 20px;
    /* paddingを含めたサイズ計算にする */
    box-sizing: border-box; 
}

/* --- スマホ時のハンバーガーメニュー対応 --- */
@media (max-width: 768px) {
    #sidebar {
        margin-left: -250px; /* 通常時は隠す */
        position: fixed;
        z-index: 1050;
    }
    #sidebar.active {
        margin-left: 0; /* ボタン押下時に表示 */
    }
    
    /* コンテンツを画面幅一杯にするための調整 */
    #content {
        width: 100%;
        padding: 15px; /* スマホ時は少し余白を絞ると使いやすいです */
    }

    /* ハンバーガーボタンの表示 */
    .navbar-toggler-custom {
        display: block;
        position: fixed;
        top: 10px;
        left: 10px;
        z-index: 1100;
        background: #343a40;
        color: #fff;
        padding: 8px 12px;
        border-radius: 5px;
        cursor: pointer;
    }

    /* オーバーレイ（メニューが開いている時に背景を暗くする） */
    .overlay {
        display: none;
        position: fixed;
        width: 100vw;
        height: 100vh;
        background: rgba(0, 0, 0, 0.5);
        z-index: 1040;
        top: 0;
        left: 0;
    }
    .overlay.active {
        display: block;
    }
}

/* --- テーブルの横スクロール対応 --- */
.table-responsive-custom {
    width: 100%;
    overflow-x: auto;
    /* 指に吸い付くようなスクロール */
    -webkit-overflow-scrolling: touch; 
}

.table-scroller {
    width: 100%;
    /* コンテンツが溢れた時だけ横スクロールを出す */
    overflow-x: auto; 
    /* iOSでのスクロールを滑らかにする */
    -webkit-overflow-scrolling: touch;
    /* テーブルが親を突き破るのを物理的に防ぐ */
    display: block;
}

.table-responsive-custom table {
    min-width: 600px;
    width: 100%;
    border-collapse: collapse;
}

/* ドラッグ中の行を少し浮かせるスタイル（任意） */
.sortable-ghost {
    opacity: 0.4;
    background-color: rgb(var(--color-primary) / 0.1) !important;
}

/* ドラッグ対象に選ばれた瞬間のスタイル */
.sortable-chosen {
    background-color: #f9fafb;
}

/* プレビュー画像を表示するアバターコンテナのスタイル */
#avatar_preview_container {
    display: none; /* 初期状態は非表示 */
    width: 80px; /* プレビュー画像のサイズ */
    height: 80px;
    border-radius: 9999px; /* 丸いプレビュー */
    overflow: hidden;
    margin-right: 16px; /* 右側のテキストとの余白 */
}

#avatar_preview_image {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 画像を中央で切り抜く */
}

footer {
    border-top: 1px solid #eee;
    background: #fff !important;
}