@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap');

/* --- 全テーマ共通の基本構造スタイル --- */
body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    font-family: 'Inter', sans-serif;
    transition: background-color 0.3s, color 0.3s;
    font-size: 14px;
}

/* Layout constants for fixed bars */
:root {
    --header-height: 90px;      /* matches #tab-nav top offset */
    --tab-height: 36px;         /* reduced nav height (tighter spacing) */
    --bottom-bar-height: 36px;  /* compact full-width action bar height (approx text height) */
    --tab-gap-fix: 4px;         /* overlap tabs upward to kiss header */
}

.container { width: 100%; max-width: 1400px; padding: 1rem; margin-left: auto; margin-right: auto; }
.modal { display: none; position: fixed; z-index: 12000 !important; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: #000000 !important; justify-content: center; align-items: center; }
.modal-content {
    background-color: var(--modal-bg-color);
    margin: auto; 
    padding: 2rem; 
    border-radius: 0.75rem; 
    width: calc(100% - 4rem); /* Default modal width with comfortable gutters */
    /* max-width: 1200px;  Removed */ 
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); 
    max-height: 90vh; 
    overflow-y: auto; 
    position: relative; 
}

/* Wider layout specifically for Next-Month Production Planning modal */
#productionPlanningModal .modal-content {
    width: min(1600px, calc(100% - 1.5rem)); /* widen overall and shrink side gutters */
}

/* Side-fixed detail panel variant: stays visible within viewport; scrolls internally if overflow */
.modal-content.modal-side-fixed {
    position: fixed;
    right: 1rem;
    top: 10vh;
    width: min(560px, calc(100% - 2rem));
    max-height: 80vh;
    margin: 0; /* override center margin */
}

/* Top-center fixed detail panel: centered horizontally near top; internal scroll if overflow */
.modal-content.modal-top-center-fixed {
    position: fixed;
    top: 8vh;
    left: 50%;
    transform: translateX(-50%);
    width: min(720px, calc(100% - 2rem));
    max-height: 80vh;
    margin: 0;
    overflow-y: auto;
}
.modal-actions { position: sticky; bottom: 0; z-index: 12050; background-color: var(--modal-bg-color); padding-top: 1rem; margin-top: 1rem; box-shadow: 0 -6px 16px rgba(0,0,0,0.35); }
.close-button { position: absolute; top: 1rem; right: 1rem; font-size: 1.5rem; font-weight: bold; cursor: pointer; color: var(--modal-text-color); }
.close-button:hover { color: var(--primary-color); }


.top-header > .container {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

/* Ensure header and tab-nav follow theme colors instead of fixed Tailwind grays */
.top-header { background-color: var(--header-bg-color) !important; }
#tab-nav { background-color: var(--tab-nav-background-color) !important; top: calc(var(--header-height) - var(--tab-gap-fix)) !important; }

/* Fixed footer bar (shared across pages) */
.fixed-footer {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 1100;
    height: 3rem;
    background-color: var(--header-bg-color) !important;
    border-top: 1px solid var(--tab-border-color);
}
.fixed-footer .container { height: 100%; display: flex; align-items: center; justify-content: center; }

/* Dashboard widgets themed colors */
.dashboard-widget { background-color: var(--widget-background-color) !important; border: 1px solid var(--tab-border-color); border-radius: 0.5rem; padding: 1rem; }
.widget-title { color: var(--widget-title-color) !important; }
.widget-value { color: var(--widget-value-color) !important; }
.widget-trend { color: var(--widget-trend-color) !important; }

/* メインコンテンツエリアのパディングを調整 */
#gameScreen .main-content-area {
    position: relative;
    z-index: 0;
    background-color: var(--main-bg-color);
    color: var(--main-text-color);
    /* Push content below fixed header+tabs and above bottom controls */
    margin-top: calc(var(--header-height) + var(--tab-height) - var(--tab-gap-fix));
    margin-bottom: var(--bottom-bar-height);
    /* Make only the tab content area scrollable */
    height: calc(100vh - var(--header-height) - var(--tab-height) - var(--bottom-bar-height) + var(--tab-gap-fix));
    overflow-y: auto;
    padding: 1rem;
}

/* ログ表示時は、タブ中身のスクロール領域を広げる（下の固定ログ分を引く） */
body.log-open #gameScreen .main-content-area {
    height: calc(100vh - var(--header-height) - var(--tab-height) - var(--bottom-bar-height) - 35vh + var(--tab-gap-fix));
}

/* Modals layering fixes */
/* Ensure dialogs always appear above assistant/character overlay and other UI */
#characterDisplayModal { z-index: 900 !important; }
#characterDisplayModal .modal-content { z-index: 901; }
.modal-content { z-index: 12020; }

/* Always keep confirmation modals on very top */
#confirmModal { z-index: 14000 !important; }
#confirmModal .modal-content { z-index: 14010; }
#approvalModal { z-index: 14000 !important; }
#approvalModal .modal-content { z-index: 14010; }

/* Toast container should be above all modals */
#toast-container { z-index: 16000 !important; pointer-events: none; }
#toast-container > * { pointer-events: none !important; }

