/* =====================================================================
   飲食店版で追加した画面のスタイル
   色は必ず base.css のトークン経由で使う（直書きするとダークで破綻する）
   ===================================================================== */

/* ---------- 上部のツールバー ---------- */
.bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:14px 0 10px;}
.bar .sp{flex:1;}
.bar .fld{height:36px;padding:0 10px;border:1px solid var(--line2);border-radius:8px;background:var(--card);}
.mp{display:inline-flex;gap:6px;}

/* ---------- まとめカード ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:14px 0;}
.stats .stat{display:flex;align-items:center;gap:12px;background:var(--card);
  border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px;}
.stats .stat .si{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;flex:none;}
.stats .stat small{display:block;font-size:11.5px;color:var(--faint);margin-bottom:2px;}
.stats .stat b{font-size:21px;font-weight:700;line-height:1.15;font-variant-numeric:tabular-nums;}
.stats .stat b small{display:inline;font-size:12px;color:var(--faint);margin-left:2px;font-weight:600;}
.stats .stat i{display:block;font-style:normal;font-size:11px;color:var(--faint);margin-top:3px;}

/* ---------- カード ---------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);margin:14px 0;}
.card.pad,.card .pad{padding:16px;}
.c-head,.ch-head{display:flex;align-items:center;justify-content:space-between;
  padding:14px 16px;border-bottom:1px solid var(--line);gap:10px;}
.ch-head{border:none;padding:0 0 10px;}
.c-head h3,.ch-head h3{margin:0;font-size:13.5px;font-weight:700;}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.grid2 .card{margin:0;}

/* ---------- グラフ ---------- */
.chart{width:100%;height:auto;overflow:visible;}
.chart .axis{stroke:var(--line2);stroke-width:1;}
.chart .goal{stroke:var(--shu);stroke-width:1.2;stroke-dasharray:4 4;opacity:.85;}
.chart .ax{font-size:9px;fill:var(--faint);text-anchor:middle;}
.lg{display:flex;gap:12px;font-size:11px;color:var(--faint);align-items:center;flex-wrap:wrap;}
.lg span{display:inline-flex;align-items:center;gap:5px;}
.lg i{width:9px;height:9px;border-radius:2px;display:inline-block;}
.lg i.ln{width:14px;height:0;border-top:1.5px dashed var(--shu);border-radius:0;}

/* ---------- 店舗別の行 ---------- */
.tw{display:flex;flex-direction:column;align-items:flex-end;gap:2px;}
.fl{font-size:11px;color:var(--faint);}
.fl.bad{color:var(--shu);font-weight:700;}
.late{color:var(--shu);}

/* ---------- 今日のシフト ---------- */
.tdy{padding:10px 0;border-bottom:1px solid var(--line);}
.tdy:last-child{border:none;}
.tdy-h{display:flex;justify-content:space-between;font-size:12.5px;margin-bottom:7px;}
.tdy-h .short{color:var(--shu);font-weight:700;}
.pills{display:flex;flex-wrap:wrap;gap:6px;}
.pill{display:inline-flex;align-items:center;gap:5px;background:var(--surface);
  border:1px solid var(--line);border-radius:99px;padding:3px 10px;font-size:12px;}
.pill small{color:var(--faint);font-size:10.5px;}
.none{font-size:12px;color:var(--faint);}

/* ---------- シフト表 ---------- */
.sh-scroll{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);
  background:var(--card);-webkit-overflow-scrolling:touch;}
.sh-tb{border-collapse:separate;border-spacing:0;font-size:12px;width:max-content;min-width:100%;}
.sh-tb th,.sh-tb td{border-bottom:1px solid var(--line);border-right:1px solid var(--line);
  padding:0;text-align:center;height:30px;}
.sh-tb thead th{position:sticky;top:0;z-index:2;background:var(--surface);
  font-weight:600;font-size:11px;color:var(--muted);min-width:30px;padding:4px 0;height:auto;}
.sh-tb thead th small{display:block;font-size:9px;color:var(--faint);font-weight:400;}
.sh-tb th.nm{position:sticky;left:0;z-index:3;background:var(--card);text-align:left;
  padding:0 10px;min-width:132px;font-weight:600;font-size:12px;}
.sh-tb thead th.nm{z-index:4;background:var(--surface);}
.sh-tb th.nm small{display:block;font-size:10px;color:var(--faint);font-weight:400;}
.sh-tb th.sun,.sh-tb td.sun{background:var(--sun);}
.sh-tb th.sat,.sh-tb td.sat{background:var(--sat);}
.sh-tb th.td{box-shadow:inset 0 -2px 0 var(--accent);}
.sh-tb .cell{cursor:pointer;user-select:none;font-size:11px;font-weight:700;min-width:30px;}
.sh-tb .cell:hover{outline:2px solid var(--accent);outline-offset:-2px;}
.sh-tb .tot{background:var(--surface);font-weight:700;min-width:38px;}
.sh-tb tr.sum td{background:var(--surface);font-weight:700;font-size:11px;}
.sh-tb tr.sum td.short{color:var(--shu);background:var(--sun);}
.sh-tb tr.sum th.nm{background:var(--surface);font-size:11px;}

/* ---------- ペン（塗る内容の選択） ---------- */
.pens{display:flex;flex-wrap:wrap;gap:7px;margin:4px 0 12px;}
.pen{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line2);
  background:var(--card);border-radius:99px;padding:6px 12px;font-size:12px;color:var(--muted);}
