/* ===========================================
   モダンフラットデザイン - メニュースタイル
   Updated: 2025-12-20
   =========================================== */

/* サイドバー全体の背景色を統一 */
.leftbar .navbar-main,
.leftbar .navbar-main.frontend,
.leftbar .navbar-main.navbar-backend {
    background-color: #2d3356 !important;
    backdrop-filter: none !important;
}

/* テーマカラーを上書き */
[class*="theme-"] .navbar-main,
[class*="theme-"].leftbar .navbar-main {
    background-color: #2d3356 !important;
}

/* ===== メインメニュー項目（トップレベル） ===== */
.navbar-main .nav-item .nav-link {
    transition: all 0.2s ease;
    position: relative;
    border-radius: 0 !important;
    background: transparent !important;
    color: rgba(255, 255, 255, 0.7) !important;
    margin: 2px 0;
    border-left: 3px solid transparent;
}

/* アイコンのデフォルト色 */
.navbar-main .nav-item .nav-link .navbar-icon svg path {
    fill: rgba(255, 255, 255, 0.7) !important;
    transition: fill 0.2s ease;
}

.navbar-main .nav-item .nav-link span {
    color: rgba(255, 255, 255, 0.7) !important;
    transition: color 0.2s ease;
}

/* ===== ホバー状態 ===== */
.navbar-main .nav-item .nav-link:hover {
    transform: none !important;
    box-shadow: none !important;
    background: rgba(59, 130, 246, 0.4) !important;
    color: #ffffff !important;
    border-left: 4px solid #60a5fa;
}

.navbar-main .nav-item .nav-link:hover .navbar-icon svg path {
    fill: #ffffff !important;
}

.navbar-main .nav-item .nav-link:hover span {
    color: #ffffff !important;
}

/* ===== アクティブ状態 ===== */
.navbar-main .nav-item.active .nav-link,
.navbar-main .nav-item.active > .nav-link {
    background: rgba(59, 130, 246, 0.35) !important;
    color: #ffffff !important;
    border-left: 4px solid #93c5fd !important;
    box-shadow: none !important;
}

.navbar-main .nav-item.active .nav-link .navbar-icon svg path {
    fill: #ffffff !important;
}

.navbar-main .nav-item.active .nav-link span {
    color: #ffffff !important;
}

.navbar-main .nav-item.active .nav-link:hover {
    background: rgba(59, 130, 246, 0.5) !important;
    transform: none !important;
    box-shadow: none !important;
}

/* ===== ドロップダウンメニュー ===== */
.navbar-main .dropdown-menu {
    background-color: #252b48 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 4px !important;
    margin-top: 0 !important;
    padding: 8px 0 !important;
}

/* ドロップダウン項目 */
.navbar-main .dropdown-menu .dropdown-item,
.navbar-main .dropdown-menu .nav-item .dropdown-item {
    transition: all 0.15s ease;
    border-radius: 0 !important;
    margin: 0 !important;
    padding: 10px 16px !important;
    color: rgba(255, 255, 255, 0.7) !important;
    background: transparent !important;
    border-left: 3px solid transparent;
}

.navbar-main .dropdown-menu .dropdown-item .navbar-icon svg path {
    fill: rgba(255, 255, 255, 0.7) !important;
}

/* ドロップダウン項目のホバー */
.navbar-main .dropdown-menu .dropdown-item:hover,
.navbar-main .dropdown-menu .nav-item .dropdown-item:hover {
    transform: none !important;
    box-shadow: none !important;
    background: rgba(59, 130, 246, 0.4) !important;
    color: #ffffff !important;
    border-left: 4px solid #60a5fa;
}

.navbar-main .dropdown-menu .dropdown-item:hover .navbar-icon svg path,
.navbar-main .dropdown-menu .dropdown-item:hover span {
    fill: #ffffff !important;
    color: #ffffff !important;
}

/* ドロップダウン項目のアクティブ */
.navbar-main .dropdown-menu .nav-item.active .dropdown-item {
    background: rgba(59, 130, 246, 0.35) !important;
    color: #ffffff !important;
    border-left: 4px solid #93c5fd !important;
}

.navbar-main .dropdown-menu .nav-item.active .dropdown-item .navbar-icon svg path {
    fill: #ffffff !important;
}

/* ===== 左サイドバー固有のスタイル ===== */
.leftbar:not(.leftbar-closed) .navbar-main .nav-item .nav-link {
    padding-left: 20px !important;
}

.leftbar:not(.leftbar-closed) .main-menu .dropdown-menu {
    background-color: rgba(0, 0, 0, 0.2) !important;
    box-shadow: inset 0 4px 8px rgba(0, 0, 0, 0.15) !important;
    border: none !important;
    border-radius: 0 !important;
}