/* Ensure tab contents never overlay header/nav */
/* タブのコンテンツエリアを見やすくするスタイル */
.tab-content {
    position: relative;
    z-index: 0;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 180ms ease, transform 180ms ease;
    background-color: var(--widget-background-color);
    border: 1px solid var(--tab-border-color);
    border-top: none;
    padding: 1.5rem;
    border-radius: 0 0 0.5rem 0.5rem;
    margin-top: -1px; /* タブの境界線と綺麗に繋げるため */
    font-size: 0.875rem; /* タブの内容の文字を小さくする */
    height: 100%;
    overflow-y: auto;
}
.tab-content.active {
    opacity: 1;
    transform: translateY(0);
}

/* --- Log area scrolling --- */
.log-window { /* left-side main log */
    overflow-y: auto;
}
#gameLog { /* ensure element-level scroll if used directly */
    overflow-y: auto;
    height: 100%;
}
/* Log message line styles */
.log-line { transition: opacity 180ms ease, color 180ms ease; }
.log-line.log-faded { opacity: 0.6; color: #9ca3af; }
.log-line.log-active { opacity: 1; color: #e5e7eb; }

/* Employee list standout parameters */
.param-chip { padding: 0 6px; border-radius: 6px; font-weight: 700; display: inline-block; min-width: 2ch; text-align: right; }
.param-high { color: #22c55e; background-color: rgba(34,197,94,0.14); }
.param-elite { color: #10b981; background-color: rgba(16,185,129,0.22); box-shadow: inset 0 0 0 1px rgba(16,185,129,0.35); }
.param-low { color: #ef4444; background-color: rgba(239,68,68,0.14); }
#logChatSidebar { /* right-side log/chat column */
    min-height: 0; /* allow children to shrink and scroll within flex */
}
.tabs-container { /* container for tab headers + content */
    min-height: 0;
}
.tab-content-modal { /* scrollable content panel */
    min-height: 0;
}
#operationLogTab,
#chatTab { /* reinforce scroll area behavior */
    overflow-y: auto;
}

/* Ensure chat history scrolls independently */
#chatDisplay {
    overflow-y: auto;
    max-height: 50vh; /* adjust as needed */
}

/* ログエリアとアクションバーの重なりを解消 */
.log-area-container { bottom: calc(var(--bottom-bar-height) + 4px) !important; z-index: 1105 !important; }

/* Auto show/hide for log area */
.log-area-container {
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 200ms ease-out, transform 200ms ease-out;
    pointer-events: none;
}
.log-area-container.log-visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
#unifiedBottomControls {
    z-index: 1200 !important;
    font-size: 12px;
    /* keep full width at bottom */
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: auto !important;
    height: auto !important; /* match content height */
    min-height: 0 !important;
    padding: 2px 8px !important; /* override h-16 p-4 */
    align-items: center !important;
    display: flex !important;
}
#mainActionBarWrapper { flex-grow: 1 !important; }
#exportButtonsWrapper { flex-grow: 1 !important; }
#logControls { flex-shrink: 0 !important; }
#unifiedBottomControls button,
#unifiedBottomControls .font-size-button,
#unifiedBottomControls .speed-button { font-size: 12px; padding: 0.25rem 0.5rem; }










#mainActionBarWrapper {
    flex-grow: 1;
    display: flex;
    justify-content: flex-start;
    min-width: 200px;
}
#actionBar {
    display: flex;
    gap: 0.5rem;
}
#logControls {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
    min-width: 300px;
}
#exportButtonsWrapper {
    flex-grow: 1;
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    min-width: 200px;
}

/* ログコントロール内のボタン調整 */
.log-controls button,
#unifiedBottomControls button {
    padding: 0.4rem 0.8rem;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    white-space: nowrap;
    border: none; /* デフォルトのボタンボーダーを削除 */
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s;
}

/* --- Help chip tooltip for inline explanations --- */
.help-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px; height: 20px;
    border-radius: 9999px;
    background: #374151; /* gray-700 */
    color: #e5e7eb;      /* gray-200 */
    font-weight: 700;
    font-size: 12px;
    line-height: 1;
    margin-left: 6px;
    cursor: help;
    position: relative;
    border: 1px solid #4b5563; /* gray-600 */
}
.help-chip:focus { outline: 2px solid #2563eb; outline-offset: 2px; }
.help-chip::after {
    content: attr(data-tip);
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: calc(100% + 8px);
    background: #111827; /* gray-900 */
    color: #e5e7eb;
    padding: 8px 10px;
    border-radius: 6px;
    font-size: 12px;
    line-height: 1.4;
    width: max-content;
    max-width: 360px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.35);
    border: 1px solid #374151; /* gray-700 */
    opacity: 0;
    transition: opacity 120ms ease;
    pointer-events: none;
    white-space: normal;
    z-index: 20000;
}
.help-chip::before {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: calc(100% + 2px);
    border-width: 6px;
    border-style: solid;
    border-color: #111827 transparent transparent transparent;
    opacity: 0;
    transition: opacity 120ms ease;
}
.help-chip:hover::after,
.help-chip:hover::before,
.help-chip:focus::after,
.help-chip:focus::before { opacity: 1; }

