/* ==============================
   Design Tokens / Reset
   ============================== */
:root{
  --bg:#0f172a; --surface:#111827; --text:#f8fafc; --muted:#94a3b8;
  --border:#1f2937; --input:#0b1220;
  --primary:#3b82f6; --primary-pressed:#2563eb;
  --ring:0 0 0 4px rgba(59,130,246,.20);
  --radius:12px; --card-shadow:0 6px 18px rgba(0,0,0,.35);
  --header-h:56px;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{
  font:16px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial;
  background:var(--bg); color:var(--text);
  -webkit-text-size-adjust:100%; text-rendering:optimizeLegibility;
}
a{ color:var(--primary); text-decoration:none } a:hover{ text-decoration:underline }
img,video{ max-width:100%; height:auto; display:block }
.tabular{ font-variant-numeric: tabular-nums }

/* ==============================
   Layout
   ============================== */
.header{
  position:fixed; inset:0 0 auto 0; z-index:1000;
  display:flex; align-items:center; justify-content:space-between;
  height:var(--header-h); width:100%;
  background:var(--surface); border-bottom:1px solid var(--border);
  padding:0 clamp(12px,2.5vw,16px);
  padding-left:max(16px, env(safe-area-inset-left));
  padding-right:max(16px, env(safe-area-inset-right));
}
.title{ margin:0; font-size:18px; white-space:nowrap }
.nav{ margin-left:auto; display:flex; gap:12px; align-items:center }

.page{ min-height:100svh; width:100%; padding-top:calc(var(--header-h) + 12px) }
.content{ padding:16px clamp(12px,3vw,16px) 24px; max-width:720px; margin-inline:auto }

.grid{ display:grid; gap:16px; grid-template-columns:1fr }
@media (min-width:768px){ .grid{ grid-template-columns:1fr 1fr } }

.row{ display:grid; gap:12px; grid-template-columns:1fr 1fr }
@media (max-width:480px){ .row{ grid-template-columns:1fr } }
[id]{ scroll-margin-top: calc(var(--header-h) + 12px) }

/* ==============================
   Card / Typography
   ============================== */
.card{
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius); padding:16px; box-shadow:var(--card-shadow);
}
.card + .card{ margin-top:16px }
.card-title{ margin:0 0 10px; font-size:18px }
.muted{ color:var(--muted) }
.inline{ display:inline }

/* ==============================
   Buttons
   ============================== */
.btn, .btn-small, .menu-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  background:var(--primary); color:#fff; border:0; cursor:pointer;
  border-radius:12px; font-weight:700; text-align:center;
  transition:transform .03s, box-shadow .15s, background-color .15s;
  box-shadow:0 6px 14px rgba(59,130,246,.28);
  min-height:44px; font-size:16px;
}
.btn{ padding:12px 16px }
.btn-small{ padding:6px 12px; font-size:14px; border-radius:8px; min-height:36px }
.menu-btn{ width:100%; padding:16px; text-decoration:none }
.btn:hover,.menu-btn:hover{ box-shadow:0 10px 20px rgba(59,130,246,.32) }
.btn:active,.menu-btn:active{ background:var(--primary-pressed); transform:translateY(1px) }
.btn[disabled]{ opacity:.6; cursor:not-allowed; box-shadow:none }

