/* =================================================================
   ヨブタメ UI改善（B-1〜B-3） 追加スタイル
   ※ 手書きのCSS。webpackビルド対象外（既存のcss/js バンドルは変更しない）。
     管理/メーカー/ユーザーの各レイアウトから asset() で読み込む。
     既存スタイルへの「追加」のみで、見た目の骨格や操作ロジックは変えない。
   ================================================================= */

/* ---------- B-1: 管理画面の操作アイコンに名称(ツールチップ)を表示 ----------
   編集/閲覧/削除/詳細 などアイコンだけのボタンに、マウスを乗せた/フォーカス
   した時に名称を吹き出しで表示する。名称(title)を持たない並べ替え(icon_sort)
   にもCSSで名称を補う。icon_pdf は既存の "PDF" ラベル(::after)を使うため除外。 */
a.icon {
    position: relative;
    cursor: pointer;
}
a.icon:focus-visible {
    outline: 2px solid #2f80ed;
    outline-offset: 2px;
}

a.icon[title]:not(.icon_pdf):hover::after,
a.icon[title]:not(.icon_pdf):focus::after,
.icon_sort.asc:hover::after,
.icon_sort.asc:focus::after,
.icon_sort.desc:hover::after,
.icon_sort.desc:focus::after {
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    background: rgba(33, 33, 33, 0.92);
    color: #fff;
    font-size: 11px;
    line-height: 1.2;
    font-weight: normal;
    padding: 5px 8px;
    border-radius: 4px;
    z-index: 1000;
    pointer-events: none;
}
a.icon[title]:not(.icon_pdf):hover::after,
a.icon[title]:not(.icon_pdf):focus::after {
    content: attr(title);
}
.icon_sort.asc:hover::after,
.icon_sort.asc:focus::after {
    content: "昇順に並べ替え";
}
.icon_sort.desc:hover::after,
.icon_sort.desc:focus::after {
    content: "降順に並べ替え";
}

/* ---------- B-2: 展開用の「▼」を大きく・見やすく・押しやすくする ----------
   ダッシュボード/サイドバーの展開アイコン(.menu_itemArrow 内の chevron)は、
   Font Awesome Free に無い fa-light 指定のため描画が弱い。確実に描画される
   solid weight に強制し、サイズを大きく、当たり判定(領域)を広げて目印にする。 */
.menu_itemArrow {
    cursor: pointer;
    min-width: 44px;           /* 当たり判定を広げる（元 width:36px） */
    border-radius: 6px;
    transition: background-color 0.15s;
}
.menu_itemArrow:hover {
    background-color: rgba(0, 0, 0, 0.06);   /* 押せる場所だと分かるように */
}
aside .menu_item .menu_itemArrow > i,
.menu_itemArrow i {
    font-family: "Font Awesome 6 Free" !important; /* Free に確実にある weight で描画 */
    font-weight: 900 !important;                    /* solid（fa-light 欠落対策） */
    /* 2026-08-13（反映前の最終点検 5-1／7）
       ここは 18px と書いていたが、**効いていなかった**。
       new_style.css の `aside .menu_item .menu_itemArrow > i`（10px）のほうが
       指定先が細かく、そちらが勝っていたためである（実測して判明）。
       効かない指定を残すと「直したのに効かない」の元になるので、
       勝てる書き方にして意図どおり大きくする。 */
    font-size: 18px;
    color: inherit;                                 /* メニュー文字色を継承し確実に視認可 */
}

/* ---------- B-3: プルダウンを欄全体クリック/▼で自然に開けるようにする ----------
   配布場所などの選択(.select_box 等)は、装飾の▼(::after)が select の上に重なり
   クリックを奪うため「▼の部分では開かない」状態だった。▼を click 透過にして、
   欄のどこ(▼含む)を押しても下の select が開くようにする。 */
.select_box::after,
.search_select::after,
.select_boxWrap::after,
.dayselect_box::after {
    pointer-events: none;      /* 装飾の▼がクリックを奪わず、下の select に通す */
}
.select_box,
.search_select,
.select_boxWrap,
.dayselect_box {
    cursor: pointer;
}
.select_box select,
.search_select select,
.select_boxWrap select,
.dayselect_box select {
    cursor: pointer;           /* 欄全体がクリックで開くことを示す */
}

/* ---------- C-4: 会員登録の入力不足を分かりやすく伝える ----------
   未入力/不備をまとめて明示し、必須が埋まるまで登録ボタンを押せなくする。
   サーバ側の検証はそのまま（画面側の制御だけに頼らない）。 */
