.shiftcal-app, .shiftcal-wall { font-family: -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Segoe UI", sans-serif; }
/*
 * Desktop: keep original sticky header.
 * Mobile: month nav + legend should scroll away; only the bulk input area is pinned.
 */
.shiftcal-header { position: sticky; top:0; z-index:20; background:#f4fbff; border:1px solid #d8e8f5; padding:10px 10px 8px; }

@media (max-width: 768px){
  .shiftcal-app{ --shiftcal-header-h: 240px; }
  /* Do NOT pin the whole header on mobile */
  .shiftcal-header{ position: static; top:auto; z-index:auto; }
  /* Pin only the bulk input box ("曜日まとめて入力") */
  .shiftcal-bulk{ position: sticky; top: 64px; z-index: 25; background:#ffffff; }
  /* Give the pinned bulk box a subtle separation */
  .shiftcal-bulk{ box-shadow: 0 8px 18px rgba(0,0,0,0.06); }

  /* Make the pinned bulk area compact on mobile */
  .shiftcal-bulk{ padding: 10px; }
  .shiftcal-bulk .bulk-title{ font-size: 16px; margin-bottom: 8px; }
  .shiftcal-bulk-row{ gap: 8px; }
  .shiftcal-bulk .shiftcal-pill{ padding: 10px 12px; }

  /* Advanced fields are hidden by default on mobile */
  .shiftcal-bulk .bulk-advanced{ display:none; }
  .shiftcal-bulk.is-advanced .bulk-advanced{ display:block; }
  .shiftcal-bulk .bulk-advanced-toggle{ padding: 10px 12px; border-radius: 999px; border: 1px solid #cfe0ee; background:#fff; font-weight: 800; }
}
.shiftcal-month-nav { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.shiftcal-title { font-size:20px; font-weight:800; }
.shiftcal-btn { display:inline-flex; align-items:center; justify-content:center; padding:10px 12px; background:#fff; border:1px solid #cfe0ee; border-radius:10px; text-decoration:none; color:#0b3a5c; font-weight:700; }
.shiftcal-btn:active { transform: translateY(1px); }
.shiftcal-legend-inline { display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; font-size:14px; }
.lg { padding:6px 10px; border-radius:999px; border:1px solid #d0d0d0; background:#fff; font-weight:700; }
.lg-g { background: #e8ffe8; }
.lg-b { background: #e8f2ff; }
.lg-y { background: #fff9dc; }
.lg-r { background: #ffe8e8; }
.lg-gray { background: #f1f1f1; }

.shiftcal-list { padding-bottom: 92px; }
.shiftcal-day-card { background:#fff; border:1px solid #e2e2e2; border-radius:14px; margin:12px 0; padding:10px; box-shadow: 0 1px 0 rgba(0,0,0,0.03); scroll-margin-top: var(--shiftcal-header-h, 140px); }
.shiftcal-day-top { display:grid; grid-template-columns: 1fr auto auto; gap:10px; align-items:center; }
.shiftcal-day-label { font-size:18px; font-weight:800; }
.shiftcal-badge { padding:6px 10px; border-radius:999px; font-weight:800; font-size:13px; border:1px solid #ddd; background:#f7f7f7; }
.badge-empty { background:#fff3f3; border-color:#f0c8c8; }
.badge-draft { background:#fff9dc; border-color:#e9db9c; }
.badge-submitted { background:#e8f2ff; border-color:#b9d4ff; }
.badge-approved { background:#e8ffe8; border-color:#bfe8bf; }
.badge-rejected { background:#ffe8e8; border-color:#f0bcbc; }

.shiftcal-toggle { padding:10px 12px; border-radius:12px; border:1px solid #cfe0ee; background:#fff; font-weight:800; }
.shiftcal-day-body { margin-top:10px; border-top:1px dashed #e5e5e5; padding-top:10px; }
.shiftcal-choices { display:grid; grid-template-columns: 1fr 1fr; gap:10px; }
.shiftcal-choice { min-height:48px; font-size:18px; font-weight:900; border-radius:14px; border:2px solid #ddd; background:#fff; }
.shiftcal-choice[data-availability="in"]{ background:#e8f2ff; border-color:#bcd6ff; }
.shiftcal-choice[data-availability="out"]{ background:#ffe8f1; border-color:#ffbfd6; }
.shiftcal-choice[data-availability="conditional"]{ background:#e8f2ff; border-color:#bcd6ff; }

.shiftcal-choice.is-active { border-color:#0b3a5c; box-shadow: 0 0 0 3px rgba(11,58,92,0.15); }
.shiftcal-row { display:flex; flex-direction:column; gap:6px; margin-top:10px; }
.shiftcal-row label { font-weight:800; }
.shiftcal-slot, .shiftcal-custom, .shiftcal-note { font-size:16px; padding:12px 12px; border-radius:12px; border:1px solid #d5d5d5; }
.shiftcal-actions { display:flex; gap:10px; margin-top:12px; }
.shiftcal-btn-primary, .shiftcal-btn-secondary { flex:1; min-height:48px; border-radius:14px; font-weight:900; border:1px solid #cfe0ee; }
.shiftcal-btn-primary { background:#0b3a5c; color:#fff; }
.shiftcal-btn-secondary { background:#fff; color:#0b3a5c; }

.shiftcal-footer { position:fixed; left:0; right:0; bottom:0; z-index:50; background:#f6f6f6; border-top:1px solid #ddd; display:flex; gap:10px; padding:10px; padding-bottom: calc(10px + env(safe-area-inset-bottom)); }
.shiftcal-footer-btn { flex:1; min-height:56px; border-radius:16px; font-size:16px; font-weight:900; border:1px solid #cfcfcf; background:#fff; }
.shiftcal-footer-btn.primary { background:#ff8a00; color:#fff; border-color:#ff8a00; }

.shiftcal-grid { width:100%; border-collapse:collapse; margin-top:14px; background:#fff; }
.shiftcal-grid th, .shiftcal-grid td { border:1px solid #d9d9d9; padding:10px; vertical-align:top; min-width:88px; }
.shiftcal-grid thead th { background:#eaf3ff; font-weight:900; text-align:center; color:#0b3a5c !important; }
.shiftcal-grid .wk { width:46px; text-align:center; background:#f1f1f1; font-weight:900; }
.shiftcal-grid td.out { background:#fafafa; }
.shiftcal-grid td.cell { height:86px; }
.shiftcal-grid td.cell .d { font-weight:900; font-size:14px; margin-bottom:6px; color:#333; }
.shiftcal-grid td.cell .s { font-weight:900; font-size:13px; }

.shiftcal-grid td.empty { background:#fff; }
.shiftcal-grid td.off { background:#f1f1f1; }
.shiftcal-grid td.free { background:#fff9dc; }
.shiftcal-grid td.slot1 { background:#e8ffe8; }
.shiftcal-grid td.slot2 { background:#e8f2ff; }

.shiftcal-note { color:#666; margin-top:10px; font-size:13px; }


@media (max-width: 600px) {
  /* 横スクロールを避け、全体を画面内に収める（見やすさ優先で余白/文字サイズ調整） */
  .shiftcal-grid { width: 100%; table-layout: fixed; }
  .shiftcal-grid th, .shiftcal-grid td { min-width: 0; padding: 5px 3px; }
  .shiftcal-grid thead th { font-size: 12px; }
  .shiftcal-grid td.cell { height: 78px; }
  .shiftcal-grid td.cell .d { font-size: 12px; }
  .shiftcal-grid td.cell .p { font-size: 10.8px; padding: 2px 3px; border-radius: 7px; }
  .shiftcal-grid .wk { width: 26px; font-size: 12px; }
}

/* 表示切替タブ（壁掛け/縦表示） */
.shiftcal-view-toggle { display:flex; gap:10px; margin-top:10px; }
.shiftcal-tab { flex:1; min-height:44px; border-radius:14px; font-weight:900; border:2px solid #cfe0ee; background:#fff; color:#0b3a5c; }
.shiftcal-tab.is-active { background:#0b3a5c; color:#fff; border-color:#0b3a5c; }

/* 縦表示（壁掛けビューの代替） */
.shiftcal-vlist { padding: 10px 0 0; display:flex; flex-direction:column; gap:10px; }
.shiftcal-vday { background:#fff; border:1px solid #e2e2e2; border-radius:14px; padding:10px; }
.shiftcal-vday.dow-0 { background:#fff5f7; } /* 日 */
.shiftcal-vday.dow-6 { background:#f3f8ff; } /* 土 */
.shiftcal-vday.holiday { background:#ffecec; } /* 祝 */
.shiftcal-vday-head { display:flex; align-items:center; justify-content:space-between; }
.shiftcal-vday-date { font-size:16px; font-weight:900; }
.shiftcal-vday-body { margin-top:8px; display:flex; flex-direction:column; gap:6px; }

.shiftcal-closed{padding:10px;border-radius:12px;background:#f6f6f6;color:#666;font-weight:800;}

/* 曜日まとめて入力 */
.shiftcal-bulk { background:#ffffff; border:1px solid #dbe8f2; border-radius:16px; padding:12px; margin:10px 0 14px; }
.shiftcal-bulk-title { font-weight:900; font-size:16px; margin-bottom:8px; }
.shiftcal-bulk-row { display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-bottom:8px; }
.shiftcal-bulk-weekdays { display:flex; gap:6px; flex-wrap:wrap; }
.shiftcal-chip { display:inline-flex; align-items:center; gap:6px; padding:8px 10px; border:1px solid #cfe0ee; border-radius:999px; font-weight:800; background:#fff; }
.shiftcal-pill { min-height:44px; padding:8px 12px; border-radius:14px; border:2px solid #cfe0ee; background:#fff; font-weight:900; }
.shiftcal-pill.bulk-avail[data-avail="in"]{ background:#e8f2ff; border-color:#bcd6ff; }
.shiftcal-pill.bulk-avail[data-avail="out"]{ background:#ffe8f1; border-color:#ffbfd6; }

.shiftcal-pill.is-active { background:#0b3a5c; color:#fff; border-color:#0b3a5c; }
.shiftcal-check { font-weight:800; }
.shiftcal-btn-primary { background:#0b3a5c; color:#fff; border-color:#0b3a5c; }

.p-meta{ font-size:11px; font-weight:800; opacity:0.9; margin-left:4px; }

/* 壁掛け：時間帯アイコン＆ステータス */
.sc-ico{ display:inline-block; width:10px; height:10px; border-radius:2px; margin-right:6px; vertical-align:middle; }
.sc-ico-a{ background:#7bdc9a; }      /* 11:00-17:00 */
.sc-ico-b{ background:#79b7ff; }      /* 14:30-20:30 */
.sc-ico-free{ background:#f5b26b; }   /* Free */
.sc-ico-off{ background:#c7c7c7; }    /* 休み */
.sc-ico-c{ background:#b9a0ff; }      /* その他 */
.sc-ico-none{ background:transparent; border:1px solid #cfe0ee; }
.sc-st{ display:inline-block; margin-left:4px; font-size:10px; font-weight:900; padding:1px 5px; border-radius:999px; background:#eef4fb; }


/* 壁掛けビュー：土日祝の背景を縦表示と合わせる */
.shiftcal-wall .shiftcal-grid td.cell.dow-0{ background:#fff5f7; }
.shiftcal-wall .shiftcal-grid td.cell.dow-6{ background:#f3f8ff; }
.shiftcal-wall .shiftcal-grid td.cell.holiday{ background:#ffecec; }

/* Footer button colors */
#shiftcal-save-all{ background:#e8ffe8; border-color:#b7f7b7; }
.shiftcal-jump-empty{ background:#ffe8f1; border-color:#ffbfd6; }


/* --- View toggle (wall / vertical list) --- */
.shiftcal-view{display:none;}
.shiftcal-view.is-active{display:block;}

/* --- Mobile: prevent SWELL fixed header/footer from covering ShiftCal controls --- */
@media (max-width: 768px){
  .shiftcal-wall{padding-bottom: calc(140px + env(safe-area-inset-bottom));}
}