/* MainSus テーマ ― 静かで洗練された（Bootstrap 5 上書き / システムフォント） */

:root {
    /* 淡い黄色（クリーム）基調＋ティール系アクセント */
    --ms-ink: #262117;
    --ms-muted: #6d6858;
    --ms-bg: #f5efdc;
    --ms-surface: #ffffff;
    --ms-border: #e3d9bf;
    --ms-accent: #0d7c70;
    --ms-accent-strong: #0a5f56;
    --ms-accent-soft: #dcede9;
    --ms-tertiary-bg: #faf6ea;   /* テーブル見出し等：ほぼ白の淡い黄 */
    --ms-secondary-bg: #f3eddd;
    --ms-input-bg: #fdfbf4;       /* 入力欄：ほぼ白の淡い黄 */
    --ms-thead-bg: #fbfaf6;       /* テーブル見出し：ほぼ白 */

    /* Bootstrap トークン上書き */
    --bs-body-bg: var(--ms-bg);
    --bs-body-color: var(--ms-ink);
    --bs-secondary-color: var(--ms-muted);
    --bs-emphasis-color: #171206;
    --bs-border-color: var(--ms-border);
    --bs-border-color-translucent: var(--ms-border);
    --bs-primary: var(--ms-accent);
    --bs-primary-rgb: 13, 124, 112;
    --bs-link-color: var(--ms-accent-strong);
    --bs-link-color-rgb: 10, 95, 86;
    --bs-link-hover-color: #084e46;
    --bs-border-radius: .65rem;
    --bs-border-radius-sm: .45rem;
    --bs-border-radius-lg: .95rem;
    --bs-secondary-bg: var(--ms-secondary-bg);
    --bs-tertiary-bg: var(--ms-tertiary-bg);
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Kaku Gothic ProN",
        "Hiragino Sans", "Noto Sans JP", "Yu Gothic UI", Meiryo, system-ui, sans-serif;
    line-height: 1.75;
    letter-spacing: .01em;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* 見出し */
h1, h2, h3, h4, h5 { letter-spacing: -.01em; color: var(--bs-emphasis-color); }
.h4, h1 { font-weight: 700; }

/* リンク */
a { text-underline-offset: 2px; }

/* ---- ナビバー（明るい・罫線） ---- */
.app-navbar {
    background: rgba(255, 255, 255, .82);
    backdrop-filter: saturate(180%) blur(8px);
    border-bottom: 1px solid var(--ms-border);
}
.app-navbar .navbar-brand { color: var(--ms-ink); font-weight: 700; letter-spacing: -.02em; }
.app-navbar .navbar-brand::before {
    content: ""; display: inline-block; width: .5rem; height: .5rem; border-radius: 2px;
    background: var(--ms-accent); margin-right: .5rem; vertical-align: middle;
}
.app-navbar .nav-link { color: var(--ms-muted); font-weight: 500; border-radius: .45rem; padding: .35rem .6rem; }
.app-navbar .nav-link:hover { color: var(--ms-ink); background: var(--ms-tertiary-bg); }
.app-navbar .nav-link.active { color: var(--ms-accent-strong); }

/* ---- カード（枠線控えめ・柔らかい影） ---- */
.card {
    background-color: var(--ms-surface);
    border: 1px solid var(--ms-border);
    border-radius: var(--bs-border-radius-lg);
    box-shadow: 0 1px 2px rgba(20, 32, 30, .03);
}
/* メンバー欄は白地＋左アクセントの枠で区別。投稿入力欄は白地。 */
.card.section-members {
    background-color: var(--ms-surface);
    border-left: 4px solid var(--ms-accent);
}
.card.section-compose { background-color: var(--ms-surface); }
.card.shadow-sm { box-shadow: 0 1px 2px rgba(20, 32, 30, .04), 0 6px 20px rgba(20, 32, 30, .05) !important; }
.card-header { background: transparent; border-bottom: 1px solid var(--ms-border); font-weight: 600; }

/* ---- ボタン ---- */
.btn { border-radius: .55rem; font-weight: 500; }
.btn-primary {
    --bs-btn-bg: var(--ms-accent); --bs-btn-border-color: var(--ms-accent);
    --bs-btn-hover-bg: var(--ms-accent-strong); --bs-btn-hover-border-color: var(--ms-accent-strong);
    --bs-btn-active-bg: #0a584f; --bs-btn-active-border-color: #0a584f;
    --bs-btn-disabled-bg: var(--ms-accent); --bs-btn-disabled-border-color: var(--ms-accent);
}
.btn-outline-secondary {
    --bs-btn-color: #4d4839; --bs-btn-border-color: #c7bc9d;
    --bs-btn-hover-bg: var(--ms-tertiary-bg); --bs-btn-hover-color: var(--ms-ink);
    --bs-btn-hover-border-color: #b3a683; --bs-btn-active-bg: var(--ms-secondary-bg);
    --bs-btn-active-color: var(--ms-ink); --bs-btn-active-border-color: #b3a683;
}

/* ---- テーブル（横罫のみ・小見出し） ---- */
/* Bootstrap既定では --bs-table-bg = 本文背景（クリーム）。本体セルは透明にして白いカード地を透かす */
.table { --bs-table-border-color: var(--ms-border); --bs-table-bg: transparent; }
.table > thead th {
    font-size: .72rem; text-transform: none; letter-spacing: .03em; font-weight: 600;
    color: var(--ms-muted); background: var(--ms-thead-bg); border-bottom: 1px solid var(--ms-border);
}
.table > tbody td { border-color: var(--ms-border); }
.table-hover > tbody > tr:hover > * { background: var(--ms-tertiary-bg); }

/* ---- list-group / バッジ ---- */
/* 既定では list-group の地色が本文背景（クリーム）。透明にして白いカード地を透かす */
.list-group { --bs-list-group-bg: transparent; }
.list-group-item { border-color: var(--ms-border); background-color: transparent; }
.badge { font-weight: 600; letter-spacing: .01em; }
.badge.rounded-pill.text-bg-light {
    background: var(--ms-tertiary-bg) !important; border-color: var(--ms-border) !important; color: var(--ms-muted) !important;
}

/* ---- フォーム ---- */
.form-control, .form-select {
    border-color: var(--ms-border); border-radius: .55rem;
    background-color: var(--ms-input-bg);
}
.form-control:focus, .form-select:focus {
    border-color: var(--ms-accent); box-shadow: 0 0 0 .2rem rgba(13, 124, 112, .18);
    background-color: var(--ms-input-bg);
}
.form-label { font-weight: 500; color: var(--ms-ink); }

/* ---- ディスカッション（チャット/タイムライン風） ---- */
.avatar {
    flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-weight: 700; font-size: 1rem; user-select: none;
}
.post-bubble {
    background: var(--ms-surface); border: 1px solid var(--ms-border);
    border-radius: 1rem; border-top-left-radius: .35rem; padding: .75rem 1rem;
}
.post-bubble .post-body { line-height: 1.7; }
.post-bubble .post-body > :last-child { margin-bottom: 0; }
.post-bubble .post-body pre {
    background: var(--ms-tertiary-bg); border: 1px solid var(--ms-border);
    border-radius: .5rem; padding: .6rem .8rem; overflow-x: auto;
}
.post-bubble .post-body code { background: var(--ms-tertiary-bg); padding: .1em .35em; border-radius: .3rem; }
.post-bubble .post-body blockquote {
    border-left: 3px solid var(--ms-border); margin: .3rem 0; padding-left: .8rem; color: var(--ms-muted);
}
.reply-thread { border-left: 2px solid var(--ms-border); }

/* 返信元の引用（クリックで元投稿へジャンプ） */
.reply-quote { cursor: pointer; }
.reply-quote:hover { color: var(--ms-accent-strong) !important; }

/* ジャンプ先の一時ハイライト */
@keyframes ms-flash {
    0%   { box-shadow: 0 0 0 .2rem var(--ms-accent); }
    100% { box-shadow: 0 0 0 .2rem transparent; }
}
.post-flash { animation: ms-flash 1.4s ease-out; }

/* リアクションボタン */
.reaction-btn { border-radius: 999px; }
/* 自分がしたリアクション（淡いハイライト） */
.reaction-btn.reaction-mine {
    background: var(--ms-accent-soft);
    border: 1px solid var(--ms-accent);
    color: var(--ms-accent-strong);
}
.reaction-btn.reaction-mine:hover { background: color-mix(in srgb, var(--ms-accent-soft) 85%, var(--ms-accent)); }

/* 添付サムネイル */
.attachment { border-radius: .6rem !important; }

/* アコーディオン用シェブロン */
[data-bs-toggle="collapse"] .bi-chevron-down { transition: transform .2s ease; }
[data-bs-toggle="collapse"][aria-expanded="true"] .bi-chevron-down { transform: rotate(180deg); }

/* リアクション追加ピッカー */
.reaction-picker .dropdown-menu { min-width: auto; width: 244px; }
.reaction-picker .emoji-btn {
    font-size: 1.2rem; line-height: 1; padding: .25rem .4rem;
    background: transparent; border: 0;
}
.reaction-picker .emoji-btn:hover { background: var(--bs-tertiary-bg); }
.theme-switch i { color: var(--ms-muted); font-size: .85rem; }

/* ============================================================
   ダークモード
   ============================================================ */
[data-bs-theme="dark"] {
    --ms-ink: #e5ece9;
    --ms-muted: #adbab4;
    --ms-bg: #0f1513;
    --ms-surface: #171f1d;
    --ms-border: #2b3633;
    --ms-accent: #2ec4b6;
    --ms-accent-strong: #4dd4c6;
    --ms-accent-soft: #113330;
    --ms-tertiary-bg: #1b2422;
    --ms-secondary-bg: #212c29;
    --ms-input-bg: #131b19;
    --ms-thead-bg: #1b2422;

    --bs-body-bg: var(--ms-bg);
    --bs-body-color: var(--ms-ink);
    --bs-secondary-color: var(--ms-muted);
    --bs-tertiary-color: #92a099;
    --bs-emphasis-color: #f2f6f4;
    --bs-emphasis-color-rgb: 242, 246, 244;
    --bs-border-color: var(--ms-border);
    --bs-border-color-translucent: var(--ms-border);
    --bs-primary: var(--ms-accent);
    --bs-primary-rgb: 46, 196, 182;
    --bs-link-color: var(--ms-accent-strong);
    --bs-link-color-rgb: 77, 212, 198;
    --bs-link-hover-color: #6bded2;
    --bs-secondary-bg: var(--ms-secondary-bg);
    --bs-tertiary-bg: var(--ms-tertiary-bg);
}

[data-bs-theme="dark"] .app-navbar {
    background: rgba(23, 31, 29, .82);
    border-bottom-color: var(--ms-border);
}
[data-bs-theme="dark"] .card.shadow-sm {
    box-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 6px 20px rgba(0, 0, 0, .35) !important;
}
[data-bs-theme="dark"] .form-control:focus,
[data-bs-theme="dark"] .form-select:focus {
    box-shadow: 0 0 0 .2rem rgba(46, 196, 182, .2);
}
/* リアクションのアウトラインボタンをダークで見やすく */
[data-bs-theme="dark"] .reaction-btn.btn-outline-secondary,
[data-bs-theme="dark"] .btn-outline-secondary {
    --bs-btn-color: var(--ms-muted);
    --bs-btn-border-color: var(--ms-border);
    --bs-btn-hover-bg: var(--ms-tertiary-bg);
    --bs-btn-hover-color: var(--ms-ink);
    --bs-btn-hover-border-color: #3a4744;
}