@charset "UTF-8";
/* =========================================================
   カームガーデン勤怠管理システム
   Base: モバイルファースト / 白 × グリーン
   ========================================================= */

/* ---------- カスタムプロパティ ---------- */
:root{
  --green-900:#1f4d3a;
  --green-700:#2e7d54;
  --green-500:#4aa578;
  --green-300:#8fcbac;
  --green-100:#e3f2e9;
  --green-050:#f2f9f5;

  --accent:#f2a65a;
  --accent-dark:#d9863a;
  --danger:#c9553d;
  --danger-050:#fdf1ee;

  --text:#33403a;
  --text-light:#6b7a72;
  --white:#ffffff;
  --bg:#f5f8f6;
  --border:#dfe9e3;

  --radius:14px;
  --radius-lg:22px;
  --shadow:0 4px 18px rgba(46,125,84,.08);
  --shadow-lg:0 10px 30px rgba(46,125,84,.14);

  --header-h:56px;
  --container:880px;

  --font:"Noto Sans JP",-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
  --font-num:"Helvetica Neue",Arial,"Noto Sans JP",sans-serif;
}

/* ---------- リセット ---------- */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  font-family:var(--font);
  font-size:15px;
  line-height:1.7;
  color:var(--text);
  background:var(--bg);
  /* iOS ホームバー / ノッチ対応 */
  padding-bottom:calc(28px + env(safe-area-inset-bottom));
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,p,ul,ol,figure{margin:0;}
ul,ol{list-style:none;padding:0;}
a{color:inherit;text-decoration:none;}
img{max-width:100%;height:auto;display:block;}
button{font-family:inherit;font-size:inherit;color:inherit;cursor:pointer;}
table{border-collapse:collapse;width:100%;}

/* ---------- レイアウト ---------- */
.container{
  width:100%;
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:16px;
}
.page{padding-block:20px 32px;}
.stack > * + *{margin-top:16px;}

/* =========================================================
   ヘッダー
   ========================================================= */
.appbar{
  position:sticky;top:0;z-index:50;
  background:var(--green-700);
  color:var(--white);
  padding-top:env(safe-area-inset-top);
  box-shadow:0 2px 10px rgba(31,77,58,.18);
}
.appbar__inner{
  height:var(--header-h);
  display:flex;align-items:center;gap:10px;
  max-width:var(--container);margin-inline:auto;padding-inline:16px;
}
.appbar__logo{width:30px;height:30px;border-radius:50%;background:var(--white);flex:none;object-fit:contain;padding:2px;}
.appbar__title{font-size:15px;font-weight:700;letter-spacing:.02em;line-height:1.25;}
.appbar__title small{display:block;font-size:11px;font-weight:400;opacity:.8;letter-spacing:.04em;}
.appbar__clock{
  margin-left:auto;text-align:right;font-family:var(--font-num);
  font-variant-numeric:tabular-nums;line-height:1.2;
}
.appbar__time{display:block;font-size:20px;font-weight:700;letter-spacing:.02em;}
.appbar__date{display:block;font-size:11px;opacity:.85;}

/* =========================================================
   カード / セクション
   ========================================================= */
.card{
  background:var(--white);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow);
  padding:18px 16px;
}
.card--flat{box-shadow:none;}
.card__head{display:flex;align-items:center;gap:8px;margin-bottom:14px;}
.step{
  flex:none;width:24px;height:24px;border-radius:50%;
  background:var(--green-700);color:var(--white);
  font-size:13px;font-weight:700;
  display:grid;place-items:center;
}
.card__title{font-size:15px;font-weight:700;letter-spacing:.02em;}
.card__note{font-size:12px;color:var(--text-light);margin-top:10px;line-height:1.6;}

.section-title{
  font-size:13px;font-weight:700;letter-spacing:.08em;
  color:var(--text-light);margin-bottom:10px;
}

/* =========================================================
   施設選択（大きめタップターゲット）
   ========================================================= */
.choice-grid{display:grid;grid-template-columns:1fr;gap:10px;}
.choice{
  position:relative;
  display:flex;align-items:center;gap:12px;
  min-height:60px;
  padding:12px 14px;
  border:2px solid var(--border);
  border-radius:var(--radius);
  background:var(--white);
  text-align:left;
  transition:border-color .15s,background-color .15s,transform .1s;
}
.choice:active{transform:scale(.985);}
.choice__mark{
  flex:none;width:36px;height:36px;border-radius:10px;
  background:var(--green-100);color:var(--green-700);
  font-size:15px;font-weight:700;
  display:grid;place-items:center;
  transition:background-color .15s,color .15s;
}
.choice__body{min-width:0;}
.choice__name{display:block;font-size:15px;font-weight:700;line-height:1.4;}
.choice__sub{display:block;font-size:11px;color:var(--text-light);}
.choice__check{
  margin-left:auto;flex:none;
  width:22px;height:22px;border-radius:50%;
  border:2px solid var(--border);
  display:grid;place-items:center;
  font-size:12px;color:transparent;
}
.choice[aria-pressed="true"]{border-color:var(--green-500);background:var(--green-050);}
.choice[aria-pressed="true"] .choice__mark{background:var(--green-700);color:var(--white);}
.choice[aria-pressed="true"] .choice__check{border-color:var(--green-700);background:var(--green-700);color:var(--white);}