/* Smooth width for simple progress bars */
.bar-fill { transition: width 240ms ease; }

/* Value change indicators without count-up */

.change-indicator { display: inline-block; margin-left: 6px; font-weight: 800; opacity: 0; letter-spacing: 0.06em; }
.change-indicator.up { color: #10b981; }
.change-indicator.down { color: #ef4444; }
.change-indicator.up.lvl-1 { animation: riseFade1 900ms ease-out forwards; }
.change-indicator.up.lvl-2 { animation: riseFade2 1100ms ease-out forwards; }
.change-indicator.up.lvl-3 { animation: riseFade3 1300ms ease-out forwards; }
.change-indicator.down.lvl-1 { animation: fallFade1 900ms ease-out forwards; }
.change-indicator.down.lvl-2 { animation: fallFade2 1100ms ease-out forwards; }
.change-indicator.down.lvl-3 { animation: fallFade3 1300ms ease-out forwards; }
@keyframes riseFade1 { 0% { opacity: 0; transform: translateY(4px) scale(0.96);} 20% { opacity: 1; } 100% { opacity: 0; transform: translateY(-6px) scale(1);} }
@keyframes riseFade2 { 0% { opacity: 0; transform: translateY(6px) scale(0.96);} 20% { opacity: 1; } 100% { opacity: 0; transform: translateY(-10px) scale(1);} }
@keyframes riseFade3 { 0% { opacity: 0; transform: translateY(8px) scale(0.96);} 20% { opacity: 1; } 100% { opacity: 0; transform: translateY(-14px) scale(1);} }
@keyframes fallFade1 { 0% { opacity: 0; transform: translateY(-4px) scale(0.96);} 20% { opacity: 1; } 100% { opacity: 0; transform: translateY(6px) scale(1);} }
@keyframes fallFade2 { 0% { opacity: 0; transform: translateY(-6px) scale(0.96);} 20% { opacity: 1; } 100% { opacity: 0; transform: translateY(10px) scale(1);} }
@keyframes fallFade3 { 0% { opacity: 0; transform: translateY(-8px) scale(0.96);} 20% { opacity: 1; } 100% { opacity: 0; transform: translateY(14px) scale(1);} }

.change-up, .change-down { position: relative; }
.change-up::after, .change-down::after {
    content: '';
    position: absolute; inset: -2px;
    border-radius: 6px;
    background: rgba(16,185,129,0.14);
    animation: flashOut 900ms ease-out forwards;
    pointer-events: none;
}
.change-down::after { background: rgba(239,68,68,0.14); }
.change-up.lvl-2::after { background: rgba(16,185,129,0.22); animation-duration: 1100ms; }
.change-up.lvl-3::after { background: rgba(16,185,129,0.30); animation-duration: 1300ms; }
.change-down.lvl-2::after { background: rgba(239,68,68,0.22); animation-duration: 1100ms; }
.change-down.lvl-3::after { background: rgba(239,68,68,0.30); animation-duration: 1300ms; }
@keyframes flashOut { from { opacity: 1; } to { opacity: 0; } }














.tab-link {
    font-weight: 600;
    padding: 0.75rem 1rem;
    border-bottom: 2px solid transparent;
    transition: color 0.2s, border-color 0.2s;
    color: var(--tab-text-color);
    cursor: pointer;
    background: none; /* ボタンのデフォルト背景を削除 */
}
.tab-link:hover {
    color: var(--tab-hover-text-color);
    border-color: var(--tab-hover-border-color);
}
.tab-link.active {
    color: var(--tab-active-text-color);
    border-color: var(--tab-active-border-color);
}



/* ダッシュボードウィジェット */
.dashboard-widget {
    background-color: var(--widget-background-color);
    padding: 1.5rem;
    border-radius: 0.5rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    color: var(--main-text-color);
}
.widget-title {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--widget-title-color);
    display: flex;
    align-items: center;
}
.widget-value {
    font-size: 2.25rem;
    font-weight: 800;
    color: var(--widget-value-color);
    margin-top: 0.5rem;
}
.widget-trend {
    font-size: 0.875rem;
    color: var(--widget-trend-color);
}
.tooltip-trigger {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    position: relative;
    cursor: help;
    margin-left: 8px;
    background-color: var(--tooltip-trigger-bg);
    color: var(--tooltip-trigger-text);
    width: 1.125rem;
    height: 1.125rem;
    border-radius: 9999px;
    font-size: 0.875rem;
    font-weight: bold;
    pointer-events: auto;
}
.tooltip-trigger::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 125%;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--tooltip-content-bg);
    color: var(--tooltip-content-text);
    padding: 0.5rem 0.75rem;
    border-radius: 0.375rem;
    border: 1px solid var(--tooltip-border-color);
    font-size: 0.75rem;
    line-height: 1.4;
    font-weight: normal;
    text-transform: none;
    text-align: left;
    white-space: normal;
    width: 250px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out;
    z-index: 1052;
    pointer-events: none;
}
.tooltip-trigger:hover::after {
    opacity: 1;
    visibility: visible;
}

