/* モバイルUI完全修正 - グレーアウト問題を解決 */

/* ===== リセット ===== */
* {
    -webkit-tap-highlight-color: transparent;
}

/* ===== モバイル時のサイドバー修正 ===== */
@media (max-width: 768px) {
    /* サイドバー */
    .sidebar,
    .nyx-sidebar {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 250px !important;
        height: 100vh !important;
        background-color: #2c3e50 !important;
        transform: translateX(-100%) !important;
        transition: transform 0.3s ease !important;
        z-index: 10000 !important; /* 最前面 */
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
    
    /* サイドバー内の全要素を最前面に */
    .sidebar *,
    .nyx-sidebar * {
        position: relative !important;
        z-index: 10001 !important;
        pointer-events: auto !important;
    }
    
    /* サイドバー内のリンクとボタンを確実にクリック可能に */
    .sidebar a,
    .sidebar button,
    .sidebar .nav-link,
    .nyx-sidebar a,
    .nyx-sidebar button,
    .nyx-sidebar .nav-link {
        position: relative !important;
        z-index: 10002 !important;
        pointer-events: auto !important;
        display: block !important;
        cursor: pointer !important;
    }
    
    /* サイドバーが表示されている時 */
    .sidebar.show,
    .sidebar.active,
    .nyx-sidebar.show,
    .nyx-sidebar.active {
        transform: translateX(0) !important;
        box-shadow: 2px 0 10px rgba(0, 0, 0, 0.3) !important;
    }
    
    /* メインコンテンツ - グレーアウトを防ぐ */
    .main-content,
    .nyx-main {
        margin-left: 0 !important;
        position: relative !important;
        z-index: 1 !important;
        /* 以下の設定でグレーアウトを防ぐ */
        opacity: 1 !important;
        filter: none !important;
        pointer-events: auto !important;
        user-select: auto !important;
        -webkit-user-select: auto !important;
    }
    
    /* サイドバーが開いている時もメインコンテンツは操作可能に */
    body.sidebar-open .main-content,
    body.sidebar-open .nyx-main {
        opacity: 1 !important;
        filter: none !important;
        pointer-events: auto !important;
    }
    
    /* bodyのスクロール制御を削除（グレーアウトの原因） */
    body,
    body.sidebar-open {
        overflow: visible !important;
        position: static !important;
        width: auto !important;
        height: auto !important;
    }
    
    /* モバイルメニューボタン */
    .sidebar-toggle-btn,
    .mobile-menu-btn {
        position: fixed !important;
        top: 1rem !important;
        left: 1rem !important;
        z-index: 10001 !important;
        width: 44px !important;
        height: 44px !important;
        background-color: #667eea !important;
        border: none !important;
        border-radius: 0.375rem !important;
        color: white !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        cursor: pointer !important;
        pointer-events: auto !important;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important;
    }
    
    /* オーバーレイ（サイドバーの背景） */
    .sidebar-overlay {
        display: none;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        background-color: rgba(0, 0, 0, 0.5) !important;
        z-index: 9999 !important;
        pointer-events: auto !important;
    }
    
    /* サイドバーが開いている時のオーバーレイ表示 */
    body.sidebar-open .sidebar-overlay {
        display: block !important;
    }
    
    /* フォーム要素を確実に操作可能に */
    input,
    textarea,
    select,
    button,
    a,
    .btn,
    .form-control,
    .form-select {
        pointer-events: auto !important;
        opacity: 1 !important;
        cursor: pointer !important;
        position: relative !important;
        z-index: 10 !important;
    }
    
    /* カードとコンテンツ */
    .card,
    .glass-card {
        position: relative !important;
        z-index: 5 !important;
        pointer-events: auto !important;
    }
}

/* ===== デスクトップ時の修正 ===== */
@media (min-width: 769px) {
    .sidebar,
    .nyx-sidebar {
        position: fixed !important;
        z-index: 100 !important;
        transform: translateX(0) !important;
    }
    
    .sidebar-toggle-btn,
    .mobile-menu-btn {
        display: none !important;
    }
    
    .sidebar-overlay {
        display: none !important;
    }
}

/* ===== モーダル関連の修正 ===== */
.modal-backdrop {
    z-index: 1040 !important;
}

.modal {
    z-index: 1050 !important;
}

.modal-dialog {
    z-index: 1051 !important;
}

/* ===== ドロップダウンメニュー ===== */
.dropdown-menu {
    z-index: 1000 !important;
}

/* ===== トースト・アラート ===== */
.toast-container {
    z-index: 11000 !important;
}

/* ===== グレーアウト防止の追加対策 ===== */
.page-content,
.content-wrapper,
#app,
#root {
    opacity: 1 !important;
    filter: none !important;
    pointer-events: auto !important;
}

/* 擬似要素によるオーバーレイを無効化 */
*::before,
*::after {
    pointer-events: none !important;
}

/* ただしボタンやリンクの擬似要素は有効に */
button::before,
button::after,
a::before,
a::after,
.btn::before,
.btn::after {
    pointer-events: auto !important;
}