/* Pico CSSの上に載せる最小限のアプリ独自調整。
   フレームワーク本体はCDN配布のPico CSS(classless寄りのsemantic HTML向け)を使用し、
   ここでは色・カード等、Pico単体でカバーしない箇所のみ補う。
   配色は「案B モダン・ティール」（#0f766e系）をユーザー選定により正式採用（2026-07-06）。
   その後、紫系配色（案E・P2等、ヘッダーのみ紫を残す折衷案も含め）を試したが
   「上部メニューも戻した方がいい」との評価を受け、全面的にモダン・ティールへ
   差し戻した（2026-07-15）。 */

/* 書影クリック拡大機能（ユーザー追加要望・2026-07-06）で<dialog>を使用したところ、
   Pico CSSのdialogスタイルが`open`属性の有無に関わらずdisplay:flexになり、
   1ページ内に複数ある未オープンのdialogが透明な全画面オーバーレイとして
   クリックを奪ってしまう不具合を実機検証で発見した。openが無い場合は
   確実に非表示にする。 */
dialog:not([open]) {
    display: none !important;
}

/* :rootだけでなく:root:not([data-theme="dark"])も併記しているのは、Pico CSS本体が
   `:root:not([data-theme=dark]), [data-theme=light] { --pico-primary:#0172ad; ... }`
   という、素の:root（詳細度0-1-0）より詳細度の高い（0-2-0）セレクタで
   --pico-primary系のCSSカスタムプロパティを再定義しているため。素の:rootだけの
   上書きでは.form-card等で明示的に上書きしていないPico既定スタイルのボタン
   （例：既刊選書画面「検索・絞り込み・並べ替え」ボタン）がPico既定の青のまま
   になってしまう不具合が、配色変更作業中の実機検証で発覚した（2026-07-15）。 */
:root,
:root:not([data-theme="dark"]) {
    /* UDフォント（見やすさ重視のユニバーサルデザインフォント）を優先。
       Google Fonts配信のBIZ UDPGothic/UDGothicを第一候補とし、Windows等に
       標準搭載のUDフォント・システムフォントへフォールバックする
       （ユーザーフィードバック「フォントが細くて見づらい」対応・2026-07-06）。 */
    --pico-font-family-sans-serif: "BIZ UDPGothic", "BIZ UDGothic", "UD デジタル 教科書体", "Yu Gothic UI", "Meiryo", system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, Helvetica, Arial, "Helvetica Neue", sans-serif;
    /* Picoは画面幅に応じて基準フォントサイズを100%〜131.25%まで自動拡大するが、
       書誌一覧・フォーム等が肥大化し過ぎるため固定する
       （ユーザーフィードバック「フォントが大きい」対応・2026-07-06）。 */
    --pico-font-size: 100%;
    --pico-primary: #0f766e;
    --pico-primary-background: #0f766e;
    --pico-primary-border: #0f766e;
    --pico-primary-hover: #115e59;
    --pico-primary-hover-background: #115e59;
    --pico-primary-focus: rgba(15, 118, 110, 0.25);
    --pico-primary-underline: rgba(15, 118, 110, 0.5);
    --pico-primary-inverse: #fff;
}

body {
    background: #f4fbfa;
}

header.container {
    background: #0f766e;
    padding: 0.4rem 1rem;
    border-radius: var(--pico-border-radius);
    margin-top: 1rem;
}

header.container nav.app-nav a,
header.container nav.app-nav li {
    color: #fff;
}

header.container nav.app-nav li:first-child strong {
    font-size: 1.25rem;
}

header.container nav.app-nav a:hover {
    color: #99f6e4;
}

header.container nav.app-nav a[role=button],
header.container nav.app-nav .nav-logout-form button {
    background: rgba(255, 255, 255, 0.15);
    border-color: #fff;
    color: #fff;
}

