/* ════════════════════════════════════════════════════════════════
   fs-notice.css — 業務ごとのお知らせの部品（お知らせの見直し STEP3・2026-10-13）
   ─ 名前はすべて .nt- で始める。pf.css・fs-home.css は変えない。
   ─ base.html が全画面で読み込む（タブの件数が SmartGreen のどの画面にも出るため）。
   ─ 件数の元は services/notices.py（業務ごと）と services/user_notices.py（個人あて＝ベル）。
   ─ 色は今ある色の名前（fs-color.css の --fs-…）と、ベル・バッジと同じ赤（#B3261E）だけ。
     文字は補足 14px（.875rem）以上。色だけで伝えず、アイコンと言葉を必ず添える。
   ─ 見本: docs/design_proposals/notice_split/
   ════════════════════════════════════════════════════════════════ */

/* ── 業務スキルのカードの件数 ── */
/* カードの右上：その機能のお知らせの合計。急ぎ（期限切れなど）を含むときだけ赤で塗る */
.nt-card-n { position: absolute; top: 18px; right: 18px; display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 0 12px;
  border: 1px solid var(--fs-ink, #1F2433); border-radius: 20px; background: var(--fs-surface, #fff); color: var(--fs-ink, #1F2433);
  font-size: .875rem; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.nt-card-n.is-hot { background: #B3261E; border-color: #B3261E; color: #fff; }
/* 件数を数えていて 0 件のカードの下の段 */
.nt-card-none { display: inline-flex; align-items: center; gap: 4px; color: var(--fs-muted, #5A6070); font-size: .875rem; }
/* 左メニューの「業務スキル」の行の合計は、fs-shell.css の .l1-nav a .n をそのまま使う */

/* ── スキルの画面の中のお知らせの枠（共通の部品 templates/_notice_box.html・STEP4）── */
/* タブの名前の横の件数（急ぎを含むとき赤、含まないとき墨） */
.nt-tab-n { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 22px; padding: 0 7px; border-radius: 12px;
  background: #B3261E; color: #fff; font-size: .875rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.nt-tab-n.is-calm { background: var(--fs-ink, #1F2433); }

.nt-box { background: var(--fs-surface, #fff); border: 1px solid var(--fs-border, #E2E4EC); border-radius: 12px; margin: 0 0 20px; overflow: hidden; }
.nt-box-h { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 14px 20px 10px; }
.nt-box-h h2 { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 1.0625rem; font-weight: 700; color: var(--fs-ink, #1F2433); }
.nt-box-h h2::before { content: ""; width: 4px; height: 18px; border-radius: 2px; background: var(--fs-logo, #1925AA); }
.nt-box-total { display: inline-flex; align-items: center; min-height: 26px; padding: 0 10px; border-radius: 20px; background: #B3261E; color: #fff; font-size: .875rem; font-weight: 700; }
.nt-box-total.is-calm { background: var(--fs-ink, #1F2433); }
.nt-box-note { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: .875rem; color: var(--fs-muted, #5A6070); }
.nt-box-note .bi { color: var(--fs-logo, #1925AA); }

/* 種類で絞るボタン（押すと、その種類だけ並ぶ） */
.nt-chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 20px 12px; border-bottom: 1px solid #EEF0F4; }
.nt-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; border: 1px solid #9CA1AF; border-radius: 20px; background: var(--fs-surface, #fff);
  color: var(--fs-ink, #1F2433); font-size: .875rem; font-weight: 700; cursor: pointer; }
.nt-chip:hover { border-color: var(--fs-ink, #1F2433); }
.nt-chip:focus-visible { outline: 3px solid var(--fs-logo, #1925AA); outline-offset: 2px; }
.nt-chip[aria-pressed="true"] { background: var(--fs-ink, #1F2433); border-color: var(--fs-ink, #1F2433); color: #fff; }
.nt-chip .n { font-variant-numeric: tabular-nums; }
.nt-chip.k-ng .bi { color: #B3261E; }
.nt-chip.k-back .bi { color: #8A5300; }
.nt-chip.k-wait .bi { color: var(--fs-logo, #1925AA); }
.nt-chip[aria-pressed="true"] .bi { color: #fff; }

.nt-list { list-style: none; margin: 0; padding: 0; }
.nt-row { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 8px 20px; border-bottom: 1px solid #EEF0F4; color: var(--fs-ink, #1F2433); text-decoration: none; font-size: 1rem; }
.nt-row:hover { background: var(--fs-soft, #F1F2F6); color: var(--fs-ink, #1F2433); }
.nt-row:focus-visible { outline: 3px solid var(--fs-logo, #1925AA); outline-offset: -3px; }
.nt-row .st { flex: 0 0 112px; }
.nt-row .who { flex: 0 0 160px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nt-row .grp { flex: 0 0 150px; color: var(--fs-muted, #5A6070); font-size: .875rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nt-row .what { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nt-row .due { flex: 0 0 auto; color: var(--fs-muted, #5A6070); font-size: .875rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.nt-row .go { flex: 0 0 auto; color: var(--fs-muted, #5A6070); }
.nt-more { display: flex; justify-content: center; padding: 8px 20px; }
.nt-more[hidden] { display: none; }
.nt-more button { min-height: 40px; padding: 0 16px; border: 0; background: transparent; color: var(--fs-ink, #1F2433); font-size: .875rem; font-weight: 700; text-decoration: underline; cursor: pointer; }
.nt-more button:focus-visible { outline: 3px solid var(--fs-logo, #1925AA); outline-offset: 2px; }
/* 0 件のとき */
.nt-empty { display: flex; align-items: center; gap: 10px; padding: 4px 20px 16px; color: var(--fs-muted, #5A6070); }
.nt-empty b { color: var(--fs-ink, #1F2433); }
.nt-empty .bi { color: #1F7A44; font-size: 1.25rem; }

/* ── ベルの中身（あなたあてのお知らせ・STEP5）──
   土台は base.html の <style> の .pf-bell-*。ここは足し分だけ（base.html の <style> より先に読まれるので、
   同じ強さで競るものは .pf-bell-… と重ねて書いて勝たせる）。 */
.nt-bell-panel.pf-bell-panel { width: 400px; max-width: calc(100vw - 24px); }
/* まだ読んでいないお知らせ：左はしにロゴの青の線 */
.nt-bell-item.pf-bell-item.is-new { box-shadow: inset 4px 0 0 var(--fs-logo, #1925AA); }
.nt-bell-ico { flex: 0 0 auto; width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center;
  background: var(--fs-tint, #EEF0FB); color: var(--fs-logo, #1925AA); }
.nt-bell-ico.is-warn { background: #FFF6E5; color: #8A5300; }
/* 失敗のお知らせ：赤いアイコン（言葉でも「失敗しました」と書く） */
.nt-bell-ico.is-ng { background: #FDECEA; color: #B3261E; }
.nt-bell-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 6px; font-size: .875rem; color: var(--fs-muted, #5A6070); }
/* どの機能から来たお知らせか（小さな札） */
.nt-bell-from { display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--fs-border, #E2E4EC); border-radius: 4px; padding: 0 6px; background: var(--fs-surface, #fff); color: var(--fs-ink, #1F2433); font-weight: 700; }
.nt-bell-newb { display: inline-flex; align-items: center; border-radius: 4px; padding: 0 6px; background: var(--fs-logo, #1925AA); color: #fff; font-weight: 700; }
/* 読んだお知らせ：うすい色（太字にしない）。失敗は、読んだあとも赤いアイコンのまま */
.nt-bell-item.is-read .pf-bell-item-title { font-weight: 500; color: var(--fs-muted, #5A6070); }
.nt-bell-item.is-read .nt-bell-ico { background: var(--fs-soft, #F1F2F6); color: var(--fs-muted, #5A6070); }
.nt-bell-item.is-read .nt-bell-ico.is-ng { background: #FDECEA; color: #B3261E; }
/* 0 件のとき */
.nt-bell-empty { display: flex; align-items: flex-start; gap: 12px; padding: 20px 16px; color: var(--fs-muted, #5A6070); font-size: .875rem; }
.nt-bell-empty .bi { font-size: 1.5rem; color: #9CA1AF; }
.nt-bell-empty b { display: block; color: var(--fs-ink, #1F2433); font-size: 1rem; margin-bottom: 2px; }
/* 一番下：業務ごとのお知らせの行き先 */
.nt-bell-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 16px; background: var(--fs-soft, #F1F2F6);
  font-size: .875rem; color: var(--fs-ink, #1F2433); text-decoration: none; }
.nt-bell-foot b { font-weight: 700; }
.nt-bell-foot:hover { text-decoration: underline; color: var(--fs-ink, #1F2433); }