.statement-table {
    width: 100%;
    border-collapse: collapse;
    color: var(--main-text-color);
}
.statement-table th, .statement-table td {
    padding: 0.75rem;
    text-align: left;
    border-bottom: 1px solid var(--table-border-color);
    font-size: 0.75rem; /* Make text smaller for readability */
}
.statement-table th {
    font-weight: bold;
    background-color: var(--table-header-bg);
    color: var(--table-header-text);
}
.statement-table tbody tr:nth-child(even) {
    background-color: var(--table-row-even-bg);
}
.statement-table .section-header td {
    font-weight: bold;
    background-color: var(--table-section-header-bg);
    color: var(--table-section-header-text);
    border-top: 2px solid var(--table-section-header-border) !important;
}

.loan-option {
    border-width: 2px;
    border-radius: 0.5rem;
    padding: 1rem;
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s;
    border-color: var(--loan-option-border);
    background-color: var(--loan-option-bg);
    color: var(--main-text-color);
}
.loan-option:hover {
    background-color: var(--loan-option-hover-bg);
}
.loan-option input[type="radio"]:checked + div { /* inputを非表示にし、divにスタイルを適用 */
    background-color: var(--loan-option-checked-bg);
    border-color: var(--loan-option-checked-border);
}
.loan-option input[type="radio"] {
    display: none; /* ラジオボタンを隠す */
}


.proposal-card {
    border-width: 1px;
    border-radius: 0.5rem;
    padding: 0.75rem;
    transition: border-color 0.2s, background-color 0.2s;
    background-color: var(--proposal-card-bg);
    border-color: var(--proposal-card-border);
    color: var(--main-text-color);
}
.proposal-card.selected {
    border-color: var(--proposal-card-selected-border);
    background-color: var(--proposal-card-selected-bg);
}
.proposal-checkbox { display: none; }
.proposal-toggle {
    width: 3rem; height: 1.5rem;
    border-radius: 9999px;
    position: relative;
    transition: all 200ms;
    background-color: var(--toggle-off-bg);
}
.proposal-toggle::after {
    content: '';
    width: 1.25rem; height: 1.25rem;
    border-radius: 9999px;
    position: absolute; top: 0.125rem; left: 0.125rem;
    transition: transform 200ms;
    background-color: var(--toggle-handle-color);
}
.proposal-checkbox:checked + .proposal-toggle {
    background-color: var(--toggle-on-bg);
}
.proposal-checkbox:checked + .proposal-toggle::after {
    transform: translateX(100%);
}

.phase-action-button {
    animation: blink 1.5s ease-in-out infinite;
}
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
.animate-blink { animation: blink 2s ease-in-out infinite; }

/* 財務情報の表示調整 */
#financialSummary p {
    display: flex;
    justify-content: space-between;
}

/* --- テーマ定義 --- */

/* -- 基本変数 (フォールバック、または共通の定義) -- */
body {
    background-color: #1a202c; /* デフォルト背景 */
    color: #e2e8f0; /* デフォルト文字色 */
}

