/* 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;
}

/* 選書会議対象リスト画面「対象とする選書リスト」：チェックボックス付きの
   カード型リストに変更（ユーザーフィードバック「見た目が味気ない」対応・
   2026-09-17）。件数が多い場合のみ縦スクロールが出るよう固定高にする。 */
.batch-picker {
    width: 100%;
    max-width: 960px;
    height: 210px;
    overflow-y: auto;
    border: 1px solid #cfe6e3;
    border-radius: var(--pico-border-radius);
    background: #fff;
}

.batch-picker-row {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.55rem 0.9rem;
    margin: 0;
    border-bottom: 1px solid #eaf5f3;
    cursor: pointer;
}

.batch-picker-row:last-child {
    border-bottom: none;
}

.batch-picker-row:nth-child(even) {
    background: #f7fcfb;
}

.batch-picker-row:hover {
    background: #e6f4f3;
}

.batch-picker-row input[type="checkbox"] {
    flex: 0 0 auto;
    width: 1.15rem;
    height: 1.15rem;
    margin: 0;
    accent-color: #0f766e;
}

.batch-picker-body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.batch-picker-name {
    font-weight: 600;
    overflow-wrap: anywhere;
}

.batch-picker-meta {
    font-size: 0.8rem;
    color: #5c6f6d;
}

.batch-picker-status {
    flex: 0 0 auto;
    display: inline-block;
    padding: 0.15rem 0.6rem;
    border-radius: 999px;
    background: #eef1f0;
    color: #667573;
    font-size: 0.78rem;
    white-space: nowrap;
}

.batch-picker-status.is-done {
    background: #dcf3ef;
    color: #0f766e;
    font-weight: 600;
}

/* ログイン画面のサービス紹介（チラシ内容の併載・ユーザー要望・2026-10-22）。
   PCは左に紹介・右にログインカード（追従）、スマホはログインカードを先頭にする。
   .form-pageは使わず専用レイアウトにしたため、.form-card自体は共通スタイルを流用。 */
.login-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    gap: 2rem;
    align-items: start;
    margin-top: 1.5rem;
}

.login-side {
    grid-column: 2;
    grid-row: 1;
    position: sticky;
    top: 1rem;
}

.login-intro {
    grid-column: 1;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
}

.login-intro section {
    margin: 0;
}

.intro-hero {
    background: linear-gradient(135deg, #0f766e 0%, #0e7490 60%, #155e75 100%);
    color: #fff;
    border-radius: 1rem;
    padding: 2rem 2rem 1.75rem;
    box-shadow: 0 10px 30px rgba(15, 118, 110, 0.25);
}

.intro-kicker {
    font-size: 0.95rem;
    letter-spacing: 0.08em;
    opacity: 0.95;
}

.intro-badge {
    display: inline-block;
    margin-left: 0.75rem;
    padding: 0.1rem 0.7rem;
    border-radius: 999px;
    background: #fde047;
    color: #5a3d00;
    font-weight: 700;
    font-size: 0.8rem;
    letter-spacing: 0;
}

.intro-hero h2 {
    color: #fff;
    font-size: 2.6rem;
    margin: 0.25rem 0 0.75rem;
    line-height: 1.15;
}

.intro-lead {
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.8;
    margin: 0 0 0.75rem;
}

.intro-by {
    margin: 0;
    font-size: 0.9rem;
    opacity: 0.95;
}

.intro-points {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.9rem;
}

.intro-points > div {
    background: #fff;
    border: 1px solid #99d5cf;
    border-radius: 0.75rem;
    padding: 0.85rem 1rem;
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--pico-color);
}

.intro-points b {
    display: block;
    color: #0f766e;
    font-size: 1.02rem;
    margin-bottom: 0.2rem;
}

.intro-h {
    font-size: 1.3rem;
    color: #0f766e;
    border-left: 6px solid #14b8a6;
    padding-left: 0.75rem;
    margin: 0 0 0.9rem;
}

.intro-h small {
    font-size: 0.8rem;
    font-weight: 400;
    color: var(--pico-muted-color);
    margin-left: 0.5rem;
}

.intro-flow {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 1.4rem;
}

.intro-flow li {
    position: relative;
    flex: 1;
    margin: 0;
    padding: 0.8rem 0.4rem;
    background: #e6f4f3;
    color: #115e59;
    border-radius: 0.6rem;
    text-align: center;
    font-size: 0.85rem;
    font-weight: 700;
    line-height: 1.5;
}

.intro-flow li:not(:last-child)::after {
    content: "▶";
    position: absolute;
    right: -1.2rem;
    top: 50%;
    transform: translateY(-50%);
    color: #14b8a6;
    font-size: 0.8rem;
}

.intro-features {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem 1.5rem;
    counter-reset: feat;
}

.intro-features li {
    counter-increment: feat;
    position: relative;
    margin: 0;
    padding-left: 2.5rem;
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--pico-color);
}

.intro-features li::before {
    content: counter(feat);
    position: absolute;
    left: 0;
    top: 0.1rem;
    width: 1.8rem;
    height: 1.8rem;
    border-radius: 50%;
    background: #0f766e;
    color: #fff;
    font-size: 0.8rem;
    font-weight: 700;
    text-align: center;
    line-height: 1.8rem;
}

.intro-features b {
    display: block;
    font-size: 0.98rem;
    color: #134e4a;
}

.intro-shots {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
}

.intro-shots figure {
    margin: 0;
}

.intro-shots img {
    display: block;
    width: 100%;
    border: 1px solid #cbd5e1;
    border-radius: 0.6rem;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.12);
    background: #fff;
}

.intro-shots figcaption {
    margin-top: 0.5rem;
    font-size: 0.82rem;
    line-height: 1.6;
    color: var(--pico-muted-color);
}

.intro-shots figcaption b {
    display: block;
    color: #0f766e;
    font-size: 0.92rem;
}

.intro-note {
    margin: 0;
    background: #fff8e1;
    border: 1.5px dashed #e0a800;
    border-radius: 0.75rem;
    padding: 0.8rem 1.2rem;
    font-size: 0.88rem;
    line-height: 1.7;
    color: var(--pico-color);
}

@media (max-width: 960px) {
    .login-layout {
        grid-template-columns: minmax(0, 1fr);
        gap: 1.5rem;
    }
    .login-side,
    .login-intro {
        grid-column: 1;
    }
    .login-side {
        grid-row: 1;
        position: static;
        max-width: 460px;
        width: 100%;
        margin: 0 auto;
    }
    .login-intro {
        grid-row: 2;
    }
}

@media (max-width: 640px) {
    .intro-hero { padding: 1.4rem 1.25rem; }
    .intro-hero h2 { font-size: 2rem; }
    .intro-points,
    .intro-features,
    .intro-shots { grid-template-columns: minmax(0, 1fr); }
    .intro-flow { flex-direction: column; gap: 1.2rem; }
    .intro-flow li:not(:last-child)::after {
        right: auto;
        left: 50%;
        top: auto;
        bottom: -1.15rem;
        transform: translateX(-50%) rotate(90deg);
    }
}

/* Picoのp既定色がヒーロー内で効いて暗く沈むため、白を明示する */
.intro-hero p,
.intro-hero .intro-kicker,
.intro-hero b {
    color: #fff;
}