:root {
  --blue:     #1565C0;
  --blue-2:   #1976D2;
  --border:   #BDBDBD;
  --bg:       #F5F5F5;
  --ease:     cubic-bezier(0.4, 0, 0.2, 1);
  --text:     #212121;
  --text-2:   #757575;
}

*, *::before, *::after {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html, body {
  margin: 0; padding: 0; height: 100%;
  font-family: -apple-system, BlinkMacSystemFont, 'Hiragino Sans',
               'Noto Sans JP', 'Segoe UI', sans-serif;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}

.screen { display: none; min-height: 100vh; }
.screen.active { display: block; }

/* ============================================================
   ログイン画面
   ============================================================ */
.login-page {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 24px 12px 40px;
  background: #EEF2F7;
}

.login-card {
  width: 100%;
  max-width: 680px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.1);
  overflow: hidden;
}

.form-hero {
  background: linear-gradient(135deg, #1565C0 0%, #1976D2 60%, #2196F3 100%);
  color: #fff;
  padding: 24px 20px 26px;
}

.hero-title {
  font-size: 19px;
  font-weight: 800;
  margin: 0 0 6px;
}

.hero-sub {
  font-size: 13px;
  margin: 0;
  opacity: 0.88;
  line-height: 1.6;
}

.form-body { padding: 20px 18px 24px; }

.form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  margin-bottom: 20px;
}

@media (min-width: 520px) {
  .form-grid { grid-template-columns: 1.4fr 1fr 1fr; gap: 14px; }
}

.form-label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-2);
  margin-bottom: 6px;
  letter-spacing: 0.04em;
}

select,
input[type="password"],
input[type="month"] {
  width: 100%;
  padding: 10px 12px;
  font-size: 15px;
  border: 1.5px solid #BDBDBD;
  border-radius: 6px;
  outline: none;
  background: #FAFAFA;
  color: var(--text);
  transition: border-color 0.18s;
  font-weight: 500;
  -webkit-appearance: auto;
  appearance: auto;
}
select:focus, input:focus {
  border-color: var(--blue-2);
  background: #fff;
}

.form-hint {
  font-size: 11px;
  color: #9E9E9E;
  margin: 4px 0 0;
}

.admin-link-wrap { margin-top: 14px; text-align: center; }

.btn-text {
  background: none;
  border: none;
  color: var(--text-2);
  font-size: 13px;
  cursor: pointer;
  padding: 6px 10px;
  text-decoration: underline;
}

/* ============================================================
   汎用ボタン
   ============================================================ */
.btn {
  display: block;
  width: 100%;
  padding: 12px 16px;
  font-size: 15px;
  font-weight: 700;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  text-align: center;
  transition: opacity 0.13s;
  letter-spacing: 0.02em;
}
.btn:active { opacity: 0.8; }

