:root {
  --bg: #f7f7f5;
  --surface: #ffffff;
  --border: #d9dce1;
  --text: #1f2328;
  --text-muted: #6b7280;
  --accent: #2f6690;
  --accent-soft: #e4eef5;
  --today: #fff4d6;
  --holiday: #fbdde6;
  --weekend-col: #eef0f2;
  --error: #b3261e;
  --admin-badge: #a3540d;
}

* { box-sizing: border-box; }

button, input, textarea, select { font-family: inherit; }

body {
  margin: 0;
  font-family: "BIZ UDPGothic", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Segoe UI", sans-serif;
  color: var(--text);
  background: var(--bg);
  font-size: 14px;
}

/* ---- login ---- */
.login-body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}
.login-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 32px 36px;
  width: 320px;
  box-shadow: 0 8px 24px -12px rgba(0,0,0,0.15);
}
.login-card h1 { font-size: 20px; margin: 0 0 4px; }
.login-card .sub { color: var(--text-muted); margin: 0 0 20px; font-size: 13px; }
.login-card form { display: flex; flex-direction: column; gap: 14px; }
.login-card label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--text-muted); }
.login-card input {
  font-size: 14px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 6px;
}
.login-card button {
  margin-top: 6px; padding: 9px; border: none; border-radius: 6px;
  background: var(--accent); color: white; font-size: 14px; cursor: pointer;
}
.login-card button:hover { opacity: 0.92; }
.error { color: var(--error); font-size: 13px; margin: 0; }

/* ---- app shell ---- */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 16px; background: var(--surface); border-bottom: 1px solid var(--border);
}
.topbar h1 { font-size: 16px; margin: 0; }
.version-tag { font-size: 11px; font-weight: 400; color: var(--text-muted); vertical-align: middle; }
.topbar-right { display: flex; align-items: center; gap: 12px; font-size: 13px; color: var(--text-muted); }

.ghost-btn {
  border: 1px solid var(--border); background: var(--surface); border-radius: 6px;
  padding: 6px 12px; font-size: 13px; cursor: pointer;
}
.ghost-btn:hover { background: var(--accent-soft); }

.toolbar {
  display: flex; align-items: center; gap: 10px; padding: 10px 16px;
}
.toolbar button {
  border: 1px solid var(--border); background: var(--surface); border-radius: 6px;
  padding: 6px 12px; font-size: 13px; cursor: pointer;
}
.toolbar button:hover { background: var(--accent-soft); }
.month-label { font-size: 15px; font-weight: 600; min-width: 100px; text-align: center; }
.save-status { margin-left: auto; font-size: 12px; color: var(--text-muted); }

.mode-buttons { display: flex; align-items: center; gap: 4px; padding: 0 8px; border-left: 1px solid var(--border); border-right: 1px solid var(--border); }
.mode-btn {
  border: 1px solid var(--border); background: var(--surface); border-radius: 6px;
  padding: 5px 9px; font-size: 12px; cursor: pointer; display: flex; align-items: center; gap: 4px;
}
.mode-btn:hover { background: var(--accent-soft); }
.mode-btn.active { background: var(--accent); color: white; border-color: var(--accent); }
.mode-btn .swatch { font-size: 13px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; min-width: 14px; white-space: nowrap; }
.mode-btn .circle-swatch { width: 12px; height: 12px; border-radius: 50%; flex: none; }

.mode-group { display: flex; gap: 4px; }
.mode-divider { width: 1px; align-self: stretch; background: var(--border); margin: 0 8px; }
.admin-group .mode-btn { border-color: var(--admin-badge); }
.admin-group .mode-btn.active { background: var(--admin-badge); border-color: var(--admin-badge); }

