/* 管理画面余白問題の安全な修正 */
/* 作成日: 2025-06-24 */
/* スマホ・パソコン表示に影響しない範囲での修正 */

/* ===== 1. Flexbox高さ制限の統一化 ===== */
/* 既存のインラインスタイルを上書きしない範囲で調整 */

/* d-flex.justify-content-between.align-items-center の統一的な処理 */
.admin-content .d-flex.justify-content-between.align-items-center {
    /* 最小高さを確保しつつ、必要に応じて拡張可能に */
    min-height: 40px;
    max-height: none !important;
    overflow: visible !important;
    
    /* 内部要素の垂直配置を改善 */
    align-items: center;
    
    /* 余白の統一 */
    margin-bottom: 1rem;
}

/* 特定のコンテキストでの高さ調整 */
#searchResults .d-flex.justify-content-between.align-items-center {
    min-height: 35px;
    padding: 0.5rem 0;
}

/* ===== 2. カードコンポーネントの幅制限改善 ===== */

/* stat-cardの固定高さ問題を解決 */
.stat-card {
    min-height: 100px;
    max-height: none !important; /* 固定高さ制限を解除 */
    height: auto !important;
}

.stat-card .card-body {
    min-height: 80px;
    height: auto !important;
    padding: 1rem 1.25rem;
}

/* カード内のFlexboxレイアウト改善 */
.stat-card .d-flex {
    width: 100%;
    min-height: 60px;
    align-items: center;
}

/* ===== 3. グリッドシステムの競合解決 ===== */

/* 既存のBootstrapグリッドを尊重しつつ、余白を最適化 */
.admin-layout .row {
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 1rem;
    margin-right: calc(var(--bs-gutter-x) * -0.5);
    margin-left: calc(var(--bs-gutter-x) * -0.5);
}

.admin-layout .row > * {
    padding-right: calc(var(--bs-gutter-x) * 0.5);
    padding-left: calc(var(--bs-gutter-x) * 0.5);
    margin-top: var(--bs-gutter-y);
}

/* ===== 4. フレックスボックスのgrowプロパティ調整 ===== */

/* 自動サイズ調整の改善（デスクトップのみ） */
@media (min-width: 992px) {
    .admin-content .col-lg-4 {
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
    }
    
    .admin-content .col-lg-8 {
        flex: 0 0 66.666667%;
        max-width: 66.666667%;
    }
}

/* ===== 5. レスポンシブレイアウトの統一 ===== */

/* タブレット表示の改善 */
@media (min-width: 768px) and (max-width: 991px) {
    .admin-content .col-md-6 {
        flex: 0 0 50%;
        max-width: 50%;
    }
    
    .admin-content .col-md-12 {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* モバイル表示の改善（既存のスタイルを維持） */
@media (max-width: 767px) {
    .admin-content .d-flex.justify-content-between.align-items-center {
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
    }
    
    .admin-content .d-flex.justify-content-between.align-items-center > *:last-child {
        align-self: flex-end;
    }
}

/* ===== 6. 特定ページでの問題箇所の修正 ===== */

/* DMM記事生成画面の検索結果ヘッダー */
#searchResults .d-flex.justify-content-between.align-items-center.mb-3 {
    margin-bottom: 1rem !important;
    padding: 0.75rem 0;
    border-bottom: 1px solid #dee2e6;
}

/* サイト更新画面のインライン高さ制限を上書き */
.admin-content [style*="max-height: 60px"] {
    max-height: none !important;
    min-height: 40px;
}

/* ===== 7. パフォーマンス最適化 ===== */

/* 不要な再描画を防ぐ */
.admin-content .d-flex {
    will-change: auto;
}

/* CSSアニメーションの最適化 */
.admin-content .card,
.admin-content .d-flex {
    transition: none;
}

/* ===== 8. 安全性の確保 ===== */

/* 既存の重要なスタイルを保護 */
.sidebar,
.main-content,
.navbar {
    /* 既存のレイアウトを保護 */
}

/* モーダルのスタイルを保護 */
.modal .d-flex {
    /* モーダル内のFlexboxは既存の制限を維持 */
}

/* 印刷スタイルの保護 */
@media print {
    .admin-content .d-flex {
        max-height: none !important;
        overflow: visible !important;
    }
}

/* ===== 9. デバッグ支援（開発時のみ使用） ===== */
/*
.admin-content .d-flex.justify-content-between.align-items-center {
    outline: 1px dashed rgba(255, 0, 0, 0.3);
}

.admin-content .stat-card {
    outline: 1px dashed rgba(0, 255, 0, 0.3);
}
*/

/* ===== 10. ブラウザ互換性の確保 ===== */

/* IE11対応（必要な場合） */
@supports not (display: flex) {
    .admin-content .d-flex.justify-content-between.align-items-center {
        display: table;
        width: 100%;
    }
    
    .admin-content .d-flex.justify-content-between.align-items-center > * {
        display: table-cell;
        vertical-align: middle;
    }
}