header.container nav.app-nav a[role=button]:hover,
header.container nav.app-nav .nav-logout-form button:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* ログアウトはCSRF保護のためPOSTフォームで送信する（GETリンクは
   Django LogoutViewが405を返しエラー画面になるため。ユーザー報告・2026-07-07）。
   navのli内でフォームの既定余白を打ち消し、他のボタンと高さ・間隔を揃える。 */
header.container nav.app-nav .nav-logout-form {
    margin: 0;
}

/* メニューをカテゴリ別ドロップダウンに整理（ユーザー追加要望・2026-07-07）。
   Picoのdetails.dropdown summaryは既定でselect風の白背景・枠線が付く上、
   通常のリンクとは余白・行送りの既定値が微妙に異なり高さ・間隔がずれるため、
   両者に同じpadding/line-heightを明示して揃える。 */
header.container nav.app-nav li {
    display: flex;
    align-items: center;
}

header.container nav.app-nav a:not([role=button]),
header.container nav.app-nav details.dropdown summary,
header.container nav.app-nav .nav-logout-form button {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 0.5rem;
    margin: 0;
    line-height: 1.2;
    /* メニュー項目が増えて2段組み・項目内の文字折り返しが起きていた
       （ユーザー指摘・2026-08-05）ため、余白を詰めfont-sizeを少し縮小し、
       nowrapで項目単体の折り返しも防ぐ。 */
    font-size: 0.9rem;
    white-space: nowrap;
}

header.container nav.app-nav > ul {
    gap: 0.1rem;
}

header.container nav.app-nav details.dropdown summary {
    background: none;
    border: none;
    color: #fff;
}

header.container nav.app-nav details.dropdown summary:hover {
    color: #99f6e4;
}

header.container nav.app-nav details.dropdown ul,
header.container nav.app-nav details.dropdown ul a,
header.container nav.app-nav details.dropdown ul li {
    color: var(--pico-color);
}

header.container nav.app-nav details.dropdown ul a:hover {
    color: var(--pico-primary);
}

/* 「設定」メニューは右端寄りに配置しているため、はみ出し防止にPico推奨の
   dir="rtl"（吹き出しの位置決めのみに影響）を使うが、文字自体は左寄せに戻す。 */
header.container nav.app-nav details.dropdown ul[dir="rtl"] {
    text-align: left;
}

article {
    border-left: 4px solid #14b8a6;
}

/* カテゴリタブ（一般書・児童書等）を明確なピル型ボタンとして見せる
   （ユーザーフィードバック「タブが地のHTMLと変わらない」対応・2026-07-06）。 */
.category-tabs ul {
    gap: 0.4rem;
}

.category-tabs a {
    display: inline-block;
    padding: 0.35rem 0.9rem;
    border-radius: 999px;
    background: #e6f4f3;
    color: #0f766e;
    text-decoration: none;
    font-size: 0.9rem;
}

.category-tabs a:hover {
    background: #ccebe8;
}

.category-tabs a[aria-current] {
    background: #0f766e;
    color: #fff;
    font-weight: bold;
}

/* ページ送りボタンをはっきりした塗りつぶしボタンにする（同上） */
.pager-button {
    display: inline-block;
    padding: 0.4rem 1rem;
    border-radius: var(--pico-border-radius);
    background: #0f766e;
    color: #fff !important;
    text-decoration: none;
    font-weight: bold;
}

.pager-button:hover {
    background: #115e59;
}

/* 単一フォームの独立ページ（ログイン・お問い合わせ・新規登録・パスワード再設定・
   アカウント管理・テナント設定等）を中央寄せのカードにする（ユーザー要望
   「もっとかっこよく・フォーム幅が長すぎる」対応・2026-07-08）。Picoのinput/
   button/tableは親要素の幅いっぱいに広がる仕様のため、カード自体の幅を絞る
   ことでフィールド幅も自然に収まる。データ一覧・複数カラムの画面には適用しない。 */
.form-page {
    max-width: 460px;
    margin: 3rem auto 0;
}

