/* 求職者支援訓練 日別計画表システム 共通デザイン（勤怠・美容発注と同じ骨格。アクセントは訓練事業部の紺） */
:root {
  --accent: #1f4e79; --accent-dark: #163a5a; --accent-soft: #7fa3c7; --accent-pale: #e8f0f8;
  --gold: #a87e22;
  --ink: #221c17; --ink-soft: #4d453d; --mute: #8b8378;
  --paper: #faf9f6; --paper-warm: #f3f0e9; --line: #e4dfd4; --line-dark: #cdc5b6;
  --red: #c9303f; --red-pale: #f9e3e5; --green: #2e7048; --green-pale: #e3f1e8; --blue: #2563eb; --blue-pale: #eaf1fd; --orange: #b8620f; --orange-pale: #fbeedd;
  --side: #2b3640; --side-line: #3c4855; --side-text: #d8dde3;
  --c-inperson: #fff; --c-online: #d9ecf9; --c-lecture: #d5eccb; --c-hw: #fff27a; --c-cc: #f3e5ff; --c-open: #ffd8a8; --c-off: #f4f2ee; --c-weekend: #e7e3dc; --c-busy: #ffd6d6;
  --sans: "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body { font-family: var(--sans); background: var(--paper); color: var(--ink); display: flex; min-height: 100vh; font-size: 14px; }
a { color: var(--blue); }

/* ===== シェル ===== */
.side { width: 160px; min-width: 160px; background: var(--side); display: flex; flex-direction: column; }
.logo { display: block; background: #fff; padding: 10px 12px 9px; text-decoration: none; }
.logo small { display: block; font-size: 8.5px; letter-spacing: .04em; color: var(--gold); font-weight: bold; }
.logo b { font-size: 12.5px; color: var(--ink); letter-spacing: .03em; }
.sideNav { flex: 1; padding-top: 4px; }
.navGroup { color: #a3adb8; font-size: 11px; padding: 12px 12px 6px; border-top: 1px solid var(--side-line); margin-top: 6px; }
.sideNav .navGroup:first-child { border-top: none; margin-top: 0; }
.sideNav a { display: block; padding: 10px 12px 10px 18px; color: var(--side-text); font-size: 13px; text-decoration: none; position: relative; }
.sideNav a:hover { background: rgba(255,255,255,.08); color: #fff; }
.sideNav a.active { background: var(--paper); color: var(--ink); font-weight: bold; }
.sideNav a.active::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--accent); }
.sideNav .cnt { float: right; background: var(--red); color: #fff; border-radius: 999px; font-size: 10px; padding: 1px 6px; }
.sideUser { padding: 10px 12px; border-top: 1px solid var(--side-line); display: flex; align-items: center; gap: 8px; }
.sideUser img { width: 26px; height: 26px; border-radius: 50%; background: #fff; }
.sideUser .un { font-size: 11px; color: var(--side-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sideUser a { display: block; font-size: 10px; color: #a3adb8; text-decoration: none; }
.sideFoot { padding: 10px 12px; font-size: 10px; color: #8a94a0; }
.main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.topbar { background: #fff; border-bottom: 1px solid var(--line); padding: 10px 18px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.pageTitle { font-size: 15px; font-weight: bold; color: var(--accent); }
.topRight { margin-left: auto; display: flex; gap: 10px; align-items: center; font-size: 12px; color: var(--mute); flex-wrap: wrap; }
.content { padding: 18px; flex: 1; }

/* ===== コンポーネント ===== */
.card { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 16px 18px; margin-bottom: 16px; }
.card h2 { font-size: 14px; color: var(--ink-soft); margin-bottom: 12px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.card h2 small { font-weight: normal; color: var(--mute); font-size: 12px; }
.row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.row.end { align-items: flex-end; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 900px) { .grid2 { grid-template-columns: 1fr; } .side { display: none; } }
label.f { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--mute); }
label.f > span { display: flex; gap: 6px; align-items: center; }
input, select, textarea, button { font-family: inherit; font-size: 14px; }
input[type=text], input[type=number], input[type=email], input[type=month], input[type=date], select, textarea { border: 1px solid var(--line-dark); border-radius: 6px; padding: 7px 10px; background: #fff; color: var(--ink); }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent-soft); border-color: var(--accent); }
input.sm, select.sm { padding: 4px 6px; font-size: 12.5px; }
.btn { border: 1px solid var(--line-dark); background: #fff; color: var(--ink); border-radius: 6px; padding: 8px 14px; cursor: pointer; font-weight: bold; text-decoration: none; display: inline-block; }
.btn:hover { background: var(--paper-warm); }
.btn.primary { background: var(--accent); border-color: var(--accent-dark); color: #fff; }
.btn.primary:hover { background: var(--accent-dark); }
.btn.danger { color: var(--red); border-color: #eec3c8; }
.btn.sm { padding: 4px 9px; font-size: 12px; font-weight: normal; }
.btn:disabled { opacity: .5; cursor: default; }
.badge { display: inline-block; padding: 2px 7px; border-radius: 999px; font-size: 11px; font-weight: bold; white-space: nowrap; }
.badge.draft { background: var(--paper-warm); color: var(--mute); }
.badge.applied { background: var(--blue-pale); color: var(--blue); }
.badge.approved { background: var(--green-pale); color: var(--green); }
.badge.withdrawn, .badge.done { background: var(--paper-warm); color: var(--mute); }
.badge.err { background: var(--red-pale); color: var(--red); }
.badge.warn { background: var(--orange-pale); color: var(--orange); }
.badge.ok { background: var(--green-pale); color: var(--green); }
.badge.lock { background: #333; color: #fff; }
.msg { padding: 10px 12px; border-radius: 8px; font-size: 13px; margin-bottom: 12px; display: none; }
.msg.err { display: block; background: var(--red-pale); color: var(--red); }
.msg.ok { display: block; background: var(--green-pale); color: var(--green); }
.msg.warn { display: block; background: var(--orange-pale); color: var(--orange); }
table.list { width: 100%; border-collapse: collapse; font-size: 13px; }
table.list th, table.list td { border-bottom: 1px solid var(--line); padding: 7px 8px; text-align: left; vertical-align: middle; }
table.list th { background: var(--paper-warm); font-weight: bold; color: var(--ink-soft); font-size: 12px; white-space: nowrap; }
table.list tr:hover td { background: #fcfbf8; }
.mute { color: var(--mute); font-size: 12px; }
.help { color: var(--mute); font-size: 12px; line-height: 1.7; }
.toast { position: fixed; right: 20px; bottom: 90px; background: #333; color: #fff; padding: 10px 16px; border-radius: 8px; font-size: 13px; opacity: 0; transform: translateY(8px); transition: .25s; z-index: 200; }
.toast.show { opacity: 1; transform: none; }
.hide { display: none !important; }
.legend { display: flex; gap: 10px; flex-wrap: wrap; font-size: 11.5px; color: var(--ink-soft); }
.legend span { display: inline-flex; align-items: center; gap: 4px; }
.legend i { display: inline-block; width: 14px; height: 14px; border: 1px solid var(--line-dark); border-radius: 3px; }

/* ===== 日別計画表（画面用） ===== */
.planWrap { overflow-x: auto; margin-bottom: 14px; }
table.plan { border-collapse: collapse; font-size: 11px; table-layout: fixed; }
table.plan th, table.plan td { border: 1px solid #b9b3a7; text-align: center; padding: 0; height: 20px; }
table.plan th.lbl { width: 62px; background: var(--paper-warm); font-weight: bold; font-size: 11px; }
table.plan td.day { width: 30px; min-width: 30px; }
table.plan td.we { background: var(--c-weekend); color: var(--mute); }
table.plan td.hol { background: var(--c-weekend); color: var(--red); }
table.plan td.content { height: 150px; vertical-align: top; padding: 3px 0; }
table.plan td.content .v { writing-mode: vertical-rl; text-orientation: mixed; height: 144px; margin: 0 auto; font-size: 10.5px; line-height: 1.1; letter-spacing: .02em; white-space: pre-wrap; }
table.plan td.inperson { background: var(--c-inperson); }
table.plan td.online { background: var(--c-online); }
table.plan td.lecture { background: var(--c-lecture); }
table.plan td.hw { background: var(--c-hw); }
table.plan td.cc { background: var(--c-cc); }
table.plan td.open { background: var(--c-open); }
table.plan td.off { background: var(--c-off); }
table.plan td.busy { background: var(--c-busy); }
table.plan td.clash { outline: 2px solid var(--red); outline-offset: -2px; }
table.plan td.clickable { cursor: pointer; }
table.plan td.clickable:hover { box-shadow: inset 0 0 0 2px var(--accent-soft); }
table.plan td.ovr { box-shadow: inset 0 0 0 2px var(--accent); }
table.plan td.sub { background: var(--paper-warm); font-weight: bold; width: 44px; }
.monthHead { display: flex; gap: 12px; align-items: baseline; margin: 10px 0 4px; font-size: 13px; }
.monthHead b { color: var(--accent); }
.warnList { list-style: none; }
.warnList li { padding: 6px 10px; border-radius: 6px; margin-bottom: 4px; font-size: 12.5px; }
.warnList li.error { background: var(--red-pale); color: var(--red); }
.warnList li.warn { background: var(--orange-pale); color: var(--orange); }
.warnList li.info { background: var(--blue-pale); color: var(--blue); }

/* ===== 教室稼働表 ===== */
table.occ { border-collapse: collapse; font-size: 11.5px; }
table.occ th, table.occ td { border: 1px solid var(--line-dark); padding: 2px 6px; text-align: center; white-space: nowrap; }
table.occ th { background: var(--paper-warm); font-weight: bold; }
table.occ td.d { text-align: left; width: 70px; }
table.occ tr.we td { background: var(--c-weekend); color: var(--mute); }
table.occ td.inperson { background: var(--c-inperson); font-weight: bold; }
table.occ td.online { background: var(--c-online); }
table.occ td.hw { background: var(--c-hw); }
table.occ td.cc { background: var(--c-cc); }
table.occ td.open { background: var(--c-open); font-weight: bold; }
table.occ td.block { background: var(--c-busy); }
table.occ tr.clash td { outline: 2px solid var(--red); outline-offset: -2px; }

/* ===== フィードバック（右下のチャット） ===== */
.fbBtn { position: fixed; right: 20px; bottom: 20px; background: var(--accent); color: #fff; border: none; border-radius: 999px; padding: 12px 18px; font-size: 13px; font-weight: bold; cursor: pointer; box-shadow: 0 6px 20px rgba(0,0,0,.18); z-index: 150; }
.fbBtn .n { background: var(--red); border-radius: 999px; padding: 1px 6px; font-size: 11px; margin-left: 6px; }
.fbPanel { position: fixed; right: 20px; bottom: 70px; width: min(92vw, 380px); height: min(78vh, 560px); background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 12px 40px rgba(0,0,0,.2); display: flex; flex-direction: column; z-index: 160; overflow: hidden; }
.fbHead { background: var(--accent); color: #fff; padding: 10px 14px; font-size: 13px; font-weight: bold; display: flex; align-items: center; gap: 8px; }
.fbHead button { margin-left: auto; background: none; border: none; color: #fff; cursor: pointer; font-size: 16px; }
.fbBody { flex: 1; overflow-y: auto; padding: 12px; background: var(--paper); }
.fbFoot { border-top: 1px solid var(--line); padding: 10px; display: flex; flex-direction: column; gap: 6px; background: #fff; }
.fbFoot textarea { width: 100%; min-height: 60px; resize: vertical; }
.fbThread { padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: #fff; margin-bottom: 6px; cursor: pointer; font-size: 12.5px; }
.fbThread:hover { border-color: var(--accent-soft); }
.fbThread .t { font-weight: bold; }
.fbThread .m { color: var(--mute); font-size: 11px; }
.fbMsg { max-width: 88%; padding: 8px 10px; border-radius: 10px; margin-bottom: 8px; font-size: 12.5px; white-space: pre-wrap; line-height: 1.5; }
.fbMsg.me { background: var(--accent-pale); margin-left: auto; }
.fbMsg.them { background: #fff; border: 1px solid var(--line); }
.fbMsg .who { display: block; font-size: 10.5px; color: var(--mute); margin-bottom: 2px; }