.pen i{width:11px;height:11px;border-radius:3px;background:var(--line2);display:inline-block;}
.pen b{font-size:11px;font-weight:700;}
.pen.on{border-color:var(--accent);color:var(--ink);background:var(--accent-soft);
  box-shadow:0 0 0 1px var(--accent-line);}
.pen:hover{border-color:var(--accent-line);}

/* ---------- 表（勤怠・売上） ---------- */
.at-tb{width:100%;border-collapse:collapse;font-size:12.5px;}
.at-tb th{background:var(--surface);color:var(--muted);font-weight:600;font-size:11.5px;
  padding:8px 10px;text-align:left;border-bottom:1px solid var(--line);white-space:nowrap;}
.at-tb td{padding:5px 10px;border-bottom:1px solid var(--line);}
.at-tb tr:last-child td{border-bottom:none;}
.at-tb .dt{white-space:nowrap;font-variant-numeric:tabular-nums;width:52px;}
.at-tb .dt small{color:var(--faint);margin-left:4px;font-size:10.5px;}
.at-tb .dt.sun{color:var(--shu);}
.at-tb .dt.td{font-weight:700;color:var(--accent);}
.at-tb .amt{text-align:right;}
.at-tb tr.fut{opacity:.45;}
.tm{height:30px;border:1px solid var(--line2);border-radius:7px;background:var(--card);
  padding:0 8px;font-size:12.5px;width:104px;color:var(--ink);}
.tm.num{width:82px;text-align:right;font-variant-numeric:tabular-nums;}
.tm.num.wide{width:112px;}
.tm:focus{outline:2px solid var(--accent-line);outline-offset:-1px;}
.dl-tb{min-width:560px;}
.dl-tb .tot{background:var(--surface);font-weight:700;text-align:right;}
.dl-tb th.tot{text-align:left;}

/* ---------- 開閉する行 ---------- */
.acc{border-bottom:1px solid var(--line);}
.acc:last-child{border-bottom:none;}
.acc-h{cursor:pointer;}
.acc-h .cv{color:var(--faint);transition:transform .15s;flex:none;display:grid;place-items:center;}
.acc.open .acc-h .cv{transform:rotate(90deg);}
.acc.open .acc-h{background:var(--surface);}
.acc-b{background:var(--surface);padding:2px 10px 10px;overflow-x:auto;}
.acc-b .at-tb{background:var(--card);border-radius:8px;overflow:hidden;min-width:520px;}

/* ---------- AIカスタマイズ ---------- */
.ai-wrap{display:flex;flex-direction:column;gap:12px;margin-top:14px;}
.ai-log{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:16px;min-height:280px;max-height:52vh;overflow-y:auto;display:flex;
  flex-direction:column;gap:12px;}
.ai-m{display:flex;}
.ai-m.you{justify-content:flex-end;}
.ai-m .bb{max-width:min(560px,86%);padding:11px 14px;border-radius:12px;font-size:13px;line-height:1.7;}
.ai-m.you .bb{background:var(--accent);color:var(--accent-ink);border-bottom-right-radius:3px;}
.ai-m.ai .bb{background:var(--surface);border:1px solid var(--line);border-bottom-left-radius:3px;}
.ai-samples{display:flex;flex-wrap:wrap;gap:7px;}
.samp{border:1px solid var(--line2);background:var(--card);border-radius:99px;
  padding:6px 13px;font-size:12px;color:var(--muted);}
.samp:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-soft);}
.ai-input{display:flex;gap:8px;}
.ai-input input{flex:1;height:42px;border:1px solid var(--line2);border-radius:10px;
  background:var(--card);padding:0 14px;font-size:13.5px;}
.ai-input input:focus{outline:2px solid var(--accent-line);outline-offset:-1px;}
.ai-input .save{height:42px;padding:0 18px;}

/* 変更内容のプレビュー */
.plan{background:var(--card);border:1px solid var(--accent-line);border-radius:10px;
  padding:12px 14px;min-width:min(420px,100%);}
.plan .ph{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--accent);margin-bottom:9px;}
.plan .pt{width:100%;border-collapse:collapse;font-size:12.5px;}
.plan .pt th{text-align:left;color:var(--faint);font-weight:500;padding:3px 12px 3px 0;
  white-space:nowrap;vertical-align:top;width:84px;}
.plan .pt td{padding:3px 0;}
.plan .pf{display:flex;justify-content:flex-end;gap:8px;margin-top:11px;
  padding-top:10px;border-top:1px solid var(--line);}
.plan .save.sm,.plan .ghost.sm{height:30px;padding:0 13px;font-size:12px;border-radius:7px;}
.plan .done{font-size:12px;color:var(--teal);display:inline-flex;align-items:center;gap:5px;}
.mb.one{display:block;}

/* ---------- せまい画面 ---------- */
@media (max-width:900px){
  .stats{grid-template-columns:1fr 1fr;}
  .grid2{grid-template-columns:1fr;}
}
@media (max-width:767px){
  .bar{gap:7px;}
  .bar .fld{height:34px;font-size:12.5px;}
  .stats{gap:8px;}
  .stats .stat{padding:11px 12px;gap:9px;}
  .stats .stat b{font-size:18px;}
  .stats .stat .si{width:30px;height:30px;}
  .sh-tb th.nm{min-width:104px;font-size:11.5px;}
  .ai-log{max-height:none;min-height:220px;padding:12px;}
  .ai-m .bb{max-width:92%;}
  .ai-input .save{padding:0 14px;}
  .pens{gap:6px;}
  .pen{padding:5px 10px;font-size:11.5px;}
}