/* Fuloco シフト予定・配置 (mig 018). White / green / grey SaaS theme. */
.sp-body { background: #f4f6f8; }
#sp-screen { max-width: 1100px; margin: 0 auto; padding: 0 12px 60px; }
.sp-intro { color: #555; font-size: 13px; margin: 8px 4px; line-height: 1.7; }
.month-title { margin: 0 8px; font-size: 18px; color: #1f4f5b; }
.store-bar { display: flex; align-items: center; gap: 8px; margin: 8px 4px; font-size: 14px; }
.store-bar select { padding: 6px 10px; border: 1px solid #cfd6dc; border-radius: 6px; font: inherit; }

.muted { color: #90a0aa; font-size: 13px; padding: 10px 2px; }
.sp-mt { margin-top: 16px; }

/* Buttons */
.btn-xs { padding: 3px 9px; font-size: 12px; border-radius: 5px; }
.btn-outline { background: #fff; border: 1px solid #1f4f5b; color: #1f4f5b; }
.btn-outline:hover { background: #eef4f5; }

/* Alert summary banner */
.sp-alert-summary {
  background: #fff; border: 1px solid #e3e6ea; border-radius: 8px;
  padding: 10px 14px; margin: 4px 4px 10px; font-size: 13px; display: flex;
  align-items: center; gap: 10px; flex-wrap: wrap;
}
.sev-chip { font-size: 12px; font-weight: 700; padding: 2px 10px; border-radius: 999px; }
.sev-chip.critical { background: #fde2e0; color: #b3261e; }
.sev-chip.warning  { background: #fff1d6; color: #a05c00; }
.sev-chip.info     { background: #e3f0ff; color: #1f4e78; }

/* Calendar */
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal-dow { text-align: center; font-size: 12px; font-weight: 700; color: #607d8b; padding: 4px 0; }
.cal-dow.sun { color: #b3261e; }
.cal-dow.sat { color: #1f4e78; }
.cal-cell {
  min-height: 64px; background: #fff; border: 1px solid #e3e6ea; border-radius: 8px;
  padding: 5px 4px; text-align: left; cursor: pointer; position: relative; font: inherit;
  display: flex; flex-direction: column; gap: 3px; transition: box-shadow .12s, border-color .12s;
}
.cal-cell:hover { border-color: #1f4f5b; box-shadow: 0 1px 6px rgba(31,79,91,0.12); }
.cal-cell.empty { background: transparent; border: none; cursor: default; }
.cal-cell.selected { border-color: #1e7a3a; box-shadow: 0 0 0 2px rgba(30,122,58,0.25); }
.cal-cell.sun .cal-num { color: #b3261e; }
.cal-cell.sat .cal-num { color: #1f4e78; }
.cal-num { font-weight: 700; font-size: 13px; color: #333; }
.cal-slots { font-size: 10px; color: #1e7a3a; background: #e6f4ea; border-radius: 4px; padding: 1px 4px; }
.cal-dot { position: absolute; top: 6px; right: 6px; width: 9px; height: 9px; border-radius: 50%; }
.cal-dot.critical { background: #b3261e; }
.cal-dot.warning  { background: #e0a000; }
.cal-dot.info     { background: #2f7fe0; }

/* Day panel */
.sp-day {
  background: #fff; border: 1px solid #e3e6ea; border-radius: 10px;
  margin: 14px 4px; padding: 14px 16px; box-shadow: 0 1px 4px rgba(0,0,0,0.05);
}
.sp-day-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.sp-day-head h3 { margin: 0; font-size: 16px; color: #1f4f5b; }
.sp-day-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.sp-day-alerts { margin: 10px 0; display: flex; flex-direction: column; gap: 5px; }
.alert-line { font-size: 12px; padding: 7px 11px; border-radius: 6px; font-weight: 600; }
.alert-line.critical { background: #fde2e0; color: #b3261e; }
.alert-line.warning  { background: #fff1d6; color: #a05c00; }
.alert-line.info     { background: #e3f0ff; color: #1f4e78; }
.ok-line { color: #1e7a3a; font-size: 13px; font-weight: 600; padding: 4px 0; }

.sp-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 8px; }
/* Grid items must be allowed to shrink below their content's intrinsic width,
   otherwise the タイムスケジュール gantt (min-width:520px on phones) forces the
   column wider than the screen and overflows to the right. With min-width:0 the
   column shrinks and #sp-timeline's overflow-x:auto scrolls the gantt instead. */
.sp-col { min-width: 0; }
.sp-col-head {
  display: flex; justify-content: space-between; align-items: center;
  font-weight: 700; color: #1f4f5b; font-size: 14px; margin-bottom: 8px;
  border-bottom: 2px solid #eef2f4; padding-bottom: 5px;
}

/* Slot cards */
.slot-card { border: 1px solid #e3e6ea; border-left: 3px solid #1f4f5b; border-radius: 8px; padding: 8px 10px; margin-bottom: 8px; }
.slot-main { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.slot-time { font-weight: 700; color: #1f4f5b; }
.slot-need { background: #eef2f4; border-radius: 4px; padding: 1px 7px; font-size: 12px; }
.slot-pos { font-size: 12px; color: #555; margin-top: 3px; }
.slot-note { font-size: 12px; color: #888; margin-top: 3px; }

/* Assignment rows */
.assign-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; border: 1px solid #e3e6ea; border-radius: 8px; padding: 7px 10px; margin-bottom: 6px; }
.assign-info { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.assign-name { font-weight: 700; }
.assign-time { font-size: 12px; color: #555; }
.assign-acts { display: flex; gap: 5px; flex-shrink: 0; }

/* Candidate cards */
.cand-card { border: 1px solid #e3e6ea; border-radius: 8px; padding: 8px 10px; margin-bottom: 7px; }
.cand-card.avoid { background: #fff7f6; border-color: #f3c9c4; }
.cand-card.ng { opacity: 0.72; }
.cand-head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cand-name { font-weight: 700; }
.cand-head .btn { margin-left: auto; }
.cand-stats { font-size: 12px; color: #555; margin-top: 4px; }
.cand-pos { font-size: 11px; color: #1e7a3a; margin-top: 2px; }
.cand-notes { margin-top: 5px; display: flex; flex-wrap: wrap; gap: 4px; }
.note-chip { font-size: 10px; background: #eef2f4; color: #607d8b; border-radius: 999px; padding: 1px 8px; }

/* Tags */
.tag { font-size: 10px; font-weight: 700; padding: 1px 7px; border-radius: 999px; background: #eef2f4; color: #607d8b; }
.tag.leader { background: #e6f4ea; color: #1e7a3a; }
.tag.req { background: #fde2e0; color: #b3261e; }
.tag.confirmed { background: #d6ecdd; color: #1e7a3a; }
.tag.draft { background: #f0ead6; color: #a05c00; }
.tag.wish.any { background: #d6ecdd; color: #1e7a3a; }
.tag.wish.ok  { background: #e3f0ff; color: #1f4e78; }
.tag.wish.ng  { background: #fde2e0; color: #b3261e; }
.tag.src.ai_draft { background: #ede0ff; color: #6b3fb0; }
.tag.src.open_request { background: #fff1d6; color: #a05c00; }

/* 急募 */
.sp-open { background: #fff; border: 1px solid #e3e6ea; border-radius: 10px; margin: 14px 4px; padding: 14px 16px; }
.open-card { border: 1px solid #e3e6ea; border-radius: 8px; padding: 10px 12px; margin-bottom: 8px; }
.open-card.status-filled { border-left: 3px solid #1e7a3a; }
.open-card.status-open { border-left: 3px solid #e0a000; }
.open-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.open-when { font-weight: 700; color: #1f4f5b; }
.open-meta { font-size: 12px; color: #555; margin-top: 3px; }
.open-msg { font-size: 12px; color: #777; margin-top: 3px; }
.open-apps { margin-top: 8px; display: flex; flex-direction: column; gap: 5px; }
.app-chip { display: flex; align-items: center; gap: 8px; font-size: 12px; background: #f6f8f9; border-radius: 6px; padding: 4px 8px; }
.app-chip.approved { background: #e6f4ea; }
.app-note { color: #888; }
.app-chip .btn { margin-left: auto; }

/* Modals — reuse .modal/.modal-content from styles.css; add a form grid */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 8px 0; }
.form-grid label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: #444; }
.form-grid .form-wide { grid-column: 1 / -1; }
.form-grid label.form-check { flex-direction: row; align-items: center; gap: 6px; grid-column: 1 / -1; }
.form-grid input, .form-grid select { padding: 7px 9px; border: 1px solid #cfd6dc; border-radius: 6px; font: inherit; }

@media (max-width: 760px) {
  .sp-cols { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .cal-cell { min-height: 56px; }
  .cal-slots { font-size: 9px; }
}

/* ---------- Slot/assign/open/master/fairness modals: scroll + sticky buttons ----------
   master-modal (ポジション・役職) grew taller after the「呼称」field + LINE block,
   so it must scroll within the viewport too — otherwise the 保存/閉じる buttons
   fall off-screen and become unreachable on shorter windows. */
#slot-modal .modal-content,
#assign-modal .modal-content,
#open-modal .modal-content,
#master-modal .modal-content,
#fairness-modal .modal-content {
  max-height: 88vh;
  overflow-y: auto;
}
#slot-modal .modal-buttons,
#assign-modal .modal-buttons,
#open-modal .modal-buttons,
#master-modal .modal-buttons,
#fairness-modal .modal-buttons {
  position: sticky;
  bottom: 0;
  background: #fff;
  padding: 10px 0 2px;
  margin-top: 6px;
  border-top: 1px solid #eef2f4;
}
.modal-hint { font-size: 12px; color: #777; margin: 0 0 8px; }

/* Field blocks (label above a custom control) */
.field-block { display: flex; flex-direction: column; gap: 5px; }
.field-label { font-size: 12px; color: #607d8b; }

/* 必要ポジション repeater */
.pos-rows { display: flex; flex-direction: column; gap: 6px; }
.pos-row { display: flex; align-items: center; gap: 6px; }
.pos-row .pos-name { flex: 1; padding: 7px 9px; border: 1px solid #cfd6dc; border-radius: 6px; font: inherit; }
.pos-row .pos-count { width: 60px; padding: 7px 9px; border: 1px solid #cfd6dc; border-radius: 6px; font: inherit; }
.pos-row .pos-x { font-size: 12px; color: #607d8b; }
.pos-del { background: #fde2e0; color: #b3261e; border: 0; border-radius: 6px; width: 30px; height: 32px; cursor: pointer; font-size: 16px; line-height: 1; flex-shrink: 0; }
.pos-del:hover { background: #f8c9c4; }

/* Member checkbox pickers (replace <select multiple>) */
.member-checks {
  display: flex; flex-direction: column; gap: 2px;
  max-height: 130px; overflow-y: auto;
  border: 1px solid #cfd6dc; border-radius: 6px; padding: 6px 9px; background: #fff;
}
/* Higher specificity than `.form-grid label` so the row isn't forced column. */
.member-checks .member-chk { display: flex; flex-direction: row; align-items: center; gap: 8px; font-size: 13px; padding: 3px 2px; margin: 0; cursor: pointer; }
.member-checks .member-chk input[type=checkbox] { width: 16px; height: 16px; padding: 0; margin: 0; border-radius: 3px; flex-shrink: 0; }
.member-checks .member-chk span { flex: 1; }

/* Master-settings + field-block textareas */
#master-modal textarea,
.field-block textarea {
  width: 100%; box-sizing: border-box; padding: 8px 10px;
  border: 1px solid #cfd6dc; border-radius: 6px; font: inherit; resize: vertical;
}

/* Gantt timeline (時間軸 × 担当者) — references the シフト表 layout */
.gantt { margin: 4px 0 12px; }
.gantt-axis, .gantt-row { display: flex; align-items: stretch; }
.gantt-name { width: 84px; flex-shrink: 0; font-size: 12px; color: #333; display: flex; align-items: center; padding-right: 6px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.gantt-hours { display: flex; flex: 1; }
.gantt-hour { flex: 1; font-size: 10px; color: #90a0aa; border-left: 1px solid #eef2f4; padding-left: 2px; }
.gantt-hour:first-child { border-left: none; }
.gantt-row { margin-bottom: 4px; }
.gantt-track { position: relative; display: flex; flex: 1; height: 26px; background: #f7f9fa; border: 1px solid #eef2f4; border-radius: 4px; overflow: hidden; }
.gantt-grid { flex: 1; border-left: 1px solid #eef2f4; }
.gantt-grid:first-child { border-left: none; }
.gantt-bar { position: absolute; top: 3px; height: 20px; border-radius: 4px; color: #fff; font-size: 10px; line-height: 20px; padding: 0 6px; overflow: hidden; white-space: nowrap; cursor: pointer; box-shadow: 0 1px 2px rgba(0,0,0,0.18); box-sizing: border-box; }
.gantt-bar.c0 { background: #1e7a3a; }
.gantt-bar.c1 { background: #2f7fe0; }
.gantt-bar.c2 { background: #a05c00; }
.gantt-bar.c3 { background: #6b3fb0; }
.gantt-bar.c4 { background: #b3261e; }
.gantt-bar.c5 { background: #0f9b8e; }

/* Copy / weekday-template modal */
.copy-actions { display: flex; flex-direction: column; gap: 8px; margin: 8px 0; }
.copy-actions .btn { text-align: left; }
.copy-replace { display: flex; align-items: center; gap: 7px; font-size: 13px; color: #444; margin: 6px 0 2px; }

/* Calendar fulfillment badge + cell tint (月一覧の充足/不足) */
.cal-fill { font-size: 10px; font-weight: 700; border-radius: 4px; padding: 1px 4px; }
.cal-fill.ok    { background: #d6ecdd; color: #1e7a3a; }
.cal-fill.short { background: #fff1d6; color: #a05c00; }
.cal-fill.none  { background: #fde2e0; color: #b3261e; }
.cal-cell.fill-ok    { border-color: #bfe3ca; }
.cal-cell.fill-short { border-color: #f0dcb0; }
.cal-cell.fill-none  { border-color: #f3c9c4; }
/* Legacy month-grid (シフト作成) reflected on the daily calendar.
 * NB: distinct from .cal-grid (the calendar container) — different name. */
.cal-gridn { display: inline-block; font-size: 10px; font-weight: 700; border-radius: 4px; padding: 1px 4px; background: #e7eef6; color: #2f5d8a; margin-top: 2px; }
.header-right { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }

/* Gantt drag + position legend */
.gantt-bar { touch-action: none; user-select: none; }
.gantt-bar.dragging { opacity: 0.85; box-shadow: 0 2px 8px rgba(0,0,0,0.3); z-index: 5; }
.gantt-legend { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; padding-left: 84px; }
.gantt-leg { font-size: 10px; color: #fff; border-radius: 999px; padding: 1px 9px; }
.gantt-leg.c0 { background: #1e7a3a; } .gantt-leg.c1 { background: #2f7fe0; }
.gantt-leg.c2 { background: #a05c00; } .gantt-leg.c3 { background: #6b3fb0; }
.gantt-leg.c4 { background: #b3261e; } .gantt-leg.c5 { background: #0f9b8e; }

/* Mobile optimisation (mig 018): scrollable Gantt + comfy tap targets */
@media (max-width: 760px) {
  #sp-screen { padding: 0 8px 60px; }
  #sp-timeline { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .gantt { min-width: 520px; }
  .gantt-name { width: 64px; font-size: 11px; }
  .gantt-legend { padding-left: 64px; }
  .gantt-bar { font-size: 9px; padding: 0 4px; }
  .sp-day-actions { gap: 5px; }
  .sp-day-actions .btn { font-size: 11px; padding: 5px 8px; }
  .header-right .btn { font-size: 11px; }
  .cand-head .btn, .assign-acts .btn { min-height: 30px; }
  .modal-content { width: 94%; }
}

/* small field hints (LINE/master modal) */
.field-hint { font-size: 11px; color: #90a0aa; }
#master-modal input[type=text] { width: 100%; box-sizing: border-box; padding: 8px 10px; border: 1px solid #cfd6dc; border-radius: 6px; font: inherit; }

/* LINE section in the master modal */
.master-sep { border: 0; border-top: 1px solid #e3e8ec; margin: 16px 0 10px; }
.master-line-head { font-size: 14px; font-weight: 700; color: #34495e; margin-bottom: 8px; }
.line-status { font-size: 12px; font-weight: 600; padding: 7px 10px; border-radius: 6px; margin-bottom: 10px; background: #f0f2f4; color: #607d8b; }
.line-status.on  { background: #d6ecdd; color: #1e7a3a; }
.line-status.off { background: #fff1d6; color: #a05c00; }
.line-steps { margin: 8px 0 4px; font-size: 12px; color: #555; }
.line-steps summary { cursor: pointer; color: #2f5d8a; font-weight: 600; }
.line-steps ol { margin: 8px 0 0; padding-left: 20px; line-height: 1.7; }

/* Day-panel note: this day also has 月表 shifts */
.grid-note { font-size: 12px; background: #eef4fa; border: 1px solid #d4e1ee; color: #2f5d8a; padding: 7px 10px; border-radius: 6px; margin-bottom: 8px; }
.grid-note-link { color: #1f4e78; font-weight: 700; margin-left: 4px; }

/* 偏り/反映率パネル (販売後改善) */
.fairness-kpis { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 8px 0 12px; font-size: 13px; color: #334155; }
.fairness-kpis b { color: #1f4f5b; }
.fairness-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.fairness-table th, .fairness-table td { border-bottom: 1px solid #e2e8f0; padding: 6px 8px; text-align: left; }
.fairness-table td.num, .fairness-table th:nth-child(n+2) { text-align: right; }