/* 氏名：2列グリッド */
.name-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;}
.name-chip{
  min-height:48px;padding:8px 10px;
  border:2px solid var(--border);border-radius:var(--radius);
  background:var(--white);
  font-size:14px;font-weight:500;letter-spacing:.02em;
  transition:border-color .15s,background-color .15s,color .15s,transform .1s;
}
.name-chip:active{transform:scale(.97);}
.name-chip[aria-pressed="true"]{border-color:var(--green-700);background:var(--green-700);color:var(--white);font-weight:700;}
.name-grid__empty{
  grid-column:1/-1;
  padding:18px 10px;text-align:center;
  font-size:13px;color:var(--text-light);
  background:var(--green-050);border-radius:var(--radius);
}

/* =========================================================
   打刻ボタン
   ========================================================= */
.punch{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.punch__btn{
  min-height:96px;
  border:none;border-radius:var(--radius-lg);
  color:var(--white);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  font-weight:700;letter-spacing:.06em;
  box-shadow:var(--shadow-lg);
  transition:transform .1s,filter .15s;
}
.punch__btn:active{transform:translateY(2px);filter:brightness(.95);}
.punch__btn:disabled{opacity:.35;box-shadow:none;cursor:not-allowed;transform:none;filter:none;}
.punch__btn .ico{font-size:22px;line-height:1;}
.punch__btn .label{font-size:19px;}
.punch__btn .en{font-size:10px;font-weight:400;opacity:.85;letter-spacing:.12em;}
.punch__btn--in{background:linear-gradient(160deg,var(--green-500),var(--green-700));}
.punch__btn--out{background:linear-gradient(160deg,#e8a763,var(--accent-dark));}

/* 選択中サマリー */
.selection{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  padding:12px 14px;
  background:var(--green-050);
  border:1px dashed var(--green-300);
  border-radius:var(--radius);
  font-size:13px;
}
.selection__label{color:var(--text-light);font-size:12px;}
.selection__value{font-weight:700;}
.selection__value--empty{color:var(--text-light);font-weight:400;}
.selection__sep{color:var(--green-300);}

/* 勤務状態バッジ */
.badge{
  display:inline-flex;align-items:center;gap:5px;
  padding:3px 10px;border-radius:999px;
  font-size:11px;font-weight:700;letter-spacing:.04em;white-space:nowrap;
}
.badge::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;}
.badge--working{background:var(--green-100);color:var(--green-700);}
.badge--off{background:#eef1ef;color:var(--text-light);}
.badge--warn{background:var(--danger-050);color:var(--danger);}
.badge--sync{background:#eef4ff;color:#3a5a9b;}
.badge--sync::before{animation:blink 1s ease-in-out infinite;}
@keyframes blink{0%,100%{opacity:1;}50%{opacity:.25;}}

/* 他端末の確認に失敗したときの注意書き */
.sync-note{
  margin-top:12px;padding:10px 12px;
  background:var(--danger-050);
  border:1px solid #efc9bf;border-radius:var(--radius);
  font-size:12px;line-height:1.7;color:#8a3d2a;
}
.sync-note[hidden]{display:none;}

/* =========================================================
   本日の打刻リスト
   ========================================================= */
.log{border-top:1px solid var(--border);}
.log__item{
  display:flex;align-items:center;gap:12px;
  padding:12px 2px;
  border-bottom:1px solid var(--border);
}
.log__no{
  flex:none;width:22px;height:22px;border-radius:50%;
  background:var(--green-100);color:var(--green-700);
  font-size:11px;font-weight:700;display:grid;place-items:center;
}
.log__body{min-width:0;flex:1;}
.log__place{display:block;font-size:13px;font-weight:700;line-height:1.4;}
.log__time{
  display:block;font-size:12px;color:var(--text-light);
  font-family:var(--font-num);font-variant-numeric:tabular-nums;letter-spacing:.02em;
}
.log__hours{
  flex:none;font-family:var(--font-num);font-variant-numeric:tabular-nums;
  font-size:14px;font-weight:700;color:var(--green-700);
}
.log__empty{padding:26px 10px;text-align:center;font-size:13px;color:var(--text-light);}

/* =========================================================
   管理画面：フィルタ
   ========================================================= */
.filters{display:grid;grid-template-columns:1fr;gap:12px;}
.field{display:flex;flex-direction:column;gap:5px;}
.field__label{font-size:12px;font-weight:700;color:var(--text-light);letter-spacing:.04em;}
.field__control{
  width:100%;min-height:46px;
  padding:10px 12px;
  border:1px solid var(--border);border-radius:12px;
  background:var(--white);
  font-family:inherit;font-size:15px;color:var(--text);
  appearance:none;
}
select.field__control{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%236b7a72' d='M6 8 0 0h12z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;background-size:11px;
  padding-right:36px;
}
.field__control:focus{outline:2px solid var(--green-500);outline-offset:1px;}

/* サマリー */
.summary{display:grid;grid-template-columns:repeat(auto-fit,minmax(88px,1fr));gap:8px;}
.summary__item--wide{grid-column:span 2;}
.summary__item{
  background:var(--white);border:1px solid var(--border);border-radius:var(--radius);
  padding:12px 8px;text-align:center;
}
.summary__label{display:block;font-size:11px;color:var(--text-light);letter-spacing:.02em;}
.summary__value{
  display:block;font-family:var(--font-num);font-variant-numeric:tabular-nums;
  font-size:19px;font-weight:700;color:var(--green-700);line-height:1.3;
}
.summary__value small{font-size:11px;font-weight:400;color:var(--text-light);margin-left:2px;}

/* 処遇改善手当の明細 */
.care{
  background:var(--white);border:1px solid var(--border);border-radius:var(--radius);
  overflow:hidden;
}
.care__row{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding:9px 14px;border-bottom:1px solid var(--border);
}
.care__row:last-child{border-bottom:none;}
.care__row--total{background:var(--green-100);font-weight:700;color:var(--green-900);}
.care__name{font-size:13px;}
.care__calc{font-size:11px;color:var(--text-light);margin-left:6px;}
.care__row--total .care__calc{color:var(--green-700);}
.care__amt{
  font-family:var(--font-num);font-variant-numeric:tabular-nums;
  font-size:14px;font-weight:700;white-space:nowrap;
}
.care__row--total .care__amt{font-size:17px;}
.care__none{padding:16px 14px;text-align:center;font-size:12.5px;color:var(--text-light);}

/* 月次の手入力（欠勤・早退） */
.adjust{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;
  margin-top:10px;padding:11px 13px;
  background:var(--white);border:1px dashed var(--green-300);border-radius:var(--radius);
}
.adjust[hidden]{display:none;}
.adjust__label{
  font-size:11px;font-weight:700;letter-spacing:.06em;color:var(--green-700);
  padding:2px 8px;background:var(--green-100);border-radius:999px;
}
.adjust__f{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--text-light);}
.adjust__f input{
  width:58px;min-height:34px;padding:4px 6px;
  border:1px solid var(--border);border-radius:8px;background:var(--white);
  font-family:var(--font-num);font-variant-numeric:tabular-nums;
  font-size:14px;color:var(--text);text-align:center;
  appearance:textfield;-moz-appearance:textfield;
}
.adjust__f input::-webkit-outer-spin-button,
.adjust__f input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
.adjust__f input:focus{outline:2px solid var(--green-500);outline-offset:1px;border-color:var(--green-500);}
.adjust__note{font-size:11px;color:var(--text-light);flex:1 1 100%;}

/* =========================================================
   出勤簿テーブル（横スクロール）
   ========================================================= */
.table-wrap{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  border:1px solid var(--border);
  border-radius:var(--radius);
  background:var(--white);
}
.sheet{min-width:560px;font-size:13px;}
.sheet th,.sheet td{
  padding:9px 10px;
  border-bottom:1px solid var(--border);
  text-align:center;white-space:nowrap;
}
.sheet thead th{
  position:sticky;top:0;z-index:2;
  background:var(--green-100);color:var(--green-900);
  font-size:11px;font-weight:700;letter-spacing:.04em;
}
.sheet td.num,.sheet th.num{
  font-family:var(--font-num);font-variant-numeric:tabular-nums;letter-spacing:.02em;
}
.sheet td.place{text-align:left;max-width:150px;overflow:hidden;text-overflow:ellipsis;}
.sheet .col-date{width:56px;}
.sheet tbody tr:nth-child(even){background:var(--green-050);}
.sheet tr.is-sat td{color:#2f6f9e;}
.sheet tr.is-sun td{color:var(--danger);}
.sheet tr.is-multi td.col-date{color:var(--text-light);}
.sheet tbody td.blank{color:#c6d5cd;}
.sheet tfoot td{
  background:var(--green-100);font-weight:700;color:var(--green-900);
  border-bottom:none;
}
.table-hint{font-size:11px;color:var(--text-light);margin-top:8px;}

/* 休憩の手入力 */
.brk{
  width:56px;
  padding:4px 2px;
  border:1px solid var(--border);border-radius:7px;
  background:var(--white);
  font-family:var(--font-num);font-variant-numeric:tabular-nums;
  font-size:13px;color:var(--text);text-align:center;
  appearance:textfield;-moz-appearance:textfield;
}
.brk::-webkit-outer-spin-button,
.brk::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
.brk:focus{outline:2px solid var(--green-500);outline-offset:1px;border-color:var(--green-500);}

/* 夜勤タグ */
.tag{
  display:inline-block;margin-left:6px;
  padding:1px 6px;border-radius:5px;
  font-size:10px;font-weight:700;letter-spacing:.04em;
  vertical-align:1px;white-space:nowrap;
}
.tag--night{background:#31406b;color:#fff;}
.tag--paid{background:var(--accent-dark);color:#fff;margin-left:0;}

/* 区分（有給）の選択欄 */
.kbn{
  width:82px;padding:4px 6px;
  border:1px solid var(--border);border-radius:7px;
  background:var(--white);
  font-family:inherit;font-size:12px;color:var(--text-light);
  appearance:none;text-align:center;text-align-last:center;
}
.kbn:focus{outline:2px solid var(--green-500);outline-offset:1px;border-color:var(--green-500);}
.sheet tr.is-paid td{background:#fff6ea;}
.sheet tr.is-paid .kbn{border-color:var(--accent-dark);color:var(--accent-dark);font-weight:700;}

.log__hours--live{color:var(--accent-dark);font-size:12px;}

/* 全職員一覧で、その月に勤務のない職員 */
.sheet tr.is-zero td{color:var(--text-light);}

/* 全職員一覧は列が多いので、狭い画面では横スクロールさせる */
body.mode-all #sheet-card .sheet{min-width:700px;}
body.mode-all #sheet-card .sheet td.place{max-width:none;white-space:nowrap;}
@media (min-width:980px){ body.mode-all #sheet-card .sheet{min-width:0;} }

/* 印刷専用ブロック（全職員PDF） */
.print-only{display:none;}

/* =========================================================
   勤務の修正
   ========================================================= */
.row-edit{
  display:inline-flex;align-items:center;gap:5px;
  max-width:100%;padding:3px 8px 3px 6px;
  border:1px solid transparent;border-radius:8px;
  background:transparent;
  font-size:13px;color:inherit;text-align:left;
  transition:background-color .15s,border-color .15s;
}
.row-edit:hover,.row-edit:focus-visible{background:var(--green-050);border-color:var(--green-300);}
.row-edit__ico{flex:none;font-size:11px;color:var(--green-500);}

.day-tools{display:inline-flex;align-items:center;gap:6px;}
.row-add{
  padding:4px 8px;
  border:1px dashed var(--border);border-radius:7px;
  background:transparent;
  font-size:11px;font-weight:700;color:var(--text-light);white-space:nowrap;
}
.row-add:hover,.row-add:focus-visible{border-color:var(--green-500);color:var(--green-700);background:var(--green-050);}

.editor{
  position:fixed;inset:0;z-index:90;
  display:flex;align-items:flex-end;justify-content:center;
  padding:0;
  background:rgba(31,77,58,.45);
}
.editor[hidden]{display:none;}
.editor__box{
  width:100%;max-width:420px;
  max-height:92vh;overflow-y:auto;
  padding:22px 18px calc(20px + env(safe-area-inset-bottom));
  background:var(--white);
  border-radius:var(--radius-lg) var(--radius-lg) 0 0;
  box-shadow:var(--shadow-lg);
}
.editor__title{font-size:16px;font-weight:700;letter-spacing:.02em;}
.editor__day{
  margin-top:4px;margin-bottom:16px;
  font-size:13px;color:var(--text-light);
}
.editor__sw{margin:12px 0 4px;font-size:13px;}

.ed-field{display:flex;flex-direction:column;gap:5px;margin-bottom:12px;}
.ed-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.ed-work{
  min-height:46px;display:flex;align-items:center;
  font-family:var(--font-num);font-variant-numeric:tabular-nums;
  font-size:19px;font-weight:700;color:var(--green-700);
}
.ed-msg{
  min-height:18px;margin-bottom:6px;
  font-size:12px;font-weight:700;color:var(--danger);line-height:1.6;
}
.ed-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.ed-delete{
  display:block;width:100%;margin-top:14px;
  border:none;background:transparent;
  font-size:12.5px;color:var(--danger);text-decoration:underline;
}

@media (min-width:600px){
  .editor{align-items:center;padding:24px;}
  .editor__box{border-radius:var(--radius-lg);padding-bottom:22px;}
}

@media print{
  .editor{display:none !important;}
}

/* =========================================================
   職員マスタ管理
   ========================================================= */
.staff-card{
  background:var(--white);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:14px;
  margin-bottom:10px;
}
.staff-card.is-retired{background:#f7f8f7;border-style:dashed;opacity:.75;}
.staff-card__row{display:flex;gap:8px;margin-bottom:8px;}
.staff-card__row input{
  min-height:44px;padding:9px 12px;
  border:1px solid var(--border);border-radius:10px;
  background:var(--white);
  font-family:inherit;font-size:15px;color:var(--text);
  min-width:0;
}
.staff-card__row input:focus{outline:2px solid var(--green-500);outline-offset:1px;border-color:var(--green-500);}
.staff-name{flex:1 1 auto;font-weight:700;}
.staff-code,.staff-kana{
  flex:0 0 118px;font-size:13px !important;
  font-family:var(--font-num);color:var(--text-light) !important;
}
.staff-kana{flex:1 1 auto;}

.staff-card__facs{
  display:flex;flex-wrap:wrap;align-items:center;gap:6px;
  padding-top:8px;border-top:1px solid var(--border);
}
.staff-card__label{font-size:11px;font-weight:700;color:var(--text-light);margin-right:2px;}
.fac-all{
  display:inline-flex;align-items:center;gap:4px;
  font-size:12px;color:var(--text-light);margin-right:4px;
}
.fac-all input{width:16px;height:16px;accent-color:var(--green-700);}
.fac-chip{
  min-height:32px;padding:5px 12px;
  border:1.5px solid var(--border);border-radius:999px;
  background:var(--white);
  font-size:12.5px;font-weight:700;color:var(--text-light);
  transition:background-color .15s,border-color .15s,color .15s;
}
.fac-chip[aria-pressed="true"]{background:var(--green-700);border-color:var(--green-700);color:var(--white);}
.fac-chip:disabled{opacity:.45;cursor:not-allowed;}

.staff-card__toggles{
  display:flex;flex-wrap:wrap;gap:14px;
  margin-top:10px;padding-top:9px;border-top:1px solid var(--border);
}
.sw{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--text-light);}
/* チェックボックスだけに当てる（金額の入力欄まで18pxに潰さないため） */
.sw input[type="checkbox"]{width:18px;height:18px;accent-color:var(--green-700);}
.sw input[type="checkbox"]:checked + span{color:var(--green-700);font-weight:700;}

/* 交通費の区分 */
.sw--commute{gap:8px;flex:1 1 100%;margin-top:2px;}
.sw__label{font-size:12.5px;font-weight:700;color:var(--text-light);white-space:nowrap;}
.commute{
  flex:1 1 auto;min-width:0;min-height:36px;
  padding:6px 10px;
  border:1px solid var(--border);border-radius:9px;
  background:var(--white);
  font-family:inherit;font-size:12.5px;color:var(--text);
}
.commute:focus{outline:2px solid var(--green-500);outline-offset:1px;border-color:var(--green-500);}
.care-mode{
  flex:0 0 auto;min-height:36px;padding:6px 10px;
  border:1px solid var(--border);border-radius:9px;background:var(--white);
  font-family:inherit;font-size:12.5px;color:var(--text);
}
.care-mode:focus{outline:2px solid var(--green-500);outline-offset:1px;border-color:var(--green-500);}
.sw__unit{font-size:12px;color:var(--text-light);}
.sw__hint{flex:1 1 100%;font-size:10.5px;color:var(--text-light);opacity:.85;padding-left:2px;}

.care-fields{
  flex:1 1 100%;display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px;
  margin-top:6px;padding:10px;background:var(--green-050);border-radius:10px;
}
.care-f{display:flex;flex-wrap:wrap;align-items:center;gap:5px;font-size:12px;color:var(--text-light);}
.care-f__l{flex:0 0 62px;font-weight:700;}
.care-f__u{font-size:11px;}
.care-f__h{flex:1 1 100%;font-size:10.5px;color:var(--text-light);opacity:.85;}
.care-n{
  width:92px;flex:0 0 auto;min-height:32px;padding:4px 6px;
  border:1px solid var(--border);border-radius:8px;background:var(--white);
  font-family:var(--font-num);font-variant-numeric:tabular-nums;
  font-size:13px;color:var(--text);text-align:right;
  appearance:textfield;-moz-appearance:textfield;
}
.care-n::-webkit-outer-spin-button,.care-n::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
.care-n:focus{outline:2px solid var(--green-500);outline-offset:1px;border-color:var(--green-500);}

.bulk{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;
  margin-top:12px;padding:11px 13px;
  background:var(--green-050);border:1px dashed var(--green-300);border-radius:var(--radius);
}
.bulk__label{
  font-size:11px;font-weight:700;letter-spacing:.06em;color:var(--green-700);
  padding:2px 8px;background:var(--green-100);border-radius:999px;
}
.bulk__f{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--text-light);}
.bulk__f input{
  width:86px;min-height:34px;padding:4px 8px;
  border:1px solid var(--border);border-radius:8px;background:var(--white);
  font-family:var(--font-num);font-variant-numeric:tabular-nums;
  font-size:14px;color:var(--text);text-align:right;
  appearance:textfield;-moz-appearance:textfield;
}
.bulk__f input::-webkit-outer-spin-button,
.bulk__f input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
.bulk__f input:focus{outline:2px solid var(--green-500);outline-offset:1px;border-color:var(--green-500);}
.bulk__u{font-size:12px;}
.bulk__btn{
  min-height:34px;padding:6px 14px;
  border:1.5px solid var(--green-700);border-radius:999px;
  background:var(--white);color:var(--green-700);
  font-size:12.5px;font-weight:700;
}
.bulk__btn:active{background:var(--green-100);}
.bulk__note{flex:1 1 100%;font-size:11px;color:var(--text-light);}

.staff-empty{
  padding:26px 10px;text-align:center;
  font-size:13px;color:var(--text-light);
  background:var(--white);border:1px solid var(--border);border-radius:var(--radius);
}

@media (min-width:600px){
  .staff-card__row{gap:10px;}
  .staff-code{flex:0 0 140px;}
}

/* =========================================================
   ボタン
   ========================================================= */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:50px;width:100%;
  padding:12px 18px;
  border:2px solid transparent;border-radius:999px;
  font-size:15px;font-weight:700;letter-spacing:.04em;
  transition:filter .15s,transform .1s,background-color .15s;
}
.btn:active{transform:translateY(1px);}
.btn--primary{background:var(--green-700);color:var(--white);box-shadow:var(--shadow);}
.btn--outline{background:var(--white);border-color:var(--green-700);color:var(--green-700);}
.btn--ghost{background:var(--white);border-color:var(--border);color:var(--text-light);}
.btn__ico{font-size:17px;}
.btn-row{display:grid;grid-template-columns:1fr;gap:10px;}

/* =========================================================
   トースト（打刻完了の通知）
   ========================================================= */
.toast{
  position:fixed;left:50%;
  bottom:calc(env(safe-area-inset-bottom) + 20px);
  transform:translate(-50%,16px);
  z-index:80;
  width:calc(100% - 32px);max-width:400px;
  display:flex;align-items:center;gap:10px;
  padding:14px 16px;
  background:var(--green-900);color:var(--white);
  border-radius:var(--radius);
  box-shadow:var(--shadow-lg);
  font-size:14px;font-weight:500;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .25s,transform .25s,visibility .25s;
}
.toast.is-visible{opacity:1;visibility:visible;transform:translate(-50%,0);}
.toast__ico{font-size:18px;}
.toast__time{margin-left:auto;font-family:var(--font-num);font-weight:700;}


/* =========================================================
   管理者パスワード（ゲート）
   ========================================================= */
.appbar__logout{
  margin-left:auto;
  display:inline-flex;align-items:center;gap:5px;
  padding:6px 12px;
  border:1px solid rgba(255,255,255,.45);border-radius:999px;
  background:transparent;color:var(--white);
  font-size:12px;font-weight:700;letter-spacing:.04em;white-space:nowrap;
}
.appbar__logout + .appbar__clock{margin-left:10px;}
.appbar__logout:active{background:rgba(255,255,255,.15);}

.gate{
  position:fixed;inset:0;z-index:100;
  display:grid;place-items:center;
  padding:24px calc(20px + env(safe-area-inset-left));
  background:linear-gradient(165deg,var(--green-700),var(--green-900));
}
.gate[hidden]{display:none;}
.gate__box{
  width:100%;max-width:340px;
  padding:30px 22px 24px;
  background:var(--white);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);
  text-align:center;
}
.gate__ico{font-size:30px;line-height:1;}
.gate__title{font-size:17px;font-weight:700;letter-spacing:.04em;margin-top:10px;}
.gate__lead{font-size:12.5px;color:var(--text-light);line-height:1.7;margin-top:8px;}
.gate__form{margin-top:18px;display:grid;gap:10px;}
.gate__input{
  width:100%;min-height:50px;
  padding:12px 16px;
  border:2px solid var(--border);border-radius:12px;
  background:var(--green-050);
  font-family:inherit;font-size:17px;letter-spacing:.18em;text-align:center;
  color:var(--text);
}
.gate__input:focus{outline:none;border-color:var(--green-500);background:var(--white);}
.gate__error{
  min-height:16px;font-size:12px;font-weight:700;color:var(--danger);
}
.gate__cancel{
  margin-top:14px;
  border:none;background:transparent;
  font-size:12.5px;color:var(--text-light);text-decoration:underline;
}

/* 認証が済むまで中身を出さない */
body.is-locked > main{display:none;}
body.is-locked{overflow:hidden;}

.btn-row--single{grid-template-columns:1fr;}
.btn-row__note{
  margin-top:8px;text-align:center;
  font-size:11.5px;color:var(--text-light);
}

/* =========================================================
   お知らせの注記（現在は未使用）
   ========================================================= */
.demo-note{
  display:flex;gap:8px;
  padding:12px 14px;
  background:#fff8ec;border:1px solid #f4dcb4;border-radius:var(--radius);
  font-size:12px;line-height:1.7;color:#7a5a28;
}
.demo-note__ico{flex:none;}
.footer-note{
  margin-top:24px;text-align:center;
  font-size:11px;color:var(--text-light);letter-spacing:.02em;
}
.sr-only{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* =========================================================
   タブレット以上
   ========================================================= */
@media (min-width:600px){
  body{font-size:16px;}
  .name-grid{grid-template-columns:repeat(3,1fr);}

  /* ボタン列は横に伸びきらないよう、幅を抑えて中央に置く
     （--single のほうが後に来るので、1列指定が優先されます） */
  .btn-row{grid-template-columns:1fr 1fr;max-width:640px;margin-inline:auto;}
  .btn-row--single{grid-template-columns:1fr;max-width:380px;}

  .filters{grid-template-columns:1fr 1fr;}
  .filters .field--wide{grid-column:1/-1;}
  .appbar__title{font-size:16px;}
}

@media (min-width:900px){
  .appbar__inner{height:64px;}
  .choice-grid{grid-template-columns:repeat(3,1fr);}
  .choice{flex-direction:column;align-items:flex-start;min-height:96px;}
  .choice__check{position:absolute;top:10px;right:10px;margin:0;}
  .punch__btn{min-height:120px;}
  .punch__btn .label{font-size:22px;}
  .filters{grid-template-columns:repeat(3,1fr);}
  .filters .field--wide{grid-column:auto;}
  .sheet{min-width:0;}
  .toast{bottom:24px;}
}

/* 印刷専用ヘッダー（画面では非表示） */
.print-head{display:none;}

/* =========================================================
   印刷 ＝ PDF出力（ブラウザの「PDFとして保存」）
   ========================================================= */
@media print{
  @page{size:A4 portrait;margin:9mm 9mm;}

  .appbar,.gate,.toast,.btn-row,.demo-note,.footer-note,
  .card__head,.section-title,.table-hint,
  .card:first-of-type{display:none !important;}

  body{background:#fff;padding:0;font-size:10.5pt;color:#000;}
  .page{padding:0;}
  .container{max-width:none;padding:0;}
  .stack > * + *{margin-top:3mm;}

  .print-only{display:block;}
  #care-section{break-inside:avoid;}
  .care{border:1px solid #999;}
  .care__row--total{background:#eef4f0 !important;-webkit-print-color-adjust:exact;print-color-adjust:exact;}
  .care__row{border-bottom:1px solid #ccc;padding:0.4mm 1.5mm;font-size:8pt;line-height:1.2;}
  .care__name{font-size:8pt;}
  .care__calc{font-size:7pt;}
  #care-section{break-inside:avoid;margin-top:2mm;}
  .print-sheet{page-break-after:always;break-after:page;break-inside:avoid;}
  .print-sheet:last-child{page-break-after:auto;break-after:auto;}
  .print-sheet + .print-sheet{padding-top:0;}

  /* 全職員モードでは、画面用の一覧ではなく職員ごとの明細を印刷する */
  /* 処遇改善明細は、印刷では明細表のうしろ（#print-all）に出す */
  #care-section{display:none !important;}

  body.mode-all #summary-section,
  body.mode-all #care-section,
  body.mode-all #sheet-card,
  body.mode-all > main > .container > .print-head{display:none !important;}

  .print-head{display:block;text-align:center;margin-bottom:3mm;}
  .print-head--each{margin-bottom:2.5mm;}
  .print-head h2{font-size:13pt;font-weight:700;letter-spacing:.06em;}
  .print-head p{font-size:8.5pt;margin-top:1.2mm;line-height:1.4;}
  .print-name{display:block;font-size:9pt;margin:1.5mm 0;text-align:left;}

  /* 上部の集計表（氏名・出勤日数などを表にしたもの） */
  .print-sum{
    width:100%;border-collapse:collapse;
    font-size:8pt;line-height:1.2;table-layout:fixed;
  }
  .print-sum th,.print-sum td{
    border:1px solid #999;padding:0.6mm 1mm;text-align:center;
  }
  .print-sum th{
    background:#e8f0ea !important;font-weight:700;
    -webkit-print-color-adjust:exact;print-color-adjust:exact;
  }
  .print-sum td{font-size:9pt;font-weight:700;}
  .print-line{font-size:8pt !important;margin-top:1.2mm !important;text-align:left;}

  /* 明細表の合計行にも枠線を出す */
  .sheet{border-collapse:collapse;}
  .sheet tfoot td{border:1px solid #999 !important;}

  .card{border:none;box-shadow:none;padding:0;border-radius:0;}
  #summary-section{display:none !important;}
  .adjust{display:none !important;}

  .table-wrap{border:none;overflow:visible;border-radius:0;}
  .sheet{min-width:0;font-size:8pt;line-height:1.15;}
  .sheet th,.sheet td{border:1px solid #999;padding:0.4mm 1.2mm;line-height:1.15;}
  .sheet thead th{background:#e8f0ea !important;color:#000;-webkit-print-color-adjust:exact;print-color-adjust:exact;}
  .sheet tbody tr:nth-child(even){background:transparent;}
  .sheet tfoot td{background:#e8f0ea !important;color:#000;-webkit-print-color-adjust:exact;print-color-adjust:exact;}
  .sheet tbody td.blank{color:#bbb;}
  .brk{border:none;background:transparent;width:auto;font-size:8pt;line-height:1.15;color:#000;padding:0;height:auto;}
  .kbn{border:none;background:transparent;width:auto;font-size:8pt;line-height:1.15;color:#000;padding:0;height:auto;min-height:0;appearance:none;}
  /* 入力用の部品は印刷に出さない */
  .row-add,.row-add--more,.pl-wrap,.row-edit__ico,.raw-mark{display:none !important;}
  .row-edit{border:none;background:transparent;padding:0;font-size:8pt;line-height:1.15;color:#000;min-height:0;}
  .tag--paid{background:transparent;color:#000;border:1px solid #999;padding:0 3px;}
  .sheet tr.is-paid td{background:transparent;}
  .tag--night{background:transparent;color:#000;border:1px solid #999;padding:0 3px;}
}

/* 買い物回数の施設ごとの内訳（複数施設に所属する職員だけ表示） */
.adjust__fac{
  flex:1 1 100%;
  display:flex;flex-wrap:wrap;align-items:center;gap:10px;
  margin-top:4px;padding:8px 10px;
  background:var(--bg-soft,#f4f7f4);border-radius:8px;
}
.adjust__faclabel{font-size:12px;color:var(--text-light);}
.adjust__facf{
  display:flex;align-items:center;gap:6px;
  font-size:12px;color:var(--text);
}
.adjust__facf input{width:64px;}
#adj-shop[readonly]{background:var(--bg-soft,#f4f7f4);color:var(--text-light);}

/* すでに勤務がある日にもう1件足すための「＋」 */
.row-add--more{
  margin-left:6px;
  padding:3px 8px;
  font-size:12px;line-height:1;
}
.place .row-edit + .row-add--more{vertical-align:middle;}

/* 有給の日に入れる「有給時間」 */
.pl-wrap{display:inline-flex;align-items:center;gap:4px;margin-left:6px;}
.pl-h{
  width:62px;padding:4px 6px;
  border:1px solid var(--border);border-radius:7px;
  font-size:12px;text-align:right;
}
.pl-h:focus{border-color:var(--green-500);outline:none;}
.pl-unit{font-size:11px;color:var(--text-light);}
.pl-print{margin-left:6px;font-size:11px;color:var(--text-light);}

/* 欠勤の日 */
.tag--absent{background:#f5e6e6;color:#8a3b3b;}
tr.is-absent{background:#fdf6f6;}

/* 定時に合わせた打刻の印 */
.raw-mark{
  margin-left:2px;font-size:10px;color:var(--green-700);
  cursor:help;vertical-align:super;
}

/* 全職員PDFの用紙末尾に入れる処遇改善明細・有給残日数 */
.print-foot{display:none;}
@media print{
  .print-foot{
    display:flex;align-items:flex-start;gap:6mm;
    margin-top:2.5mm;break-inside:avoid;
  }
  .print-care{border-collapse:collapse;font-size:8pt;line-height:1.2;}
  .print-care th,.print-care td{border:1px solid #999;padding:0.4mm 1.5mm;}
  .print-care th{
    background:#e8f0ea !important;text-align:center;
    -webkit-print-color-adjust:exact;print-color-adjust:exact;
  }
  .print-care td:first-child{min-width:52mm;}
  .print-care td.num{text-align:right;min-width:22mm;}
  .print-care tr.is-total td{
    background:#eef4f0 !important;font-weight:700;
    -webkit-print-color-adjust:exact;print-color-adjust:exact;
  }
  .print-left{border-collapse:collapse;font-size:8pt;line-height:1.2;}
  .print-left th,.print-left td{
    border:1px solid #999;padding:0.6mm 3mm;text-align:center;min-width:26mm;
  }
  .print-left th{
    background:#e8f0ea !important;
    -webkit-print-color-adjust:exact;print-color-adjust:exact;
  }
}

/* 退勤もれのお知らせ */
.alert{
  border:1.5px solid #e0b48a;border-radius:var(--radius);
  background:#fdf6ec;padding:12px 14px;margin-bottom:14px;
}
.alert[hidden]{display:none;}
.alert__head{font-size:14px;font-weight:700;color:#9a5b12;margin:0 0 8px;}
.alert__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;}
.alert__row{
  width:100%;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;
  padding:8px 10px;text-align:left;
  border:1px solid #ecd6bb;border-radius:9px;background:var(--white);
  font-family:inherit;font-size:13px;color:var(--text);cursor:pointer;
}
.alert__row:hover,.alert__row:focus-visible{border-color:#d79b57;background:#fffaf3;}
.alert__date{font-weight:700;font-variant-numeric:tabular-nums;flex:0 0 auto;}
.alert__name{font-weight:700;flex:0 0 auto;}
.alert__place{color:var(--text-light);font-size:12px;}
.alert__time{margin-left:auto;color:#9a5b12;font-weight:700;font-variant-numeric:tabular-nums;}
.alert__note{font-size:11.5px;color:var(--text-light);margin:8px 0 0;}

/* 退勤が入っていない行 */
tr.is-open td{background:#fdf6ec;}
.tag--open{
  display:inline-block;padding:1px 6px;border-radius:6px;
  background:#f6e3cc;color:#9a5b12;font-size:11px;font-weight:700;
}
@media print{
  .alert{display:none !important;}
  tr.is-open td{background:transparent;}
  .tag--open{background:transparent;color:#000;border:1px solid #999;padding:0 3px;}
}

/* 職員マスタ：出勤時刻（定時）の入力 */
.shift-in{
  flex:1 1 140px;min-width:0;min-height:36px;
  padding:6px 10px;
  border:1px solid var(--border);border-radius:9px;background:var(--white);
  font-family:var(--font-num);font-size:13px;color:var(--text);
}
.shift-in:focus{outline:2px solid var(--green-500);outline-offset:1px;border-color:var(--green-500);}