table.schedule tr.keyman-row td { background: #fafafa; }
table.schedule select.keyman-select {
  width: 100%; height: 100%; border: none; background: transparent;
  font-size: 14px; font-family: inherit; text-align: center; text-align-last: center; color: var(--text);
}
table.schedule select.keyman-select:disabled {
  color: var(--text); -webkit-text-fill-color: var(--text); opacity: 1;
}
table.schedule tr.keyman-row td.keyman-confirmed { background: #ffdd33; }
.mode-hint { font-size: 11px; color: var(--text-muted); padding: 0 4px; }

#app-root { padding: 0 16px 40px; overflow-x: auto; scrollbar-width: auto; }
#app-root::-webkit-scrollbar { height: 14px; }
#app-root::-webkit-scrollbar-track { background: var(--bg); }
#app-root::-webkit-scrollbar-thumb { background: var(--text-muted); border-radius: 7px; border: 3px solid var(--bg); }
#app-root::-webkit-scrollbar-thumb:hover { background: var(--text); }

table.schedule {
  border-collapse: collapse;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  background: var(--surface);
}
table.schedule th, table.schedule td {
  border: 1px solid var(--border);
  padding: 4px;
  text-align: center;
  min-width: 84px;
  height: 32px;
}

table.schedule tr.day-note-row td {
  height: 270px;
  vertical-align: top;
  padding: 0;
}

table.schedule tr.staff-row td, table.schedule tr.staff-row th {
  height: 44px;
  padding: 8px 4px;
}
table.schedule th.name-col, table.schedule td.name-col {
  min-width: 112px; text-align: left; padding-left: 8px; white-space: nowrap;
  position: sticky; left: 0; z-index: 3; background: var(--surface);
  box-shadow: 2px 0 4px -2px rgba(0,0,0,0.15);
}
table.schedule tr.keyman-row td.name-col { background: #fafafa; }
table.schedule tr.staff-row td.name-col { background: var(--surface); }
table.schedule tr.staff-row td.name-col.name-alt { background: #e3edf9; }
table.schedule td.today, table.schedule th.today { background: var(--today); }
table.schedule th.weekend { background: var(--accent-soft); }
table.schedule th.holiday { background: var(--holiday); }
table.schedule td.weekend-col { background: var(--weekend-col); }
table.schedule tr.team-divider td { border-top: 2px solid var(--text); }
table.schedule tr.kato-row td {
  box-shadow: inset 0 1.5px 0 0 var(--text), inset 0 -1.5px 0 0 var(--text);
}

table.schedule input.cell-input {
  width: 100%; height: 100%; border: none; background: transparent;
  text-align: center; font-size: 15px; font-family: inherit; color: var(--text);
}
table.schedule input.cell-input:focus { outline: 2px solid var(--accent); outline-offset: -2px; }
table.schedule input.cell-input:disabled {
  color: var(--text); -webkit-text-fill-color: var(--text); opacity: 1; background: transparent;
}

table.schedule textarea.note-input {
  width: 100%; height: 100%; border: none; background: transparent; resize: none;
  font-size: 15px; font-family: inherit; color: var(--text);
  padding: 4px; white-space: pre-wrap; word-break: break-word; line-height: 1.6;
  writing-mode: vertical-lr; text-orientation: upright; letter-spacing: 0.18em;
}
table.schedule textarea.note-input:focus { outline: 2px solid var(--accent); outline-offset: -2px; }

table.summary-table {
  border-collapse: collapse;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  background: var(--surface);
  margin-top: 16px;
}
table.summary-table caption {
  caption-side: top; text-align: left; font-size: 13px; font-weight: 600;
  color: var(--text-muted); padding: 4px 0 8px;
}
table.summary-table th, table.summary-table td {
  border: 1px solid var(--border);
  padding: 5px 10px;
  text-align: right;
  min-width: 60px;
}
table.summary-table th { background: #fafafa; color: var(--text-muted); font-weight: 600; }
/* キーマン列(5番目)・休日出勤列(7番目)を黄色ベタに */
table.summary-table th:nth-child(5), table.summary-table td:nth-child(5),
table.summary-table th:nth-child(7), table.summary-table td:nth-child(7) {
  background: #ffdd33;
}
table.summary-table td.name-col, table.summary-table th.name-col {
  text-align: left; min-width: 100px; white-space: nowrap;
}

.role-badge {
  font-size: 10px; color: var(--admin-badge); border: 1px solid var(--admin-badge);
  border-radius: 4px; padding: 0 4px; margin-left: 4px;
}

/* ---- event panel(期間予定の追加・編集) ---- */
.event-panel {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin: 0 16px 16px; padding: 10px 14px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
  font-size: 13px;
}
.event-panel[hidden] { display: none; }
.event-panel label { display: flex; align-items: center; gap: 6px; color: var(--text-muted); }
.event-panel input[type="date"], .event-panel input[type="text"] {
  border: 1px solid var(--border); border-radius: 6px; padding: 5px 8px; font-size: 13px; font-family: inherit;
}
.event-panel input[type="text"] { width: 160px; }
.error-text { color: var(--error); font-size: 12px; }

/* 期間予定の帯(予定欄のすぐ下、複数日にまたがる予定) */
table.schedule tr.event-row td { height: 22px; padding: 0; }
table.schedule tr.event-row td.name-col {
  font-size: 11px; color: var(--text-muted); line-height: 22px; padding-left: 6px;
}
table.schedule td.event-span {
  background: var(--accent); color: white; text-align: center; vertical-align: middle;
  writing-mode: horizontal-tb; font-size: 11px; line-height: 22px; cursor: pointer; position: relative;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 8px;
}
table.schedule td.event-span:hover { filter: brightness(1.1); }
table.schedule td.event-span::before, table.schedule td.event-span::after {
  content: ""; position: absolute; top: 50%; width: 0; height: 0;
  border-top: 5px solid transparent; border-bottom: 5px solid transparent;
  transform: translateY(-50%);
}
table.schedule td.event-span::before { left: -1px; border-right: 6px solid var(--accent); }
table.schedule td.event-span::after { right: -1px; border-left: 6px solid var(--accent); }

/* ---- meeting panel(画面をブロックしないインライン表示) ---- */
.meeting-panel {
  margin: 0 16px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 18px;
  max-height: 300px;
  overflow-y: auto;
}
.meeting-group { margin-bottom: 16px; }
.meeting-group:last-child { margin-bottom: 0; }
.meeting-group h3 { font-size: 13px; margin: 0 0 6px; color: var(--accent); }
.meeting-group ul { margin: 0; padding-left: 18px; font-size: 13px; }
.meeting-group li { margin-bottom: 2px; }

/* ---- print ---- */
@media print {
  .no-print { display: none !important; }
  body { background: white; font-size: 9px; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  #app-root { padding: 0; overflow: visible; }

  table.summary-table { display: none; }

  table.schedule {
    font-size: 11px;
    border-spacing: 0;
  }
  table.schedule th, table.schedule td { min-width: 0 !important; padding: 14px 2px !important; height: auto !important; }
  table.schedule th.name-col, table.schedule td.name-col {
    min-width: 0 !important;
    position: static;
    box-shadow: none;
  }
  table.schedule input.cell-input, table.schedule select.keyman-select { font-size: 11px; }
  table.schedule input.cell-input:disabled,
  table.schedule select.keyman-select:disabled {
    color: var(--text) !important;
    -webkit-text-fill-color: var(--text) !important;
    opacity: 1 !important;
  }
  table.schedule tr.day-note-row td { height: 450px !important; }
  table.schedule textarea.note-input { font-size: 16px; letter-spacing: 0.1em; overflow: hidden !important; }
}