.btn-primary {
  background: linear-gradient(135deg, #1565C0 0%, #1976D2 60%, #2196F3 100%);
  color: #fff;
  box-shadow: 0 3px 10px rgba(21,101,192,0.35);
}
.btn-outline {
  background: transparent;
  color: #1565C0;
  border: 2px solid #1565C0;
  margin-top: 8px;
}

/* ============================================================
   アプリヘッダー（シフト画面）
   ============================================================ */
.app-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: #1565C0;
  color: #fff;
  padding: 8px 12px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.header-row1 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.header-username { font-weight: 700; font-size: 14px; }

.badge-tanto {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 10px;
  margin-left: 6px;
  background: rgba(255,255,255,0.22);
  border: 1px solid rgba(255,255,255,0.35);
}

.badge-admin {
  display: inline-block;
  background: #E53935;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 10px;
  margin-left: 5px;
}

.btn-logout {
  background: rgba(255,255,255,0.15);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 16px;
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.header-row2 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
}

.month-label {
  font-size: 18px;
  font-weight: 800;
  min-width: 110px;
  text-align: center;
}

.btn-month {
  background: rgba(255,255,255,0.18);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 50%;
  width: 30px; height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  flex-shrink: 0;
}
.btn-month:active { background: rgba(255,255,255,0.32); }

/* ============================================================
   凡例バー
   ============================================================ */
.legend-bar {
  display: flex;
  flex-wrap: nowrap;
  gap: 4px;
  padding: 6px 8px;
  background: #fff;
  border-bottom: 1px solid #E0E0E0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.legend-bar::-webkit-scrollbar { display: none; }

.chip {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 4px;
  white-space: nowrap;
  flex-shrink: 0;
  border: 1px solid rgba(0,0,0,0.1);
}
.chip-yasumi { background: #FFF9C4; color: #E65100; }
.chip-am     { background: #BBDEFB; color: #0D47A1; }
.chip-pm     { background: #E1BEE7; color: #4A148C; }
.chip-tocho  { background: #1E3A5F; color: #E0F2FE; }
.chip-ake    { background: #E0E0E0; color: #424242; }
.chip-ng     { background: #FFCDD2; color: #B71C1C; }

/* ============================================================
   テーブルスクロール
   ============================================================ */
.table-scroll-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding: 8px 4px 80px;
  background: var(--bg);
  scrollbar-width: thin;
  scrollbar-color: rgba(0,0,0,0.2) transparent;
}
.table-scroll-wrap::-webkit-scrollbar       { height: 4px; }
.table-scroll-wrap::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.2); border-radius: 4px; }

/* ============================================================
   シフトテーブル（スプレッドシート風）
   ============================================================ */
.shift-table {
  border-collapse: collapse;
  min-width: max-content;
  background: #fff;
  border: 1px solid var(--border);
}

/* ヘッダー */
.shift-table thead th {
  position: sticky;
  top: 0;
  z-index: 20;
  padding: 4px 2px;
  font-size: 10px;
  font-weight: 700;
  text-align: center;
  line-height: 1.3;
  white-space: nowrap;
  color: #fff;
  border: 1px solid rgba(255,255,255,0.25);
  background: #1565C0;
}

.th-name {
  background: #0D47A1 !important;
  min-width: 80px;
  z-index: 32 !important;
  left: 0;
}

.th-tanto {
  background: #0D47A1 !important;
  width: 44px; min-width: 44px;
  z-index: 30 !important;
  left: 82px;
}

.th-day {
  background: #1565C0;
  width: 38px; min-width: 38px;
}
.th-day.th-sun { background: #C62828; }
.th-day.th-sat { background: #0277BD; }

.th-day small {
  display: block;
  font-size: 9px;
  opacity: 0.9;
  font-weight: 600;
}

.th-stat {
  width: 44px; min-width: 44px;
  font-size: 10px;
}
.th-stat-shukkin { background: #2E7D32; }
.th-stat-yasumi  { background: #F57F17; }
.th-stat-yukyu   { background: #C62828; }

/* スタッフ名列 */
.td-name {
  position: sticky;
  left: 0;
  z-index: 12;
  background: #fff;
  padding: 4px 6px;
  border: 1px solid var(--border);
  min-width: 80px;
  vertical-align: middle;
}

/* 担当列 */
.td-tanto {
  position: sticky;
  left: 82px;
  z-index: 10;
  background: #FAFAFA;
  width: 44px; min-width: 44px;
  text-align: center;
  vertical-align: middle;
  font-size: 11px;
  font-weight: 700;
  border: 1px solid var(--border);
  padding: 4px 2px;
}

.tanto-外来 { color: #0D47A1; background: #E3F2FD; }
.tanto-入院 { color: #1B5E20; background: #E8F5E9; }
.tanto-健診 { color: #4A148C; background: #F3E5F5; }

/* 自分の行 */
.my-row .td-name { background: #EDE9FE; }
.my-row .staff-name { color: #5B21B6; font-weight: 800; }

.staff-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 78px;
}

.pct {
  font-size: 9px;
  color: #9E9E9E;
  margin-top: 2px;
  font-weight: 500;
}
.pct.pct-partial { color: #F59E0B; }
.pct.pct-done    { color: #4CAF50; }

/* ============================================================
   シフトセル（シンプル・フラット）
   ============================================================ */
.shift-cell {
  width: 38px; min-width: 38px; max-width: 38px;
  height: 38px;
  text-align: center;
  vertical-align: middle;
  font-size: 12px;
  font-weight: 700;
  background: #fff;
  color: #BDBDBD;
  cursor: default;
  user-select: none;
  border: 1px solid var(--border);
  padding: 0;
  transition: background 0.1s;
}

.shift-cell.editable { cursor: pointer; }
.shift-cell.editable:active { opacity: 0.7; }
.shift-cell.readonly { color: #9E9E9E; }

.shift-cell[data-val="休み"]   { background: #FFF9C4; color: #E65100; border-color: #F9A825; }
.shift-cell[data-val="AM休"]  { background: #BBDEFB; color: #0D47A1; border-color: #64B5F6; }
.shift-cell[data-val="PM休"]  { background: #E1BEE7; color: #4A148C; border-color: #BA68C8; }
.shift-cell[data-val="当直"]  { background: #1E3A5F; color: #90CAF9; border-color: #1E40AF; }
.shift-cell[data-val="明け休"] { background: #E0E0E0; color: #424242; border-color: #9E9E9E; }
.shift-cell[data-val="当直NG"] { background: #FFCDD2; color: #B71C1C; border-color: #EF9A9A; }

.shift-cell.col-sun[data-val=""] { background: #FFF5F5; }
.shift-cell.col-sat[data-val=""] { background: #EFF6FF; }
.shift-cell.changed { outline: 2px solid #F59E0B; outline-offset: -2px; }

/* ============================================================
   統計セル（右側）
   ============================================================ */
.stat-cell {
  width: 44px; min-width: 44px;
  height: 38px;
  text-align: center;
  vertical-align: middle;
  font-size: 13px;
  font-weight: 700;
  border: 1px solid var(--border);
  padding: 0;
}
.stat-shukkin { background: #E8F5E9; color: #1B5E20; }
.stat-yasumi  { background: #FFF9C4; color: #E65100; }
.stat-yukyu   { background: #FFCDD2; color: #B71C1C; }

/* ============================================================
   集計行（テーブル下部）
   ============================================================ */
.count-row td {
  height: 30px;
  text-align: center;
  vertical-align: middle;
  font-size: 12px;
  font-weight: 600;
  border: 1px solid var(--border);
  padding: 0 4px;
  background: #ECEFF1;
  color: #37474F;
}

.count-label {
  position: sticky;
  left: 0;
  background: #37474F !important;
  color: #fff !important;
  font-size: 11px !important;
  white-space: nowrap;
  z-index: 10;
  min-width: 80px;
  text-align: left !important;
  padding: 0 8px !important;
}

.count-tanto-cell {
  position: sticky;
  left: 82px;
  background: #546E7A !important;
  color: #fff !important;
  font-size: 10px !important;
  z-index: 8;
  width: 44px; min-width: 44px;
}

.count-val { background: #ECEFF1; color: #37474F; }
.count-val.is-zero { color: #B0BEC5; }

.row-gairaiam  .count-label, .row-gairaiam  .count-tanto-cell { background: #0D47A1 !important; }
.row-gairaipm  .count-label, .row-gairaipm  .count-tanto-cell { background: #1565C0 !important; }
.row-nyuinnam  .count-label, .row-nyuinnam  .count-tanto-cell { background: #1B5E20 !important; }
.row-nyuinnpm  .count-label, .row-nyuinnpm  .count-tanto-cell { background: #2E7D32 !important; }
.row-kenshinam .count-label, .row-kenshinam .count-tanto-cell { background: #4A148C !important; }
.row-kenshinpm .count-label, .row-kenshinpm .count-tanto-cell { background: #6A1B9A !important; }
.row-totalamt  .count-label, .row-totalamt  .count-tanto-cell { background: #37474F !important; }
.row-totalpm   .count-label, .row-totalpm   .count-tanto-cell { background: #455A64 !important; }
.row-totalamt  .count-val,
.row-totalpm   .count-val { background: #CFD8DC; color: #263238; font-weight: 800; }

.count-separator { height: 4px !important; }
.count-separator td { background: #EEF2F7 !important; border: none !important; }

/* ============================================================
   保存バー
   ============================================================ */
.save-bar {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: #fff;
  padding: 8px 12px 16px;
  box-shadow: 0 -1px 0 #E0E0E0, 0 -4px 12px rgba(0,0,0,0.08);
  z-index: 50;
}

.save-hint {
  font-size: 12px;
  color: #F59E0B;
  text-align: center;
  min-height: 15px;
  margin-bottom: 6px;
  font-weight: 600;
}

.btn-save {
  display: block;
  width: 100%;
  padding: 13px 16px;
  background: #1565C0;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  letter-spacing: 0.03em;
  transition: background 0.13s;
}
.btn-save:active   { background: #0D47A1; }
.btn-save:disabled { background: #90A4AE; cursor: not-allowed; }
.btn-save.has-changes {
  background: #E53935;
  animation: pulse-save 2s ease-in-out infinite;
}
@keyframes pulse-save {
  0%,100% { box-shadow: 0 4px 12px rgba(229,57,53,0.4); }
  50%      { box-shadow: 0 4px 20px rgba(229,57,53,0.65); }
}

/* ============================================================
   トースト・ローディング
   ============================================================ */
.toast {
  position: fixed;
  bottom: calc(126px + env(safe-area-inset-bottom, 0px));
  left: 50%;
  transform: translateX(-50%) translateY(12px);
  background: rgba(33,33,33,0.9);
  color: #fff;
  padding: 10px 20px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s, transform 0.22s;
  z-index: 260;
  max-width: calc(100vw - 32px);
  text-align: center;
  white-space: pre-wrap;
}
.toast.show    { opacity:1; transform:translateX(-50%) translateY(0); }
.toast.success { background:rgba(27,94,32,0.92); }
.toast.error   { background:rgba(183,28,28,0.92); }

.loading-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(245,245,245,0.85);
  z-index: 9999;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 14px;
}
.loading-overlay.active { display: flex; }

.spinner {
  width: 40px; height: 40px;
  border: 3px solid rgba(21,101,192,0.2);
  border-top-color: #1565C0;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
.loading-text { font-size:14px; color:#1565C0; font-weight:600; margin:0; }

@keyframes spin { to { transform: rotate(360deg); } }

@media (min-width: 600px) {
  .login-page { align-items: center; padding-top: 40px; }
}


/* ============================================================
   Notion風カスタム + スマホ最適化
   2026-05-14
   ============================================================ */
:root {
  --blue: #2f3437;
  --blue-2: #37352f;
  --border: #e6e4df;
  --bg: #f7f6f3;
  --text: #37352f;
  --text-2: #787774;
  --card: #ffffff;
  --muted: #f1f1ef;
  --shadow-soft: 0 10px 30px rgba(15, 15, 15, 0.08);
}

html, body {
  background: var(--bg);
  color: var(--text);
}

.login-page {
  background:
    radial-gradient(circle at top left, rgba(238, 238, 231, 0.95), transparent 34%),
    var(--bg);
  padding: 18px 12px 36px;
}

.login-card {
  max-width: 760px;
  border-radius: 18px;
  box-shadow: var(--shadow-soft);
  border: 1px solid var(--border);
}

.form-hero {
  background: #ffffff;
  color: var(--text);
  padding: 26px 22px 18px;
  border-bottom: 1px solid var(--border);
}

.hero-title {
  font-size: 22px;
  letter-spacing: -0.03em;
}

.hero-sub {
  color: var(--text-2);
  opacity: 1;
}

.form-body {
  background: #fff;
  padding: 20px 18px 24px;
}

select,
input[type="password"],
input[type="month"] {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #fbfbfa;
  padding: 12px 13px;
  font-size: 16px;
}

select:focus,
input:focus {
  border-color: #9b9a97;
  box-shadow: 0 0 0 3px rgba(55, 53, 47, 0.08);
}

.btn-primary,
.btn-save {
  background: #37352f;
  box-shadow: none;
  border-radius: 12px;
}

.btn-primary:active,
.btn-save:active { background: #22211d; }

.btn-outline {
  border-color: #37352f;
  color: #37352f;
  border-radius: 12px;
}

.app-header {
  background: rgba(255,255,255,0.92);
  color: var(--text);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
  box-shadow: none;
  padding: 10px 12px 8px;
}

.header-username { font-size: 15px; }
.badge-tanto {
  color: var(--text);
  background: #f1f1ef;
  border: 1px solid var(--border);
}
.badge-admin { background: #b42318; }

.btn-logout,
.btn-month {
  color: var(--text);
  background: #f1f1ef;
  border: 1px solid var(--border);
}

.btn-logout { border-radius: 999px; }
.btn-month { width: 34px; height: 34px; }
.btn-month:active,
.btn-logout:active { background: #e9e8e4; }

.month-label {
  font-size: 19px;
  letter-spacing: -0.03em;
}

.legend-bar {
  position: sticky;
  top: 88px;
  z-index: 80;
  background: rgba(255,255,255,0.94);
  border-bottom: 1px solid var(--border);
  padding: 8px 10px;
  gap: 6px;
}

.chip {
  border-radius: 999px;
  font-size: 12px;
  padding: 5px 10px;
  border: 1px solid var(--border);
}

.table-scroll-wrap {
  background: var(--bg);
  padding: 10px 8px 92px;
}

.shift-table {
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(15,15,15,0.04);
}

.shift-table thead th {
  background: #37352f;
  border-color: rgba(255,255,255,0.14);
  height: 42px;
}

.th-name,
.th-tanto { background: #2b2a25 !important; }
.th-day.th-sun { background: #8f3d38; }
.th-day.th-sat { background: #3c5f7c; }
.th-stat-shukkin { background: #3f6b57; }
.th-stat-yasumi  { background: #9a6b2f; }
.th-stat-yukyu   { background: #8f3d38; }

.td-name,
.td-tanto,
.shift-cell,
.stat-cell,
.count-row td {
  border-color: var(--border);
}

.td-name {
  min-width: 96px;
  padding: 6px 8px;
}
.th-name { min-width: 96px; }
.th-tanto,
.td-tanto,
.count-tanto-cell { left: 96px !important; }

.staff-name {
  max-width: 92px;
  font-size: 13px;
}

.shift-cell {
  width: 44px;
  min-width: 44px;
  max-width: 44px;
  height: 44px;
  font-size: 13px;
  border-radius: 0;
}

.shift-cell.editable {
  cursor: pointer;
}

.shift-cell.editable::after {
  content: '';
  display: block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  margin: 2px auto 0;
  background: rgba(55,53,47,0.18);
}

.shift-cell[data-val="休み"]   { background: #fbf3db; color: #8f5a00; border-color: #e9d8a6; }
.shift-cell[data-val="AM休"]   { background: #e7f3f8; color: #245a73; border-color: #c9e3ee; }
.shift-cell[data-val="PM休"]   { background: #f4e9f8; color: #6f3f7d; border-color: #e5cdea; }
.shift-cell[data-val="当直"]   { background: #2f3437; color: #fff; border-color: #2f3437; }
.shift-cell[data-val="明け休"] { background: #eeeeec; color: #5f5e5b; border-color: #dddcd8; }
.shift-cell[data-val="当直NG"] { background: #fdebec; color: #a61b1b; border-color: #f4c7c9; }

.shift-cell.col-sun[data-val=""] { background: #fff7f7; }
.shift-cell.col-sat[data-val=""] { background: #f6faff; }
.shift-cell.changed {
  outline: 2px solid #d9730d;
  outline-offset: -3px;
}

.stat-cell {
  width: 48px;
  min-width: 48px;
}

.save-bar {
  background: rgba(255,255,255,0.96);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--border);
  box-shadow: 0 -8px 26px rgba(15,15,15,0.06);
}

.btn-save.has-changes {
  background: #d9730d;
  animation: none;
}

.toast {
  border-radius: 999px;
  bottom: calc(136px + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 10px 24px rgba(0,0,0,0.18);
}

@media (max-width: 760px) {
  .toast {
    bottom: calc(112px + env(safe-area-inset-bottom, 0px));
    max-width: calc(100vw - 24px);
    font-size: 13px;
    padding: 9px 16px;
  }
}

.loading-overlay {
  background: rgba(247,246,243,0.86);
}
.spinner {
  border-color: rgba(55,53,47,0.16);
  border-top-color: #37352f;
}
.loading-text { color: #37352f; }

/* ポップアップ入力 */
.shift-popup-backdrop {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: none;
  align-items: flex-end;
  justify-content: center;
  background: rgba(15,15,15,0.28);
  padding: 14px;
}
.shift-popup-backdrop.active { display: flex; }

.shift-popup {
  width: 100%;
  max-width: 430px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 20px;
  box-shadow: 0 20px 55px rgba(15,15,15,0.22);
  overflow: hidden;
  transform: translateY(8px);
  animation: popupUp 0.16s ease-out forwards;
}

@keyframes popupUp { to { transform: translateY(0); } }

.shift-popup-head {
  padding: 15px 16px 10px;
  border-bottom: 1px solid var(--border);
}
.shift-popup-title {
  font-size: 16px;
  font-weight: 800;
  margin: 0;
  color: var(--text);
}
.shift-popup-sub {
  margin: 4px 0 0;
  font-size: 12px;
  color: var(--text-2);
}
.shift-popup-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: 12px;
}
.shift-choice {
  border: 1px solid var(--border);
  background: #fbfbfa;
  border-radius: 14px;
  padding: 12px 10px;
  text-align: left;
  font-size: 14px;
  font-weight: 800;
  color: var(--text);
  cursor: pointer;
}
.shift-choice small {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-2);
  margin-top: 3px;
}
.shift-choice:active { transform: scale(0.98); }
.shift-choice.is-current {
  outline: 2px solid #37352f;
  outline-offset: -2px;
}
.shift-popup-close {
  width: calc(100% - 24px);
  margin: 0 12px 12px;
  border: 1px solid var(--border);
  background: #fff;
  border-radius: 14px;
  padding: 12px;
  font-weight: 800;
  color: var(--text-2);
}

@media (max-width: 520px) {
  .app-header { padding-top: max(10px, env(safe-area-inset-top)); }
  .legend-bar { top: 86px; }
  .table-scroll-wrap { padding-left: 0; padding-right: 0; }
  .shift-table { border-radius: 0; }
  .td-name, .th-name, .count-label { min-width: 92px; }
  .th-tanto, .td-tanto, .count-tanto-cell { left: 92px !important; }
  .staff-name { max-width: 88px; }
  .shift-cell {
    width: 46px;
    min-width: 46px;
    max-width: 46px;
    height: 46px;
    font-size: 14px;
  }
  .th-day { width: 46px; min-width: 46px; }
  .save-bar { padding-bottom: max(16px, env(safe-area-inset-bottom)); }
  .shift-popup-backdrop { padding-bottom: max(14px, env(safe-area-inset-bottom)); }
}


/* ============================================================
   v2: ログイン後 Notion風・小さな操作バー・スマホ最適化
   ============================================================ */
:root {
  --blue: #37352f;
  --blue-2: #2f3437;
  --border: #e6e4df;
  --bg: #f7f6f3;
  --text: #37352f;
  --text-2: #787774;
  --muted: #f1f0ed;
  --paper: #ffffff;
  --my-row: #ffffff;
  --my-row-strong: #ffffff;
}

html, body { background: var(--bg); color: var(--text); }

/* ログイン側もNotion寄せ */
.login-page { background: #f7f6f3; padding: 28px 14px 44px; }
.login-card {
  max-width: 720px;
  border-radius: 18px;
  border: 1px solid var(--border);
  box-shadow: 0 16px 40px rgba(15,15,15,0.06);
}
.form-hero {
  background: #ffffff;
  color: var(--text);
  border-bottom: 1px solid var(--border);
  padding: 22px 20px 18px;
}
.hero-title { font-size: 21px; letter-spacing: -0.02em; }
.hero-sub { color: var(--text-2); opacity: 1; }
.form-body { background: #fff; }
select,
input[type="password"],
input[type="month"] {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #fbfbfa;
  min-height: 46px;
}
select:focus, input:focus {
  border-color: #b7b4ad;
  box-shadow: 0 0 0 3px rgba(55,53,47,0.08);
}
.btn-primary {
  background: #37352f;
  box-shadow: 0 8px 18px rgba(55,53,47,0.18);
  border-radius: 12px;
}
.btn-outline {
  color: #37352f;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #fff;
}

/* 上部操作バー */
.app-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255,255,255,0.96);
  color: var(--text);
  padding: 8px 10px 7px;
  border-bottom: 1px solid var(--border);
  box-shadow: 0 1px 8px rgba(15,15,15,0.04);
  backdrop-filter: blur(10px);
}
.header-row1 {
  max-width: 1200px;
  margin: 0 auto 6px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.header-user {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  overflow: hidden;
}
.header-username {
  max-width: 42vw;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
  font-weight: 800;
}
.badge-tanto,
.badge-admin {
  background: #f1f0ed;
  color: #55534e;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 2px 8px;
}
.badge-admin { background: #feeceb; color: #9f2b24; }
.btn-logout {
  background: #fff;
  color: var(--text-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 12px;
}
.header-row2 {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 36px 1fr 36px;
  align-items: center;
  gap: 8px;
}
.month-label {
  justify-self: center;
  font-size: 17px;
  font-weight: 850;
  letter-spacing: -0.02em;
  color: var(--text);
}
.btn-month {
  width: 34px;
  height: 30px;
  border-radius: 10px;
  background: #f7f6f3;
  color: var(--text);
  border: 1px solid var(--border);
}
.btn-month:active { background: #efeeeb; }


/* 対象月は入力期間ごとに固定するため、月移動ボタンは表示しない */
.header-row2.header-row2-static {
  display: flex;
  grid-template-columns: none;
  justify-content: center;
}

.header-row2.header-row2-static .month-label {
  justify-self: auto;
}

/* 凡例 */
.legend-bar {
  position: sticky;
  top: 73px;
  z-index: 80;
  background: rgba(247,246,243,0.96);
  border-bottom: 1px solid var(--border);
  padding: 7px 8px;
  gap: 6px;
}
.chip {
  border-radius: 999px;
  padding: 4px 9px;
  border: 1px solid var(--border);
  font-size: 11px;
  background: #fff;
}

/* 表全体 */
.table-scroll-wrap {
  background: var(--bg);
  padding: 10px 8px 92px;
}
.shift-table {
  border-collapse: separate;
  border-spacing: 0;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(15,15,15,0.04);
}
.shift-table thead th {
  top: 0;
  background: #f1f0ed !important;
  color: #5f5e5a;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  border-top: none;
  font-size: 10px;
}
.th-name,
.th-tanto {
  background: #ebeae7 !important;
  color: #4f4d49 !important;
}
.th-day.th-sun { background: #f5e8e7 !important; color: #9f2b24; }
.th-day.th-sat { background: #e8eef7 !important; color: #315f9b; }
.th-stat-shukkin { background: #eaf3ea !important; color: #2f6b3f !important; }
.th-stat-yasumi  { background: #fbf1dc !important; color: #8a5a16 !important; }
.th-stat-yukyu   { background: #f5e8e7 !important; color: #9f2b24 !important; }

.td-name,
.td-tanto,
.shift-cell,
.stat-cell,
.count-row td {
  border-color: var(--border) !important;
}
.td-name {
  min-width: 96px;
  background: #fff;
  padding: 6px 8px;
}
.th-name,
.count-label { min-width: 96px; }
.th-tanto,
.td-tanto,
.count-tanto-cell {
  left: 96px !important;
  width: 52px;
  min-width: 52px;
}
.staff-name {
  max-width: 90px;
  font-size: 12px;
  color: var(--text);
}
.pct { color: #aaa7a0; }
.my-row .td-name,
.my-row .td-tanto,
.my-row .shift-cell[data-val=""],
.my-row .stat-cell {
  background: var(--my-row) !important;
}
.my-row .td-name {
  box-shadow: inset 4px 0 0 #d8b46a;
}
.my-row .staff-name { color: #5a4218; font-weight: 900; }
.my-row .pct { color: #9a7634; }

/* 担当列 */
.td-tanto {
  color: #5f5e5a;
  background: #fbfbfa;
  font-size: 11px;
}
.tanto-外来 { color: #315f9b; background: #eef4fb !important; }
.tanto-入院 { color: #2f6b3f; background: #eef7ef !important; }
.tanto-健診 { color: #6b4c8d; background: #f3eef8 !important; }
.my-row .tanto-外来,
.my-row .tanto-入院,
.my-row .tanto-健診 { background: var(--my-row-strong) !important; color: #5a4218; }

/* セル */
.shift-cell {
  width: 42px;
  min-width: 42px;
  max-width: 42px;
  height: 42px;
  font-size: 13px;
  background: #fff;
  color: #c4c1bb;
}
.shift-cell.editable {
  cursor: pointer;
  position: relative;
}
.shift-cell.editable::after {
  content: '';
  position: absolute;
  inset: 5px;
  border-radius: 9px;
  border: 1px solid transparent;
  pointer-events: none;
}
.shift-cell.editable:active::after { background: rgba(55,53,47,0.08); }
.shift-cell[data-val="休み"]   { background: #fff2cc !important; color: #8a5a16; border-color: #ead49a !important; }
.shift-cell[data-val="AM休"]   { background: #e6f1fb !important; color: #315f9b; border-color: #c6d9ed !important; }
.shift-cell[data-val="PM休"]   { background: #f0e8f7 !important; color: #6b4c8d; border-color: #dac8e8 !important; }
.shift-cell[data-val="当直"]   { background: #37352f !important; color: #fff; border-color: #37352f !important; }
.shift-cell[data-val="明け休"] { background: #e9e8e5 !important; color: #5f5e5a; border-color: #d7d5d0 !important; }
.shift-cell[data-val="当直NG"] { background: #fbe7e7 !important; color: #9f2b24; border-color: #efc5c2 !important; }
.shift-cell.col-sun[data-val=""] { background: #fff8f7; }
.shift-cell.col-sat[data-val=""] { background: #f7faff; }
.shift-cell.changed { outline: 2px solid #d8b46a; outline-offset: -2px; }

/* 集計行 */
.count-row td {
  height: 32px;
  background: #f7f6f3;
  color: #5f5e5a;
}
.count-label,
.count-tanto-cell {
  background: #e8e6e1 !important;
  color: #55534e !important;
  font-weight: 850;
}
.row-gairaiam .count-label, .row-gairaiam .count-tanto-cell,
.row-gairaipm .count-label, .row-gairaipm .count-tanto-cell { background: #e8eef7 !important; color: #315f9b !important; }
.row-nyuinnam .count-label, .row-nyuinnam .count-tanto-cell,
.row-nyuinnpm .count-label, .row-nyuinnpm .count-tanto-cell { background: #e7f2e8 !important; color: #2f6b3f !important; }
.row-kenshinam .count-label, .row-kenshinam .count-tanto-cell,
.row-kenshinpm .count-label, .row-kenshinpm .count-tanto-cell { background: #f0e8f7 !important; color: #6b4c8d !important; }
.row-totalamt .count-label, .row-totalamt .count-tanto-cell,
.row-totalpm .count-label, .row-totalpm .count-tanto-cell { background: #dedbd3 !important; color: #37352f !important; }
.row-totalamt .count-val,
.row-totalpm .count-val { background: #efeeeb; color: #37352f; }
.count-separator td { background: var(--bg) !important; }

/* 保存バー */
.save-bar {
  background: rgba(255,255,255,0.96);
  border-top: 1px solid var(--border);
  box-shadow: 0 -8px 24px rgba(15,15,15,0.05);
  padding: 8px 12px 16px;
}
.save-hint { color: #9a7634; }
.btn-save {
  max-width: 720px;
  margin: 0 auto;
  background: #37352f;
  border-radius: 14px;
  box-shadow: 0 8px 18px rgba(55,53,47,0.16);
}
.btn-save:active { background: #26241f; }
.btn-save.has-changes { background: #9f6b21; }

/* ポップアップ */
.shift-popup-backdrop { background: rgba(15,15,15,0.22); }
.shift-popup {
  border-radius: 22px;
  border: 1px solid var(--border);
  box-shadow: 0 24px 60px rgba(15,15,15,0.20);
}
.shift-choice {
  border-color: var(--border);
  background: #fbfbfa;
  border-radius: 14px;
}
.shift-choice.is-current {
  outline: 2px solid #d8b46a;
  background: #fff8e8;
}

@media (max-width: 520px) {
  .app-header { padding: max(8px, env(safe-area-inset-top)) 8px 7px; }
  .legend-bar { top: 75px; }
  .header-username { max-width: 48vw; }
  .table-scroll-wrap { padding: 8px 0 96px; }
  .shift-table { border-left: none; border-right: none; border-radius: 0; }
  .td-name, .th-name, .count-label { min-width: 104px; }
  .staff-name { max-width: 96px; font-size: 12px; }
  .th-tanto, .td-tanto, .count-tanto-cell {
    left: 104px !important;
    width: 54px;
    min-width: 54px;
  }
  .shift-cell {
    width: 48px;
    min-width: 48px;
    max-width: 48px;
    height: 48px;
    font-size: 14px;
  }
  .th-day { width: 48px; min-width: 48px; }
  .stat-cell { width: 48px; min-width: 48px; }
  .save-bar { padding-bottom: max(16px, env(safe-area-inset-bottom)); }
}



/* ============================================================
   v3: 便利機能（未入力/締切/自分だけ/祝日/当直チェック/メモ/担当者フィルター）
   ============================================================ */
.table-scroll-wrap {
  overflow-x: visible;
  padding: 10px 8px 108px;
}
.sheet-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(55,53,47,0.22) transparent;
}
.sheet-scroll::-webkit-scrollbar { height: 5px; }
.sheet-scroll::-webkit-scrollbar-thumb { background: rgba(55,53,47,0.22); border-radius: 999px; }

.utility-panels {
  max-width: 1200px;
  margin: 0 auto 10px;
  display: grid;
  gap: 8px;
}
.deadline-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 10px 12px;
  color: var(--text);
  box-shadow: 0 1px 2px rgba(15,15,15,0.03);
}
.deadline-card div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.deadline-card strong { font-size: 13px; }
.deadline-card span { font-size: 12px; color: var(--text-2); }
.deadline-card.is-closed {
  background: #fff7f7;
  border-color: #efc5c2;
}
.deadline-card.is-closed span { color: #9f2b24; font-weight: 700; }

.summary-cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
.summary-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 10px;
  min-width: 0;
}
.summary-card b {
  display: block;
  font-size: 20px;
  line-height: 1;
  color: var(--text);
}
.summary-card span {
  display: block;
  margin-top: 4px;
  font-size: 11px;
  color: var(--text-2);
  font-weight: 700;
}

.view-tools {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 1px;
}
.filter-buttons {
  display: flex;
  gap: 8px;
  overflow-x: auto;
}
.tool-btn {
  flex-shrink: 0;
  border: 1px solid var(--border);
  background: #fff;
  color: var(--text-2);
  border-radius: 999px;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}
.tool-btn.is-active {
  background: #37352f;
  border-color: #37352f;
  color: #fff;
}
.my-status {
  flex-shrink: 0;
  font-size: 12px;
  color: var(--text-2);
  font-weight: 700;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 8px 12px;
}

.missing-panel,
.warning-panel {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
}
.missing-panel summary,
.warning-panel summary {
  cursor: pointer;
  padding: 10px 12px;
  font-size: 13px;
  font-weight: 850;
  color: var(--text);
}
.warning-panel {
  background: #fff8e8;
  border-color: #ead49a;
}
.warning-panel summary { color: #8a5a16; }
.missing-list {
  padding: 0 12px 10px;
  color: var(--text-2);
  font-size: 12px;
  line-height: 1.7;
}
.missing-list p { margin: 0 0 4px; }

/* 今日・祝日 */
.th-day.th-today {
  box-shadow: inset 0 0 0 2px #d8b46a;
  color: #6f4d11 !important;
}
.th-day.th-holiday {
  background: #f5e8e7 !important;
  color: #9f2b24 !important;
}
.shift-cell.col-today {
  box-shadow: inset 0 0 0 2px rgba(216,180,106,0.95);
}
.shift-cell.col-holiday[data-val=""] {
  background: #fff8f7 !important;
}

/* 当直明けチェック */
.shift-cell.needs-ake {
  position: relative;
  outline: 2px dashed #d9730d;
  outline-offset: -4px;
  background-image: repeating-linear-gradient(135deg, rgba(217,115,13,0.10) 0, rgba(217,115,13,0.10) 6px, transparent 6px, transparent 12px);
}
.shift-cell.needs-ake::before {
  content: '!';
  position: absolute;
  top: 2px;
  right: 3px;
  width: 14px;
  height: 14px;
  border-radius: 999px;
  background: #d9730d;
  color: #fff;
  font-size: 10px;
  line-height: 14px;
  font-weight: 900;
}

/* メモ列 */
.th-memo,
.memo-cell {
  width: 180px;
  min-width: 180px;
  border: 1px solid var(--border) !important;
}
.th-memo {
  background: #f1f0ed !important;
  color: #5f5e5a !important;
  font-size: 10px;
  font-weight: 800;
  text-align: center;
}
.memo-cell {
  background: #fbfbfa;
  padding: 5px;
  vertical-align: middle;
}
.my-row .memo-cell {
  background: var(--my-row) !important;
}
.memo-input {
  width: 100%;
  min-height: 38px;
  max-height: 92px;
  resize: vertical;
  border: 1px solid transparent;
  border-radius: 10px;
  background: #fff;
  color: var(--text);
  font-size: 12px;
  line-height: 1.5;
  padding: 7px 8px;
  outline: none;
  font-family: inherit;
}
.memo-input:focus {
  border-color: #d8b46a;
  box-shadow: 0 0 0 3px rgba(216,180,106,0.16);
}
.memo-readonly {
  min-height: 30px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-2);
  white-space: pre-wrap;
}
.count-memo { background: #f7f6f3 !important; }

.shift-cell.readonly {
  cursor: not-allowed;
  opacity: 0.82;
}
.btn-save:disabled {
  background: #c8c5bd !important;
  box-shadow: none;
  color: #fff;
}

@media (max-width: 760px) {
  .summary-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .deadline-card div { align-items: flex-start; }
  .deadline-card span { width: 100%; }
}

@media (max-width: 520px) {
  .table-scroll-wrap { padding: 8px 0 108px; }
  .utility-panels { margin: 0 8px 9px; }
  .summary-card { padding: 9px; }
  .summary-card b { font-size: 18px; }
  .tool-btn, .my-status { padding: 8px 11px; }
  .th-memo, .memo-cell { width: 156px; min-width: 156px; }
  .memo-input { min-height: 42px; font-size: 13px; }
}



/* ============================================================
   v4 追加：有休系・当直×カラー
   ============================================================ */
.shift-cell[data-val="当直×"],
.shift-cell[data-val="当直NG"] { background: #fbe7e7 !important; color: #9f2b24; border-color: #efc5c2 !important; }
.shift-cell[data-val="有休"] { background: #e8f5e9 !important; color: #2f6b3f; border-color: #cfe7d2 !important; }
.shift-cell[data-val="PM有"],
.shift-cell[data-val="AM有"] { background: #eaf3ea !important; color: #2f6b3f; border-color: #cfe3d0 !important; }


/* ============================================================
   v5 表記・休み系カラー上書き
   ============================================================ */
.shift-cell {
  white-space: normal !important;
  line-height: 1.15 !important;
  font-size: 11px !important;
  word-break: keep-all;
  padding: 2px !important;
}

/* 休み系は赤文字・ピンク背景 */
.shift-cell[data-val="休み"],
.shift-cell[data-val="PM休"],
.shift-cell[data-val="AM休"],
.shift-cell[data-val="明け休"],
.shift-cell[data-val="有休"],
.shift-cell[data-val="PM有"],
.shift-cell[data-val="AM有"] {
  background: #fdecef !important;
  color: #c53030 !important;
  border-color: #f3c6cf !important;
}

/* 当直は表記変更に合わせても見やすく */
.shift-cell[data-val="当直"] {
  background: #37352f !important;
  color: #ffffff !important;
  border-color: #37352f !important;
}

/* 当直不可も赤系で統一 */
.shift-cell[data-val="当直×"],
.shift-cell[data-val="当直NG"] {
  background: #fff1f3 !important;
  color: #b42318 !important;
  border-color: #f7c9d2 !important;
}

/* 凡例チップも揃えたい場合用 */
.chip-yasumi,
.chip-am,
.chip-pm,
.chip-ake,
.chip-yukyu,
.chip-pmyu,
.chip-amyu {
  background: #fdecef !important;
  color: #c53030 !important;
  border-color: #f3c6cf !important;
}

@media (max-width: 768px) {
  .shift-cell {
    font-size: 10px !important;
  }
}


/* ============================================================
   v6 当直・当直×カラー調整
   ============================================================ */

/* 当直：黒すぎない落ち着いたブルーグレー */
.shift-cell[data-val="当直"] {
  background: #eef2f6 !important;
  color: #334155 !important;
  border-color: #cbd5e1 !important;
  font-weight: 800 !important;
}

/* 当直×：赤系ではなく、注意感のあるアンバー系 */
.shift-cell[data-val="当直×"],
.shift-cell[data-val="当直NG"] {
  background: #ffffff !important;
  color: #92400e !important;
  border-color: #f3d19c !important;
  font-weight: 800 !important;
}

/* 凡例チップ側も合わせる */
.chip-tocho {
  background: #eef2f6 !important;
  color: #334155 !important;
  border-color: #cbd5e1 !important;
}

.chip-ng {
  background: #ffffff !important;
  color: #92400e !important;
  border-color: #f3d19c !important;
}


/* ============================================================
   v7 右端の集計・メモ列を固定
   ============================================================ */

:root {
  --memo-col-width: 180px;
  --stat-col-width: 56px;
}

/* 右端：メモ */
.th-memo,
.memo-cell {
  position: sticky !important;
  right: 0 !important;
  z-index: 24 !important;
  min-width: var(--memo-col-width) !important;
  width: var(--memo-col-width) !important;
  max-width: var(--memo-col-width) !important;
  background: #ffffff !important;
  box-shadow: -8px 0 16px rgba(15, 23, 42, 0.06) !important;
}

/* 右端から2列目：有給 */
.th-stat-yukyu,
.stat-yukyu {
  position: sticky !important;
  right: var(--memo-col-width) !important;
  z-index: 24 !important;
  min-width: var(--stat-col-width) !important;
  width: var(--stat-col-width) !important;
  max-width: var(--stat-col-width) !important;
}

/* 右端から3列目：休み */
.th-stat-yasumi,
.stat-yasumi {
  position: sticky !important;
  right: calc(var(--memo-col-width) + var(--stat-col-width)) !important;
  z-index: 24 !important;
  min-width: var(--stat-col-width) !important;
  width: var(--stat-col-width) !important;
  max-width: var(--stat-col-width) !important;
}

/* 右端から4列目：出勤 */
.th-stat-shukkin,
.stat-shukkin {
  position: sticky !important;
  right: calc(var(--memo-col-width) + var(--stat-col-width) * 2) !important;
  z-index: 24 !important;
  min-width: var(--stat-col-width) !important;
  width: var(--stat-col-width) !important;
  max-width: var(--stat-col-width) !important;
}

/* ヘッダーは上に重ねる */
thead .th-stat-shukkin,
thead .th-stat-yasumi,
thead .th-stat-yukyu,
thead .th-memo {
  z-index: 42 !important;
}

/* 集計セルの背景を固定時も見やすく */
.stat-shukkin { background: #eef8ef !important; color: #166534 !important; }
.stat-yasumi  { background: #fff4e5 !important; color: #c2410c !important; }
.stat-yukyu   { background: #fef2f2 !important; color: #b91c1c !important; }

.th-stat-shukkin { background: #f0f9f2 !important; color: #166534 !important; }
.th-stat-yasumi  { background: #fff7ed !important; color: #c2410c !important; }
.th-stat-yukyu   { background: #fef2f2 !important; color: #b91c1c !important; }
.th-memo         { background: #f8fafc !important; color: #334155 !important; }

/* メモ欄を固定列の中で収まりよく */
.memo-input {
  width: calc(var(--memo-col-width) - 18px) !important;
  min-height: 46px !important;
  resize: vertical !important;
}

/* スマホではメモ列を少しだけ細く */
@media (max-width: 768px) {
  :root {
    --memo-col-width: 150px;
    --stat-col-width: 50px;
  }

  .memo-input {
    width: calc(var(--memo-col-width) - 16px) !important;
  }
}


/* ============================================================
   v8 右端固定 強化版
   ============================================================ */

/* table-cellのstickyを安定させる */
.shift-table {
  border-collapse: separate !important;
  border-spacing: 0 !important;
}

/* 横スクロール領域を明示 */
.sheet-scroll,
.table-scroll-wrap {
  overflow-x: auto !important;
  overflow-y: visible !important;
  position: relative !important;
}

/* 固定幅 */
:root {
  --memo-col-width: 180px;
  --stat-col-width: 56px;
}

/* 右端固定：メモ */
.shift-table th.th-memo,
.shift-table td.memo-cell {
  position: sticky !important;
  right: 0 !important;
  z-index: 60 !important;
  min-width: var(--memo-col-width) !important;
  width: var(--memo-col-width) !important;
  max-width: var(--memo-col-width) !important;
  background: #ffffff !important;
  box-shadow: -8px 0 14px rgba(15, 23, 42, 0.08) !important;
}

/* 右端固定：有給 */
.shift-table th.th-stat-yukyu,
.shift-table td.stat-yukyu {
  position: sticky !important;
  right: var(--memo-col-width) !important;
  z-index: 59 !important;
  min-width: var(--stat-col-width) !important;
  width: var(--stat-col-width) !important;
  max-width: var(--stat-col-width) !important;
}

/* 右端固定：休み */
.shift-table th.th-stat-yasumi,
.shift-table td.stat-yasumi {
  position: sticky !important;
  right: calc(var(--memo-col-width) + var(--stat-col-width)) !important;
  z-index: 58 !important;
  min-width: var(--stat-col-width) !important;
  width: var(--stat-col-width) !important;
  max-width: var(--stat-col-width) !important;
}

/* 右端固定：出勤 */
.shift-table th.th-stat-shukkin,
.shift-table td.stat-shukkin {
  position: sticky !important;
  right: calc(var(--memo-col-width) + var(--stat-col-width) * 2) !important;
  z-index: 57 !important;
  min-width: var(--stat-col-width) !important;
  width: var(--stat-col-width) !important;
  max-width: var(--stat-col-width) !important;
}

/* ヘッダーは最前面 */
.shift-table thead th.th-stat-shukkin,
.shift-table thead th.th-stat-yasumi,
.shift-table thead th.th-stat-yukyu,
.shift-table thead th.th-memo {
  z-index: 90 !important;
}

/* 背景をしっかり塗る */
.shift-table th.th-stat-shukkin,
.shift-table td.stat-shukkin {
  background: #eef8ef !important;
  color: #166534 !important;
}

.shift-table th.th-stat-yasumi,
.shift-table td.stat-yasumi {
  background: #fff7ed !important;
  color: #c2410c !important;
}

.shift-table th.th-stat-yukyu,
.shift-table td.stat-yukyu {
  background: #fef2f2 !important;
  color: #b91c1c !important;
}

.shift-table th.th-memo {
  background: #f8fafc !important;
  color: #334155 !important;
}

.shift-table td.memo-cell {
  background: #ffffff !important;
}

/* 集計行の空セルは右固定に巻き込まない */
.count-row td.stat-cell:not(.stat-shukkin):not(.stat-yasumi):not(.stat-yukyu),
.count-row td.memo-cell {
  position: static !important;
  right: auto !important;
  box-shadow: none !important;
}

/* メモ入力 */
.memo-input {
  width: calc(var(--memo-col-width) - 18px) !important;
  min-height: 46px !important;
  resize: vertical !important;
}

/* スマホ調整 */
@media (max-width: 768px) {
  :root {
    --memo-col-width: 140px;
    --stat-col-width: 48px;
  }

  .memo-input {
    width: calc(var(--memo-col-width) - 14px) !important;
  }
}


/* ============================================================
   v9 左端の名前・担当列も固定 強化版
   ============================================================ */

:root {
  --name-col-width: 104px;
  --tanto-col-width: 56px;
}

/* 左端：名前 */
.shift-table th.th-name,
.shift-table td.td-name,
.shift-table td.count-label {
  position: sticky !important;
  left: 0 !important;
  z-index: 70 !important;
  min-width: var(--name-col-width) !important;
  width: var(--name-col-width) !important;
  max-width: var(--name-col-width) !important;
  background: #ffffff !important;
  box-shadow: 8px 0 14px rgba(15, 23, 42, 0.06) !important;
}

/* 左から2列目：担当 */
.shift-table th.th-tanto,
.shift-table td.td-tanto,
.shift-table td.count-tanto-cell {
  position: sticky !important;
  left: var(--name-col-width) !important;
  z-index: 69 !important;
  min-width: var(--tanto-col-width) !important;
  width: var(--tanto-col-width) !important;
  max-width: var(--tanto-col-width) !important;
  background: #fafafa !important;
}

/* ヘッダーはさらに前面 */
.shift-table thead th.th-name,
.shift-table thead th.th-tanto {
  z-index: 95 !important;
}

/* 自分の行の名前列は淡いベージュを維持 */
.shift-table tr.my-row td.td-name,
.shift-table tr.my-row td.td-tanto {
  background: #ffffff !important;
}

/* 集計行の左固定色 */
.shift-table tr.count-row td.count-label {
  background: #f3f4f6 !important;
  color: #374151 !important;
  font-weight: 800 !important;
}

.shift-table tr.count-row td.count-tanto-cell {
  background: #f8fafc !important;
  color: #64748b !important;
  font-weight: 700 !important;
}

/* 担当色は固定時も残す */
.shift-table td.td-tanto.tanto-外来 {
  background: #f1f5f9 !important;
  color: #334155 !important;
}

.shift-table td.td-tanto.tanto-入院 {
  background: #ecfdf5 !important;
  color: #166534 !important;
}

.shift-table td.td-tanto.tanto-健診 {
  background: #f5f3ff !important;
  color: #6d28d9 !important;
}

/* 名前が長い時に崩れにくく */
.staff-name {
  max-width: calc(var(--name-col-width) - 18px) !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* スマホ調整 */
@media (max-width: 768px) {
  :root {
    --name-col-width: 96px;
    --tanto-col-width: 52px;
  }

  .staff-name {
    max-width: calc(var(--name-col-width) - 16px) !important;
  }
}
/* 追加スタイル */
/* ============================================================
   月間接遇目標カード
   ============================================================ */
.monthly-goal-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 10px 0;
  padding: 12px 14px;
  background: #fffaf0;
  border: 1px solid #ead7a3;
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.monthly-goal-card.is-empty {
  background: #f8fafc;
  border-color: #e5e7eb;
  color: #6b7280;
}

.monthly-goal-main {
  min-width: 0;
}

.monthly-goal-label {
  display: inline-block;
  margin-bottom: 4px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: #92400e;
}

.monthly-goal-main p {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.6;
  color: #37352f;
}

.monthly-survey-link {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 7px 12px;
  border-radius: 999px;
  background: #37352f;
  color: #fff !important;
  text-decoration: none;
  font-size: 13px;
  font-weight: 800;
}

.monthly-survey-link:active {
  opacity: 0.82;
}

@media (max-width: 768px) {
  .monthly-goal-card {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
    margin: 8px 0;
    padding: 11px 12px;
  }

  .monthly-survey-link {
    width: 100%;
  }
}

/* ============================================================
   v14 接遇目標・アンケート回答リンク配置
   ============================================================ */

/* 既存の接遇目標カードCSSを上書き */
.monthly-goal-card.monthly-goal-card-v3 {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 14px !important;
  margin: 10px 0 12px !important;
  padding: 14px 16px !important;
  background: #fffaf0 !important;
  border: 1px solid #ead7a3 !important;
  border-radius: 16px !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
}

.monthly-goal-left {
  min-width: 0 !important;
}

.monthly-goal-title {
  margin-bottom: 5px !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  letter-spacing: 0.04em !important;
  color: #92400e !important;
}

.monthly-goal-text {
  margin: 0 !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  line-height: 1.55 !important;
  color: #37352f !important;
  overflow-wrap: anywhere !important;
}

.monthly-goal-right {
  flex-shrink: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 8px 12px !important;
  background: #ffffff !important;
  border: 1px solid #ece7df !important;
  border-radius: 999px !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  white-space: nowrap !important;
}

.monthly-survey-label {
  color: #92400e !important;
}

.monthly-answer-link {
  color: #37352f !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
  font-weight: 900 !important;
}

.monthly-answer-link:active {
  opacity: 0.7 !important;
}

.monthly-answer-empty {
  color: #9ca3af !important;
  font-weight: 800 !important;
}

/* 古いボタンCSSが残っていても消す */
.monthly-survey-link {
  all: unset;
}

@media (max-width: 768px) {
  .monthly-goal-card.monthly-goal-card-v3 {
    align-items: flex-start !important;
    flex-direction: column !important;
    gap: 10px !important;
    padding: 12px 13px !important;
  }

  .monthly-goal-right {
    width: 100% !important;
    justify-content: flex-start !important;
    border-radius: 12px !important;
  }

  .monthly-goal-text {
    font-size: 15px !important;
  }
}
/* ============================================================
   ログイン画面：対象月表示のスマホ調整
   ============================================================ */
#monthDisplayInput,
#adminMonthDisplayInput {
  width: 100%;
  display: block;
  min-height: 54px;
  padding: 12px 14px;
  border: 1.5px solid #e5e1dc;
  border-radius: 14px;
  background: #ffffff;
  color: #37352f;
  font-size: 17px;
  font-weight: 800;
  text-align: left;
  line-height: 1.2;
  box-sizing: border-box;
  cursor: pointer;
  appearance: auto;
  -webkit-appearance: menulist;
}

#monthInput {
  display: none !important;
}

@media (max-width: 520px) {
  #monthDisplayInput,
  #adminMonthDisplayInput {
    min-height: 56px;
    padding: 13px 14px;
    font-size: 17px;
  }
}
/* ============================================================
   当直○ 追加カラー
   ============================================================ */
.shift-cell[data-val="当直○"] {
  background: #ecfdf5 !important;
  color: #166534 !important;
  border-color: #bbf7d0 !important;
  font-weight: 800 !important;
}

.shift-choice[data-choice="当直○"] {
  background: #f0fdf4 !important;
  border-color: #bbf7d0 !important;
}

.shift-choice[data-choice="当直○"] small {
  color: #166534 !important;
}

.confirm-day.shift-当直○ {
  background: #ecfdf5 !important;
}

.confirm-day.shift-当直○ .day-label {
  background: #dcfce7 !important;
  color: #166534 !important;
}
/* ============================================================
   当直○を通常項目と同じ見た目に戻す
   ============================================================ */

/* ポップアップ内の当直○だけ緑にならないようにする */
.shift-choice[data-choice="当直○"] {
  background: #ffffff !important;
  color: #37352f !important;
  border-color: #e5e1dc !important;
}

/* 選択中の枠だけは他と同じくゴールド系 */
.shift-choice[data-choice="当直○"].is-current {
  background: #fffaf0 !important;
  border-color: #d6b35f !important;
  color: #37352f !important;
}

/* 表のセル側も緑ではなく落ち着いた通常系にする */
.shift-cell[data-val="当直○"] {
  background: #f8fafc !important;
  color: #334155 !important;
  border-color: #cbd5e1 !important;
  font-weight: 800 !important;
}

/* スプレッドシートではなく画面上の凡例がある場合も通常系 */
.chip-duty-ok,
.chip-tocho-ok,
.chip-ok {
  background: #f8fafc !important;
  color: #334155 !important;
  border-color: #cbd5e1 !important;
}
/* ============================================================
   当直○の「当直可能」文字色を通常項目と同じにする
   ============================================================ */

.shift-choice[data-choice="当直○"] small {
  color: #6f6f6f !important;
  font-weight: 700 !important;
}

/* 念のため、選択中でも緑にならないようにする */
.shift-choice[data-choice="当直○"].is-current small {
  color: #6f6f6f !important;
}



/* ============================================================
   医事課勤務表版：○ / OA / A / A/休 / ／ / ／休 / 当 / ／明 / Y
   ============================================================ */

/* シフトセル */
.shift-cell[data-val="通常勤務"] {
  background: #ffffff !important;
  color: #37352f !important;
  border-color: #e6e4df !important;
}
.shift-cell[data-val="早出"] {
  background: #e8f4fb !important;
  color: #245a73 !important;
  border-color: #c9e3ee !important;
}
.shift-cell[data-val="A"] {
  background: #eef2ff !important;
  color: #3730a3 !important;
  border-color: #c7d2fe !important;
}
.shift-cell[data-val="A午後休"] {
  background: #f3efff !important;
  color: #5b3fa3 !important;
  border-color: #d9cdf8 !important;
}
.shift-cell[data-val="早出午後休"] {
  background: #edf5fb !important;
  color: #315f9b !important;
  border-color: #c8dceb !important;
}
.shift-cell[data-val="休み"] {
  background: #fbf3db !important;
  color: #8f5a00 !important;
  border-color: #e9d8a6 !important;
}
.shift-cell[data-val="午後休"] {
  background: #f4e9f8 !important;
  color: #6f3f7d !important;
  border-color: #e5cdea !important;
}
.shift-cell[data-val="当直"] {
  background: #2f3437 !important;
  color: #ffffff !important;
  border-color: #2f3437 !important;
}
.shift-cell[data-val="当直明け"] {
  background: #eeeeec !important;
  color: #5f5e5b !important;
  border-color: #dddcd8 !important;
}
.shift-cell[data-val="有給"] {
  background: #eaf4ea !important;
  color: #2f6b3f !important;
  border-color: #cfe3d1 !important;
}

/* 選択ポップアップ */
.shift-choice[data-choice="通常勤務"] { background: #ffffff; }
.shift-choice[data-choice="早出"]       { background: #f3f9fc; }
.shift-choice[data-choice="A"]          { background: #f5f7ff; }
.shift-choice[data-choice="A午後休"]     { background: #f8f5ff; }
.shift-choice[data-choice="早出午後休"] { background: #f4f8fc; }
.shift-choice[data-choice="休み"]     { background: #fffaf0; }
.shift-choice[data-choice="午後休"]   { background: #fbf6fd; }
.shift-choice[data-choice="当直"]     { background: #f3f4f5; }
.shift-choice[data-choice="当直明け"] { background: #f6f6f4; }
.shift-choice[data-choice="有給"]     { background: #f4faf4; }

/* 右側集計 */
.th-stat-daywork { background: #3f6b57 !important; }
.th-stat-duty    { background: #4b5563 !important; }
.th-stat-holiday { background: #9a6b2f !important; }
.th-stat-paid    { background: #8f3d38 !important; }
.th-stat-other   { background: #64748b !important; }

.stat-daywork { background: #eaf3ea !important; color: #2f6b3f !important; }
.stat-duty    { background: #eef2f6 !important; color: #334155 !important; }
.stat-holiday { background: #fbf1dc !important; color: #8a5a16 !important; }
.stat-paid    { background: #f5e8e7 !important; color: #9f2b24 !important; }
.stat-other   { background: #f1f5f9 !important; color: #475569 !important; }

/* 確認カレンダーの記号 */
.confirm-day.shift-通常勤務 .day-label { background:#f1f5f9; color:#334155; }
.confirm-day.shift-早出 .day-label       { background:#dff1f8; color:#245a73; }
.confirm-day.shift-A .day-label          { background:#e0e7ff; color:#3730a3; }
.confirm-day.shift-A午後休 .day-label     { background:#eadffd; color:#5b3fa3; }
.confirm-day.shift-早出午後休 .day-label { background:#dfebf6; color:#315f9b; }
.confirm-day.shift-休み .day-label     { background:#f8e8bd; color:#8f5a00; }
.confirm-day.shift-午後休 .day-label   { background:#ead8f0; color:#6f3f7d; }
.confirm-day.shift-当直 .day-label     { background:#2f3437; color:#ffffff; }
.confirm-day.shift-当直明け .day-label { background:#dfdfdc; color:#5f5e5b; }
.confirm-day.shift-有給 .day-label     { background:#dcefdc; color:#2f6b3f; }

/* 5項目になった集計欄を少しコンパクトに */
.th-stat,
.stat-cell {
  min-width: 48px;
  width: 48px;
}

@media (max-width: 520px) {
  .th-stat,
  .stat-cell {
    min-width: 46px;
    width: 46px;
  }
}



/* ============================================================
   担当者メニュー
   ============================================================ */
.admin-menu-card {
  max-width: 620px;
}

.admin-menu-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.admin-menu-button {
  width: 100%;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 24px;
  align-items: center;
  gap: 12px;
  min-height: 78px;
  padding: 14px 15px;
  border: 1px solid #d9d6cf;
  border-radius: 15px;
  background: linear-gradient(180deg, #fbfbfa 0%, #f4f3f0 100%);
  color: var(--text);
  text-align: left;
  cursor: pointer;
  box-shadow: 0 1px 0 rgba(255,255,255,0.95) inset, 0 2px 6px rgba(39,37,31,0.05);
  transition: transform 0.16s ease, background 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}

.admin-menu-button:hover,
.admin-menu-button:focus-visible {
  background: linear-gradient(180deg, #ffffff 0%, #f6f5f2 100%);
  border-color: #cfcabf;
  box-shadow: 0 1px 0 rgba(255,255,255,0.98) inset, 0 10px 20px rgba(39,37,31,0.10);
  transform: translateY(-2px);
}

.admin-menu-button:active {
  transform: translateY(0) scale(0.995);
  box-shadow: 0 1px 0 rgba(255,255,255,0.95) inset, 0 3px 8px rgba(39,37,31,0.08);
}

.admin-menu-icon {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: #ebe9e4;
  font-size: 21px;
  font-weight: 800;
  color: #59544b;
}

.admin-menu-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.admin-menu-copy strong {
  font-size: 15px;
  line-height: 1.35;
}

.admin-menu-copy small {
  color: #7a756d;
  font-size: 12px;
  line-height: 1.45;
}

.admin-menu-arrow {
  justify-self: end;
  font-size: 22px;
  line-height: 1;
  color: #8a867d;
}

.admin-menu-button.admin-menu-danger {
  background: #fff8f7;
  border-color: #efc4bd;
  color: #9f2d20;
}

.admin-menu-button.admin-menu-danger:hover,
.admin-menu-button.admin-menu-danger:focus-visible {
  background: #fff0ed;
  border-color: #e2a79d;
  box-shadow: 0 1px 0 rgba(255,255,255,0.98) inset, 0 10px 20px rgba(180,35,24,0.10);
  transform: translateY(-2px);
}

.admin-menu-danger .admin-menu-icon {
  background: #fde5e1;
  color: #b42318;
}

.admin-menu-danger .admin-menu-copy small {
  color: #9c5a51;
}

.admin-menu-danger .admin-menu-arrow {
  color: #c46a5e;
}

.admin-menu-button:disabled {
  cursor: wait;
  opacity: 0.58;
  transform: none;
}

.admin-menu-logout {
  margin-top: 16px !important;
}

@media (max-width: 520px) {
  .admin-menu-button {
    grid-template-columns: 38px minmax(0, 1fr) 20px;
    min-height: 74px;
    padding: 13px;
    gap: 10px;
  }

  .admin-menu-icon {
    width: 38px;
    height: 38px;
    font-size: 19px;
  }
}


/* ============================================================
   v8 複数日一括入力カレンダー
   ============================================================ */
.bulk-calendar-backdrop {
  position: fixed;
  inset: 0;
  z-index: 620;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(15, 15, 15, 0.30);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.bulk-calendar-backdrop.active {
  display: flex;
}

.bulk-calendar-modal {
  width: min(520px, 100%);
  max-height: min(760px, calc(100vh - 32px));
  overflow-y: auto;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 22px;
  box-shadow: 0 28px 80px rgba(15, 15, 15, 0.25);
  padding: 16px;
}

.bulk-calendar-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.bulk-calendar-title {
  margin: 0;
  font-size: 18px;
  line-height: 1.35;
  font-weight: 850;
  color: var(--text);
}

.bulk-calendar-sub {
  margin: 4px 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-2);
}

.bulk-calendar-x {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: #f7f6f3;
  color: var(--text-2);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.bulk-calendar-tools {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}

.bulk-tool-button {
  border: 1px solid var(--border);
  border-radius: 999px;
  background: #fff;
  color: var(--text);
  padding: 7px 12px;
  font-size: 12px;
  font-weight: 750;
  cursor: pointer;
}

.bulk-weekday-row,
.bulk-calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
}

.bulk-weekday-row {
  margin-bottom: 6px;
}

.bulk-weekday-row span {
  text-align: center;
  font-size: 11px;
  font-weight: 800;
  color: var(--text-2);
}

.bulk-weekday-row .is-sun { color: #b3433e; }
.bulk-weekday-row .is-sat { color: #356b9b; }

.bulk-calendar-blank {
  min-height: 62px;
}

.bulk-calendar-day {
  position: relative;
  min-width: 0;
  min-height: 62px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #fbfbfa;
  color: var(--text);
  padding: 7px 3px 5px;
  cursor: pointer;
  text-align: center;
  transition: transform 0.10s ease, border-color 0.10s ease, background 0.10s ease;
}

.bulk-calendar-day:active {
  transform: scale(0.97);
}

.bulk-calendar-day strong {
  display: block;
  font-size: 15px;
  line-height: 1.1;
  font-weight: 850;
}

.bulk-calendar-day small {
  display: block;
  overflow: hidden;
  margin-top: 7px;
  color: var(--text-2);
  font-size: 10px;
  line-height: 1.1;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bulk-calendar-day.is-sun,
.bulk-calendar-day.is-holiday {
  background: #fff7f6;
  color: #b3433e;
}

.bulk-calendar-day.is-sat {
  background: #f5f9fd;
  color: #356b9b;
}

.bulk-calendar-day.is-selected {
  border-color: #9f6b21;
  background: #fff1cf;
  color: #67440f;
  box-shadow: inset 0 0 0 2px #d8b46a;
}

.bulk-calendar-day.is-selected::after {
  content: '✓';
  position: absolute;
  top: 4px;
  right: 5px;
  font-size: 10px;
  font-weight: 900;
  color: #9f6b21;
}

.bulk-calendar-day.is-disabled {
  opacity: 0.38;
  cursor: not-allowed;
}

.bulk-calendar-summary {
  min-height: 38px;
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  background: #f7f6f3;
  color: var(--text-2);
  font-size: 12px;
  line-height: 1.5;
  font-weight: 700;
}

.bulk-calendar-actions {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 8px;
  margin-top: 12px;
}

.bulk-calendar-cancel,
.bulk-calendar-apply {
  min-height: 46px;
  border-radius: 14px;
  padding: 11px 10px;
  font-size: 14px;
  font-weight: 850;
  cursor: pointer;
}

.bulk-calendar-cancel {
  border: 1px solid var(--border);
  background: #fff;
  color: var(--text-2);
}

.bulk-calendar-apply {
  border: 1px solid #37352f;
  background: #37352f;
  color: #fff;
}

.bulk-calendar-apply:disabled {
  border-color: #d8d6d0;
  background: #d8d6d0;
  cursor: not-allowed;
}

@media (max-width: 520px) {
  .bulk-calendar-backdrop {
    align-items: flex-end;
    padding: 10px 8px max(10px, env(safe-area-inset-bottom));
  }

  .bulk-calendar-modal {
    max-height: calc(100vh - max(20px, env(safe-area-inset-top)));
    border-radius: 22px 22px 16px 16px;
    padding: 14px 10px 12px;
  }

  .bulk-weekday-row,
  .bulk-calendar-grid {
    gap: 4px;
  }

  .bulk-calendar-blank,
  .bulk-calendar-day {
    min-height: 56px;
  }

  .bulk-calendar-day {
    border-radius: 10px;
    padding-left: 2px;
    padding-right: 2px;
  }

  .bulk-calendar-day strong { font-size: 14px; }
  .bulk-calendar-day small { font-size: 9px; margin-top: 6px; }
  .bulk-calendar-summary { max-height: 58px; overflow-y: auto; }
}


/* ============================================================
   一般職員：予定／当直可否の2段入力
   担当者画面は従来どおり1段表示
   ============================================================ */
.duty-cell {
  width: 42px;
  min-width: 42px;
  max-width: 42px;
  height: 34px;
  padding: 2px !important;
  border-right: 1px solid var(--border) !important;
  border-bottom: 1px solid var(--border) !important;
  background: #fbfbfa;
  color: #a8a39a;
  text-align: center;
  vertical-align: middle;
  font-size: 13px;
  line-height: 1;
  font-weight: 800;
  white-space: nowrap;
}

.duty-cell.editable {
  cursor: pointer;
  position: relative;
}

.duty-cell.editable::after {
  content: '';
  position: absolute;
  inset: 4px;
  border-radius: 8px;
  border: 1px solid transparent;
  pointer-events: none;
}

.duty-cell.editable:active::after {
  background: rgba(55,53,47,0.08);
}

.duty-cell.changed {
  outline: 2px solid #d8b46a;
  outline-offset: -2px;
}

.duty-cell[data-val="当直○"] {
  background: #eefaf3 !important;
  color: #166534 !important;
  border-color: #c7ead2 !important;
}

.duty-cell[data-val="当直×"] {
  background: #fff1f2 !important;
  color: #b42318 !important;
  border-color: #f4c8cd !important;
}

.duty-cell.col-sun[data-val=""],
.duty-cell.col-holiday[data-val=""] {
  background: #fff8f7;
}

.duty-cell.col-sat[data-val=""] {
  background: #f7faff;
}

.staff-plan-row:not(.finalized-row) .shift-cell {
  border-bottom-style: dotted !important;
}

.staff-duty-row .td-tanto {
  border-top-style: dotted !important;
  border-bottom: 1px solid var(--border) !important;
}

.duty-row-label {
  background: #f4f3f0 !important;
  color: #6f6253 !important;
  font-size: 10px !important;
  font-weight: 900 !important;
  letter-spacing: .03em;
}

.my-row.staff-duty-row .duty-row-label {
  background: var(--my-row-strong) !important;
  color: #5a4218 !important;
}

.my-row .duty-cell[data-val=""] {
  background: var(--my-row) !important;
}

.finalized-row .duty-cell.readonly,
.finalized-row .duty-row-label {
  opacity: .78;
}
.finalized-row .duty-cell.editable {
  opacity: 1;
}

.shift-choice[data-input-kind="duty"][data-choice="当直○"] {
  background: #f0fdf4 !important;
  border-color: #bbf7d0 !important;
}

.shift-choice[data-input-kind="duty"][data-choice="当直○"] small {
  color: #166534 !important;
}

.shift-choice[data-input-kind="duty"][data-choice="当直×"] {
  background: #fff1f2 !important;
  border-color: #fecdd3 !important;
}

.shift-choice[data-input-kind="duty"][data-choice="当直×"] small {
  color: #b42318 !important;
}

.confirm-day .duty-label {
  display: block;
  width: fit-content;
  margin-top: 4px;
  padding: 3px 5px;
  border-radius: 7px;
  font-size: 10px;
  font-weight: 900;
  line-height: 1.1;
}

.confirm-day .duty-label.duty-当直○ {
  background: #dcfce7;
  color: #166534;
}

.confirm-day .duty-label.duty-当直× {
  background: #ffe4e6;
  color: #b42318;
}

@media (max-width: 520px) {
  .duty-cell {
    width: 48px;
    min-width: 48px;
    max-width: 48px;
    height: 38px;
    font-size: 14px;
  }

  .duty-row-label {
    font-size: 9px !important;
  }

  .confirm-day .duty-label {
    font-size: 9px;
    padding: 2px 4px;
  }
}



/* ============================================================
   v19 担当者表：勤務記号は無彩色／一般職員の当直可否だけ色分け
   ============================================================ */
.admin-duty-legend {
  max-width: 1200px;
  margin: 0 auto 9px;
  padding: 9px 12px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 14px;
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 12px;
  color: #5f5e5a;
  font-size: 12px;
  line-height: 1.4;
}
.admin-duty-legend-title {
  color: #37352f;
  font-weight: 900;
}
.admin-duty-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  font-weight: 700;
}
.legend-swatch {
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
  border: 1px solid #d9d7d2;
  border-radius: 4px;
  background: #fff;
}
.legend-duty-ok { background: #f8dce6; border-color: #e8b9ca; }
.legend-duty-ng { background: #e7e7e5; border-color: #cfcfcb; }
.legend-duty-work { background: #dceef8; border-color: #b6d7ea; }
.legend-duty-empty { background: #fff; }

/* 担当者表では、勤務予定の種類による背景色をすべて外す */
.admin-shift-table .shift-cell,
.admin-shift-table .shift-cell[data-val="休み"],
.admin-shift-table .shift-cell[data-val="AM休"],
.admin-shift-table .shift-cell[data-val="PM休"],
.admin-shift-table .shift-cell[data-val="当直"],
.admin-shift-table .shift-cell[data-val="当直×"],
.admin-shift-table .shift-cell[data-val="当直NG"],
.admin-shift-table .shift-cell[data-val="明け休"],
.admin-shift-table .shift-cell[data-val="有休"],
.admin-shift-table .shift-cell[data-val="PM有"],
.admin-shift-table .shift-cell[data-val="AM有"],
.admin-shift-table .shift-cell.col-sun,
.admin-shift-table .shift-cell.col-sat,
.admin-shift-table .shift-cell.col-holiday {
  background: #ffffff !important;
  color: #37352f !important;
  border-color: var(--border) !important;
  background-image: none;
}

/* 一般職員画面の当直可否行も同じ色分けへ統一 */
.duty-cell[data-val="当直○"] {
  background: #f8dce6 !important;
  color: #7d2948 !important;
  border-color: #e8b9ca !important;
}
.duty-cell[data-val="当直×"] {
  background: #e7e7e5 !important;
  color: #55534e !important;
  border-color: #cfcfcb !important;
}
.duty-cell[data-val="出勤希望"] {
  background: #dceef8 !important;
  color: #245a73 !important;
  border-color: #b6d7ea !important;
}
.shift-choice[data-input-kind="duty"][data-choice="当直○"] {
  background: #fcebf1 !important;
  border-color: #e8b9ca !important;
}
.shift-choice[data-input-kind="duty"][data-choice="当直○"] small {
  color: #7d2948 !important;
}
.shift-choice[data-input-kind="duty"][data-choice="当直×"] {
  background: #eeeeec !important;
  border-color: #cfcfcb !important;
}
.shift-choice[data-input-kind="duty"][data-choice="当直×"] small {
  color: #55534e !important;
}
.shift-choice[data-input-kind="duty"][data-choice="出勤希望"] {
  background: #edf7fc !important;
  border-color: #b6d7ea !important;
}
.shift-choice[data-input-kind="duty"][data-choice="出勤希望"] small {
  color: #245a73 !important;
}
.confirm-day .duty-label.duty-当直○ {
  background: #f8dce6 !important;
  color: #7d2948 !important;
}
.confirm-day .duty-label.duty-当直× {
  background: #e7e7e5 !important;
  color: #55534e !important;
}
.confirm-day .duty-label.duty-出勤希望 {
  background: #dceef8 !important;
  color: #245a73 !important;
}

/* 一般職員が回答した当直可否だけを背景色で表示 */
.admin-shift-table .shift-cell.admin-duty-ok {
  background: #f8dce6 !important;
  border-color: #e8b9ca !important;
}
.admin-shift-table .shift-cell.admin-duty-ng {
  background: #e7e7e5 !important;
  border-color: #cfcfcb !important;
}
.admin-shift-table .shift-cell.admin-duty-work {
  background: #dceef8 !important;
  border-color: #b6d7ea !important;
}

/* 編集済み・当直明け注意の枠線は残し、背景色は当直可否を優先 */
.admin-shift-table .shift-cell.needs-ake {
  background-image: none !important;
}

/* 保存ボタンを画面中央へ固定 */
.save-bar {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box;
}
.save-hint {
  width: 100%;
}
.btn-save {
  width: min(720px, calc(100vw - 24px)) !important;
  max-width: 720px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

@media (max-width: 520px) {
  .admin-duty-legend {
    margin: 0 8px 8px;
    gap: 7px 10px;
    padding: 9px 10px;
  }
  .admin-duty-legend-title {
    width: 100%;
  }
  .admin-duty-legend-item {
    white-space: normal;
  }
}


/* ============================================================
   2026-07-18 保存ボタン配置・最下部集計行の表示調整
   ============================================================ */
/* 固定保存バーに表の最下部が隠れないよう、十分な余白を確保 */
#screen-shift .table-scroll-wrap {
  padding-bottom: 170px !important;
}

/* 一般職員：保存ボタン1つを中央配置 */
#screen-shift .save-bar.is-staff {
  display: grid !important;
  grid-template-columns: minmax(0, 720px) !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px 12px !important;
  box-sizing: border-box !important;
}
#screen-shift .save-bar.is-staff .save-hint {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  margin-bottom: 0 !important;
}
#screen-shift .save-bar.is-staff .btn-save {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
}

/* 担当者：ボタンは従来どおり1つを中央配置 */
#screen-shift .save-bar.is-admin {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
}
#screen-shift .save-bar.is-admin .btn-save {
  width: min(720px, calc(100vw - 24px)) !important;
  max-width: 720px !important;
  margin: 0 auto !important;
}

@media (max-width: 760px) {
  #screen-shift .table-scroll-wrap {
    padding-bottom: 160px !important;
  }
  #screen-shift .save-bar.is-staff {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
  #screen-shift .save-bar.is-staff .btn-save {
    padding-left: 8px !important;
    padding-right: 8px !important;
    font-size: 15px !important;
  }
}

/* ============================================================
   2026-07-18 固定フッターを左固定列より前面に表示
   ============================================================ */
#screen-shift .save-bar {
  z-index: 400 !important;
  background: #ffffff !important;
  isolation: isolate;
}


/* ============================================================
   氏名カスタムプルダウン
   ブラウザ標準selectが上方向へ開く環境でも、下方向固定で表示する
============================================================ */
.native-select-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.staff-custom-select {
  position: relative;
  width: 100%;
  z-index: 30;
}

.staff-select-button {
  width: 100%;
  min-height: 46px;
  padding: 11px 13px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #fbfbfa;
  color: var(--text);
  font: inherit;
  font-size: 16px;
  font-weight: 500;
  text-align: left;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
  transition: border-color 0.18s, box-shadow 0.18s, background 0.18s;
}

.staff-select-button:hover { background: #fff; }

.staff-custom-select.is-open .staff-select-button,
.staff-select-button:focus-visible {
  outline: none;
  border-color: #b7b4ad;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(55,53,47,0.08);
}

.staff-select-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.staff-select-label.is-placeholder { color: #686763; }

.staff-select-arrow { display: none !important; }

.staff-custom-select.is-open .staff-select-arrow { display: none !important; }

.staff-select-menu {
  display: none;
  position: absolute;
  top: calc(100% + 7px);
  left: 0;
  right: 0;
  min-height: 48px;
  max-height: 320px;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 16px 34px rgba(15,15,15,0.16);
  z-index: 9999;
}

.staff-custom-select.is-open .staff-select-menu { display: block; }

.staff-select-option {
  width: 100%;
  min-height: 42px;
  padding: 9px 11px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

.staff-select-option:hover,
.staff-select-option:focus-visible {
  outline: none;
  background: #f1f1ef;
}

.staff-select-option.is-selected {
  background: #ecebe7;
}

@media (max-width: 519px) {
  .staff-select-menu { max-height: 260px; }
}


/* ============================================================
   2026-07-20 氏名プルダウン描画修正
   ・追加CSSをstyleタグ内へ収容
   ・ログインカードの外側まで下方向メニューを表示可能にする
============================================================ */
#screen-login .login-card {
  overflow: visible !important;
}

#screen-login .form-hero {
  border-radius: 18px 18px 0 0;
}

#screen-login .form-body {
  border-radius: 0 0 18px 18px;
}

#screen-login .form-item {
  position: relative;
}


/* ============================================================
   2026-08-01 職場PCの右端切れ対策
   ・横スクロールは sheet-scroll の1か所だけに統一
   ・表は縮めず、画面内の表示枠から右端まで確実に移動可能にする
   ============================================================ */
#screen-shift .table-scroll-wrap {
  width: 100% !important;
  max-width: 100vw !important;
  min-width: 0 !important;
  overflow-x: visible !important;
  overflow-y: visible !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  box-sizing: border-box !important;
}

#screen-shift .sheet-scroll {
  display: block !important;
  width: calc(100vw - 16px) !important;
  max-width: none !important;
  min-width: 0 !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-bottom: 12px !important;
  overflow-x: auto !important;
  overflow-y: visible !important;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scrollbar-gutter: stable both-edges;
  box-sizing: border-box !important;
}

#screen-shift .shift-table {
  width: max-content !important;
  min-width: max-content !important;
  max-width: none !important;
  /* 表が画面内に収まるPCでは中央寄せ。幅を超える場合は左端から横スクロール。 */
  margin-left: auto !important;
  margin-right: auto !important;
}

/* 職場PCでも横スクロール位置が分かりやすい太さにする */
#screen-shift .sheet-scroll::-webkit-scrollbar {
  height: 12px !important;
}

#screen-shift .sheet-scroll::-webkit-scrollbar-track {
  background: #ecebe7;
  border-radius: 999px;
}

#screen-shift .sheet-scroll::-webkit-scrollbar-thumb {
  background: #9b9993 !important;
  border: 2px solid #ecebe7;
  border-radius: 999px;
}

@media (min-width: 1200px) {
  #screen-shift .sheet-scroll {
    width: calc(100vw - 24px) !important;
  }
}

@media (max-width: 760px) {
  #screen-shift .sheet-scroll {
    width: 100vw !important;
    padding-bottom: 8px !important;
  }
}

/* ============================================================
   2026-08-05 記号大型化・休日カウントをピンクに統一
   ============================================================ */
/* 入力者・担当者の「休日」集計列を同じピンク系で表示 */
.shift-table th.th-stat-holiday,
.shift-table th.th-stat-yasumi {
  background: #f8dbe6 !important;
  color: #8f1f4b !important;
  border-color: #efbfd1 !important;
}

.shift-table td.stat-holiday,
.shift-table td.stat-yasumi {
  background: #fde7ef !important;
  color: #9d174d !important;
  border-color: #f3c5d6 !important;
  font-weight: 800 !important;
}

/* 氏名下の「休日 0/9日」も同じ色味で統一 */
.pct,
.my-row .pct,
.pct.pct-partial,
.pct.pct-done {
  display: inline-block;
  margin-top: 4px;
  padding: 2px 6px;
  border-radius: 999px;
  background: #fde7ef !important;
  color: #9d174d !important;
  font-size: 10px;
  font-weight: 800;
  line-height: 1.35;
}

/* ============================================================
   2026-08-05 最終調整
   ・休日カウント対象の勤務区分を入力者・担当者ともピンク系に統一
   ・有給系、当直、当直可否の色は変更しない
   ============================================================ */
.shift-cell[data-val="休み"],
.shift-cell[data-val="午後休"],
.shift-cell[data-val="PM休"],
.shift-cell[data-val="AM休"],
.shift-cell[data-val="A午後休"],
.shift-cell[data-val="早出午後休"],
.shift-cell[data-val="当直明け"],
.shift-cell[data-val="明け休"] {
  background: #fdecef !important;
  color: #b4234f !important;
  border-color: #f2bfd0 !important;
}

/* 確認画面も同じ休日区分はピンク系に統一 */
.confirm-day.shift-休み,
.confirm-day.shift-午後休,
.confirm-day.shift-AM休,
.confirm-day.shift-A午後休,
.confirm-day.shift-早出午後休,
.confirm-day.shift-当直明け,
.confirm-day.shift-明け休 {
  background: #fdecef !important;
}



/* ============================================================
   2026-08-05 PC用「全体表示」切り替え
   ・全体表示時のみ表を画面幅に合わせて縮小
   ・通常表示とスマホ表示は従来サイズを維持
   ============================================================ */
.header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.btn-fit-view {
  display: none;
  align-items: center;
  justify-content: center;
  position: static;
  z-index: auto;
  flex: 0 0 auto;
  min-width: 76px;
  background: #ffffff;
  color: #37352f;
  border: 1px solid #d8d6d1;
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  box-shadow: 0 2px 8px rgba(15,15,15,0.12);
  cursor: pointer;
  white-space: nowrap;
}

.btn-fit-view[aria-pressed="true"] {
  background: #37352f;
  color: #ffffff;
  border-color: #37352f;
}

.fit-table-stage {
  position: relative;
  width: max-content;
  min-width: max-content;
  margin-left: auto;
  margin-right: auto;
}

#screen-shift.fit-view .sheet-scroll {
  overflow-x: hidden !important;
}

#screen-shift.fit-view .fit-table-stage {
  position: relative;
  margin-left: auto !important;
  margin-right: auto !important;
}

#screen-shift.fit-view .shift-table {
  transform-origin: top left !important;
  margin: 0 !important;
}

/* 全体表示では表が全部見えるため、固定列を解除して重なりを防ぐ */
#screen-shift.fit-view .shift-table .th-name,
#screen-shift.fit-view .shift-table .th-tanto,
#screen-shift.fit-view .shift-table .th-memo,
#screen-shift.fit-view .shift-table .th-stat-daywork,
#screen-shift.fit-view .shift-table .th-stat-duty,
#screen-shift.fit-view .shift-table .th-stat-holiday,
#screen-shift.fit-view .shift-table .th-stat-paid,
#screen-shift.fit-view .shift-table .th-stat-other,
#screen-shift.fit-view .shift-table .td-name,
#screen-shift.fit-view .shift-table .td-tanto,
#screen-shift.fit-view .shift-table .count-label,
#screen-shift.fit-view .shift-table .count-tanto-cell,
#screen-shift.fit-view .shift-table .memo-cell,
#screen-shift.fit-view .shift-table .stat-daywork,
#screen-shift.fit-view .shift-table .stat-duty,
#screen-shift.fit-view .shift-table .stat-holiday,
#screen-shift.fit-view .shift-table .stat-paid,
#screen-shift.fit-view .shift-table .stat-other {
  position: static !important;
  left: auto !important;
  right: auto !important;
  box-shadow: none !important;
}

@media (max-width: 899px) {
  .btn-fit-view { display: none !important; }
}


/* ============================================================
   2026-08-08 氏名プルダウン自動復旧
   空の白いメニューを出さず、再読込ボタンを表示する
============================================================ */
.staff-select-empty {
  padding: 12px 10px 8px;
  color: #6b6964;
  font-size: 13px;
  text-align: center;
}
.staff-select-retry {
  width: 100%;
  min-height: 40px;
  margin-top: 4px;
  padding: 8px 12px;
  border: 1px solid #d8d5ce;
  border-radius: 8px;
  background: #f7f6f3;
  color: #37352f;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.staff-select-retry:hover,
.staff-select-retry:focus-visible {
  background: #efeee9;
  outline: none;
}


/* ============================================================
   2026-08-08 本人CSV出力：iPhone/Safari対応
   ============================================================ */
#btnPersonalCsv {
  position: relative !important;
  z-index: 2 !important;
  pointer-events: auto !important;
  touch-action: manipulation !important;
  -webkit-tap-highlight-color: rgba(0,0,0,0.06);
}
.personal-csv-dialog {
  position: fixed;
  inset: 0;
  z-index: 5000;
  display: none;
  align-items: flex-end;
  justify-content: center;
  padding: 16px;
  padding-bottom: max(16px, env(safe-area-inset-bottom));
  background: rgba(30,29,27,.34);
}
.personal-csv-dialog.is-open { display: flex; }
body.csv-dialog-open { overflow: hidden; }
.personal-csv-dialog-card {
  width: min(520px, 100%);
  box-sizing: border-box;
  border: 1px solid #e3dfd8;
  border-radius: 20px;
  background: #fff;
  padding: 20px;
  box-shadow: 0 18px 50px rgba(0,0,0,.18);
}
.personal-csv-dialog-card h3 {
  margin: 0 0 8px;
  color: #37352f;
  font-size: 20px;
}
.personal-csv-dialog-note {
  margin: 0 0 16px;
  color: #6b6862;
  font-size: 13px;
  line-height: 1.65;
}
.personal-csv-label {
  display: block;
  margin-bottom: 7px;
  color: #37352f;
  font-size: 13px;
  font-weight: 800;
}
.personal-csv-input {
  width: 100%;
  min-height: 50px;
  box-sizing: border-box;
  border: 1px solid #cbc7c0;
  border-radius: 12px;
  background: #fbfbfa;
  padding: 10px 12px;
  color: #25231f;
  font-size: 16px;
  outline: none;
}
.personal-csv-input:focus { border-color: #9a6b2f; box-shadow: 0 0 0 3px rgba(154,107,47,.12); }
.personal-csv-actions, .personal-csv-ready {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-top: 16px;
}
.personal-csv-primary, .personal-csv-download-link, .personal-csv-secondary {
  min-height: 50px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  padding: 12px 14px;
  font: inherit;
  font-weight: 800;
  text-decoration: none;
  touch-action: manipulation;
}
.personal-csv-primary, .personal-csv-download-link {
  border: 1px solid #bbdfc5;
  background: #eef8ef;
  color: #166534;
}
.personal-csv-primary:disabled { opacity: .55; }
.personal-csv-secondary {
  border: 1px solid #d8d5cf;
  background: #fff;
  color: #55534e;
}
.personal-csv-ready p {
  margin: 0 0 2px;
  color: #166534;
  font-size: 14px;
  line-height: 1.6;
  font-weight: 800;
}
@media (min-width: 700px) {
  .personal-csv-dialog { align-items: center; }
}

/* ============================================================
   2026-08-28 v5 スマホUX改善
   ・一般職員の保存ボタンをスマホでも1列中央配置
   ・予定行に残っていた編集可能ドットを除去
   ・予定/当直・出勤希望の境界を点線から通常罫線へ
   ・日付セル内の勤務記号サイズを統一
   ============================================================ */

/* 旧UIの「タップ可能」ドット/オーバーレイを完全に無効化 */
#screen-shift .staff-plan-row .shift-cell.editable::after {
  content: none !important;
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: 0 !important;
}

/* 上段と下段の境界に残っていた点線を通常の罫線へ */
#screen-shift .staff-plan-row .shift-cell {
  border-bottom-style: solid !important;
}
#screen-shift .staff-duty-row .td-tanto {
  border-top-style: solid !important;
}

/* 勤務表マス内の文字・記号を同じ基準サイズへ */
#screen-shift .staff-plan-row .shift-cell,
#screen-shift .staff-duty-row .duty-cell {
  font-size: 14px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  text-align: center !important;
  vertical-align: middle !important;
}

/* 長い勤務記号だけはセルからはみ出さない範囲で自動調整 */
#screen-shift .staff-plan-row .shift-cell[data-val="A午後休"],
#screen-shift .staff-plan-row .shift-cell[data-val="早出午後休"] {
  font-size: 11px !important;
}

@media (max-width: 760px) {
  /* 旧2ボタン時代の2列レイアウトを解除。保存1個を中央へ */
  #screen-shift .save-bar.is-staff {
    display: grid !important;
    grid-template-columns: minmax(0, 480px) !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 8px !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  #screen-shift .save-bar.is-staff .save-hint,
  #screen-shift .save-bar.is-staff .btn-save {
    grid-column: 1 !important;
    width: 100% !important;
    max-width: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* iPhoneでも○ / × / 出 / 当 / Y / OA等の見た目を揃える */
  #screen-shift .staff-plan-row .shift-cell,
  #screen-shift .staff-duty-row .duty-cell {
    font-size: 14px !important;
  }

  #screen-shift .staff-plan-row .shift-cell[data-val="A午後休"],
  #screen-shift .staff-plan-row .shift-cell[data-val="早出午後休"] {
    font-size: 10px !important;
  }
}


/* ============================================================
   2026-08-28 v9 担当者UX：日付行だけ自然に追従
   ============================================================ */
/* 表はページと一緒に自然に上下スクロール。横スクロールだけ従来どおり残す。 */
#screen-shift .admin-sheet-scroll {
  max-height: none !important;
  overflow-x: auto !important;
  overflow-y: visible !important;
  overscroll-behavior: auto !important;
}

/* v7の表内stickyを解除。追従ヘッダーはJSで複製した1行だけを表示する。 */
#screen-shift .admin-shift-table thead th {
  top: auto !important;
}

.admin-date-header-lock {
  position: fixed;
  z-index: 96;
  display: none;
  overflow: hidden;
  pointer-events: none;
  background: #fff;
  box-shadow: 0 2px 8px rgba(15, 15, 15, 0.10);
}
.admin-date-header-lock.is-visible {
  display: block;
}
.admin-date-header-lock-scroll {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.admin-date-header-lock-table {
  margin: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.admin-date-header-lock-table tbody {
  display: none !important;
}
.admin-date-header-lock-table thead th {
  top: 0 !important;
}

/* 新しい担当者勤務区分は記号1文字で見やすくする。 */
.shift-cell[data-val="特休"],
.shift-cell[data-val="産休"],
.shift-cell[data-val="育休"] {
  background: #f8edf1;
  color: #7d3f55;
  border-color: #ead3dc;
}
.shift-cell[data-val="研修"] {
  background: #eef2f6;
  color: #46566a;
  border-color: #d7dfe8;
}
/* 担当者表は従来どおり勤務種別による塗り分けを抑え、当直希望色を優先。 */
.admin-shift-table .shift-cell[data-val="特休"],
.admin-shift-table .shift-cell[data-val="産休"],
.admin-shift-table .shift-cell[data-val="育休"],
.admin-shift-table .shift-cell[data-val="研修"] {
  background: #ffffff !important;
  color: #37352f !important;
  border-color: var(--border) !important;
}


/* ============================================================
   2026-08-28 v8 担当者勤務選択：PCは3列化して高さを抑える
   ============================================================ */
@media (min-width: 521px) {
  .shift-popup-backdrop {
    align-items: center;
  }

  .shift-popup {
    max-width: 660px;
    max-height: calc(100vh - 28px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .shift-popup-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
    padding: 10px 12px;
  }

  .shift-choice {
    min-height: 66px;
    padding: 9px 10px;
    font-size: 13px;
    line-height: 1.25;
  }

  .shift-choice small {
    font-size: 10px;
    line-height: 1.3;
    margin-top: 2px;
  }

  .shift-popup-head {
    padding: 12px 16px 8px;
  }

  .shift-popup-close {
    margin-bottom: 10px;
    padding: 10px 12px;
  }
}

/* スマホはタップしやすさ優先で2列を維持 */
@media (max-width: 520px) {
  .shift-popup {
    max-height: calc(100dvh - 20px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .shift-popup-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}


/* ============================================================
   2026-08-28 v9 表記統一・担当者日付行ロック修正
   ・担当者選択肢の補足は 0日 / 0.5日 / 1日 に統一
   ・表内の縦スクロールを廃止し、日付ヘッダー1行だけを自然に追従
   ============================================================ */

/* 2026-08-28 v10 担当者画面: 入力状況カードを2列に整理 */
.summary-cards.summary-cards-two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}


/* ============================================================
   2026-08-28 v15 当直・出勤○カードのバランス改善
   ・一般職員の当直/出勤○ポップアップだけ2列×2段
   ・4カードを同じ高さ・同じ幅で揃える
   ============================================================ */
.shift-popup-grid.is-duty-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  max-width: 620px;
  width: 100%;
  margin: 0 auto;
}
.shift-popup-grid.is-duty-grid .shift-choice {
  min-height: 92px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
@media (max-width: 520px) {
  .shift-popup-grid.is-duty-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    max-width: none;
  }
  .shift-popup-grid.is-duty-grid .shift-choice {
    min-height: 86px;
  }
}

/* ============================================================
   2026-08-28 v17 入力者・担当者：名前＋担当列を左固定
   ・横スクロールしても「名前」「担当」を常に左側へ残す
   ・日付追従ヘッダー側も同じ左固定を維持
   ============================================================ */
#screen-shift:not(.fit-view) .sheet-scroll {
  position: relative !important;
}

#screen-shift:not(.fit-view) .fit-table-stage {
  overflow: visible !important;
}

/* 本表：名前列 */
#screen-shift:not(.fit-view) .shift-table th.th-name,
#screen-shift:not(.fit-view) .shift-table td.td-name,
#screen-shift:not(.fit-view) .shift-table td.count-label {
  position: sticky !important;
  left: 0 !important;
  z-index: 82 !important;
  background-clip: padding-box !important;
  box-shadow: 7px 0 12px rgba(15, 23, 42, 0.08) !important;
}

/* 本表：担当列 */
#screen-shift:not(.fit-view) .shift-table th.th-tanto,
#screen-shift:not(.fit-view) .shift-table td.td-tanto,
#screen-shift:not(.fit-view) .shift-table td.count-tanto-cell {
  position: sticky !important;
  left: var(--name-col-width) !important;
  z-index: 81 !important;
  background-clip: padding-box !important;
}

/* 日付ロックとの交差部分は最前面へ */
#screen-shift:not(.fit-view) .shift-table thead th.th-name {
  z-index: 102 !important;
}
#screen-shift:not(.fit-view) .shift-table thead th.th-tanto {
  z-index: 101 !important;
}

/* JSで複製している日付固定行でも左2列を固定 */
.admin-date-header-lock-table th.th-name {
  position: sticky !important;
  left: 0 !important;
  z-index: 104 !important;
  background: #fff !important;
  box-shadow: 7px 0 12px rgba(15, 23, 42, 0.08) !important;
}
.admin-date-header-lock-table th.th-tanto {
  position: sticky !important;
  left: var(--name-col-width) !important;
  z-index: 103 !important;
  background: #fff !important;
}

@media (max-width: 768px) {
  .admin-date-header-lock-table th.th-tanto {
    left: var(--name-col-width) !important;
  }
}




/* ============================================================
   2026-08-29 v18 名前＋担当ロック修正
   ・stickyを阻害していたtable側overflowを解除
   ・横スクロール元を.sheet-scrollへ一本化
   ============================================================ */
#screen-shift:not(.fit-view) #tableWrap.table-scroll-wrap {
  overflow-x: visible !important;
  overflow-y: visible !important;
}
#screen-shift:not(.fit-view) .sheet-scroll {
  overflow-x: auto !important;
  overflow-y: visible !important;
  position: relative !important;
  isolation: isolate;
}
#screen-shift:not(.fit-view) .fit-table-stage,
#screen-shift:not(.fit-view) .shift-table {
  overflow: visible !important;
}
#screen-shift:not(.fit-view) .shift-table th.th-name,
#screen-shift:not(.fit-view) .shift-table td.td-name,
#screen-shift:not(.fit-view) .shift-table td.count-label {
  position: sticky !important;
  left: 0 !important;
  z-index: 120 !important;
}
#screen-shift:not(.fit-view) .shift-table th.th-tanto,
#screen-shift:not(.fit-view) .shift-table td.td-tanto,
#screen-shift:not(.fit-view) .shift-table td.count-tanto-cell {
  position: sticky !important;
  left: var(--name-col-width) !important;
  z-index: 119 !important;
}
#screen-shift:not(.fit-view) .shift-table thead th.th-name {
  z-index: 142 !important;
}
#screen-shift:not(.fit-view) .shift-table thead th.th-tanto {
  z-index: 141 !important;
}



/* ============================================================
   2026-08-29 v19 右端の集計・メモ固定を解除
   ・スマホで日付欄を狭めない
   ・左の名前＋担当固定、日付行固定は維持
   ============================================================ */
#screen-shift .shift-table th.th-stat,
#screen-shift .shift-table th.th-stat-daywork,
#screen-shift .shift-table th.th-stat-duty,
#screen-shift .shift-table th.th-stat-holiday,
#screen-shift .shift-table th.th-stat-paid,
#screen-shift .shift-table th.th-stat-other,
#screen-shift .shift-table th.th-memo,
#screen-shift .shift-table td.stat-cell,
#screen-shift .shift-table td.stat-daywork,
#screen-shift .shift-table td.stat-duty,
#screen-shift .shift-table td.stat-holiday,
#screen-shift .shift-table td.stat-paid,
#screen-shift .shift-table td.stat-other,
#screen-shift .shift-table td.memo-cell,
#screen-shift .shift-table td.count-memo {
  position: static !important;
  left: auto !important;
  right: auto !important;
  z-index: auto !important;
  box-shadow: none !important;
}