/* ===== 閉じた状態のサイドバー ===== */
.leftbar-closed .navbar-main .nav-item .nav-link {
    border-left: none !important;
    border-bottom: 2px solid transparent;
}

.leftbar-closed .navbar-main .nav-item.active .nav-link {
    border-left: none !important;
    border-bottom: 3px solid #93c5fd !important;
    background: rgba(59, 130, 246, 0.35) !important;
}

.leftbar-closed .navbar-main .nav-item .nav-link:hover {
    border-left: none !important;
    background: rgba(59, 130, 246, 0.4) !important;
}

/* ===== ナビゲーションバー右側（ユーザーメニュー） ===== */
.navbar-right .nav-item .nav-link {
    border-left: none !important;
}

.navbar-right .nav-item .nav-link:hover {
    border-left: none !important;
    background: rgba(59, 130, 246, 0.4) !important;
}

/* ===== ユーザープロフィールドロップダウン ===== */
.top-user-menus {
    background-color: #252b48 !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
    border-radius: 4px !important;
}

/* リスト項目の背景をオーバーライド */
.top-user-menus li {
    background: #252b48 !important;
    max-width: none !important;
}

/* 装飾的背景を非表示 */
.top-user-menus .backdrop {
    display: none !important;
}

.top-user-menus .dropdown-item,
.top-user-menus a {
    color: rgba(255, 255, 255, 0.8) !important;
    background: transparent !important;
    padding: 10px 16px !important;
    transition: all 0.15s ease;
    border-left: 3px solid transparent;
}

.top-user-menus .dropdown-item:hover,
.top-user-menus a:hover {
    background: rgba(59, 130, 246, 0.4) !important;
    color: #ffffff !important;
    border-left: 3px solid #60a5fa;
}

.top-user-menus .dropdown-item:focus,
.top-user-menus a:focus {
    background: rgba(59, 130, 246, 0.4) !important;
    color: #ffffff !important;
}

/* ユーザー名とメール */
.top-user-menus .user-email,
.top-user-menus .user-name {
    color: rgba(255, 255, 255, 0.6) !important;
}

/* ディバイダー */
.top-user-menus .dropdown-divider {
    border-color: rgba(255, 255, 255, 0.1) !important;
}

/* テキスト色 */
.top-user-menus span,
.top-user-menus p,
.top-user-menus .text-muted {
    color: rgba(255, 255, 255, 0.7) !important;
}

/* ステータスラベル（アクティブ等） */
.top-user-menus .label,
.top-user-menus .label-flat,
.top-user-menus [class*="bg-"] {
    background-color: #1f374a !important;
    color: #ffffff !important;
    border-color: #3b5068 !important;
}

/* アイコン色 */
.top-user-menus svg path,
.top-user-menus .material-symbols-rounded {
    fill: rgba(255, 255, 255, 0.7) !important;
    color: rgba(255, 255, 255, 0.7) !important;
}

.top-user-menus .dropdown-item:hover svg path,
.top-user-menus .dropdown-item:hover .material-symbols-rounded {
    fill: #ffffff !important;
    color: #ffffff !important;
}

/* ===== テーマカラー対応（すべて上書き） ===== */
[class*="theme-"] .navbar-main .nav-item .nav-link,
[class*="theme-"] .navbar-main .dropdown-menu .dropdown-item {
    background: transparent !important;
}

[class*="theme-"] .navbar-main .nav-item .nav-link:hover,
[class*="theme-"] .navbar-main .dropdown-menu .dropdown-item:hover {
    background: rgba(59, 130, 246, 0.4) !important;
}

[class*="theme-"] .navbar-main .nav-item.active .nav-link,
[class*="theme-"] .navbar-main .dropdown-menu .nav-item.active .dropdown-item {
    background: rgba(59, 130, 246, 0.35) !important;
}

/* ===== ダークモード対応 ===== */
body.mode-dark .navbar-main {
    background-color: #1e2242 !important;
}

body.mode-dark .navbar-main .dropdown-menu {
    background-color: #252b48 !important;
}

/* ===== スムーズなトランジション ===== */
.navbar-main .nav-item,
.navbar-main .dropdown-item {
    transition: all 0.2s ease;
}

/* ===== ドロップダウン矢印 ===== */
.navbar-main .dropdown-toggle::after {
    opacity: 0.6;
    transition: opacity 0.2s ease;
}

.navbar-main .nav-item:hover .dropdown-toggle::after,
.navbar-main .nav-item.active .dropdown-toggle::after {
    opacity: 1;
}