/* 配色は ITスキルアカデミー（it-skill-academy.jp）に合わせる：
   紺（ヘッダ）・青（操作）・オレンジ（注意を引く1点）・淡い青（表の見出し）・薄いグレーの地。
   Web フォントは CSP（default-src 'self'）で読み込めないため、日本語のシステムフォントを使う。 */
:root {
  --navy:#0b1f38; --navy-mid:#1a3a5c;
  --blue:#1a5fa8; --blue-mid:#2775c5; --blue-light:#e6eef8;
  --accent:#e8720f; --accent-dk:#cc5f08; --accent-light:#fdf1e5;
  --ink:#1c2b3a; --text-mid:#445566; --muted:#7a90a8;
  --bg:#f5f7fa; --surface:#fff; --line:#cdd8e8; --line-soft:#eaeff7;
  --err:#c0392b; --err-light:#fdecea; --ok:#1f6f43; --ok-light:#eaf5ee;
  --radius:6px; --shadow:0 1px 2px rgba(11,31,56,.06);
}
* { box-sizing: border-box; }
/* .row などの display 指定が UA の hidden より強いため、hidden を明示的に効かせる */
[hidden] { display:none !important; }
body { margin:0; font-family: "Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif; color:var(--ink); background:var(--bg); font-size:15px; line-height:1.7; }
a { color:var(--blue); }
a:hover { color:var(--blue-mid); }

/* ヘッダ */
.topbar { display:flex; align-items:center; gap:24px; padding:0 24px; background:var(--navy); color:#fff; min-height:52px; }
.brand { font-weight:700; text-decoration:none; color:#fff; letter-spacing:.02em; }
.brand:hover { color:#fff; }
.nav { display:flex; flex-wrap:wrap; }
.nav a { margin-right:4px; text-decoration:none; color:rgba(255,255,255,.85); padding:15px 12px; border-bottom:3px solid transparent; }
.nav a:hover { color:#fff; background:var(--navy-mid); border-bottom-color:var(--accent); }
.me { margin-left:auto; display:flex; gap:12px; align-items:center; color:rgba(255,255,255,.7); font-size:13px; }
.me button.link { color:rgba(255,255,255,.9); }
.main { max-width:1200px; margin:0 auto; padding:24px; }

h1 { font-size:22px; font-weight:700; margin:0 0 16px; color:var(--navy); }
h2 { font-size:17px; font-weight:700; margin:24px 0 8px; color:var(--navy); }
h3 { font-size:15px; font-weight:700; margin:16px 0 6px; color:var(--text-mid); }
.muted { color:var(--muted); }
.muted-small { font-size:12px; color:var(--muted); }
.card { border:1px solid var(--line); background:var(--surface); padding:18px 20px; border-radius:var(--radius); box-shadow:var(--shadow); margin-bottom:16px; }
.card > h2:first-child, .card > h3:first-child { margin-top:0; }
.card > p:last-child, .card > table:last-child { margin-bottom:0; }
.login-body { display:flex; min-height:100vh; align-items:center; justify-content:center; background:var(--bg); }
.login { width:360px; }
.stack label { display:block; margin:8px 0; font-size:13px; color:var(--text-mid); }

/* 入力 */
input[type=text], input[type=email], input[type=number], input[type=time], input[type=date], select, textarea {
  width:100%; padding:8px 10px; border:1px solid var(--line); border-radius:4px; background:#fff; font:inherit; color:var(--ink);
}
input:focus, select:focus, textarea:focus { outline:2px solid var(--blue-mid); outline-offset:-1px; border-color:var(--blue-mid); }

/* ボタン */
.btn { display:inline-block; padding:8px 16px; border:1px solid var(--blue); border-radius:4px; background:#fff; color:var(--blue); text-decoration:none; font:inherit; font-weight:600; cursor:pointer; }
.btn:hover { background:var(--blue-light); color:var(--blue); }
.btn.primary { background:var(--blue); border-color:var(--blue); color:#fff; }
.btn.primary:hover { background:var(--blue-mid); border-color:var(--blue-mid); color:#fff; }
.btn.small { padding:4px 10px; font-size:13px; }
button.link { border:none; background:none; color:var(--blue); text-decoration:underline; cursor:pointer; font:inherit; }

/* 通知 */
.flash { padding:10px 14px; border-left:4px solid; border-radius:0 4px 4px 0; margin-bottom:16px; }
.flash.ok { border-color:var(--ok); background:var(--ok-light); color:var(--ok); }
.flash.flash-warn { border-color:var(--accent); background:var(--accent-light); color:var(--accent-dk); }
.flash.err { border-color:var(--err); background:var(--err-light); color:var(--err); }

/* 表 */
table.list { width:100%; border-collapse:collapse; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
table.list th, table.list td { text-align:left; padding:9px 12px; border-bottom:1px solid var(--line-soft); vertical-align:top; }
table.list th { font-weight:700; font-size:13px; color:var(--text-mid); background:var(--blue-light); border-bottom:1px solid var(--line); }
table.list tbody tr:last-child td { border-bottom:none; }
table.list tbody tr:hover td { background:#fbfcfe; }
/* 見出しと右端の操作リンク（詳細・閉じるなど）は折り返さない */
table.list th, table.table th { white-space:nowrap; }
table.list td:last-child a, table.table td:last-child a { white-space:nowrap; }
table.table { width:100%; border-collapse:collapse; }
table.table th, table.table td { text-align:left; padding:8px 10px; border-bottom:1px solid var(--line-soft); vertical-align:top; }
table.table th { font-weight:700; font-size:13px; color:var(--text-mid); background:var(--blue-light); }

.form-grid { display:grid; grid-template-columns: 180px 1fr; gap:12px 16px; align-items:start; max-width:800px; }
.form-grid label.head { color:var(--text-mid); font-size:13px; font-weight:600; padding-top:8px; }
.checks { display:flex; flex-wrap:wrap; gap:8px 16px; }
.checks label { font-size:14px; }
.actions { margin-top:20px; display:flex; gap:12px; align-items:center; }
.inline-form { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.inline-form input { width:auto; }
.inline-form select { width:auto; max-width:360px; }
.inline-form textarea { width:auto; }
.venue .inline-form, .assignment .inline-form { gap:6px; }

/* タグ（状態の表示） */
.tag { display:inline-block; white-space:nowrap; font-size:12px; color:var(--muted); border:1px solid var(--line); border-radius:3px; padding:1px 7px; background:#fff; }
.field-error { color:var(--err); font-size:13px; }
.links li { margin:6px 0; }
/* トップ画面の入口。表の中の .links（要対応など）には効かせない */
.main > .links { list-style:none; margin:0 0 24px; padding:0; display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:12px; }
.main > .links li { margin:0; }
.main > .links a { display:block; padding:14px 16px; background:var(--surface); border:1px solid var(--line); border-left:4px solid var(--blue); border-radius:var(--radius); box-shadow:var(--shadow); text-decoration:none; font-weight:600; }
.main > .links a:hover { background:var(--blue-light); border-left-color:var(--accent); }
.subnav { display:flex; gap:4px; border-bottom:1px solid var(--line); margin-bottom:20px; }
.subnav a { text-decoration:none; padding:8px 14px; color:var(--text-mid); border-bottom:3px solid transparent; }
.subnav a:hover { color:var(--blue); background:var(--blue-light); }
.subnav a.active { color:var(--blue); font-weight:700; border-bottom-color:var(--blue); }

.head-row { display:flex; align-items:center; gap:16px; }
.head-row h1 { margin:0; }
.attention { color:var(--accent-dk); font-weight:700; }
.warn { border-left:4px solid var(--accent); background:var(--accent-light); padding:12px 16px; margin:16px 0; border-radius:0 4px 4px 0; }
.warn ul { margin:8px 0; padding-left:20px; }
.day { border:1px solid var(--line); background:var(--surface); border-radius:var(--radius); padding:14px 16px; margin:14px 0; }
.day-head { display:flex; flex-wrap:wrap; gap:16px; align-items:center; }
.day-head input[type=date], .day-head input[type=time] { width:auto; padding:4px 6px; }
.venue { display:flex; flex-wrap:wrap; gap:12px; align-items:center; padding:10px 0; border-bottom:1px solid var(--line-soft); }
.slot { padding:10px 0; border-bottom:1px solid var(--line-soft); }
.slot:last-child { border-bottom:none; }
.slot-head { display:flex; gap:12px; align-items:center; margin-bottom:6px; }
.assignment { display:flex; flex-wrap:wrap; gap:10px; align-items:center; padding:4px 0 4px 12px; }
.assignment.is-cancelled { color:var(--muted); }
.add-assign { padding-left:12px; margin-top:6px; }
.tag.st-ordered, .tag.as-confirmed, .tag.vn-confirmed { border-color:var(--blue); color:var(--blue); background:var(--blue-light); font-weight:600; }
.tag.as-tentative, .tag.vn-tentative { border-style:dashed; border-color:var(--muted); color:var(--text-mid); }
.tag.st-cancelled, .tag.as-cancelled { text-decoration:line-through; }
.tag.vn-pending, .tag.st-prospect { color:var(--accent-dk); border-color:var(--accent); background:var(--accent-light); }
.tag.st-done { color:var(--muted); }
table.days input { padding:4px 6px; }
.days-table td { vertical-align: middle; }
.days-table tr.day-detail > td { padding: 0 0 12px 0; border-bottom: 1px solid var(--line-soft); }
.days-table tr.day-detail .day { margin: 0; border-left: 3px solid var(--blue); }
.bulk-panel { border:1px solid var(--line); background:var(--blue-light); border-radius:var(--radius); padding:12px 16px; margin:12px 0; }
.bulk-panel .row { display:flex; flex-wrap:wrap; gap:10px 14px; align-items:center; margin:6px 0; }
.bulk-panel label { font-size:14px; }
.bulk-panel select, .bulk-panel input[type=text] { width:auto; max-width:360px; }
.range-box { border:1px dashed var(--line); border-radius:4px; background:#fbfcfe; padding:10px 12px; margin-bottom:10px; }
.tag.active { border-color:var(--blue); color:var(--blue); background:var(--blue-light); }
.tag.kind-open { border-color:var(--navy); color:var(--navy); font-weight:700; }
.tag.pt-confirmed { border-color:var(--blue); color:var(--blue); }
.tag.pt-tentative { border-style:dashed; }
.tag.pt-cancelled { text-decoration:line-through; color:var(--muted); }
.participants { margin:16px 0; }
.participants tr.is-cancelled td { color:var(--muted); }
.participants input[type=text], .participants input[type=number] { width:auto; }
.date-head { font-size:15px; font-weight:700; margin:18px 0 6px; color:var(--text-mid); }
.my-item { padding:12px 14px; margin:8px 0; }
.my-item.is-done { color:var(--muted); }
.my-line { margin:2px 0; display:flex; flex-wrap:wrap; gap:8px; align-items:center; }

/* カレンダー（稼働不可日） */
.cal-nav { display:flex; justify-content:space-between; align-items:center; margin:8px 0; }
table.cal { width:100%; border-collapse:collapse; table-layout:fixed; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
table.cal th { font-size:12px; color:var(--text-mid); background:var(--blue-light); padding:6px 0; border-bottom:1px solid var(--line); }
table.cal td { vertical-align:top; height:64px; border-bottom:1px solid var(--line-soft); border-right:1px solid var(--line-soft); padding:2px 4px; }
table.cal td.empty { background:var(--bg); }
table.cal td.is-weekend { background:#fafcfe; }
table.cal td.is-weekend .cal-day { color:var(--muted); }
table.cal td.is-unavailable { background:repeating-linear-gradient(135deg, var(--line-soft) 0 6px, #fff 6px 12px); }
table.cal td.is-selected { outline:2px solid var(--blue); outline-offset:-2px; }
.cal-day { display:block; text-decoration:none; font-weight:700; color:var(--ink); }
.cal-mark { font-size:11px; color:var(--blue); }
.cal-mark.assigned { color:var(--accent-dk); }
@media (max-width: 640px) {
  .topbar { flex-wrap:wrap; gap:0 8px; padding:6px 14px; }
  .nav a { padding:8px 8px; }
  .main { padding:14px; }
  table.cal td { height:56px; padding:1px 2px; }
  .cal-mark { font-size:10px; }
  .form-grid { grid-template-columns:1fr; gap:4px 0; }
  .form-grid label.head { padding-top:10px; }
}

/* ボード */
.board-nav { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:8px; margin:8px 0 12px; }
.pending { border:1px solid var(--line); background:var(--surface); border-radius:var(--radius); box-shadow:var(--shadow); padding:10px 14px; margin-bottom:12px; }
.pending h2 { margin:0 0 6px; }
.pending-row { display:flex; gap:12px; overflow-x:auto; padding-bottom:4px; }
.pending-day { min-width:200px; }
.pending-item { border:1px dashed var(--blue); border-radius:4px; color:var(--blue); padding:4px 8px; margin:4px 0; font-size:13px; background:#fff; }
.pending-item[draggable] { cursor:grab; }
.pending-item.selected { outline:2px solid var(--accent); background:var(--accent-light); }
.pending-item.dragging { opacity:.5; }
.board-wrap { overflow-x:auto; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); }
table.board { border-collapse:collapse; min-width:100%; }
table.board th, table.board td { border:1px solid var(--line-soft); vertical-align:top; padding:4px 6px; font-size:13px; }
table.board th { font-weight:700; color:var(--text-mid); background:var(--blue-light); }
table.board th.board-head { position:sticky; left:0; background:var(--blue-light); text-align:left; min-width:120px; z-index:1; }
table.board td.board-cell { min-width:140px; height:56px; background:#fff; }
table.board.board-month td.board-cell { min-width:90px; }
table.board .is-weekend { background:#fafcfe; }
table.board td.is-weekend { background:#fafcfe; }
table.board th.is-today { border-bottom:3px solid var(--accent); color:var(--accent-dk); }
table.board td.is-unavail { background:repeating-linear-gradient(135deg, var(--line-soft) 0 6px, #fff 6px 12px); }
table.board td.drop-hover { outline:2px solid var(--accent); outline-offset:-2px; }
body.placing td[data-drop-date] { cursor:copy; }
.bi { display:block; text-decoration:none; padding:2px 6px; margin:2px 0; border:1px solid var(--blue); border-radius:3px; color:var(--blue); background:#fff; font-size:12px; line-height:1.4; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:220px; }
.bi-tentative { border-style:dashed; color:var(--text-mid); border-color:var(--muted); }
.bi-confirmed { border-style:solid; background:var(--blue-light); font-weight:600; }
.bi-pending { border-style:dotted; color:var(--text-mid); border-color:var(--muted); }
.bi-conflict { border-color:var(--err); color:var(--err); background:var(--err-light); border-width:2px; }
.bi-period { color:var(--muted); }
.cell-mark { font-size:11px; color:var(--muted); }
.cell-mark.attention { color:var(--accent-dk); font-weight:600; }
.count { font-size:13px; font-weight:normal; color:var(--muted); margin-left:8px; }
.warn-text { color:var(--err); font-weight:700; }