.neo-brutalism { border: 4px solid black; box-shadow: 8px 8px 0px rgba(0,0,0,1); }
.neo-brutalism-sm { border: 2px solid black; box-shadow: 4px 4px 0px rgba(0,0,0,1); }
.progress-container { border: 3px solid black; height: 24px; background: white; overflow: hidden; }
.calendar-day { aspect-ratio: 1 / 1; border-right: 2px solid black; border-bottom: 2px solid black; padding: 2px; font-size: 10px; cursor: pointer; }
.calendar-day:hover { background-color: #e5e7eb; }

body { padding-bottom: 80px; }
.nav-btn.active { background-color: #fef08a; border-top: 4px solid black; }

.hide-scrollbar::-webkit-scrollbar { display: none; }
.hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

input[type="date"], select { -webkit-appearance: none; appearance: none; border-radius: 0; }

/* 裏（Secret）モードのスタイル */
body.secret-mode { background-color: #000 !important; color: #22c55e !important; }

body.secret-mode #main-header {
    background-color: #000 !important;
    border-color: #22c55e !important;
    box-shadow: 8px 8px 0px #064e3b !important;
    color: #22c55e !important;
}
body.secret-mode #main-header #remainingAmount.text-red-600 { color: #dc2626 !important; }
body.secret-mode #main-header #remainingAmount:not(.text-red-600) { color: #22c55e !important; }
body.secret-mode #main-header .progress-container { border-color: #22c55e !important; background-color: #000 !important; }
body.secret-mode #main-header button { color: #22c55e !important; }

.s-nav-btn.active { background-color: #064e3b; border-top: 4px solid #22c55e; }

@keyframes glitch {
    0% { transform: translate(0) }
    20% { transform: translate(-2px, 2px) }
    40% { transform: translate(-2px, -2px) }
    60% { transform: translate(2px, 2px) }
    80% { transform: translate(2px, -2px) }
    100% { transform: translate(0) }
}
.glitch-anim { animation: glitch 0.2s infinite; }

/* --- 着せ替えテーマ & 設定ボタン用のスタイル --- */

/* 裏モード時は右上の一時的な設定ボタンを完全に非表示にする */
body.secret-mode #settings-btn {
    display: none !important;
}

/* 💡 ここに新しいデザインテーマ用のCSSを追加できます */


/* ==========================================
   平成レトロテーマ (theme-classic)
   ========================================== */

/* 全体の背景を昔のデスクトップ風のグレーに、フォントをMSゴシックライクなSans-Serifへ */
body.theme-classic:not(.secret-mode) {
    background-color: #3a6ea5 !important; /* 昔のWindowsの背景色（デスクトップグリーン/ブルー） */
    color: #000000 !important;
    font-family: 'MS PGothic', 'Hiragino Kaku Gothic ProN', sans-serif !important;
}

/* 予算ボックス（ヘッダー）の形をグレーの3Dウィンドウ化 */
body.theme-classic:not(.secret-mode) #main-header {
    background-color: #d4d0c8 !important; /* クラシックグレー */
    border-top: 2px solid #ffffff !important;
    border-left: 2px solid #ffffff !important;
    border-right: 2px solid #808080 !important;
    border-bottom: 2px solid #808080 !important;
    box-shadow: 2px 2px 0px #000000 !important; /* 2重の立体影 */
    border-radius: 0px !important; /* 角丸を完全に無くす（直角） */
    color: #000000 !important;
}

/* 残高テキスト */
body.theme-classic:not(.secret-mode) #main-header #remainingAmount {
    color: #000000 !important;
    font-family: monospace;
    font-weight: 900;
}

/* プログレスバーのコンテナを「窪んだ形（インセットベゼル）」に変形 */
body.theme-classic:not(.secret-mode) #main-header .progress-container {
    border-top: 2px solid #808080 !important;
    border-left: 2px solid #808080 !important;
    border-right: 2px solid #ffffff !important;
    border-bottom: 2px solid #ffffff !important;
    background-color: #ffffff !important;
    border-radius: 0px !important;
    height: 20px !important;
}

/* プログレスバーの中身（昔のインストーラー風のブロックネイビー） */
body.theme-classic:not(.secret-mode) #main-header #progressBar {
    background-color: #000080 !important; /* 昔のタスクバーや選択色でお馴染みの紺色 */
}

/* アプリ内の他の「neo-brutalism」カード要素もすべて直角＆グレー3Dに化けさせる */
body.theme-classic:not(.secret-mode) .neo-brutalism,
body.theme-classic:not(.secret-mode) .neo-brutalism-sm {
    background-color: #d4d0c8 !important;
    border-top: 2px solid #ffffff !important;
    border-left: 2px solid #ffffff !important;
    border-right: 2px solid #808080 !important;
    border-bottom: 2px solid #808080 !important;
    box-shadow: 1px 1px 0px #000000 !important;
    border-radius: 0px !important;
}

/* 下部ナビゲーションボタンをOSの「タブ」に変形 */
body.theme-classic:not(.secret-mode) .nav-btn.active {
    background-color: #d4d0c8 !important;
    border-top: 2px solid #ffffff !important;
    border-left: 2px solid #ffffff !important;
    border-right: 2px solid #808080 !important;
    border-bottom: none !important;
    color: #000000 !important;
    transform: translateY(-2px); /* アクティブなタブが上にちょっと飛び出す */
}

body.theme-classic:not(.secret-mode) .nav-btn:not(.active) {
    background-color: #c0c0c0 !important;
    border: 1px solid #808080 !important;
    color: #404040 !important;
}

/* ReportタブのCSVエクスポートボタンをOS風の3Dグレーボタンに変形 */
body.theme-classic:not(.secret-mode) #view-report button {
    background-color: #d4d0c8 !important; /* クラシックグレー */
    color: #000000 !important;
    border-top: 2px solid #ffffff !important;
    border-left: 2px solid #ffffff !important;
    border-right: 2px solid #808080 !important;
    border-bottom: 2px solid #808080 !important;
    box-shadow: 1px 1px 0px #000000 !important; /* ネオブロータリズムの重い影をリセット */
    border-radius: 0px !important;
    transform: none !important; /* アニメーションのリセット */
}

/* CSVボタンを押した時の沈み込みエフェクト */
body.theme-classic:not(.secret-mode) #view-report button:active {
    border-top: 2px solid #808080 !important;
    border-left: 2px solid #808080 !important;
    border-right: 2px solid #ffffff !important;
    border-bottom: 2px solid #ffffff !important;
    box-shadow: none !important;
    padding-top: 13px !important; /* 1px押し込まれたように見せる微調整 */
    padding-left: 9px !important;
}

/* グラフのスクロールコンテナの背景と角丸もクラシック化 */
body.theme-classic:not(.secret-mode) #chartScrollContainer {
    background-color: #ffffff !important;
    border: 2px solid #808080 !important;
    border-radius: 0px !important;
}