:root {
  --bg: #f4f5f7; --panel: #fff; --line: #cfd4dc; --line-strong: #6b7380; --text: #1c2330; --sub: #5a6472;
  --accent: #1f5fae; --ok: #cdeccd; --warn: #fbeeb0; --bad: #f7c6c6; --lock: #e3e5e9; --sel: #ffd27a; --hl: #d6e6ff;
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { font: 13px/1.4 "Yu Gothic UI", "Meiryo", sans-serif; color: var(--text); background: var(--bg); display: flex; flex-direction: column; }

.bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 6px 10px; background: var(--panel); border-bottom: 1px solid var(--line); }
.bar .title { margin-right: 6px; font-size: 15px; }
.bar .sep { width: 1px; height: 22px; background: var(--line); margin: 0 4px; }
.chk { display: inline-flex; align-items: center; gap: 4px; }
button, select, input, textarea { font: inherit; color: inherit; }
button { padding: 4px 10px; border: 1px solid var(--line-strong); border-radius: 4px; background: #fff; cursor: pointer; }
button:hover { background: #eef2f8; }
button:disabled { opacity: .45; cursor: default; }
button.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
button.primary:hover { background: #184c8c; }
button.mini { padding: 1px 6px; font-size: 12px; }
select, input[type=text], input:not([type]) { padding: 3px 6px; border: 1px solid var(--line-strong); border-radius: 4px; background: #fff; }

.status { min-height: 24px; padding: 3px 10px; background: #fffbe6; border-bottom: 1px solid var(--line); color: #5b4a00; }
.status:empty { background: var(--bg); }

main { flex: 1; display: flex; min-height: 0; }
.gridWrap { flex: 1; overflow: auto; min-width: 0; }
.side { width: 340px; flex: none; display: flex; flex-direction: column; border-left: 1px solid var(--line); background: var(--panel); }
.tabs { display: flex; border-bottom: 1px solid var(--line); }
.tabs button { flex: 1; border: 0; border-radius: 0; border-bottom: 3px solid transparent; padding: 7px 0; }
.tabs button.on { border-bottom-color: var(--accent); font-weight: bold; }
.tab { flex: 1; overflow: auto; padding: 10px; }
.tab h3 { margin: 12px 0 4px; font-size: 13px; }
.tab h3:first-child { margin-top: 0; }
.tab ol, .tab ul { margin: 4px 0; padding-left: 20px; }

.empty { padding: 60px 30px; text-align: center; color: var(--sub); }

table.grid { border-collapse: separate; border-spacing: 0; background: var(--panel); }
.grid th, .grid td { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 1px 3px; text-align: center; white-space: nowrap; }
.grid thead th { position: sticky; top: 0; z-index: 3; background: #e9edf3; }
.grid thead tr:nth-child(2) th { top: 22px; }
.grid th.cls { position: sticky; left: 0; z-index: 2; background: #e9edf3; min-width: 64px; text-align: left; }
.grid thead th.cls { z-index: 4; }
.grid .dayStart { border-left: 2px solid var(--line-strong); }
.grid tr.gradeStart > * { border-top: 2px solid var(--line-strong); }
.grid td { cursor: pointer; width: 60px; min-width: 60px; max-width: 60px; height: 34px; overflow: hidden; font-size: 12px; }
.grid td .s { font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.grid td .t { font-size: 11px; color: var(--sub); overflow: hidden; text-overflow: ellipsis; }
.grid tr.extra td { height: 20px; background: #fafafa; }
.grid tr.extra th.cls { font-weight: normal; color: var(--sub); }
.grid td.hl { background: var(--hl); }
.grid td.ok { background: var(--ok); }
.grid td.warn { background: var(--warn); }
.grid td.bad { background: var(--bad); }
.grid td.nolock { background: var(--lock); cursor: not-allowed; }
.grid td.sel { background: var(--sel); box-shadow: inset 0 0 0 2px #b36b00; }
.grid td.conf { box-shadow: inset 0 0 0 2px #c62828; }
.grid td.conf.sel { box-shadow: inset 0 0 0 2px #b36b00, inset 0 0 0 4px #c62828; }
.grid td.locked .s::before { content: "🔒"; font-size: 10px; margin-right: 2px; }
.grid th.colhl { background: #ffe9b8; }

.lg { padding: 0 6px; border-radius: 3px; }
.lg.ok { background: var(--ok); } .lg.warn { background: var(--warn); } .lg.bad { background: var(--bad); } .lg.lock { background: var(--lock); }

.sum { display: flex; gap: 8px; margin-bottom: 8px; }
.sum div { flex: 1; padding: 6px; border: 1px solid var(--line); border-radius: 4px; text-align: center; }
.sum b { display: block; font-size: 18px; }
.sum .ng b { color: #c62828; }
.item { padding: 5px 6px; border: 1px solid var(--line); border-radius: 4px; margin-bottom: 5px; }
.item .hd { display: flex; align-items: center; gap: 6px; }
.item .hd b { flex: 1; }
.item .bd { color: var(--sub); font-size: 12px; }
.item.dup { border-left: 4px solid #c62828; }
.item.ng { border-left: 4px solid #b36b00; }
.none { color: var(--sub); }
details { margin-top: 10px; }
summary { cursor: pointer; font-weight: bold; }

table.mini { border-collapse: collapse; width: 100%; margin: 6px 0; }
.mini th, .mini td { border: 1px solid var(--line); padding: 2px 3px; text-align: center; font-size: 12px; height: 30px; }
.mini th { background: #e9edf3; }
.mini td.on { background: var(--hl); }
.mini td.dbl { background: var(--bad); }
.mini td.ngc { background: repeating-linear-gradient(45deg, #f2d9b0, #f2d9b0 4px, #fff 4px, #fff 8px); }
.mini.edit td { cursor: pointer; }
table.list { border-collapse: collapse; width: 100%; }
.list th, .list td { border-bottom: 1px solid var(--line); padding: 2px 4px; text-align: right; font-size: 12px; }
.list th:first-child, .list td:first-child { text-align: left; }
.list tr.cur { background: var(--hl); }
.list tbody tr { cursor: pointer; }
.list tbody tr:hover { background: #eef2f8; }

dialog { border: 1px solid var(--line-strong); border-radius: 6px; padding: 14px 16px; max-width: 640px; width: 90vw; }
dialog::backdrop { background: rgba(0, 0, 0, .35); }
dialog h3 { margin: 0 0 8px; }
dialog label { display: block; margin: 6px 0; }
dialog textarea { width: 100%; font-family: monospace; font-size: 12px; white-space: pre; }
dialog .row { display: flex; gap: 8px; justify-content: flex-end; margin-top: 10px; }
.note { color: var(--sub); font-size: 12px; }
.err { color: #c62828; min-height: 1em; margin: 4px 0; }
.sum .wn b { color: #b36b00; }
.item.room, .item.roomng { border-left: 4px solid #6a3fb5; }
.list td.over { background: var(--bad); font-weight: bold; }
.list td.five { background: var(--warn); }
.list tr.bad td { background: var(--bad); }
.list tr.grp td { background: #e9edf3; font-weight: bold; cursor: default; }
table.rules { border-collapse: collapse; width: 100%; }
.rules th, .rules td { border-bottom: 1px solid var(--line); padding: 2px; font-size: 12px; text-align: left; }
.rules input, .rules select { width: 100%; font-size: 12px; padding: 1px 3px; }
.mini td { font-size: 11px; }
.loginBox { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; background: var(--bg); }
.loginBox > div { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 24px 28px; max-width: 420px; text-align: center; }
#dlgEdit { max-width: 720px; }
.cands { max-height: 45vh; overflow: auto; }
.list.cands tbody tr td { text-align: left; }
.list.cands tr.short td:first-child { font-weight: bold; color: #b36b00; }
.list.cands td.fr { color: #2e7d32; }
.list.cands td.bz { color: #c62828; white-space: normal; }
.list.cands th { text-align: left; }
.grid td.cur { outline: 3px solid #1f5fae; outline-offset: -3px; }
.list.cands tbody tr.on td { background: #d6e6ff; }
.userBadge { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--sub); }
.bar a.title.home { color: var(--accent); text-decoration: none; font-weight: bold; }
.bar a.title.home:hover { text-decoration: underline; }