.register_error_summary {
    background: #fdecea;
    border: 1px solid #f5c2c0;
    color: #b3261e;
    border-radius: 6px;
    padding: 12px 16px;
    margin: 0 0 16px;
    font-size: 14px;
    line-height: 1.7;
}
.register_error_summary .register_error_summary_ttl {
    font-weight: bold;
    margin: 0 0 6px;
}
.register_error_summary ul {
    margin: 0;
    padding-left: 1.2em;
    list-style: disc;
}
.form-control.is-invalid {
    border: 1px solid #d93025 !important;
    background-color: #fff7f7;
}
/* 必須未入力で送信できない登録ボタンを、押せないと分かる見た目にする */
.button[disabled],
input[type="submit"][disabled],
button[type="submit"][disabled] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ---------- D-3: 管理・試供品一覧で「募集期間切れ」を一目で分かるようにする ----------
   期限切れの試供品行の募集期間欄に赤いバッジを表示し、行を淡く強調する。
   （管理画面は従来どおり全件表示のまま、判別しやすくするだけ） */
.expired_badge {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 6px;
    background: #d93025;
    color: #fff;
    font-size: 11px;
    font-weight: bold;
    border-radius: 3px;
    line-height: 1.5;
    vertical-align: middle;
    white-space: nowrap;
}
td.period.is_expired {
    background-color: #fff3f2;
}

/* ---------- #3: 管理一覧の操作アイコンが□(豆腐)になる問題 ----------
   共有SCSSのmixinが、実際には読み込んでいない "Font Awesome 5 Pro" を font-family に
   指定しているため、::before のアイコン字形が出ず□になる。読み込んでいる
   "Font Awesome 6 Free"(solid=900) に上書きして描画させる（B-2と同種の対処）。
   B-1のツールチップ(::after)、D-6のグレー表示(opacity)には影響しない。 */
.icon:before,
[class^="icon_"]:before,
[class*=" icon_"]:before {
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
}

/* ---------- 2026-08-12（最終チェック32番）一覧の縞模様に強調が隠される問題 ----------

   管理の一覧は1行おきに背景色を付けている（縞模様）。その指定が

       .admin_new_listpage main tbody tr:nth-child(even) td { background: ...; }

   と「td（ますめ）」に対して書かれているため、
   ・ますめ側の強調（td.period.is_expired）は、こちらの方が指定が細かく後から読み込まれるため負ける
   ・行側の強調（tr.is_overdue）は、そもそも上にますめの背景が重なるため見えない
   という形で、偶数行だけ強調が消えていた。
   （試供品情報の一覧で「期限切れ」の赤いバッジは出るのに、ますめが赤くならない状態）

   どちらの行でも同じように見えるよう、縞模様より強い指定で塗り直す。
   縞模様そのものは変えていないので、強調が付いていない行の見た目は従来どおり。 */

/* 試供品情報の一覧：募集期間が切れた行 */
.admin_new_listpage main tbody tr td.period.is_expired,
td.period.is_expired {
    background-color: #fff3f2;
}

/* 売掛金管理の一覧：支払期日を過ぎた行（行ではなく、中のますめを塗る） */
.admin_new .ar_table tr.is_overdue > td,
.admin_new_listpage main tbody tr.is_overdue td {
    background-color: #fff4f4;
}

/* ---------- 2026-08-13（反映前の最終点検 4-2）□になる記号の残りを全部つぶす ----------

   【経緯】
   app.css は、実際には読み込んでいない有料書体「Font Awesome 5 Pro」を
   12か所で指定している。読み込んでいないので、そこの記号は□になる。
   これまでに「操作アイコン（.icon / .icon_◯◯）」と
   「選択欄の矢印（.select_box）」は個別に手当てしてきたが、**取りこぼしがあった**。

   機械で測って見つかった取りこぼし（tools/verify/ui_scan.js）：
     .dayselect_box::before （日付を選ぶ欄の▼）… U+F0D7 が□
       試供品情報の編集 /admin/product/{id}/edit
       店舗型情報の詳細 /admin/distribution/store/{id}
       イベント型情報の詳細 /admin/distribution/event/{id}
   画面に出ていなかった残り（同じ理由で□になりうるもの）もここでまとめて直す。
     .txt_read::before（既読の印）、#topicPath li::after（パンくずの「>」）

   【直し方】
   読み込んでいる「Font Awesome 6 Free」の太さ900（solid）に付け替える。
   字の番号（content）は5と6で同じものを使っているため、見た目は意図どおりになる。
   ここ（ui_improvements.css）に書くのは、この土台が
   管理・メーカー・会員のすべての画面で読み込まれており、
   1か所直せば全部に効くため。 */
.dayselect_box:before,
.select_box:before,
.txt_read:before,
#topicPath ul li:after {
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
}