/* 横並びナビ */
.menu--nav{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:16px }
.menu--nav .menu-btn{
  flex:0 0 auto; padding:8px 14px; font-size:14px; border-radius:8px;
  background:var(--surface); border:1px solid var(--border); color:var(--text);
  font-weight:600; box-shadow:none;
}
.menu--nav .menu-btn:hover{ background:#1e293b }

/* ==============================
   Tables
   ============================== */
.table{ width:100%; border-collapse:collapse }
.table th,.table td{
  padding:10px 12px; border-bottom:1px solid var(--border);
  text-align:left; vertical-align:middle; font-size:14px; color:#e8edf3;
}
.table th{ background:#0b1220; color:var(--muted) }
.table tr:hover td{ background:#0c1324 }
.table-sticky thead th{
  position:sticky; top:calc(var(--header-h) + 8px);
  z-index:1; background:#0b1220;
}

/* ==============================
   Flash / Alerts
   ============================== */
.flash-success{
  background:#0a2e23; color:#a7f3d0; border:1px solid #065f46;
  padding:10px 12px; border-radius:12px; margin-bottom:10px;
}
.alert{ padding:8px 12px; border-radius:6px; margin:4px 0 }
.alert-ok{ background:#e7f8ef; color:#176b3a; border:1px solid #bfe7cf }
.alert-error{ background:#fdeaea; color:#8a1f1f; border:1px solid #f3c2c2 }

/* ==============================
   Form
   ============================== */
.field{ display:grid; gap:6px }
label{ font-size:14px; color:var(--muted) }
.input, select.input, textarea.input{
  width:100%; height:52px; padding:0 12px;
  border-radius:var(--radius); border:1px solid var(--border);
  background:var(--input); color:var(--text); font-size:16px;
  transition:border-color .15s, box-shadow .15s, background-color .15s;
}
textarea.input{ height:auto; min-height:120px; padding:12px }
.input:focus, select.input:focus, textarea.input:focus{
  outline:none; border-color:#334155; box-shadow:var(--ring);
}
.is-invalid .input, .input.is-invalid{ border-color:#ef4444 }
.checkbox{ display:flex; align-items:center; gap:8px; color:#e5e7eb }
.checkbox input{ width:18px; height:18px }

/* ==============================
   Pills / Badges
   ============================== */
.pill{
  display:inline-block; padding:.35rem .8rem; border-radius:999px;
  font-weight:600; letter-spacing:.02em; border:1px solid transparent;
  background:#2b3440; color:#e7edf4;
}
.pill--open{ background:#123421; border-color:#1e6a3c; color:#d8ffe6 }
.pill--recording{ background:#1c2548; border-color:#485ad0; color:#e4eaff; box-shadow:0 0 0 2px #3848c880 inset }
.pill--closed{ background:#3d2121; border-color:#b54a4a; color:#ffe3e3; box-shadow:0 0 0 2px #c44 inset }

.badge{
  display:inline-block; padding:.25em .6em; border-radius:999px;
  border:1px solid var(--border); background:#0b1220; color:var(--muted);
  font-size:.75rem; line-height:1;
}
.badge--ok{ color:#86efac; border-color:#14532d; background:#062612 }
.badge--warn{ color:#fde68a; border-color:#7c2d12; background:#261407 }
.badge--err{ color:#fecaca; border-color:#7f1d1d; background:#2a0f12 }
.badge-nb{ background:#fff1f0; border-color:#ffa39e; color:#a8071a; font-size:.82em; padding:.06rem .4rem; border-radius:6px; margin-left:.35rem }

/* ==============================
   Car Form (mobile-first)
   ============================== */
.car-form .row{ display:grid; gap:12px; grid-template-columns:1fr }
.car-form .row.row-stack{ grid-template-columns:1fr }
.car-form .stack{ display:flex; gap:8px; flex-wrap:wrap; margin-top:6px }
.car-form .btn{ width:100% }
@media (min-width:860px){
  .car-form .row{ grid-template-columns:1fr auto }
  .car-form .row.row-stack{ grid-template-columns:2fr 1fr 1fr auto }
  .car-form .btn{ width:auto }
}
.next-action{
  display:inline-block; background:#fff3bf; color:#5f4c00;
  border:1px solid #ffd666; border-radius:10px; padding:.25rem .6rem; font-weight:600; margin-left:.5rem;
}
.seg-actions{ display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end }
.seg-actions .btn-small{ padding:.35rem .6rem }

/* ===== 車設定フォーム用の揃え（car_settings.php） ===== */
.car-settings .row {
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr 1fr auto; /* 片道km / 単価 / 保存 */
  align-items: end;                    /* ボタンの下端に揃える */
}
@media (max-width: 720px){
  .car-settings .row { grid-template-columns: 1fr; }
}

/* ラベルと入力の行間を統一 */
.car-settings .field { display: grid; gap: 6px; }
.car-settings .field label { display:block; font-size:14px; color:var(--muted); }

/* 入力の高さ・内側余白を完全に一致させる */
.car-settings .input,
.car-settings select.input {
  height: 52px;
  line-height: 52px;        /* Windowsのselect縦センタずれ対策 */
  padding: 0 12px;
}

/* セレクトは各ブラウザの見た目差を殺して中央寄せに */
.car-settings select.input {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: #fff;   /* theme-care では白地 */
  color: #0b1220;
  border: 1px solid #dbe0e6;
  border-radius: 10px;
  padding-right: 36px;      /* ▼アイコン分の余白 */
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 14px;
}

/* iOSズーム回避とフォーカスリングを統一 */
.car-settings .input:focus,
.car-settings select.input:focus {
  outline: none;
  border-color: #60a5fa;
  box-shadow: 0 0 0 3px rgba(96,165,250,.25);
  font-size: 16px;
}

/* ヘルプ文（例：片道13なら〜）の間隔を一定に */
.car-settings .hint { margin-top: 6px; color: var(--muted); font-size: 14px; }


/* ==============================
   Scrollbar (subtle)
   ============================== */
::-webkit-scrollbar{ width:10px; height:10px }
::-webkit-scrollbar-thumb{ background:#1e293b; border-radius:8px }
::-webkit-scrollbar-track{ background:#0b1220 }

/* ==============================
   Utilities
   ============================== */
.center{text-align:center} .right{text-align:right}
.mt-0{margin-top:0}.mt-8{margin-top:8px}.mt-16{margin-top:16px}
.mb-0{margin-bottom:0}.mb-8{margin-bottom:8px}.mb-16{margin-bottom:16px}
.w-100{width:100%}

/* ==============================
   Theme: Homecare (care)
   ============================== */
.theme-care{
  --primary:#22c55e; --primary-pressed:#16a34a;
  --ring:0 0 0 4px rgba(34,197,94,.20);
}
/* 入力は白背景・濃文字で視認性UP（careのみ） */
.theme-care input[type="text"],
.theme-care input[type="tel"],
.theme-care input[type="number"],
.theme-care input[type="search"],
.theme-care input[type="email"],
.theme-care input[type="url"],
.theme-care select,
.theme-care textarea{
  background:#fff; color:#0b1220; border:1px solid #dbe0e6;
  border-radius:10px; padding:10px 12px; line-height:1.5; box-shadow:none;
}
.theme-care ::placeholder{ color:#94a3b8 }
.theme-care input:focus,
.theme-care select:focus,
.theme-care textarea:focus{
  outline:0; border-color:#60a5fa; box-shadow:0 0 0 3px rgba(96,165,250,.25)
}

/* ==============================
   Monthly table (reports)
   ============================== */
.monthly-table{ width:100%; border-collapse:collapse; margin-top:16px; font-size:14px }
.monthly-table th,.monthly-table td{
  border:1px solid #334155; padding:6px 8px; text-align:center
}
.monthly-table th{ background:#1f2937; color:#f8fafc }
.monthly-table td{ background:#0b1220; color:#f8fafc }
.row-holiday td{ background:#172133 !important }
.mono{ font-variant-numeric: tabular-nums }

/* ==============================
   Print
   ============================== */
@media print{
  body{ background:#fff; color:#111 }
  .header{ position:static; height:auto; border-bottom:0; background:#fff; color:#111 }
  .page{ padding-top:0 }
  .content{ max-width:100% }
  .card{ box-shadow:none; border:1px solid #ddd; background:#fff; color:#111 }
  .badge{ border-color:#bbb; background:#fff; color:#333 }
  .monthly-table{ width:100%; table-layout:fixed; font-size:10pt; line-height:1.2; margin:0 }
  .monthly-table thead{ display:table-header-group }
  .monthly-table th,.monthly-table td{
    background:#fff !important; color:#000 !important; border:1px solid #000 !important;
    padding:3px 4px !important; text-align:center; vertical-align:top; white-space:nowrap
  }
}

/* ==============================
   Reduced motion
   ============================== */

/* === Homeメニューの余白復活（クラス違いにも効く万能版） === */
.menu,
.menu-list,
.menu-block,
.home-menu {
  display: grid;
  gap: 16px;              /* ← ここで縦の隙間を作る */
}

/* a をボタン化している場合の幅・角丸・影などを揃える */
.menu a.menu-btn,
.menu-list a,
.home-menu a {
  display: block;
  width: 100%;
  padding: 16px;
  border-radius: 14px;
  background: var(--primary);
  color: #fff;
  text-align: center;
  text-decoration: none;
  font-weight: 700;
  box-shadow: 0 6px 14px rgba(59,130,246,.28);
}
.menu a.menu-btn:hover,
.menu-list a:hover,
.home-menu a:hover { filter: brightness(.96); text-decoration: none; }

/* 既存の “緑カード” を使っている場合に中の文字が潰れないよう行間を少し広げる */
.menu a.menu-btn > * { line-height: 1.3; }

/* === クラス無し submit ボタンも .btn と同じ見た目に（カード内だけ） === */
.theme-care .card button,
.theme-care .card input[type="submit"],
.theme-care .card input[type="button"]{
  appearance: none;
  background: var(--primary);
  color: #fff;
  border: 0;
  border-radius: 12px;
  padding: 12px 16px;
  font-weight: 700;
  font-size: 16px;       /* iOSズーム回避 */
  cursor: pointer;
  box-shadow: 0 6px 14px rgba(34,197,94,.28);
}
.theme-care .card button:hover,
.theme-care .card input[type="submit"]:hover,
.theme-care .card input[type="button"]:hover{ filter: brightness(.96); }
.theme-care .card button:active,
.theme-care .card input[type="submit"]:active,
.theme-care .card input[type="button"]:active{ transform: translateY(1px); }
.theme-care .card button[disabled],
.theme-care .card input[disabled]{ opacity:.6; cursor:not-allowed; box-shadow:none; }

/* カード内の “横に並ぶ1行フォーム” でもボタンが潰れないよう */
.theme-care .card .row > button,
.theme-care .card .row > input[type="submit"]{ width: 100%; }
@media (min-width: 860px){
  .theme-care .card .row > button,
  .theme-care .card .row > input[type="submit"]{ width: auto; }
}

/* === 入力UI（基準月・セレクト含む）を統一 === */
.theme-care input[type="month"],
.theme-care select,
.theme-care input[type="date"]{
  background: #fff;
  color: #0b1220;
  border: 1px solid #dbe0e6;
  border-radius: 10px;
  height: 52px;
  padding: 0 12px;
  font-size: 16px;
}
.theme-care input[type="month"]:focus,
.theme-care select:focus,
.theme-care input[type="date"]:focus{
  outline: 0;
  border-color: #60a5fa;
  box-shadow: 0 0 0 3px rgba(96,165,250,.25);
}

/* === Homeのメニューカード同士に外側マージンが無い場合の保険 === */
.menu .menu-btn + .menu-btn,
.menu-list > * + *,
.home-menu > * + * { margin-top: 0; }  /* gapと二重にならないようリセット */

/* ===========================
   訪問入浴：打刻ページの見た目を整える
   （body に .page--bath を付ける想定）
   =========================== */

/* 「本日の履歴」をカードっぽく・行を読みやすく */
.page--bath .today-log {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px;
  box-shadow: var(--card-shadow);
}
.page--bath .today-log h2 { margin: 0 0 8px; font-size: 16px; }

/* 履歴リスト（殺風景解消） */
.page--bath .log-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.page--bath .log-list li {
  display: grid; grid-template-columns: auto 1fr auto;
  gap: 8px; align-items: center;
  background: var(--input);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px 10px;
  font-size: 14px;
}
.page--bath .log-time { font-variant-numeric: tabular-nums; opacity: .9; }
.page--bath .log-type { font-weight: 700; }
.page--bath .log-staff { color: var(--muted); }

/* 「打刻する」ボタンを大きく押しやすく */
.page--bath .btn-clock {
  display: block;
  width: 100%;
  padding: 14px 16px;
  font-size: 18px;
  font-weight: 800;
}

/* 検索のセレクトが極小化しないように（職員/操作） */
.page--bath .clock-form .input.staff-select { min-width: 220px; }
.page--bath .clock-form .input.action-select { min-width: 140px; }

/* スマホは縦積み＋セレクト全幅 */
@media (max-width: 720px) {
  .page--bath .clock-form .row { grid-template-columns: 1fr; }
  .page--bath .clock-form select.input { width: 100%; }
}

/* ===========================
   訪問介護：一括印刷ボタンを“リンク風”でなくボタンに
   （該当ページのボタン a に .btn を付ければOK）
   =========================== */
a.btn { 
  display:inline-flex; align-items:center; justify-content:center;
  padding: 10px 14px; border-radius: 12px; text-decoration: none;
  background: var(--primary); color:#fff; font-weight:700;
  box-shadow: 0 6px 14px rgba(0,0,0,.25);
}
a.btn:hover { filter: brightness(.96); text-decoration: none; }

/* --- テーブル内フォーム要素はセル幅いっぱいに --- */
.table td select.input,
.table td input.input {
  width: 100%;
  box-sizing: border-box;   /* はみ出し防止 */
  min-width: 220px;         /* デフォ最小幅（スマホでも読めるサイズ） */
}

/* 職員セレクトはさらに広めに（PC想定） */
.table td select.input.staff-select { min-width: 260px; }

/* 操作セレクトは控えめでOK */
.table td select.input.action-select { min-width: 140px; }

/* 日時入力の桁ズレ防止（レビュー表） */
.table td input[type="datetime-local"].input {
  font-variant-numeric: tabular-nums;
}

/* ===== 印刷用：余白・色・非表示 ===== */
@media print {
  @page { size: A4 portrait; margin: 10mm; }

  /* 画面専用UIは完全に非表示（空白も残さない） */
  .no-print,
  .search-panel,
  .header,
  .nav,
  .menu,
  .flash-success,
  .alert,
  .btn,
  .btn-small {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  /* レイアウトを印刷用に最適化 */
  .page  { padding-top: 0 !important; }
  .content { max-width: 100% !important; padding: 0 !important; }
  .card { box-shadow: none !important; border: 0 !important; background: #fff !important; color:#000 !important; }

  /* テーブルがページをまたぐ時、ヘッダーを各ページに繰り返す */
  .monthly-table thead { display: table-header-group; }
  .monthly-table {
    width: 100% !important;
    table-layout: fixed !important;
    font-size: 10pt !important;
    line-height: 1.25 !important;
  }
  .monthly-table th, .monthly-table td {
    background: #fff !important;
    color: #000 !important;
    border: 1px solid #000 !important;
    padding: 3px 4px !important;
    white-space: nowrap;
    vertical-align: top;
  }

  /* サマリはページまたぎしにくく */
  .summary { page-break-inside: avoid; break-inside: avoid; }
}

/* === 経費画面スマホ最適化 === */
.tabs.buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 10px 0;
}
.tab-btn {
  flex: 1 1 calc(33% - 4px);
  text-align: center;
  padding: 8px 6px;
  background: #eee;
  border-radius: 8px;
  font-size: 14px;
  text-decoration: none;
  color: #333;
}
.tab-btn.active {
  background: var(--theme-accent, #4CAF50);
  color: #fff;
  font-weight: bold;
}

/* カード風リスト */
.expense-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.expense-card {
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.08);
  padding: 10px;
}
.expense-card .exp-date {
  font-size: 12px;
  color: #888;
  margin-bottom: 4px;
}
.expense-card .exp-main {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 15px;
  font-weight: 600;
}
.expense-card .exp-desc {
  font-size: 13px;
  color: #555;
  margin-top: 4px;
}

/* 大ボタン */
.fab a.btn.primary {
  display: block;
  width: 100%;
  text-align: center;
  padding: 12px;
  font-size: 16px;
  border-radius: 12px;
}

/* ===== 共通フォームUI（スマホ寄せ） ===== */
.container.narrow { max-width: 680px; margin: 0 auto; }
.form.stacked .card { background:#fff; border-radius:12px; box-shadow:0 1px 4px rgba(0,0,0,.08); padding:12px; margin:10px 0; }
.field { display:flex; flex-direction:column; gap:6px; }
.label { font-size:12px; color:#666; }
.field-grid-2 { display:grid; grid-template-columns:1fr; gap:10px; }
@media (min-width: 560px) { .field-grid-2 { grid-template-columns:1fr 1fr; } }
input[type="text"], input[type="date"], input[type="number"], select, textarea {
  width:100%; padding:10px 12px; border:1px solid #ddd; border-radius:10px; font-size:15px;
}

/* セグメント（下書き/印刷待ち） */
.seg { display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.seg input { display:none; }
.seg label { text-align:center; padding:10px 0; border:1px solid #ddd; border-radius:10px; background:#f7f7f7; }
.seg input:checked + label { background:var(--theme-accent, #3c9); color:#fff; border-color:transparent; font-weight:600; }

/* タブ（既に導入のものに合わせる） */
.tabs.buttons { display:flex; flex-wrap:wrap; gap:6px; margin:10px 0; }
.tab-btn { flex:1 1 calc(33% - 6px); text-align:center; padding:10px; background:#eee; border-radius:10px; font-size:14px; color:#333; text-decoration:none; }
.tab-btn.active { background:var(--theme-accent, #3c9); color:#fff; font-weight:700; }

/* カード一覧（モバイル） */
.expense-list { display:flex; flex-direction:column; gap:8px; margin:10px 0 80px; }
.expense-card { background:#fff; border-radius:12px; box-shadow:0 1px 4px rgba(0,0,0,.08); padding:10px; }
.expense-card .exp-date { font-size:12px; color:#888; margin-bottom:2px; }
.expense-card .exp-main { display:flex; justify-content:space-between; align-items:center; font-weight:600; }
.expense-card .exp-amt { font-feature-settings:"pnum"; }

/* フッターアクションバー（固定） */
.actionbar { position:sticky; bottom:0; left:0; right:0; display:flex; gap:10px; padding:10px; background:#f8f8f8; border-top:1px solid #e8e8e8; margin-top:6px; }
.actionbar.dual { justify-content:space-between; }
.btn { display:inline-block; padding:12px 14px; border-radius:12px; border:none; text-decoration:none; cursor:pointer; }
.btn.primary { background:var(--theme-accent, #3c9); color:#fff; }
.btn.danger  { background:#e74c3c; color:#fff; }
.btn.ghost   { background:#fff; color:#333; border:1px solid #ddd; }

/* 入力のタップ狙い向上 */
input, select, textarea, .btn { min-height:44px; }

/* app.css 追記 */

@media (max-width: 767px) {
  table.list {
    display: block;
    overflow-x: auto;
    border-spacing: 0;
  }
  table.list th, table.list td {
    white-space: nowrap;
    padding: 8px 10px;
  }
  .bundle-toolbar {
    flex-direction: column;
    align-items: stretch;
  }
  .bundle-toolbar input[type="text"] {
    width: 100%;
    margin-bottom: 6px;
  }
  .btn.small {
    padding: 4px 8px;
    font-size: 13px;
  }
}

/* ===== 経費カード（スマホ優先） ===== */
.exp-cards { display: none; margin: 10px 0 80px; }
.exp-card {
  display: grid; grid-template-columns: 28px 1fr; gap: 10px;
  background: #fff; border-radius: 12px; padding: 12px;
  box-shadow: 0 1px 4px rgba(0,0,0,.08);
  align-items: start;
}
.exp-card + .exp-card { margin-top: 8px; }
.exp-card .exp-check { width: 22px; height: 22px; margin-top: 4px; }
.exp-body { display: grid; gap: 6px; }
.exp-row1 { display:flex; justify-content:space-between; align-items:center; }
.exp-date { font-size: 12px; color: #888; }
.exp-amt { font-weight: 700; font-size: 16px; }
.exp-row2 { display:flex; flex-wrap:wrap; gap:6px; }
.chip {
  display:inline-block; padding: 3px 8px; border-radius: 999px;
  background: #eef2f3; font-size: 12px; color:#333;
}
.chip-ready  { background: #e7f7ef; color:#147a4b; }
.chip-draft  { background: #f2f2f7; color:#555; }
.chip-locked { background: #e8eefc; color:#2c5cc5; }
.exp-row3 { font-size: 13px; color:#333; }
.exp-row3 .muted { color:#777; }
.exp-actions { margin-top: 4px; text-align: right; }

/* PCはテーブル、スマホはカード */
@media (max-width: 767px) {
  table.list { display:none; }
  .exp-cards { display:block; }
  .bundle-toolbar { flex-direction: column; align-items: stretch; gap:8px; }
  .bundle-toolbar input[type="text"] { width:100%; }
}

.selectbar{
  position: sticky; top: 0; z-index: 5;
  display:flex; align-items:center; gap:10px;
  background: var(--panel, #0e0f14); /* 既存テーマに馴染む色 */
  padding: 8px 10px; border-radius: 10px; margin: 8px 0;
  box-shadow: 0 1px 4px rgba(0,0,0,.12) inset;
}
.selectbar .grow{ flex:1; }
.badge{
  display:inline-block; min-width:56px; text-align:center;
  padding:3px 10px; border-radius:999px; background:#eef2f3; color:#333; font-size:12px;
}
@media (max-width: 767px){
  .title-input{ flex: 1 1 40%; min-width: 40%; }
  .selectbar{ flex-wrap: wrap; }
}

/* 目安のブレークポイント。必要に応じて調整 */
.pc-only { display: block; }
.sp-only { display: none; }

@media (max-width: 768px) {
  .pc-only { display: none; }
  .sp-only { display: block; }
}

/* モバイルのカードを中央寄せ＆読みやすく */
@media (max-width: 768px) {
  .container.narrow { padding: 12px 16px; }
  .exp-cards { padding: 0 4px; }
  .exp-card {
    background: var(--panel, #11181c);
    border: 1px solid var(--border, #2b2f36);
    border-radius: 12px;
    padding: 12px 14px;
    margin: 10px auto;
    box-shadow: 0 1px 4px rgba(0,0,0,.12);
    width: 100%;
  }
  .exp-row1 { display:flex; justify-content:space-between; gap:8px; margin-bottom:6px; }
  .exp-date { font-weight:600; opacity:.9; }
  .exp-amt  { font-weight:700; }
  .exp-row2 { margin-bottom:6px; }
  .chip { display:inline-block; padding:2px 8px; border-radius:999px; border:1px solid var(--border,#2b2f36); font-size:.85em; }
  .exp-row3 .muted { opacity:.8; }
}

/* ===== モバイル用：カードを幅いっぱい＆中身も100%に ===== */
@media (max-width: 768px) {
  .exp-cards {
    display: block;
    margin: 0 auto;
    padding: 0 8px;
    max-width: none !important;
  }
  /* ラベルをブロック化して100%使う */
  .exp-card {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box;
    margin: 10px 0;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 12px;
    padding: 12px 14px;
    background: rgba(255,255,255,.03);
  }
  /* チェックボックスは視覚的に隠す（幅を奪わない） */
  .exp-card .exp-check {
    position: absolute;
    left: -9999px;
  }
  /* 中身を100%に。古い max-width を無効化 */
  .exp-card .exp-body {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
  }

  /* 1行目：日付と金額を左右に */
  .exp-row1 {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 6px;
  }
  .exp-date { font-weight: 600; opacity: .9; }
  .exp-amt  { font-weight: 700; }

  /* 2行目：チップを折返しありで横並び */
  .exp-row2 {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 6px;
  }
  .chip {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.12);
    font-size: .85em;
  }

  /* 3行目：テキストが細くならないよう幅を解放＆折返し */
  .exp-row3 {
    white-space: normal !important;
    word-break: break-word;
    overflow-wrap: anywhere;
    line-height: 1.5;
  }

  /* もし .container/.narrow に max-width があれば打ち消す */
  .container.narrow,
  .container.narrow * {
    max-width: none !important;
  }
}

/* ===== Master base layout ===== */
.page { padding: 16px 20px; }
.page-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.page-title { font-size:20px; font-weight:700; color:#e6f5ee; letter-spacing: .02em; }

.toolbar { display:grid; grid-template-columns: 1fr auto; gap:12px; margin-bottom:12px; }
.toolbar .filters { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.toolbar .actions { display:flex; gap:8px; align-items:center; justify-content:flex-end; }

.input, .select, .button, .menu-btn {
  height: 36px; padding: 0 12px; border-radius: 10px; border:1px solid #2d3d35;
  background:#16221d; color:#d9efe5; outline:none;
}
.input::placeholder { color:#7fa696; }
.select { padding-right:28px; }
.button { cursor:pointer; transition: transform .02s ease; }
.button:hover { transform: translateY(-1px); }
.button.primary { background:#0f6d4b; border-color:#0f6d4b; color:#e9fff7; font-weight:600; }
.button.ghost { background:transparent; border-color:#2d3d35; color:#bfe3d2; }
.button.icon { width:auto; padding:0 10px; }

.badge { font-size:12px; padding:3px 8px; border-radius: 999px; border:1px solid #2d3d35; background:#0f1a16; color:#bfe3d2; }
.badge.ok { background:#0f6d4b; border-color:#0f6d4b; color:#eafff6; }

.table-wrap { border:1px solid #27352e; border-radius:14px; overflow:hidden; background:#0f1a16; }
.table { width:100%; border-collapse:separate; border-spacing:0; }
.table thead th {
  position:sticky; top:0; z-index:1; background:#13261e; color:#cfeade; font-weight:600;
  text-align:left; padding:10px 12px; border-bottom:1px solid #22342b;
}
.table tbody td { padding:10px 12px; border-bottom:1px solid #1b2a23; color:#deefe7; }
.table tbody tr:hover { background:#13261e; }

.empty { padding:24px; text-align:center; color:#a5cabc; }
.empty .lead { font-weight:600; margin-bottom:6px; color:#dcf6ea; }
.empty .sub { font-size:13px; color:#9fbfb1; }

.kv { display:grid; grid-template-columns: 160px 1fr; gap:10px; margin-bottom:12px; }
.kv label { color:#c4e8d7; align-self:center; }
.kv input[type="text"], .kv input[type="date"], .kv input[type="email"], .kv select {
  height:36px; border:1px solid #2d3d35; background:#16221d; color:#e7f6ef; border-radius:10px; padding:0 10px;
}
.kv input[type="checkbox"] { transform: translateY(1px); }

.form-actions { display:flex; gap:8px; justify-content:flex-end; margin-top:16px; }
.req { color:#ffcf6e; margin-left:4px; font-weight:600; }
.flash { padding:10px 12px; border-radius:12px; margin-bottom:10px; }
.flash.success { background:#0f2c21; border:1px solid #134733; color:#cfeade; }
.flash.error   { background:#2b1414; border:1px solid #5b2b2b; color:#ffd7d7; }

/* small helpers */
.gap8 { gap:8px; }
.w120 { width:120px; } .w160 { width:160px; } .w200 { width:200px; } .w260 { width:260px; } .w320 { width:320px; }

/* モバイル既定：横スクロール */
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.table-wide {
  border-collapse: collapse;
  width: max-content; /* 列数が多くても崩れない */
  min-width: 100%;
  table-layout: auto;
  white-space: nowrap; /* モバイルは折り返さない＝スクロール */
}
.table-wide th, .table-wide td {
  padding: .4rem .6rem;
  vertical-align: top;
}

/* PC（広い画面）は1行でできるだけ全部見せる：折り返しON＋幅固定化 */
@media (min-width: 1200px) {
  .table-scroll { overflow: visible; }
  .table-wide {
    width: 100%;
    table-layout: fixed;   /* 列幅を自動配分して収める */
    white-space: normal;   /* 折り返し可 */
  }
  .table-wide th, .table-wide td {
    word-break: break-word;
  }

  /* 見た目を詰めたい時は .is-compact を追加 */
  .table-wide.is-compact th, 
  .table-wide.is-compact td {
    padding: .3rem .45rem;
    font-size: 0.95rem;
  }
}

/* 任意：ヘッダー固定（縦長表での視認性UP） */
.table-wrap {
  position: relative;
}
.table-wrap thead th {
  position: sticky;
  top: 0;
  background: #fff;
  z-index: 1;
}

/* 列幅の“重み付け”が欲しい場合（例） */
@media (min-width: 1200px) {
  .table-wide th.col-narrow, .table-wide td.col-narrow { width: 8%; }
  .table-wide th.col-wide,   .table-wide td.col-wide   { width: 18%; }
}

/* === Header / Main layout fix === */
:root{
  --header-h: 56px;             /* デスクトップのヘッダ高 */
  --header-h-mobile: 64px;      /* モバイル時は少し高め */
}

/* ヘッダは上に固定 or スティッキー。どちらでもOK */
#site-header{
  position: sticky;             /* 固定したくない場合は sticky、常時固定なら fixed */
  top: 0;
  z-index: 1000;                /* drawer(1200)より下、backdrop(1100)より下にしない */
  background: #0f172a;          /* テーマ背景色に合わせる */
  border-bottom: 1px solid #334155;
}

/* 常時固定にしたいなら ↑ を position:fixed; width:100%; に変更 */
@media (max-width: 768px){
  :root{ --header-h: var(--header-h-mobile); }
}

/* iOSセーフエリア（ノッチ）対策を軽く */
#site-header{
  padding-top: env(safe-area-inset-top, 0);
}

/* 本文に“逃げ”を付ける。ヘッダが固定でも潜り込まない */
#site-main{
  padding-top: var(--header-h);
}

/* 既存のヘッダナビ本体をヘッダ内で横並び維持 */
#site-header .app-header-menu{
  max-width: 1200px;            /* 任意：中央寄せ用 */
  margin: 0 auto;
  padding: 8px 12px;
}

/* ハンバーガー/ドロワーのz-indexは既存値でOK
   drawer: z-index:1200, backdrop:1100
   header: 1000 → 順序良好 */
  .grid{display:grid;gap:12px}
  .row{display:grid;grid-template-columns:1fr auto;gap:8px}
  .row-stack{grid-template-columns:1fr 1fr 1fr auto}
  .pill{display:inline-block;padding:.32rem .72rem;border-radius:999px;border:1px solid transparent;font-weight:600}
  .pill--open{background:#0c5e2c;border-color:#158e45;color:#f4fff8}
  .pill--recording{background:#1d2b6b;border-color:#475bdb;color:#eef0ff}
  .pill--closed{background:#7c1c1c;border-color:#c45151;color:#fff1f1}
  .muted{color:#666}
  .right{text-align:right}
  .table td,.table th{vertical-align:middle}
  .badge-nb{display:inline-block;padding:.06rem .4rem;border-radius:6px;border:1px solid #e0b040;background:#fff6d8;color:#8a6500;font-size:.82em;margin-left:.35rem}
  details summary{cursor:pointer}
  details[open] summary{margin-bottom:6px}
  /* 押しやすさUP */
  .btn,.btn-small{min-height:44px;font-size:16px;border-radius:12px}
  /* 行内の操作群を横並びに */
  .seg-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
  /* 次アクションガイド */
  .next-action{display:inline-block;background:#fff3bf;color:#5f4c00;border:1px solid #ffd666;border-radius:10px;padding:.25rem .6rem;font-weight:600;margin-left:.5rem}
  @media (max-width: 720px){
    .row{grid-template-columns:1fr}
    .row-stack{grid-template-columns:1fr}
    .card .row > .btn, .card .row > .btn-small{width:100%}
  }

    .daycard { border:1px solid var(--border,#2b2f3a); border-radius:12px; padding:12px; margin-bottom:10px; background:var(--card,#151923); }
  .row { display:grid; grid-template-columns:1fr auto; gap:8px; align-items:center; }
  .muted { color:#8a94a6; }
  .right { text-align:right; }
  .pill { display:inline-block; padding:.2rem .6rem; border-radius:999px; border:1px solid transparent; font-size:.9rem; }
  .pill--open { background:#eef6ff; color:#0b5cab; border-color:#cfe3ff; }         /* 未開始 */
  .pill--recording { background:#fff7e0; color:#8a5b00; border-color:#f0d58a; }   /* 記録中 */
  .pill--closed { background:#e9fce9; color:#145a14; border-color:#bde5bd; }      /* 完了 */
  .filters { display:grid; grid-template-columns:1fr auto; gap:8px; }
  @media (max-width:640px){ .row{grid-template-columns:1fr; gap:6px} .right{text-align:left} }

      .settings-wrap { display:grid; gap:14px; }
    .settings-grid { display:grid; gap:12px; }
    @media (min-width: 768px) {
      .settings-grid { grid-template-columns: 1fr 1fr; align-items:start; }
    }
    .hint { color: var(--muted,#94a3b8); font-size: .9rem; margin-top: .35rem; }
    .actions { display:flex; gap:.5rem; justify-content:flex-end; margin-top:.5rem; }
    .flash { border:1px solid var(--border,#334155); border-left-width:4px; border-left-color:#22c55e; padding:.75rem .9rem; border-radius:.6rem; background:rgba(34,197,94,.07); color:#e2f7e8; }
    .flash-error { border-left-color:#ef4444; background:rgba(239,68,68,.07); color:#ffe3e3; }

    .mono{ font-variant-numeric: tabular-nums }
    .status-ok{ color:#86efac }
    .status-miss{ color:#fecaca }
    .cal-table{ width:100%; border-collapse:collapse }
    .cal-table th, .cal-table td{ padding:8px 10px; border-bottom:1px solid var(--border); font-size:14px; vertical-align:top }
    .cal-table thead th{ position:sticky; top:calc(var(--header-h) + 8px); background:#0b1220; z-index:1 }
    @media print{
      .header{ position:static } .page{ padding-top:0 } .card{ box-shadow:none }
      .cal-table thead th{ position:static; background:#fff; color:#111 }
      .no-print{ display:none !important; }
    }

    .flex-between{display:flex;align-items:center;justify-content:space-between;gap:12px}
    .office-list{display:grid;grid-template-columns:1fr 1fr;gap:8px}
    @media (max-width:520px){.office-list{grid-template-columns:1fr}}
    .cover{page-break-after:always}
    .sheet{page-break-after:always}
    .paper{background:#fff;color:#000;border-radius:8px;padding:16px}
    .paper h2{margin:.2rem 0}
    .muted{color:#94a3b8}
    .btn-row{display:flex;gap:8px;flex-wrap:wrap}
    .btn-outline{padding:10px 14px;border:1px solid #334155;border-radius:12px;background:transparent;color:#f8fafc}
    .btn-outline:active{transform:translateY(1px)}
    .kakunin{font-size:14px;color:#94a3b8;margin-top:6px}

@media (max-width: 768px) {
  .pc-only { display:none; }
  .sp-only { display:block; }
}
@media (min-width: 769px) {
  .pc-only { display:block; }
  .sp-only { display:none; }
}

/* --- Car Admin Filters --- */
.caradmin-filters {
  display: grid;
  gap: 10px;
  margin-bottom: 12px;
}
.caradmin-filters .filters-row {
  display: grid;
  grid-template-columns: 120px 1fr;
  align-items: center;
  gap: 8px;
}
.caradmin-filters .filters-label {
  color: var(--muted);
}
.caradmin-filters .filters-month {
  width: 100%;
  min-width: 0;
}

/* ボタン並び */
.caradmin-filters .filters-actions {
  grid-template-columns: 1fr auto; /* 左：チェック、右：ボタン群 */
}
.caradmin-filters .filters-actions .filters-buttons {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

/* 入力UIの見やすさ向上（month は環境で小さくなりがち） */
input[type="month"].filters-month {
  padding: 10px 12px;
  line-height: 1.2;
}

/* --- SP: 3段構成で縦積み --- */
@media (max-width: 640px) {
  .caradmin-filters .filters-row {
    grid-template-columns: 1fr;   /* ラベルも入力も縦積み */
  }
  .caradmin-filters .filters-label {
    font-size: .9rem;
    opacity: .9;
  }
  .caradmin-filters .filters-actions {
    gap: 10px;
  }
  .caradmin-filters .filters-actions .filters-buttons {
    justify-content: stretch;
  }
  .caradmin-filters .filters-actions .filters-buttons .btn {
    width: 100%;                  /* 表示／リセットは横いっぱい */
  }
  /* 下部の “全選択／印刷” も親既存レイアウトでOK。
     もし詰まる場合は .btn を幅100%にして2段に。 */
}

/* === Bath badges & states === */
.badge { display:inline-block; padding:.15rem .5rem; border-radius:.5rem; font-size:.85em; }
.badge-info    { background:#1e90ff26; color:#7fc1ff; border:1px solid #1e90ff55; }
.badge-success { background:#16a34a26; color:#86efac; border:1px solid #16a34a55; }
.badge-warning { background:#ca8a0426; color:#fbbf24; border:1px solid #ca8a0455; }
.badge-danger  { background:#dc262626; color:#fca5a5; border:1px solid #dc262655; }
.badge-muted   { background:#6b728026; color:#cbd5e1; border:1px solid #6b728055; }

.row-inprogress { background: rgba(30,144,255,.08); }
.row-cancel     { background: rgba(202,138,4,.10); }
.row-done       { background: rgba(22,163,74,.08); }

/* === 運行テンプレ 右カラムを固定 + 内部独立スクロール === */

.rs-sidebar-wrapper {
  position: sticky;
  top: 80px; /* ヘッダー分の余白。必要に応じて調整 */
  max-height: calc(100vh - 100px);
  overflow-y: auto;
}

/* 実績ありセルの見た目（青系に変更） */
.op-cell--done {
  position: relative;
  border: 1px solid rgba(59, 130, 246, 0.9);   /* 明るい青 */
  background-color: rgba(59, 130, 246, 0.20);  /* 淡い青 */
}

/* 実績バッジ（青系） */
.op-cell-badge {
  position: absolute;
  top: 2px;
  right: 4px;
  font-size: 0.7rem;
  padding: 0 6px;
  border-radius: 999px;
  background-color: rgba(59, 130, 246, 0.95); /* 青 */
  color: #0b1120;                              /* 濃い紺の文字 */
  font-weight: 600;
}

.js-cell-result-badge {
  font-weight: 600;
}

/* === Bath: 運行表セル（予定／実績） ===================== */

/* 予定が入っているセル（実績はまだ） */
.rs-filled {
  border: 1px solid rgba(34, 197, 94, 0.6);      /* 緑の枠 */
  background-color: rgba(34, 197, 94, 0.10);     /* ごく薄い緑 */
}

/* === Bath: 運行表 実績セルの最終上書き ===================== */

/* 実績が入ったセル（data-locked="1"）は青系で固定 */
.rs-cell[data-locked="1"] {
  border-color: rgba(59, 130, 246, 0.9) !important;   /* 枠：青 */
  background-color: rgba(59, 130, 246, 0.22) !important; /* 背景：淡い青 */
}

/* バッジの色も青系に寄せる */
.rs-cell[data-locked="1"] .js-cell-result-badge {
  color: #dbeafe;               /* 薄い水色の文字 */
  font-weight: 600;
}

/* ===== 入浴：月次（個人）専用の印刷調整 ===== */
@media print {

  /* A4＋左余白20mm（穴あけ） */
  @page {
    size: A4 portrait;
    margin-top: 8mm;
    margin-right: 8mm;
    margin-bottom: 8mm;
    margin-left: 20mm; /* ← ファイリング穴用 */
  }

  /* 画面専用のUIは完全非表示にする */
  .header,
  .nav,
  .no-print,
  .menu,
  .page-header,
  .flash,
  .btn,
  .btn-small,
  .actionbar {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
  }

  /* ページの余白を詰める */
  body { background:#fff !important; color:#000 !important; }
  .page { padding: 0 !important; }
  .content { padding: 0 !important; max-width: 100% !important; }

  /* monthly.php の表を A4 に収める */
  .monthly-table {
    width: 100% !important;
    table-layout: fixed !important;
    font-size: 10pt !important;
    line-height: 1.2 !important;
  }

  .monthly-table th,
  .monthly-table td {
    background: #fff !important;
    color: #000 !important;
    border: 1px solid #000 !important;
    padding: 3px 4px !important;
    white-space: nowrap;
  }

  /* ページ跨ぎ対策：ヘッダーを毎ページ先頭へ */
  .monthly-table thead {
    display: table-header-group;
  }

}

/* 訪問入浴 利用者テンプレ一覧：有効期間終了行 */
.tmpl-row--expired {
  color: #9ca3af;              /* text-gray-400 */
  background-color: #020617;   /* ほんのり暗く */
}
.tmpl-row--expired td {
  text-decoration: line-through;
}

.op-actual-diff {
  font-weight: 600;
}

.row-other-vehicle {
  opacity: 0.7;
  background-color: rgba(148, 163, 184, 0.18); /* ちょいグレー */
}

.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin: .8rem 0 1rem;
}
.tab-link {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .45rem .7rem;
  border: 1px solid rgba(148,163,184,.35);
  border-radius: .6rem;
  text-decoration: none;
}
.tab-link.is-active {
  border-color: rgba(16,185,129,.75);
}

.badge {
  display: inline-flex;
  align-items: center;
  padding: .15rem .5rem;
  border-radius: 999px;
  font-size: .75rem;
  border: 1px solid rgba(148,163,184,.35);
}
.badge--warn { border-color: rgba(245,158,11,.7); }
.badge--danger { border-color: rgba(239,68,68,.7); }

.notice {
  border: 1px solid rgba(148,163,184,.35);
  border-radius: .6rem;
  padding: .75rem;
}
.row-actions {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
}

/* ==============================
   Alerts (dark theme)
   ============================== */
.alert{
  padding:10px 12px;
  border-radius:10px;
  margin:8px 0;
  border:1px solid rgba(148,163,184,.25);
  background: rgba(148,163,184,.08);
  color: var(--text);
}

/* success / info / warn / error */
.alert-ok{
  border-color: rgba(34,197,94,.45);
  background: rgba(34,197,94,.12);
  color: #dcfce7;
}
.alert-info{
  border-color: rgba(59,130,246,.45);
  background: rgba(59,130,246,.12);
  color: #dbeafe;
}
.alert-warn{
  border-color: rgba(245,158,11,.50);
  background: rgba(245,158,11,.14);
  color: #ffedd5;
}
.alert-err{
  border-color: rgba(239,68,68,.55);
  background: rgba(239,68,68,.14);
  color: #fee2e2;
}

/* 互換：alert-error を alert-err に寄せる（既存呼び出し救済） */
.alert-error{
  border-color: rgba(239,68,68,.55);
  background: rgba(239,68,68,.14);
  color: #fee2e2;
}


/* 予定段階の「中止（ステータス）」セル */
.theme-bath .op-cell--status-cancel{
  border: 1px solid rgba(245, 158, 11, .55);          /* amber */
  background: rgba(245, 158, 11, .12);
}

.theme-bath .op-cell--status-cancel .js-cell-label{
  color: rgba(253, 230, 138, .95);                    /* amber-200 */
}

/* 既存バッジがあるなら目立たせる */
.theme-bath .op-cell--status-cancel .op-cancel-badge,
.theme-bath .op-cell--status-cancel span.inline-block{
  border-color: rgba(245, 158, 11, .65);
}