/* Comprehensive Fix for Nyx AI Studio */

/* ===== 1. 余白の削減 (Reduce Excessive Spacing) ===== */

/* 記事生成フォーム全体の余白削減 */
#generateForm .mb-4 {
    margin-bottom: 1rem !important;
}

#generateForm .mb-3 {
    margin-bottom: 0.75rem !important;
}

#generateForm .mb-2 {
    margin-bottom: 0.5rem !important;
}

/* カード間の余白削減 */
.card + .card,
.glass-card + .glass-card {
    margin-top: 1rem !important;
}

/* フォームラベルの余白削減 */
.form-label,
.nyx-label {
    margin-bottom: 0.25rem !important;
}

/* 行間の余白削減 */
.row {
    --bs-gutter-y: 0.75rem;
}

/* ページヘッダーの余白削減 */
.nyx-page-header,
.page-header {
    margin-bottom: 1.5rem !important;
}

/* 画像設定エリアのコンパクト化 */
#imageSettings {
    padding: 0.75rem !important;
    margin-top: 0.5rem !important;
}

#imageSettings .row {
    margin-bottom: 0.5rem !important;
}

/* ボタングループの余白調整 */
.btn-group {
    gap: 0.5rem;
}

/* テキストエリアの高さ調整 */
textarea.form-control {
    min-height: 80px !important;
}

#user_prompt {
    min-height: 120px !important;
}

/* ===== 2. レスポンシブデザインの改善 ===== */

/* タブレット向け (768px - 1200px) */
@media (min-width: 768px) and (max-width: 1200px) {
    /* 2カラムレイアウトを1カラムに */
    .col-md-8,
    .col-md-4 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
    
    /* カードの余白調整 */
    .glass-card {
        padding: 1.25rem !important;
    }
    
    /* フォントサイズの調整 */
    .nyx-page-title {
        font-size: 1.75rem !important;
    }
}

/* モバイル向け (767px以下) */
@media (max-width: 767px) {
    /* フォーム要素を全幅に */
    .col-md-6,
    .col-md-4,
    .col-md-3 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        margin-bottom: 0.75rem !important;
    }
    
    /* パディングの調整 */
    .nyx-main {
        padding: 1rem !important;
    }
    
    .glass-card {
        padding: 1rem !important;
    }
    
    /* フォントサイズ調整（iOSズーム防止） */
    .form-control,
    .form-select,
    input[type="text"],
    input[type="password"],
    input[type="email"],
    textarea {
        font-size: 16px !important;
    }
    
    /* ボタンサイズの調整 */
    .btn {
        padding: 0.5rem 1rem !important;
        font-size: 0.875rem !important;
    }
    
    .btn-lg {
        padding: 0.75rem 1.25rem !important;
        font-size: 1rem !important;
    }
    
    /* モーダルの調整 */
    .modal-dialog {
        margin: 0.5rem !important;
        max-width: calc(100% - 1rem) !important;
    }
    
    .modal-xl {
        max-width: calc(100% - 1rem) !important;
    }
}

/* 小画面向け (576px以下) */
@media (max-width: 576px) {
    /* ページタイトルの調整 */
    .nyx-page-title {
        font-size: 1.5rem !important;
    }
    
    .nyx-page-subtitle {
        font-size: 0.875rem !important;
    }
    
    /* カードタイトルの調整 */
    .card-title,
    h5 {
        font-size: 1.125rem !important;
    }
    
    /* テーブルのレスポンシブ対応 */
    .table {
        font-size: 0.8rem !important;
    }
    
    .table td,
    .table th {
        padding: 0.25rem !important;
    }
}

/* ===== 3. モーダルフリーズ対策 ===== */

/* モーダル背景の確実な削除 */
.modal-backdrop {
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1040;
}

/* モーダルが閉じた時の状態 */
.modal.fade:not(.show) {
    display: none !important;
}

.modal-backdrop.fade:not(.show) {
    display: none !important;
    opacity: 0 !important;
}

/* body要素のオーバーフロー制御 */
body.modal-open {
    overflow: hidden !important;
    padding-right: 0 !important;
}

/* モーダル非表示時のbody復元 */
body:not(.modal-open) {
    overflow: auto !important;
    padding-right: 0 !important;
}

/* モーダルダイアログの位置固定 */
.modal-dialog {
    position: relative;
    pointer-events: auto;
}

/* プリセットモーダル専用の修正 */
#presetModal .modal-body {
    max-height: calc(100vh - 200px) !important;
    overflow-y: auto !important;
}

/* 結果モーダル専用の修正 */
#resultModal .modal-content {
    max-height: 90vh;
    display: flex;
    flex-direction: column;
}

#resultModal .modal-body {
    overflow-y: auto;
    flex: 1 1 auto;
}

/* DMM結果モーダルの修正 */
#dmmResultModal .modal-dialog {
    max-height: 90vh;
}

/* ===== 4. その他のバグ修正 ===== */

/* スクロールバーのちらつき防止 */
html {
    overflow-y: scroll;
}

/* フォーカス時のアウトライン統一 */
.form-control:focus,
.form-select:focus,
.btn:focus {
    outline: none !important;
    box-shadow: 0 0 0 0.2rem rgba(107, 70, 193, 0.25) !important;
}

/* ツールチップのz-index修正 */
.tooltip {
    z-index: 1070 !important;
}

/* ドロップダウンのz-index修正 */
.dropdown-menu {
    z-index: 1050 !important;
}

/* プログレスバーのアニメーション */
.progress-bar {
    transition: width 0.6s ease;
}

/* カードホバー効果の統一 */
.card:hover,
.glass-card:hover {
    transform: translateY(-2px);
    transition: transform 0.2s ease;
}

/* テーブルのオーバーフロー対策 */
.table-responsive {
    -webkit-overflow-scrolling: touch;
    overflow-x: auto;
}

/* 画像の最大サイズ制限 */
.modal img {
    max-width: 100%;
    height: auto;
    max-height: 500px;
    object-fit: contain;
}

/* DMM商品詳細カードの修正 */
#productDetailCard {
    max-height: none !important;
    overflow: visible !important;
}

/* フォーム送信中のボタン無効化スタイル */
.btn:disabled {
    opacity: 0.65;
    cursor: not-allowed;
}

/* スピナーのサイズ統一 */
.spinner-border-sm {
    width: 1rem !important;
    height: 1rem !important;
}

/* アラートの表示改善 */
.alert {
    animation: slideIn 0.3s ease;
}

@keyframes slideIn {
    from {
        transform: translateY(-10px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* エラー状態のフォーム要素 */
.form-control.is-invalid {
    border-color: #dc3545 !important;
}

/* ローディング状態 */
.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

/* プリント時の調整 */
@media print {
    .nyx-sidebar,
    .mobile-menu-btn,
    .btn,
    .modal {
        display: none !important;
    }
    
    .nyx-main {
        margin-left: 0 !important;
        width: 100% !important;
    }
}

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

/* GPU加速を使用 */
.modal,
.modal-backdrop,
.card {
    will-change: transform;
}

/* アニメーションの最適化 */
* {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* 不要なアニメーションの削除（低スペック環境） */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}