/* ============================================================
   グローバルヘッダー「お知らせ」ポップオーバー専用スタイル

   このファイルがお知らせポップオーバーの唯一の正本。
   templates/base.html と chat/templates/chat/base.html の両方から読み込む。

   ■ ghn- プレフィックスを付けている理由
   以前は .dropdown-item / .notice-item といった汎用クラス名を使っていたため、
   chat画面の static/chat/css/index.css が定義する
   `.dropdown-item { display: flex }` に後勝ちで上書きされ、
   お知らせ1件がまるごと横並びになってレイアウトが崩れていた（2026-08-11）。
   ヘッダーは全画面で共通なので、どの画面のCSSとも衝突しない専用の名前空間に
   閉じてある。ここに汎用クラス名を持ち込まないこと。
   （同種の事故: .toggle-slider / .ai-panel）

   ■ 重複コピーを作らないこと
   以前は base_inline.css と chat/base.html にそれぞれコピーがあり、
   chat側だけ古い状態で取り残されていた（フッターの見切れ修正が未反映など）。
   修正はこのファイルだけを直せば全画面に反映される。
   ============================================================ */

/* ── トリガー（ベルアイコン）とパネルの位置関係 ── */
.header-dropdown-wrapper {
    position: relative;
}

.ghn-panel {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 8px;
    width: 400px;
    min-width: 320px;
    max-height: 500px;
    background: var(--card-bg, #fff);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    z-index: 1001;
    overflow: hidden;
    /* 見出し・本文・フッターの縦の取り合いを flex に任せる。
       固定の max-height だけだと、合計がパネルの max-height を超えたときに
       overflow:hidden でフッター（一覧への動線）が切れて見えなくなる。
       本文側が縮むので、フッターは件数に関係なく必ず出る。 */
    flex-direction: column;
}

.ghn-panel.show {
    display: flex;
}

/* ── 見出し ── */
.ghn-header {
    flex: 0 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-color);
}

.ghn-header h3 {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

.ghn-header-link {
    font-size: 12px;
    color: var(--line-green);
    text-decoration: none;
}

.ghn-header-link:hover {
    text-decoration: underline;
}

/* ── 本文（お知らせ一覧） ── */
.ghn-content {
    flex: 1 1 auto;
    min-height: 0;   /* これが無いと flex 子要素は縮まない */
    max-height: 420px;
    overflow-y: auto;
}

.ghn-empty {
    padding: 24px 16px;
    text-align: center;
    color: var(--text-muted);
    font-size: 14px;
}

/* ── お知らせ1件 ── */
/* カードのどこを押しても全文（詳細ページ）へ行けるようにするため、
   中の .ghn-item-link::after を広げる基準として position を持たせる。 */
.ghn-item {
    position: relative;
    display: block;
    cursor: pointer;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-color);
    transition: background-color 0.2s;
}

.ghn-item:hover {
    background-color: var(--bg-tertiary);
}

.ghn-item:last-child {
    border-bottom: none;
}

/* 未読 */
.ghn-item-unread {
    background-color: #eff6ff;
    border-left: 3px solid #3b82f6;
}

[data-theme="dark"] .ghn-item-unread,
[data-scheme="dark"] .ghn-item-unread {
    background-color: #1e3a5f;
}

.ghn-item-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 6px;
}

.ghn-item-type {
    display: inline-block;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 500;
    border-radius: 4px;
}

/* 種別バッジは意味を持つ色。テーマに関わらず同じ色で出す */
.ghn-type-info {        /* preserve-color: category badge */
    background: #dbeafe;
    color: #1d4ed8;
}

.ghn-type-warning {     /* preserve-color: category badge */
    background: #fef3c7;
    color: #b45309;
}

.ghn-type-important {   /* preserve-color: category badge */
    background: #fee2e2;
    color: #dc2626;
}

.ghn-type-maintenance { /* preserve-color: category badge */
    background: #e0e7ff;
    color: #4338ca;
}

.ghn-item-date {
    font-size: 12px;
    color: var(--text-muted);
}

/* タイトルは全文への入口。3行で切った続きをここから読める。
   ::after でカード全体を覆い、概要や日付を押しても同じ場所へ飛ばす。
   リンク要素自体はタイトルのままなので、読み上げ時の名前は本文ではなく件名になる。 */
.ghn-item-link {
    display: block;
    color: inherit;
    text-decoration: none;
}

.ghn-item-link::after {
    content: '';
    position: absolute;
    inset: 0;
}

/* 当たり判定がカード全体なので、下線もカードのホバーで出す */
.ghn-item:hover .ghn-item-title {
    text-decoration: underline;
}

/* キーボード操作時にどのカードを選んでいるかを示す。
   リンク本体は文字幅しかないため、広げた ::after 側に枠を出す。 */
.ghn-item-link:focus-visible {
    outline: none;
}

.ghn-item-link:focus-visible::after {
    outline: 2px solid #2563eb;
    outline-offset: -2px;
    border-radius: 4px;
}

.ghn-item-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 4px;
}

/* 添付ありの目印。本文の下に小さなチップで出す。
   タイトル行に混ぜるとアイコンがタイトルの一部に見えるため分離している。
   色だけで区別せず、形（クリップ）と文字の両方で分かるようにする。 */
.ghn-item-attach {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 6px;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--bg-secondary, #f1f3f5);
    color: var(--text-muted, #6b7280);
    font-size: 11px;
    font-weight: 600;
    /* stretched link（.ghn-item-link::after）より前に出さない。
       チップ自体は押せる必要がなく、カード全体のクリックを邪魔しない */
    pointer-events: none;
}

.ghn-item-content {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.5;
    margin-bottom: 6px;
    white-space: pre-wrap;
    word-break: break-word;
    /* ここは「概要をチラ見する場所」。本文をそのまま出すと1件で画面いっぱいになり、
       他のお知らせが見えなくなる（掲示文は箇条書きで長くなりがち）。3行で切り、
       続きはタイトルのリンクか下の「すべてのお知らせを見る」から読む。 */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ghn-item-footer {
    display: flex;
    justify-content: flex-end;
    margin-top: 8px;
}

/* 既読ボタンは控えめにする。ポップオーバーの主役は「読むこと」で、
   青ベタだと本文よりボタンに視線が行ってしまうため。 */
.ghn-mark-read-btn {
    /* カード全体を覆う .ghn-item-link::after より前面に出す。
       これが無いと「既読にする」が押せず、カードごと詳細ページへ飛ぶ。 */
    position: relative;
    z-index: 1;
    min-height: 28px;
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 500;
    background: transparent;
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}

.ghn-mark-read-btn:hover {
    background: var(--bg-secondary);
    color: var(--text-primary);
}

.ghn-read-label {
    font-size: 12px;
    color: var(--text-muted);
}

/* ── フッター（一覧への動線） ──
   .ghn-content の「外」に置くので、中身をスクロールしても常に見える。 */
.ghn-footer-link {
    flex: 0 0 auto;   /* 本文がどれだけ長くてもフッターは縮めない */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 44px;
    padding: 12px 16px;
    border-top: 1px solid var(--border-color);
    font-size: 13px;
    font-weight: 600;
    color: var(--success-color);
    text-decoration: none;
}

.ghn-footer-link:hover {
    background: var(--bg-secondary);
}

/* ── 狭い画面 ──
   400px 固定のままだと画面からはみ出すので、画面幅に収める。 */
@media (max-width: 480px) {
    .ghn-panel {
        width: auto;
        min-width: 280px;
        max-width: calc(100vw - 24px);
        right: -10px;
    }
}