/* =============================================================
 * 株懇NET カラーテーマ（ブルー）
 * デザインカラー画像 bull_01 ベース
 *
 * カラーパレット:
 *   サイドバー背景:     #2C4E8F  (44, 78, 143)
 *   サイドバーアクティブ: #397DE1  (57, 125, 225)
 *   ヘッダーバー背景:   #F8F8FC  (248, 248, 252)
 *   ボタン(primary):    #2B7AE4  (43, 122, 228)
 *   コンテンツ背景:     #E8EAF6  (232, 234, 246)
 * ============================================================= */

/* --- コンテンツ背景 --- */
.content-wrapper {
    background-color: #E8EAF6 !important;
}

/* --- ヘッダーバー --- */
.main-header.navbar {
    background-color: #F9F9FC !important;
}

/* --- サイドバー --- */
.main-sidebar,
.main-sidebar .brand-link {
    background-color: #2C4E8F !important;
}

/* --- サイドバーロゴ --- */
.brand-link .brand-text {
    font-size: 1.3rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.05em;
    margin-left: 1.2rem !important;
}

.sidebar-dark-primary .nav-sidebar > .nav-item.menu-open > .nav-link {
    background-color: rgba(255, 255, 255, 0.1) !important;
    color: #fff !important;
}

.sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link.active {
    background-color: #397DE1 !important;
    color: #fff !important;
}

.sidebar-dark-primary .nav-sidebar .nav-link:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
}

.sidebar-dark-primary .nav-treeview > .nav-item > .nav-link.active {
    background-color: #397DE1 !important;
    color: #fff !important;
}

/* --- Bootstrap primary色の上書き --- */
.btn-primary {
    background-color: #2B7AE4 !important;
    border-color: #2B7AE4 !important;
}
.btn-primary:hover,
.btn-primary:focus {
    background-color: #2468C5 !important;
    border-color: #2468C5 !important;
}

.btn-outline-primary {
    color: #2B7AE4 !important;
    border-color: #2B7AE4 !important;
}
.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary.active {
    background-color: #2B7AE4 !important;
    border-color: #2B7AE4 !important;
    color: #fff !important;
}

.card-primary.card-outline {
    border-top-color: #2B7AE4 !important;
}


.card-primary:not(.card-outline) > .card-header {
    background-color: #2B7AE4 !important;
    border-color: #2B7AE4 !important;
}

a {
    color: #2B7AE4;
}
a:hover {
    color: #2C4E8F;
}

.badge-primary {
    background-color: #2B7AE4 !important;
}

.page-item.active .page-link {
    background-color: #2B7AE4 !important;
    border-color: #2B7AE4 !important;
}

.page-link {
    color: #2B7AE4;
}
.page-link:hover {
    color: #2C4E8F;
}

/* --- CSV出力ボタン --- */
.btn-secondary {
    background-color: #F2F4F9 !important;
    border-color: #D0D3DA !important;
    color: #333 !important;
}
.btn-secondary:hover,
.btn-secondary:focus {
    background-color: #E4E7EE !important;
    border-color: #C0C3CA !important;
    color: #333 !important;
}

/* --- 新規登録ボタン(success) --- */
.btn-success {
    background-color: #3EAB9F !important;
    border-color: #3EAB9F !important;
}
.btn-success:hover,
.btn-success:focus {
    background-color: #35948A !important;
    border-color: #35948A !important;
}

/* --- テーブル縞模様 --- */
.table-striped tbody tr:nth-of-type(odd) {
    background-color: #EEF2FC !important;
}

/* --- メールテンプレートモーダル --- */
.modal-header.bg-primary {
    background-color: #284C8F !important;
}

.modal .alert-info {
    background-color: #609CE6 !important;
    border-color: #609CE6 !important;
    color: #fff !important;
}

.modal .modal-body {
    background-color: #F2F2F7 !important;
}

.modal .modal-footer {
    background-color: #F7F7FC !important;
}

.modal .btn-secondary {
    background-color: #7B8CA9 !important;
    border-color: #7B8CA9 !important;
    color: #fff !important;
}
.modal .btn-secondary:hover,
.modal .btn-secondary:focus {
    background-color: #6B7C99 !important;
    border-color: #6B7C99 !important;
    color: #fff !important;
}

.modal .btn-primary {
    background-color: #2B7BE5 !important;
    border-color: #2B7BE5 !important;
}

/* --- コンテンツヘッダー --- */
.content-header h1 {
    font-size: 1.4rem;
    font-weight: 600;
}

/* =============================================================
 * 部会カテゴリ絞込タブ（共通）
 * 検索カードと同じ横幅に均等配置し、長い部会名は1行で省略表示
 * ホバーで全文表示はHTML側のtitle属性で対応
 * ============================================================= */
.dept-tabs {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 6px;
}

.dept-tab {
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
    padding: 0.375rem 0.75rem;
}

/* =============================================================
 * 横スクロール型タブ（旧）
 * ============================================================= */
.overflow-auto > .btn-group,
.overflow-auto .btn-group {
    display: flex;
    flex-wrap: nowrap;
}

.overflow-auto::-webkit-scrollbar {
    display: none;
}

/* =============================================================
 * ホーム画面テーブル内のバッジ（部会表示）
 * 折り返し時に重ならないよう上下余白を追加
 * ============================================================= */
.table .badge {
    margin-bottom: 0.25rem;
}

/* =============================================================
 * 所属グループ名表示バッジのフォントサイズ拡大
 * 視認性向上のため、デフォルトの75%から90%に変更
 * ============================================================= */
.badge-department {
    font-size: 90% !important;
    padding: 0.35em 0.5em !important;
}

