/* リードアプリ(/gd/lead-list/)と同じ見た目を、ほかの一覧でも使うための共通 CSS
* (2026-09-25 指示「全体的に、GDのリードアプリのデザインにもっと合わせて 見づらすぎる」)。
*
* 🚨 値は **static/css/gd_call_list.css(.cl)から写したもの**。勝手に変えない。
* リードアプリの値を変えたら、ここも同じ値に直す。
* 🚨 効くのは `.ll` の中だけ。使う画面は外枠に class="ll" を付けて読み込む。
* いま使っている画面: 教師マスタ(/si/teacher-master/)・書類提出・合格見込み
* (/jmk/doc-prospects/)・入力途中のお知らせ(/marketing/resume/)など。
* 🚨 波かっこは1つずつ。2つ重ねて書くと、その規則はブラウザに**黙って捨てられる**
* (2026-09-25 に教師マスタのアイコンがそれで丸にならなかった)。
*/
.ll { font-size: 13px; color: #0f172a; }
/* 絵文字(📞 ☎)を色つきで出す。本文フォントだけだとモノクロの記号になる */
.ll .op { font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji",
"Segoe UI Symbol", sans-serif; }
/* ---------------------------------------------------------------- 上のバー */
.ll .topbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 10px; }
/* 見え方の切り替え(リードアプリの 通常/ルーキー/掘起) */
.ll .mode-tabs { display: inline-flex; flex: none; flex-wrap: wrap; background: #fff;
border: 1px solid #cbd5e1; border-radius: 9px; overflow: hidden; }
.ll .mode-tab { padding: 8px 16px; font-size: 13px; font-weight: 700; color: #334155;
background: #fff; text-decoration: none; white-space: nowrap; }
.ll .mode-tab + .mode-tab { border-left: 1px solid #e2e8f0; }
.ll .mode-tab:hover { background: #f0f9ff; color: #0090d9; text-decoration: none; }
.ll .mode-tab.on { background: #e0f2fe; color: #0369a1; font-weight: 800; }
.ll .mode-tab .n { margin-left: 5px; font-weight: 800; color: #94a3b8; }
.ll .mode-tab.on .n { color: #0369a1; }
/* ボタン(リードアプリの 絞り込む / 条件をクリア / 別タブ) */
.ll .ll-btn { display: inline-flex; align-items: center; gap: 5px; font-size: 13px;
font-weight: 700; color: #334155; cursor: pointer; border: 1px solid #cbd5e1;
border-radius: 9px; padding: 8px 14px; background: #fff; text-decoration: none;
white-space: nowrap; line-height: 1.2; font-family: inherit; }
.ll .ll-btn:hover { border-color: #0090d9; color: #0090d9; background: #f0f9ff;
text-decoration: none; }
.ll .ll-btn.on { border-color: #0090d9; background: #e0f2fe; color: #0369a1; font-weight: 800; }
.ll .ll-btn .material-symbols-outlined { font-size: 18px; }
.ll .ll-btn .n { display: inline-flex; min-width: 18px; height: 18px; padding: 0 5px;
border-radius: 999px; background: #0090d9; color: #fff; font-size: 11px;
align-items: center; justify-content: center; }
/* 検索の入力欄(虫めがね付き) */
.ll .ll-search { display: inline-flex; align-items: center; gap: 6px; padding: 0 12px;
border: 1px solid #cbd5e1; border-radius: 9px; background: #fff; }
.ll .ll-search:focus-within { border-color: #0090d9; }
.ll .ll-search .material-symbols-outlined { font-size: 18px; color: #64748b; }
.ll .ll-search input { border: 0; outline: 0; padding: 8px 0; font-size: 13px; min-width: 240px;
background: transparent; color: #0f172a; }
/* ---------------------------------------------------------------- ページ送り(表の上の右) */
.ll .pager { display: flex; align-items: center; justify-content: flex-end; gap: 6px;
margin-bottom: 8px; flex-wrap: wrap; font-size: 12px; color: #64748b; }
.ll .pager .pleft { margin-right: auto; }
.ll .pinfo { margin-left: 8px; margin-right: 4px; color: #64748b; }
.ll .pbtn { border: 1px solid #cbd5e1; border-radius: 7px; padding: 5px 12px; background: #fff;
color: #334155; text-decoration: none; font-weight: 700; }
.ll .pbtn:hover { border-color: #0090d9; color: #0090d9; background: #f0f9ff; }
.ll .pbtn.off { opacity: .4; pointer-events: none; }
.ll .pnow { font-weight: 800; color: #334155; padding: 0 4px; }
.ll .per-page select { padding: 7px 10px; border: 1px solid #cbd5e1; border-radius: 9px;
font-size: 13px; background: #fff; color: #334155; font-weight: 700; }
/* ---------------------------------------------------------------- 表 */
.ll .ll-wrap { border: 1px solid #e2e8f0; border-radius: 10px; overflow: auto; background: #fff; }
/* 🚨 罫線は**分ける方式**(separate)。重ねる方式(collapse)だと、Chrome が固定列(sticky)の影を
描かず、横スクロールで罫線がちらつく(2026-09-26 書類提出・教師マスタ「固定列の右に影がついてない」
「横スクロールが変な感じにビビってなる」)。罫線は行の下だけなので見た目は変わらない */
.ll table.ll-table { width: 100%; border-collapse: separate; border-spacing: 0;
font-size: 12.5px; background: #fff; }
/* 🚨 罫線は**行の下の横線だけ**。列の間に縦線は引かない(2026-09-25 指示
「横の罫線とかいらない」。リードアプリと同じ) */
.ll table.ll-table > thead > tr > th,
.ll table.ll-table > tbody > tr > td { padding: 7px 9px; border: 0; border-bottom: 1px solid #eef2f6;
text-align: left; vertical-align: middle; white-space: nowrap; }
.ll table.ll-table > thead > tr > th { background: #e9edf2; color: #475569; font-size: 11px;
font-weight: 700; position: sticky; top: 0; z-index: 3;
text-align: center; height: 40px; }
.ll table.ll-table > tbody > tr > td { background: #fff; }
/* 🚨 縞は**見えている行だけ**で数える(2026-09-26「行の色が交互になってない」)。隠した行
(書類提出の候補の行など)まで数えると、見える行が全部同じ色になる。:where で強さは前のまま */
.ll table.ll-table > tbody > tr:where(:nth-child(odd of :not([hidden]))) > td { background: #f8fafc; }
.ll table.ll-table > tbody > tr:hover > td { background: #f0f9ff; }
/* 行の左端のグレーの縦帯(リードアプリは不備の色をここに出す) */
.ll table.ll-table > tbody > tr > td:first-child { box-shadow: inset 4px 0 0 #e2e8f0; }
.ll table.ll-table .sub { display: block; font-size: 11px; color: #64748b; line-height: 1.35; }
/* 左の固定列。left と幅は画面ごとに決める(積み上げなので幅は決め打ち) */
.ll table.ll-table .fx { position: sticky; z-index: 2; }
.ll table.ll-table > thead > tr > th.fx { z-index: 5; }
/* 固定エリアの右端は線ではなく影(リードアプリと同じ) */
.ll table.ll-table .fxe { box-shadow: 6px 0 8px -4px rgba(15, 23, 42, .22); }
.ll table.ll-table > tbody > tr > td.fxe:first-child {
box-shadow: inset 4px 0 0 #e2e8f0, 6px 0 8px -4px rgba(15, 23, 42, .22); }
@media (max-width: 900px) {
.ll table.ll-table .fx { position: static; }
.ll table.ll-table .fxe { box-shadow: none; }
}
/* ---------------------------------------------------------------- 操作ボタン(三本線) */
/* 🚨 アイコンは三本線(menu)。点々(more_horiz)にしない。34px を**セルの上下中央**に */
.ll td.ll-opc { text-align: center; padding-left: 12px; overflow: visible; }
.ll .ll-op { position: relative; display: inline-block; vertical-align: middle; }
.ll .ll-op > summary { list-style: none; }
.ll .ll-op > summary::-webkit-details-marker { display: none; }
.ll .op { border: 1px solid #d1d5db; background: #fff; border-radius: 7px; width: 26px;
height: 26px; font-size: 13px; line-height: 1; cursor: pointer; padding: 0;
color: #334155; text-decoration: none; display: inline-flex; align-items: center;
justify-content: center; vertical-align: middle; }
.ll .op:hover { border-color: #0090d9; color: #0090d9; background: #f0f9ff; }
.ll .op.menubtn { width: 34px; height: 34px; }
.ll .op.menubtn .material-symbols-outlined { font-size: 22px; }
.ll .ll-op .menu { position: absolute; z-index: 40; top: 100%; left: 0; margin-top: 4px;
text-align: left; background: #fff; border: 1px solid #cbd5e1;
border-radius: 10px; padding: 6px; min-width: 190px;
box-shadow: 0 12px 30px rgba(15, 23, 42, .16); }
.ll .ll-op .menu a, .ll .ll-op .menu button {
display: block; width: 100%; padding: 7px 10px; border: 0; border-radius: 7px;
background: none; font: inherit; font-size: 13px; color: #334155; text-align: left;
text-decoration: none; white-space: nowrap; cursor: pointer; }
.ll .ll-op .menu a:hover, .ll .ll-op .menu button:hover { background: #f0f9ff; color: #0369a1; }
/* メニューを開いている行は、右の固定列より手前に出す(出さないと下に潜る) */
.ll table.ll-table > tbody > tr > td.ll-opc:has(details[open]) { z-index: 6; }
/* ---------------------------------------------------------------- 操作メニュー(リッチ版) */
/* リードアプリの操作メニュー(gd_call_list.css の .cl-ctx)と同じ作り(2026-10-03 指示
「操作ボタンを押したときのUIがしょぼいから リードアプリに合わせてリッチにして」)。
見出し(.hd)でまとまりに分け、どの行もアイコン(.ic・material-symbols)＋字。
消える操作はいちばん下に離す(.ll-ctx-last。消すものは .danger で赤字)。
使い方:
置き場所・1つだけ開く・外クリック/Esc で閉じるは lead_look.js。
🚨 セレクタは `.ll .ll-op .menu.ll-ctx` まで書く(`.ll .ll-op .menu` に負ける。書類提出の .dp-ctx で踏んだ) */
.ll .ll-op .menu.ll-ctx { min-width: 230px; padding: 6px; border-radius: 12px; border-color: #cbd5e1;
box-shadow: 0 14px 40px rgba(15, 23, 42, .22); overscroll-behavior: contain; }
.ll .ll-op .menu.ll-ctx .hd { font-size: 11px; font-weight: 800; color: #94a3b8; padding: 6px 12px 4px;
max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ll .ll-op .menu.ll-ctx form { margin: 0; }
.ll .ll-op .menu.ll-ctx a, .ll .ll-op .menu.ll-ctx button {
display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 12px; border: 0;
border-radius: 8px; background: none; font: inherit; font-size: 13px; font-weight: 700;
color: #334155; text-align: left; text-decoration: none; white-space: nowrap; cursor: pointer; }
.ll .ll-op .menu.ll-ctx a:hover, .ll .ll-op .menu.ll-ctx button:hover { background: #f0f9ff; color: #0090d9;
text-decoration: none; }
.ll .ll-op .menu.ll-ctx .ic { font-size: 18px; width: 20px; text-align: center; flex: none; }
.ll .ll-op .menu.ll-ctx .ll-ctx-last { margin-top: 4px; border-top: 1px solid #e5e7eb; border-radius: 0 0 8px 8px; }
.ll .ll-op .menu.ll-ctx .danger { color: #b91c1c; }
.ll .ll-op .menu.ll-ctx .danger:hover { background: #fef2f2; color: #b91c1c; }
/* ---------------------------------------------------------------- 画面の切り替えタブ */
/* 🚨 値は広告レポート(templates/admin/db/ad_base.html の .ar-nav)から写したもの(2026-10-03 指示
「一覧 集計 設定 のUIは マーケの広告レポートのタブみたいなUIにしておこう」)。
使い方: */
.ll .ll-nav { display: flex; gap: 4px; flex-wrap: wrap; margin: 0 0 12px; border-bottom: 2px solid #e5e7eb; }
.ll .ll-nav a { padding: 7px 14px; font-size: 13px; font-weight: 700; color: #475569; text-decoration: none;
border-radius: 8px 8px 0 0; border-bottom: 2px solid transparent; margin-bottom: -2px; }
.ll .ll-nav a.on { color: #0090d9; border-bottom-color: #0090d9; background: #f0f9ff; }
.ll .ll-nav a:hover { color: #0090d9; text-decoration: none; }
/* ---------------------------------------------------------------- 連絡先(上に電話・下にメール) */
/* リードアプリの連絡先のセルと同じ作り(値は gd_call_list.css の .cl .ct / .ctm から写したもの)。
🚨 クラス名は ll-ct(短い .ct は入会前対応の .ob 一式とぶつかって値が消えた・規約12)。コピーは ⧉(.cp[data-copy])を static/js/copy_btn.js が拾う
使い方: 📞090-…
*/
.ll div.ll-ct { display: flex; align-items: center; gap: 4px; line-height: 1.5; }
.ll div.ll-ct > span { max-width: 168px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ll div.ll-ct > span.muted { color: #94a3b8; }
.ll div.ll-ct > i.ll-ctm { font-style: normal; font-size: 12px; width: 15px; flex: none;
font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji",
"Segoe UI Symbol", sans-serif; }
/* ---------------------------------------------------------------- 氏名(ID / 氏名 / フリガナ) */
/* 🚨 氏名まわりは **div.nm のように要素まで限る**。画面によっては表のセルに
class="nm" を使っていて(書類提出は「折り返さない列」の印)、.nm のままだと
セルが横並び(flex)になって表が崩れた(2026-09-25) */
.ll .namebox { display: flex; align-items: center; gap: 6px; }
.ll .nmwrap { min-width: 0; flex: 1; }
.ll div.idrow { display: flex; align-items: center; gap: 2px; line-height: 1.3; }
.ll span.lid { font-size: 12px; color: #475569; }
.ll .idtag { margin-left: 6px; font-size: 11px; color: #64748b; }
.ll div.nm { display: flex; align-items: center; gap: 2px; font-size: 14px; font-weight: 700;
line-height: 1.25; }
.ll div.nm .nmtxt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
color: #0f172a; text-decoration: none; }
.ll div.nm a.nmtxt:hover { color: #0090d9; text-decoration: underline; }
.ll div.kn { font-size: 11px; color: #64748b; line-height: 1.25; overflow: hidden;
text-overflow: ellipsis; white-space: nowrap; }
.ll .cp { border: none; background: none; cursor: pointer; font-size: 11px; color: #94a3b8;
padding: 0 2px; font-family: inherit; }
.ll .cp:hover { color: #0090d9; }
/* ---------------------------------------------------------------- 発信(氏名の右) */
.ll .dialslot { flex: none; width: 58px; text-align: center; }
/* 淡い青地に受話器の絵文字(リードアプリと同じ。固定電話は ☎) */
.ll .op.dial { background: #e0f2fe; border-color: #0090d9; }
.ll .op.dial:hover { background: #bae6fd; border-color: #0077b6; }
.ll .op.busy { width: auto; padding: 0 6px; font-size: 10px; font-weight: 800;
background: #fee2e2; border-color: #fca5a5; color: #b91c1c; cursor: not-allowed; }
.ll .op.nophone { width: auto; padding: 0 6px; font-size: 10px; font-weight: 800;
background: #f1f5f9; border-color: #cbd5e1; color: #94a3b8; cursor: help; }
/* ---------------------------------------------------------------- ダーク */
.dark .ll { color: #e2e8f0; }
.dark .ll .mode-tabs, .dark .ll .mode-tab, .dark .ll .ll-btn, .dark .ll .ll-search,
.dark .ll .pbtn, .dark .ll .per-page select, .dark .ll .op {
background: #0f172a; border-color: #334155; color: #cbd5e1; }
.dark .ll .mode-tab.on, .dark .ll .ll-btn.on { background: #10233f; color: #93c5fd; }
.dark .ll .ll-search input { color: #e2e8f0; }
.dark .ll .ll-wrap, .dark .ll table.ll-table { background: #0f172a; border-color: #334155; }
.dark .ll table.ll-table > thead > tr > th { background: #1e293b; color: #cbd5e1; }
.dark .ll table.ll-table > thead > tr > th,
.dark .ll table.ll-table > tbody > tr > td { border-bottom-color: #1e293b; }
.dark .ll table.ll-table > tbody > tr > td { background: #0f172a; }
.dark .ll table.ll-table > tbody > tr:where(:nth-child(odd of :not([hidden]))) > td { background: #131c2e; }
.dark .ll table.ll-table > tbody > tr:hover > td { background: #1e293b; }
.dark .ll table.ll-table > tbody > tr > td:first-child { box-shadow: inset 4px 0 0 #334155; }
.dark .ll div.nm .nmtxt { color: #e2e8f0; }
.dark .ll .op.dial { background: #0c2b3d; border-color: #0284c7; }
.dark .ll .ll-op .menu { background: #0f172a; border-color: #475569; }
.dark .ll .ll-op .menu a, .dark .ll .ll-op .menu button { color: #cbd5e1; }
.dark .ll .ll-op .menu.ll-ctx .hd { color: #64748b; }
.dark .ll .ll-op .menu.ll-ctx a:hover, .dark .ll .ll-op .menu.ll-ctx button:hover { background: #1e293b; }
.dark .ll .ll-op .menu.ll-ctx .ll-ctx-last { border-top-color: #334155; }
.dark .ll .ll-op .menu.ll-ctx .danger { color: #fca5a5; }
.dark .ll .ll-op .menu.ll-ctx .danger:hover { background: #2a1416; color: #fca5a5; }
.dark .ll .ll-nav { border-color: #334155; }
.dark .ll .ll-nav a { color: #cbd5e1; }
.dark .ll .ll-nav a.on { background: #172033; color: #38bdf8; border-bottom-color: #38bdf8; }