/* -- シンプル（ダーク）テーマ -- */
.theme-simple {
    --main-bg-color: #1a202c;
    --main-text-color: #e2e8f0;
    --primary-color: #63b3ed; /* タイトル、強調色 */
    --secondary-color: #fbd38d; /* 警告、アクセント色 */
    --danger-color: #fc8181;
    --success-color: #68d391;

    --header-bg-color: #1a202c;
    --tab-nav-background-color: #1a202c;
    --tab-background-color: #374151;
    --tab-text-color: #9ca3af;
    --tab-hover-text-color: #ffffff;
    --tab-hover-border-color: #3b82f6;
    --tab-active-background-color: #1a202c;
    --tab-active-text-color: #ffffff;
    --tab-active-border-color: #3b82f6;
    --tab-border-color: #4a5568; /* タブ間の線 */

    --modal-bg-color: #2d3748;
    --modal-text-color: #cbd5e0;
    --input-background-color: #1e293b;
    --input-border-color: #4b5563;
    --input-text-color: #e2e8f0;

    --log-background-color: #0f172a;
    --log-text-color: #00ff00; /* グリーンテキスト */
    --log-number-color: #fbd38d; /* オレンジ */
    --log-controls-background-color: #0f172a;
    --log-sidebar-background-color: #1a202c;
    --log-sidebar-log-background-color: #0f172a; /* サイドバー内のログ背景 */
    --log-border-color: #4a5568;

    --widget-background-color: #1f2937;
    --widget-title-color: #63b3ed;
    --widget-value-color: #ffffff;
    --widget-trend-color: #a0aec0;
    --tooltip-trigger-bg: #4a5568;
    --tooltip-trigger-text: #e2e8f0;
    --tooltip-content-bg: #0f172a;
    --tooltip-content-text: #e2e8f0;
    --tooltip-border-color: #4a5568;

    --table-header-bg: #374151;
    --table-header-text: #e2e8f0;
    --table-row-even-bg: #374151;
    --table-section-header-bg: #1f2937;
    --table-section-header-text: #9ca3af;
    --table-border-color: #4b5563;
    --table-section-header-border: #4b5563;

    --loan-option-border: #4a5568;
    --loan-option-bg: #1f2937;
    --loan-option-hover-bg: #4b5563;
    --loan-option-checked-bg: #1e3a8a; /* bg-blue-900 opacity 30% 相当 */
    --loan-option-checked-border: #3b82f6; /* bg-blue-600 */

    --proposal-card-bg: #1f2937;
    --proposal-card-border: #4a5568;
    --proposal-card-selected-border: #3b82f6;
    --proposal-card-selected-bg: rgba(59, 130, 246, 0.3);

    --toggle-off-bg: #4b5563;
    --toggle-on-bg: #3b82f6;
    --toggle-handle-color: #ffffff;

    /* ボタン共通スタイル */
    .top-header-button { background-color: #4a5568; color: #e2e8f0; }
    .top-header-button:hover { background-color: #374151; color: #ffffff; }
    .top-header-button-danger { background-color: #dc2626; color: #ffffff; } /* bg-red-600 */
    .top-header-button-danger:hover { background-color: #b91c1c; color: #ffffff; }

    .button-primary { background-color: #3b82f6; color: white; }
    .button-primary:hover { background-color: #2563eb; }
    .button-secondary { background-color: #4a5568; color: #e2e8f0; }
    .button-secondary:hover { background-color: #374151; }
    .button-danger { background-color: #ef4444; color: white; }
    .button-danger:hover { background-color: #dc2626; }
    .button-success { background-color: #22c55e; color: white; }
    .button-success:hover { background-color: #16a34a; }
}

/* -- モダン（ダーク）テーマ -- */
.theme-modern {
    --main-bg-color: #111827;
    --main-text-color: #d1d5db;
    --primary-color: #c084fc; /* タイトル、強調色 (purple-400) */
    --secondary-color: #5eead4; /* アクセント色 (teal-300) */
    --danger-color: #ef4444; /* red-500 */
    --success-color: #22c55e; /* green-500 */

    --header-bg-color: #111827;
    --tab-nav-background-color: #111827;
    --tab-background-color: #1f2937;
    --tab-text-color: #d1d5db;
    --tab-hover-text-color: #ffffff;
    --tab-hover-border-color: #a855f7;
    --tab-active-background-color: #111827;
    --tab-active-text-color: #c084fc;
    --tab-active-border-color: #a855f7;
    --tab-border-color: #374151;

    --modal-bg-color: #1f2937;
    --modal-text-color: #d1d5db;
    --input-background-color: #1f2937;
    --input-border-color: #4b5563;
    --input-text-color: #d1d5db;

    --log-background-color: #0c1322;
    --log-text-color: #5eead4; /* teal-300 */
    --log-number-color: #fde047; /* yellow-300 */
    --log-controls-background-color: #0c1322;
    --log-sidebar-background-color: #111827;
    --log-sidebar-log-background-color: #0c1322;
    --log-border-color: #374151;

    --widget-background-color: #1f2937;
    --widget-title-color: #c084fc;
    --widget-value-color: #ffffff;
    --widget-trend-color: #9ca3af;
    --tooltip-trigger-bg: #374151;
    --tooltip-trigger-text: #d1d5db;
    --tooltip-content-bg: #0c1322;
    --tooltip-content-text: #d1d5db;
    --tooltip-border-color: #374151;

    --table-header-bg: #374151;
    --table-header-text: #d1d5db;
    --table-row-even-bg: #1f2937;
    --table-section-header-bg: #111827;
    --table-section-header-text: #9ca3af;
    --table-border-color: #374151;
    --table-section-header-border: #4b5563;

    --loan-option-border: #374151;
    --loan-option-bg: #1f2937;
    --loan-option-hover-bg: #4b5563;
    --loan-option-checked-bg: #3b0764; /* purple-900 opacity 30% */
    --loan-option-checked-border: #a855f7; /* purple-500 */

    --proposal-card-bg: #1f2937;
    --proposal-card-border: #374151;
    --proposal-card-selected-border: #a855f7;
    --proposal-card-selected-bg: rgba(168, 85, 247, 0.2);

    --toggle-off-bg: #4b5563;
    --toggle-on-bg: #a855f7;
    --toggle-handle-color: #ffffff;

    /* ボタン共通スタイル */
    .top-header-button { background-color: #374151; color: #d1d5db; }
    .top-header-button:hover { background-color: #4b5563; color: #ffffff; }
    .top-header-button-danger { background-color: #dc2626; color: #ffffff; }
    .top-header-button-danger:hover { background-color: #b91c1c; color: #ffffff; }

    .button-primary { background-color: #a855f7; color: white; }
    .button-primary:hover { background-color: #9333ea; }
    .button-secondary { background-color: #374151; color: #d1d5db; }
    .button-secondary:hover { background-color: #4b5563; }
    .button-danger { background-color: #ef4444; color: white; }
    .button-danger:hover { background-color: #dc2626; }
    .button-success { background-color: #22c55e; color: white; }
    .button-success:hover { background-color: #16a34a; }
}

/* -- ノーマル（ライト）テーマ -- */
.theme-normal {
    --main-bg-color: #f8fafc;
    --main-text-color: #020617;
    --primary-color: #2563eb;
    --secondary-color: #c2410c;
    --danger-color: #dc2626;
    --success-color: #16a34a;

    --header-bg-color: #f8fafc;
    --tab-nav-background-color: #f8fafc;
    --tab-background-color: #e5e7eb;
    --tab-text-color: #475569;
    --tab-hover-text-color: #020617;
    --tab-hover-border-color: #2563eb;
    --tab-active-background-color: #f8fafc;
    --tab-active-text-color: #1d4ed8;
    --tab-active-border-color: #2563eb;
    --tab-border-color: #cbd5e0;

    --modal-bg-color: #ffffff;
    --modal-text-color: #475569;
    --input-background-color: #ffffff;
    --input-border-color: #94a3b8;
    --input-text-color: #020617;

    --log-background-color: #e2e8f0;
    --log-text-color: #15803d;
    --log-number-color: #c2410c;
    --log-controls-background-color: #e2e8f0;
    --log-sidebar-background-color: #f8fafc;
    --log-sidebar-log-background-color: #e2e8f0;
    --log-border-color: #cbd5e0;

    --widget-background-color: #ffffff;
    --widget-title-color: #2563eb;
    --widget-value-color: #020617;
    --widget-trend-color: #475569;
    --tooltip-trigger-bg: #a0aec0;
    --tooltip-trigger-text: #1f2937;
    --tooltip-content-bg: #0f172a;
    --tooltip-content-text: #e2e8f0;
    --tooltip-border-color: #4a5568;

    --table-header-bg: #e5e7eb;
    --table-header-text: #1f2937;
    --table-row-even-bg: #f3f4f6;
    --table-section-header-bg: #d1d5db;
    --table-section-header-text: #4b5563;
    --table-border-color: #cbd5e0;
    --table-section-header-border: #94a3b8;

    --loan-option-border: #cbd5e0;
    --loan-option-bg: #ffffff;
    --loan-option-hover-bg: #f3f4f6;
    --loan-option-checked-bg: #dbeafe; /* bg-blue-100 */
    --loan-option-checked-border: #2563eb; /* bg-blue-600 */

    --proposal-card-bg: #ffffff;
    --proposal-card-border: #e5e7eb;
    --proposal-card-selected-border: #2563eb;
    --proposal-card-selected-bg: rgba(59, 130, 246, 0.1);

    --toggle-off-bg: #94a3b8;
    --toggle-on-bg: #2563eb;
    --toggle-handle-color: #ffffff;

    /* ボタン共通スタイル */
    .top-header-button { background-color: #e5e7eb; color: #475569; }
    .top-header-button:hover { background-color: #d1d5db; color: #1f2937; }
    .top-header-button-danger { background-color: #ef4444; color: #ffffff; }
    .top-header-button-danger:hover { background-color: #dc2626; color: #ffffff; }

    .button-primary { background-color: #2563eb; color: white; }
    .button-primary:hover { background-color: #1d4ed8; }
    .button-secondary { background-color: #e5e7eb; color: #475569; }
    .button-secondary:hover { background-color: #d1d5db; }
    .button-danger { background-color: #ef4444; color: white; }
    .button-danger:hover { background-color: #dc2626; }
    .button-success { background-color: #22c55e; color: white; }
    .button-success:hover { background-color: #16a34a; }
}

/* -- PC-98風テーマ -- */
.theme-pc98 {
    --main-bg-color: #000080; /* PC-98の青 */
    --main-text-color: #ffffff;
    --primary-color: #ffff00; /* 黄色 */
    --secondary-color: #00ffff; /* シアン */
    --danger-color: #ff0000;
    --success-color: #00ff00;

    --header-bg-color: #000080;
    --tab-nav-background-color: #000080;
    --tab-background-color: #0000a0; /* 少し濃い青 */
    --tab-text-color: #ffffff;
    --tab-hover-text-color: #ffff00;
    --tab-hover-border-color: #ff00ff;
    --tab-active-background-color: #000000; /* 黒 */
    --tab-active-text-color: #ffff00;
    --tab-active-border-color: #ff00ff; /* マゼンタ */
    --tab-border-color: #ffffff;

    --modal-bg-color: #000000;
    --modal-text-color: #ffffff;
    --input-background-color: #000000;
    --input-border-color: #ffffff;
    --input-text-color: #ffffff;

    --log-background-color: #000000;
    --log-text-color: #ffffff;
    --log-number-color: #00ffff;
    --log-controls-background-color: #000000;
    --log-sidebar-background-color: #000000;
    --log-sidebar-log-background-color: #000000;
    --log-border-color: #ffffff;

    --widget-background-color: #000000;
    --widget-title-color: #ffff00;
    --widget-value-color: #ffffff;
    --widget-trend-color: #a0a0a0;
    --tooltip-trigger-bg: #0000a0;
    --tooltip-trigger-text: #ffffff;
    --tooltip-content-bg: #000000;
    --tooltip-content-text: #ffffff;
    --tooltip-border-color: #ffffff;

    --table-header-bg: #0000a0;
    --table-header-text: #ffffff;
    --table-row-even-bg: #0000a0;
    --table-section-header-bg: #000050;
    --table-section-header-text: #a0a0a0;
    --table-border-color: #ffffff;
    --table-section-header-border: #ffffff;

    --loan-option-border: #ffffff;
    --loan-option-bg: #000000;
    --loan-option-hover-bg: #0000a0;
    --loan-option-checked-bg: #500050; /* 紫 */
    --loan-option-checked-border: #ff00ff; /* マゼンタ */

    --proposal-card-bg: #000000;
    --proposal-card-border: #ffffff;
    --proposal-card-selected-border: #ff00ff;
    --proposal-card-selected-bg: rgba(128, 0, 128, 0.3);

    --toggle-off-bg: #a0a0a0;
    --toggle-on-bg: #ff00ff;
    --toggle-handle-color: #ffffff;

    /* ボタン共通スタイル */
    .top-header-button { background-color: #000000; color: #ffffff; border: 1px solid #ffffff; }
    .top-header-button:hover { background-color: #0000a0; color: #ffff00; }
    .top-header-button-danger { background-color: #ff0000; color: #ffffff; border: 1px solid #ffffff; }
    .top-header-button-danger:hover { background-color: #a00000; color: #ffff00; }

    .button-primary { background-color: #ffff00; color: #000080; }
    .button-primary:hover { background-color: #a0a000; }
    .button-secondary { background-color: #000000; color: #ffffff; border: 1px solid #ffffff; }
    .button-secondary:hover { background-color: #0000a0; }
    .button-danger { background-color: #ff0000; color: #ffffff; }
    .button-danger:hover { background-color: #a00000; }
    .button-success { background-color: #00ff00; color: #000080; }
    .button-success:hover { background-color: #00a000; }
}

/* -- Macintosh風テーマ (ライト) -- */
.theme-macintosh {
    font-family: 'Monaco', 'Courier New', monospace;
    --main-bg-color: #ffffff;
    --main-text-color: #000000;
    --primary-color: #000000;
    --secondary-color: #666666;
    --danger-color: #cc0000;
    --success-color: #009900;

    --header-bg-color: #ffffff;
    --tab-nav-background-color: #ffffff;
    --tab-background-color: #e0e0e0;
    --tab-text-color: #000000;
    --tab-hover-text-color: #000000;
    --tab-hover-border-color: #000000;
    --tab-active-background-color: #000000;
    --tab-active-text-color: #ffffff;
    --tab-active-border-color: #000000;
    --tab-border-color: #cccccc;

    --modal-bg-color: #ffffff;
    --modal-text-color: #000000;
    --input-background-color: #ffffff;
    --input-border-color: #000000;
    --input-text-color: #000000;

    --log-background-color: #ffffff;
    --log-text-color: #000000;
    --log-number-color: #000000; /* underline */
    --log-controls-background-color: #ffffff;
    --log-sidebar-background-color: #ffffff;
    --log-sidebar-log-background-color: #ffffff;
    --log-border-color: #000000;

    --widget-background-color: #ffffff;
    --widget-title-color: #000000;
    --widget-value-color: #000000;
    --widget-trend-color: #666666;
    --tooltip-trigger-bg: #cccccc;
    --tooltip-trigger-text: #000000;
    --tooltip-content-bg: #000000;
    --tooltip-content-text: #ffffff;
    --tooltip-border-color: #ffffff;

    --table-header-bg: #e0e0e0;
    --table-header-text: #000000;
    --table-row-even-bg: #f5f5f5;
    --table-section-header-bg: #cccccc;
    --table-section-header-text: #000000;
    --table-border-color: #e0e0e0;
    --table-section-header-border: #000000;

    --loan-option-border: #000000;
    --loan-option-bg: #ffffff;
    --loan-option-hover-bg: #f0f0f0;
    --loan-option-checked-bg: #cccccc;
    --loan-option-checked-border: #000000;

    --proposal-card-bg: #ffffff;
    --proposal-card-border: #cccccc;
    --proposal-card-selected-border: #000000;
    --proposal-card-selected-bg: #e0e0e0;

    --toggle-off-bg: #cccccc;
    --toggle-on-bg: #000000;
    --toggle-handle-color: #ffffff;

    /* ボタン共通スタイル */
    .top-header-button { background-color: #ffffff; color: #000000; border: 2px solid #000000; border-radius: 6px; box-shadow: 1px 1px 0px #000000; }
    .top-header-button:hover { background-color: #000000; color: #ffffff; box-shadow: none; }
    .top-header-button-danger { background-color: #ffffff; color: #cc0000; border: 2px solid #cc0000; border-radius: 6px; box-shadow: 1px 1px 0px #cc0000; }
    .top-header-button-danger:hover { background-color: #cc0000; color: #ffffff; box-shadow: none; }

    .button-primary { background-color: #000000; color: white; border: 1px solid #000000; }
    .button-primary:hover { background-color: #333333; }
    .button-secondary { background-color: #ffffff; color: #000000; border: 1px solid #000000; }
    .button-secondary:hover { background-color: #e0e0e0; }
    .button-danger { background-color: #cc0000; color: white; }
    .button-danger:hover { background-color: #990000; }
    .button-success { background-color: #009900; color: white; }
    .button-success:hover { background-color: #006600; }

    .log-window .log-number { text-decoration: underline; } /* Macintoshテーマのlog-number強調 */
}

/* -- Macintosh風テーマ (ダーク) -- */
.theme-macintosh-dark {
    font-family: 'Monaco', 'Courier New', monospace;
    --main-bg-color: #000000;
    --main-text-color: #ffffff;
    --primary-color: #ffffff;
    --secondary-color: #999999;
    --danger-color: #ff3333;
    --success-color: #33ff33;

    --header-bg-color: #000000;
    --tab-nav-background-color: #000000;
    --tab-background-color: #222222;
    --tab-text-color: #ffffff;
    --tab-hover-text-color: #eeeeee;
    --tab-hover-border-color: #ffffff;
    --tab-active-background-color: #ffffff;
    --tab-active-text-color: #000000;
    --tab-active-border-color: #ffffff;
    --tab-border-color: #444444;

    --modal-bg-color: #0a0a0a;
    --modal-text-color: #ffffff;
    --input-background-color: #1a1a1a;
    --input-border-color: #444444;
    --input-text-color: #ffffff;

    --log-background-color: #0a0a0a;
    --log-text-color: #33ff33;
    --log-number-color: #33ff33;
    --log-controls-background-color: #0a0a0a;
    --log-sidebar-background-color: #0a0a0a;
    --log-sidebar-log-background-color: #0a0a0a;
    --log-border-color: #444444;

    --widget-background-color: #1a1a1a;
    --widget-title-color: #ffffff;
    --widget-value-color: #ffffff;
    --widget-trend-color: #999999;
    --tooltip-trigger-bg: #333333;
    --tooltip-trigger-text: #ffffff;
    --tooltip-content-bg: #000000;
    --tooltip-content-text: #ffffff;
    --tooltip-border-color: #ffffff;

    --table-header-bg: #222222;
    --table-header-text: #ffffff;
    --table-row-even-bg: #111111;
    --table-section-header-bg: #333333;
    --table-section-header-text: #cccccc;
    --table-border-color: #444444;
    --table-section-header-border: #666666;

    --loan-option-border: #444444;
    --loan-option-bg: #1a1a1a;
    --loan-option-hover-bg: #222222;
    --loan-option-checked-bg: #333333;
    --loan-option-checked-border: #ffffff;

    --proposal-card-bg: #1a1a1a;
    --proposal-card-border: #444444;
    --proposal-card-selected-border: #ffffff;
    --proposal-card-selected-bg: #222222;

    --toggle-off-bg: #444444;
    --toggle-on-bg: #ffffff;
    --toggle-handle-color: #000000;

    /* ボタン共通スタイル */
    .top-header-button { background-color: #1a1a1a; color: #ffffff; border: 2px solid #444444; border-radius: 6px; box-shadow: none; }
    .top-header-button:hover { background-color: #333333; color: #ffffff; }
    .top-header-button-danger { background-color: #1a1a1a; color: #ff3333; border: 2px solid #ff3333; border-radius: 6px; box-shadow: none; }
    .top-header-button-danger:hover { background-color: #330000; color: #ff3333; }

    .button-primary { background-color: #ffffff; color: #000000; border: 1px solid #ffffff; }
    .button-primary:hover { background-color: #cccccc; }
    .button-secondary { background-color: #1a1a1a; color: #ffffff; border: 1px solid #444444; }
    .button-secondary:hover { background-color: #333333; }
    .button-danger { background-color: #ff3333; color: white; }
    .button-danger:hover { background-color: #cc0000; }
    .button-success { background-color: #33ff33; color: black; }
    .button-success:hover { background-color: #00cc00; }
}
/* style.css の任意の場所に追加 */

/* ログとチャットのコンテナに背景色を追加 */
.log-area-container {
    background-color: var(--log-sidebar-background-color); /* 背景色を親コンテナに設定 */
}

/* ログ表示エリアの背景色を明確に定義 */
#operationLogDisplay,
#chatDisplay {
    background-color: var(--log-sidebar-log-background-color);
}
/* ログモーダル背景色の修正 */
#logChatSidebar {
    background-color: var(--log-sidebar-background-color) !important;
}

#operationLogTab,
#chatTab {
    background-color: var(--log-sidebar-log-background-color) !important;
}

/* CSS for chat sidebar sliding animation */
.chat-sidebar {
    transition: transform 0.3s ease-out, width 0.3s ease-out;
    transform: translateX(0%); /* Default visible state */
    width: 60%; /* Default width when visible */
}

.chat-sidebar-hidden {
    transform: translateX(100%); /* Hidden state, slides out to the right */
    width: 0%; /* Collapse width when hidden */
    overflow: hidden; /* Hide content when collapsed */
}

/* Adjust gameLog width dynamically */
.log-area-container #gameLog {
    transition: width 0.3s ease-out;
}

/* CSS for log area sliding animation */
.log-area-container {
    transition: height 0.3s ease-out, opacity 0.3s ease-out;
    height: 35vh; /* Default visible height */
    opacity: 1;
    overflow: hidden; /* Hide content outside the height */
}

.log-area-hidden {
    height: 0;
    opacity: 0;
}