/* =============================================================
 * 日付（数値）表示の視認性向上
 * 周囲の文字より一回り大きく表示して見やすくする
 * ============================================================= */
.text-date-numeric {
    font-size: 1.1rem !important;
    font-weight: 500;
    vertical-align: middle;
}

/* =============================================================
 * 日付・日時入力フォームのフォントサイズ拡大
 * form-control-sm使用時でも数字が見やすいよう調整
 * ============================================================= */
input[type="date"],
input[type="datetime-local"] {
    font-size: 0.95rem !important;
    min-height: 2.2rem;
}

/* =============================================================
 * NO.71 サイト全体表示縮小（zoomプロパティ版）
 * transform: scale + JS高さ同期は、offsetHeightが再計測のたびに縮んでいく
 * 原因不明のフィードバックループが実測で確認され不採用（経緯は履歴参照）。
 * zoomプロパティはレイアウト自体を縮小するため、スクロール範囲と見た目の縮小サイズが
 * 自動的に一致し、JSでの高さ同期が不要になる。
 * サイドバー本体（.main-sidebar / #sidebar-zoom-inner）はtransform方式のまま維持
 * （こちらは不具合なく安定動作している）。
 *
 * 【zoom非対応ブラウザへの対応】
 * zoomプロパティはSafari、および2024年5月より前のFirefoxが非対応。
 * 縮小関連のルールを @supports (zoom: 1) で囲むことで、非対応ブラウザでは
 * 縮小自体を無効化し、AdminLTE標準の等倍レイアウトに完全フォールバックする
 * （サイドバーだけ縮小されコンテンツは等倍、といった不統一な表示を防ぐため）。
 *
 * 【画面幅992px未満への対応】
 * .main-header/.main-sidebarへの!important指定が、AdminLTE標準の
 * @media (max-width: 991.98px) { .main-header { margin-left: 0; } } 等の
 * レスポンシブ制御と衝突し、狭い画面でヘッダーが崩れる不具合が過去に発覚した。
 * @media (min-width: 992px) を追加してデスクトップ幅でのみ80%縮小を適用し、
 * 992px未満はzoom非対応ブラウザと同様にAdminLTE標準の等倍レイアウトへ
 * 完全フォールバックする。
 * ============================================================= */
@media (min-width: 992px) {
    @supports (zoom: 1) {
        #zoom-inner {
            zoom: 0.8;
        }

        /* サイドバー本体（.main-sidebar）は実寸250px→200px（0.8倍）に縮小。
           中身（#sidebar-zoom-inner）は元の250px幅のまま作り、scale(0.8)で200pxに収める。
           height:125%は、サイドバーの実高さ（top:0;bottom:0で画面フル高さに固定）に対して
           縮小後もちょうど100%を埋めるための補正（100% / 0.8 = 125%） */
        .main-sidebar {
            width: 200px !important;
            overflow: hidden;
        }

        #sidebar-zoom-inner {
            width: 250px;
            height: 125%;
            transform: scale(0.8);
            transform-origin: top left;
        }

        /* ヘッダー（.main-header）は resources/views/home.blade.php 等で
           @extends の直後に @include('layouts.navbar') を置いている既存の実装により、
           実際のDOM上は #zoom-inner の子孫になっておらず（ブラウザがHTML仕様上の
           エラー耐性により<body>直下へ自動修復して配置している）、zoomが伝播しない。
           そのため高さ・フォントサイズ・marginを直接80%相当の値へ明示的に上書きする
           （zoomに頼らない）。将来 layouts.navbar の@include位置が是正され
           #zoom-inner の中に正しく入るようになった場合、この個別指定とzoomの縮小が
           二重にかかってしまう点に注意 */
        .main-header {
            margin-left: 200px !important;
            height: calc((3.5rem + 1px) * 0.8) !important;
            min-height: calc((3.5rem + 1px) * 0.8) !important;
        }

        .main-header span.font-weight-bold {
            font-size: 1.2rem !important;
        }

        /* ヘッダーが実際に0.8倍に縮小される版では、サイドバーのロゴ部分
           （.brand-link）は通常のtransform: scale(0.8)のみで自然に高さが揃うため、
           個別のheight補正は不要（ヘッダー等倍版で追加していた71.25px補正は削除） */

        /* content-wrapperのmin-heightがAdminLTE標準で100vh基準（実ブラウザ高さ）のため、
           zoom後も画面いっぱいに見えるよう /0.8 で補正 */
        .content-wrapper {
            min-height: calc((100vh / 0.8) - calc(3.5rem + 1px) - calc(3.5rem + 1px)) !important;
        }
    }
}

/* content-wrapper内の最後の要素が持つmargin-bottomが親のボックス外にはみ出し
   （マージン相殺）、フッター直前に背景色の途切れた隙間ができるのを防ぐ。
   zoom対応・非対応いずれでも無害なため@supportsの外に置く */
.content-wrapper {
    padding-bottom: 0.1px;
}

/* No.112: 管理者画面の左メニュー（サイドバー）の項目数が多く、
   ウィンドウの高さが足りない場合に最下部の項目がスクロールしないと見えないことがある。
   上記の80%縮小処理（transform: scale等）には一切手を加えず、
   ナビ項目自体の余白だけを独立して詰めることで、必要な高さを減らす対応。
   フルサイズ（画面の高さが十分にある）表示では見た目を変えたくないため、
   ウィンドウの高さが一定以下の場合のみ適用する */
@media (max-height: 800px) {
    .main-sidebar .nav-sidebar .nav-item > .nav-link {
        padding-top: 0.3rem;
        padding-bottom: 0.3rem;
        margin-bottom: 0.05rem;
    }
}