/* T033: 色覚多様性配慮の Okabe-Ito 8 色パレット (https://jfly.uni-koeln.de/color/)。
   AxisChart.razor の各バケット背景色を `var(--okabe-ito-N)` で参照する。 */

:root {
    /* ── Okabe-Ito 8色パレット ─────────────────────────────── */
    --okabe-ito-0: #0072b2; /* Blue */
    --okabe-ito-1: #e69f00; /* Orange */
    --okabe-ito-2: #009e73; /* Bluish Green */
    --okabe-ito-3: #cc79a7; /* Reddish Purple */
    --okabe-ito-4: #56b4e9; /* Sky Blue */
    --okabe-ito-5: #d55e00; /* Vermillion */
    --okabe-ito-6: #f0e442; /* Yellow */
    --okabe-ito-7: #000000; /* Black */

    --okabe-ito-other:   #9ca3af; /* Other バケット用ニュートラルグレー */
    --okabe-ito-unknown: #d1d5db; /* Unknown (未分類) 用 */

    /* ── ダッシュボードデザインシステム (Azure-inspired) ───── */
    --ds-bg:           #F4F7FB;   /* ページ背景: 淡いブルーグレー */
    --ds-surface:      #FFFFFF;   /* カード面 */
    --ds-primary:      #0F6CBD;   /* Azure Blue */
    --ds-primary-dark: #0B4F8A;   /* Deep Azure */
    --ds-primary-soft: #E5F1FB;   /* 薄い青 (ホバー/選択背景) */
    --ds-text:         #0F172A;   /* 主テキスト */
    --ds-muted:        #64748B;   /* 補助テキスト */
    --ds-border:       #D8E0EA;   /* ボーダー */
    --ds-green:        #16A34A;   /* Green accent */
    --ds-amber:        #F59E0B;   /* Amber accent */
    --ds-red:          #DC2626;   /* Red accent */
    --ds-purple:       #7C3AED;   /* Purple accent */
    --ds-neutral:      #CBD5E1;   /* Neutral */
}

/* ── MvpDrawer テーマ (MainLayout) ──────────────────────────────── */

/* Drawer 本体: プロフェッショナルなダークネイビー */
.mvp-drawer {
    background: linear-gradient(to bottom, #0d1b2e 0%, #142540 100%) !important;
    color: white !important;
}

/* Drawer ヘッダ: 下部に微細なボーダーで区切り */
.mud-drawer-header.mvp-drawer-header {
    border-bottom: 1px solid rgba(86, 180, 233, 0.2);
    padding: 0 16px;
}

/* ナビリンク: 白文字(やや透明) */
.mvp-drawer .mud-nav-link {
    color: rgba(255, 255, 255, 0.72) !important;
    border-radius: 6px;
    margin: 2px 8px;
    padding-left: 12px !important;
}

.mvp-drawer .mud-nav-link:hover {
    background-color: rgba(86, 180, 233, 0.14) !important;
    color: rgba(255, 255, 255, 0.95) !important;
}

/* アクティブリンク: アクセントカラー左ボーダー */
.mvp-drawer .mud-nav-link.active {
    background-color: rgba(0, 196, 240, 0.18) !important;
    border-left: 3px solid #00c4f0;
    padding-left: 9px !important;
    color: white !important;
    font-weight: 600;
}

/* アイコン色 */
.mvp-drawer .mud-nav-link .mud-icon-root {
    color: rgba(86, 180, 233, 0.7) !important;
}

.mvp-drawer .mud-nav-link.active .mud-icon-root {
    color: #00c4f0 !important;
}

/* ── Footer ─────────────────────────────────────────────────────── */
.mvp-footer {
    padding: 12px 24px;
    text-align: center;
    background: linear-gradient(to right, #004a97, #0072b2 55%, #56b4e9);
    border-top: 3px solid #00c4f0;
    color: rgba(255, 255, 255, 0.85);
}

.mvp-footer strong {
    color: white;
}