.form-card {
    background: #fff;
    border-radius: var(--pico-border-radius);
    padding: 2rem 2rem 1.5rem;
    box-shadow: 0 10px 30px rgba(15, 118, 110, 0.15);
    border-top: 4px solid #0f766e;
}

.form-card > h1,
.form-card hgroup h1 {
    margin-bottom: 0.25rem;
    color: #0f766e;
}

.form-card hgroup p {
    color: var(--pico-muted-color);
    margin-bottom: 1.5rem;
}

.form-card button[type="submit"] {
    width: 100%;
    margin-top: 0.5rem;
    background: #0f766e;
    border-color: #0f766e;
}

.form-card button[type="submit"]:hover {
    background: #115e59;
    border-color: #115e59;
}

.form-links {
    text-align: center;
    margin-top: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    font-size: 0.9rem;
}

/* 利用マニュアル（ユーザー追加要望・2026-07-08）。操作画面のスクリーンショットを
   クリックで原寸表示（新規タブ）できるようにしつつ、本文中は幅を抑えて表示する。 */
.manual-toc {
    background: #fff;
    border-radius: var(--pico-border-radius);
    padding: 1rem 1.5rem;
    margin-bottom: 2rem;
}

/* Pico CSSはnav要素にflexスタイルを適用するため、目次には素のdiv/olを使う
   （ユーザー指摘：目次のレイアウト崩れ・2026-07-08）。項目ごとに改行して縦に並べる。 */
.manual-toc ol {
    margin: 0.5rem 0 0;
    padding-left: 1.5rem;
}

.manual-toc li {
    margin-bottom: 0.25rem;
}

.manual h2 {
    color: #0f766e;
    margin-top: 2.5rem;
}

.manual-shot {
    max-width: 640px;
    width: 100%;
    border: 1px solid #d1e7e5;
    border-radius: var(--pico-border-radius);
    box-shadow: 0 4px 12px rgba(15, 118, 110, 0.1);
    margin: 0.5rem 0 0;
    display: block;
}

/* 1項目に複数のスクリーンショットを入れられるようにした変更
   （ユーザー追加要望・2026-07-13）。figureの既定余白をリセットし、
   .manual-shotのmarginで間隔を揃える。 */
.manual-shot-figure {
    margin: 0 0 1.5rem;
}

.manual-shot-figure figcaption {
    max-width: 640px;
    font-size: 0.85rem;
    color: var(--pico-muted-color);
    margin-top: 0.3rem;
}

/* 複数の送信ボタンを横並びにする画面向け（ユーザー指摘：Pico既定のbuttonは
   フォーム内でwidth:100%になり、並べると縦積みで間延びして見える・2026-07-08）。
   書誌カード・プレビュー表等、フォーム自体は全幅のままにしたい画面（選書リスト
   作成・一次チェック旧画面）向けにボタン列だけ幅を絞る。 */
.btn-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin: 0.5rem 0;
}

.btn-row button {
    width: auto;
    padding: 0.6rem 1.5rem;
    /* Pico既定のbutton margin-bottom(1rem)が残っていると、align-items:endで
       ラベル付きセレクトと並べたときにボタンだけ上にずれて見える
       （ユーザー指摘・2026-07-14）。 */
    margin: 0;
}

.messages {
    list-style: none;
    padding: 0;
    margin-bottom: 1rem;
}

.messages li {
    padding: 0.75rem 1rem;
    border-radius: var(--pico-border-radius);
    margin-bottom: 0.5rem;
}

.messages li.success {
    background: #d4f4dd;
    color: #14532d;
}

.messages li.error {
    background: #fbd5d5;
    color: #7f1d1d;
}

.messages li.warning {
    background: #fef3c7;
    color: #78350f;
}

.messages li.info {
    background: #dbeafe;
    color: #1e3a8a;
}

.badge {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    background: #0f766e;
    color: #fff;
    font-size: 0.8rem;
    margin-right: 0.25rem;
}

nav.app-nav {
    flex-wrap: wrap;
}