:root{
  --bg:#f7f7fb; --fg:#222; --muted:#666;
  --brand:#2563eb; --warn:#f59e0b; --line:#e5e7eb;
  --card:#fff; --shadow:0 6px 16px rgba(0,0,0,.06);
}
*{box-sizing:border-box}
/*html,body{height:100%;}*/
html{ min-height: 100vh; }
body{
  height: 100%; /* html の min-height を継承し、確実に縦いっぱいに広がる */
  min-height: 100vh;
  margin:0; background:var(--bg); color:var(--fg);
  font:16px/1.7 "Noto Sans JP",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;

  display: flex;
  flex-direction: column;
}
a, a:visited{color:var(--brand); text-decoration:none}
a:hover{text-decoration:underline}

/* ヘッダー：右上にユーザー情報 */
.site-header{
  display:flex; justify-content:space-between; align-items:center;
  padding:12px 20px; background:#fff; border-bottom:1px solid var(--line);
  position:sticky; top:0; z-index:10;
}
.brand{font-weight:700; letter-spacing:.3px}
.userbox{text-align:right}
.userline{display:flex; gap:6px; align-items:center; justify-content:flex-end; margin-bottom:2px}
.avatar{font-size:18px}
.name{font-weight:600}
.loc{color:var(--muted)}
.usernav{font-size:14px; color:var(--muted)}
.usernav .sep{margin:0 .4em; color:#bbb}

/* ページ余白 */
.container{max-width:1000px; margin:5px auto; padding:0 16px}
.page-title{margin:0 0 18px; font-size:28px}

/* カード型グリッド（将来メニューが増えても崩れない） */
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:16px}
.card{
  background:var(--card); border:1px solid var(--line); border-radius:14px;
  padding:18px; box-shadow:var(--shadow); position:relative;
}
.card-title{font-weight:700; margin-bottom:6px}
.card-desc{color:var(--muted); margin:0}
.card.link{transition:transform .06s ease, box-shadow .2s ease}
.card.link:hover{transform:translateY(-2px); box-shadow:0 10px 20px rgba(0,0,0,.08)}
.card.disabled{opacity:.55; cursor:not-allowed}
.badge{position:absolute; top:12px; right:12px; background:var(--warn); color:#fff; font-size:12px; padding:.25em .55em; border-radius:999px}

/* フッター */
.site-footer{border-top:1px solid var(--line); padding:14px 20px; text-align:center; color:#999; background:#fff; margin-top:0px}

/* ヘッダー／フッターは高さ固定、main が残りを埋める */
.site-header,
.site-footer {
  flex: 0 0 auto;
}

main.container {
  /* flex: 1 1 auto;*/
  min-height: 0;  /* ネストしたスクロールを効かせるためのおまじない */
}

/* --- account page: widen form controls --- */
.account-form select,
.account-form input[type="text"],
.account-form input[type="email"],
.account-form input[type="password"],
.account-form textarea{
  width: 420px;            /* サインアップと同等の見た目に */
  max-width: 100%;
  padding: 10px 12px;
  font-size: 16px;
}
.account-form label{ display:block; margin:10px 0 4px }
.account-form .actions{ margin-top:14px }

/* logout button styled as link */
.logout-form{ display:inline }
.linklike{
  background:none; border:none; padding:0; margin:0;
  font:inherit; color:var(--brand); cursor:pointer;
}
.linklike:hover{ text-decoration:underline }

/* brand link styles */
.brand a{ color:inherit; text-decoration:none; font-weight:700 }
.brand a:hover{ opacity:.85 }

/* === Container width utilities (override) === */
.container.container--fluid { max-width: none !important; width: 100% !important; }
.container.container--xl    { max-width: 1440px !important; }

/* === Drawer (入力者設定) === */
.drawer-backdrop{
  position:fixed; inset:0; background:rgba(0,0,0,.35);
  opacity:0; pointer-events:none; transition:opacity .18s ease;
  z-index:40;
}
.drawer{ position:fixed; inset:0; pointer-events:none; z-index:50; }
.drawer-panel{
  position:absolute; top:0; right:0; height:100%; width:min(420px,92vw);
  background:#fff; border-left:1px solid #e5e7eb; box-shadow:-12px 0 24px rgba(0,0,0,.12);
  transform:translateX(100%); transition:transform .22s ease;
  display:flex; flex-direction:column;
}
.drawer.open{ pointer-events:auto; }
.drawer.open .drawer-panel{ transform:none; }
/* backdrop は JS で .open を付与するので、単独で有効化 */
.drawer-backdrop.open{ opacity:1; pointer-events:auto; }

.drawer-header{ display:flex; align-items:center; justify-content:space-between; padding:14px 16px; border-bottom:1px solid #e5e7eb; }
.drawer-header h3{ margin:0; font-size:18px; }
.drawer-close{ background:none; border:none; font-size:22px; line-height:1; cursor:pointer; opacity:.7; }
.drawer-close:hover{ opacity:1; }

.drawer-body{ display:flex; flex-direction:column; gap:10px; padding:16px; }
.drawer-body input[type="text"]{
  padding:10px 12px; border:1px solid #e5e7eb; border-radius:10px; font-size:16px;
}
.drawer-body input[type="text"]:focus{ outline:none; border-color:#2563eb; box-shadow:0 0 0 3px rgba(37,99,235,.15); }
.drawer-error{ color:#b91c1c; font-size:13px; margin:2px 0 4px; }
.drawer-actions{ margin-top:6px; display:flex; gap:8px; }

/* === 共通ボタンスタイル（全画面共通） === */
.btn{
  display:inline-block;
  padding:8px 12px;
  border:1px solid #d6d6d6;
  border-radius:8px;
  background:#fff;
  color:#111;
  text-decoration:none;
  cursor:pointer;
}
.btn:hover{ background:#f9fafb; color:#111;}
.btn:active{ transform: translateY(1px);}
.btn.disabled{ opacity:.5; pointer-events:none;}

/* 重要ボタン：通常は黒地白文字、hover で白地黒文字に反転 */
.btn-primary{ background:#111827; color:#fff; border-color:#111827;}
.btn-primary:hover{ background:#fff; color:#111827; border-color:#111827;}

/* 小さめボタン（ページャ等） */
.btn-sm{ padding:6px 10px; font-size:13px;}

/* サイドドロワー用のサブボタン */
.btn-ghost{
  background:#f3f4f6;
  border:1px solid #e5e7eb;
  padding:10px 14px;
  border-radius:10px;
  cursor:pointer;
}
.btn-ghost:hover{  background:#eceff3;}

/* === Settings: actions row (buttons area) === */
.container.container--xl .form-actions{
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 16px; /* 枠とボタンの距離を統一 */
}

/* === Back button: white style (Account page look) === */
.btn-back{
  background: #fff;
  border: 1px solid #d6d6d6;
  color: #111;
}
.btn-back:hover{
  background: #f9fafb; /* .btn:hover と同系 */
  color: #111;
  text-decoration: none;
}


/* === パンくず（マスタ画面共通） === */
.crumbs.modern {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 10px 0 14px;
  font-size: 14px;
}
.crumb {
  display: inline-flex;
  align-items: center;
  background: #fff;
  border: 1px solid #e5e7eb;
  padding: 4px 10px;
  border-radius: 999px;
  color: #2563eb;
}
.crumb.current { background: #111827; color: #fff; border-color: #111827;}
.crumb-icon { margin-right: 4px;}
.sep { color: #9ca3af;}
@media (max-width:640px){
  .crumbs.modern{ gap:6px; }
  .crumbs .crumb{ padding:5px 8px; }
}

/* 共通セレクトボックス（マスタ系画面） */
.form-select {
  height: 40px;
  padding: 6px 10px;
  border: 1px solid #d6d6d6;
  border-radius: 8px;
  background: #fff;
  font-size: 14px;
}

/* === 共通フォームコントロール === */
input[type="text"],
input[type="number"],
select {
  padding: 6px 10px;
  border: 1px solid #d6d6d6;
  border-radius: 8px;   /* ここで丸みを統一 */
  background: #fff;
  font-size: 14px;
}

/* === 共通フォームコントロール（テキストエリアも丸く） === */
textarea {
  padding: 6px 10px;
  border: 1px solid #d6d6d6;
  border-radius: 8px;
  background: #fff;
  font-size: 14px;
  resize: vertical; /* 高さだけ変更可（横幅は固定） */
}

/* ===== 日計表：上半分の履歴テーブル専用 ===== */
.daily-history-wrapper {
  overflow-x: auto;           /* 横スクロールを許可 */
}

.daily-history-table {
  table-layout: fixed;        /* 列幅を均等割りにする */
  min-width: 1800px;          /* 横幅を確保（必要に応じて調整） */
  white-space: nowrap;        /* ヘッダをできるだけ1行で表示 */
  font-size: 12px;
}

.daily-history-table th,
.daily-history-table td {
  vertical-align: middle;
}

/* ===== 日計表：上下分割レイアウト ===== */
.daily-layout {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.daily-top {
  flex-basis: 40%;          /* 初期は画面の上 40% を過去分に */
  min-height: 200px;
  overflow: auto;           /* 上半分だけスクロール */
}

.daily-bottom {
  flex: 0 0 auto;
  min-height: 150px;
  overflow: visible;           /* 下半分だけスクロール */
}

/* ドラッグ用の境界バー */
.daily-divider {
  height: 6px;
  cursor: row-resize;
  background: #f8f9fa;
  border-top: 1px solid #dee2e6;
  border-bottom: 1px solid #dee2e6;
}

/* ===== 日計表：上半分の履歴テーブル ===== */
.daily-history-wrapper {
  overflow: auto;           /* x,y 両方スクロール可（横スクロールバーを出す） */
}

.daily-history-table {
  border-collapse: collapse;
  table-layout: fixed;
  min-width: 1600px;        /* 列数に応じて調整OK。広くすると横スクロールが効く */
  font-size: 12px;
  white-space: nowrap;      /* 項目の縦長折り返しを防ぐ */
}

.daily-history-table thead th {
  border: 1px solid #e9ecef;
  background: #f8f9fa;
  text-align: center;
  vertical-align: middle;
  padding: 4px 6px;
}

.daily-history-table tbody td {
  border: 1px solid #f1f3f5;  /* 薄い罫線 */
  padding: 3px 6px;
}

/* 祝日・土日の色（とりあえず既存ロジックに合わせて） */
.daily-history-table tr.is-sat td {
  color: #228be6;
}
.daily-history-table tr.is-sun td,
.daily-history-table tr.is-holiday td {
  color: #e03131;
}

/* ===== 日計表：本日分入力（カテゴリカード） ===== */
.daily-category-card {
  border: 1px solid #e9ecef;
  border-radius: 8px;
  padding: 8px 12px 10px;
  margin-bottom: 12px;
  background: #ffffff;
}

.daily-category-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 4px;
  border-bottom: 1px solid #f1f3f5;
}

.daily-category-title {
  font-size: 14px;
  font-weight: 600;
}

.daily-badge-required,
.daily-badge-optional {
  font-size: 11px;
  border-radius: 999px;
  padding: 2px 8px;
  border: 1px solid transparent;
}

.daily-badge-required {
  background: #fff4e6;
  border-color: #ffd8a8;
  color: #d9480f;
}

.daily-badge-optional {
  background: #f1f3f5;
  border-color: #dee2e6;
  color: #868e96;
}

/* 入力欄のグリッド配置（2〜3列並び） */
.daily-metrics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 8px 16px;
  margin-top: 8px;
}

.daily-metric-item .form-label {
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 2px;
}

.daily-metric-item .form-text {
  font-size: 11px;
  color: #868e96;
}

/* === 日計表入力：上半分テーブルの横スクロール === */
.daily-history-wrapper {
  overflow-x: auto;         /* 横スクロールを許可 */
  overflow-y: auto;         /* 既存の縦スクロールも維持 */
}

/* テーブル幅を意図的に広げて、横スクロールを発生させる */
.daily-history-table {
  min-width: 1500px;        /* 足りなければ 1800px などに調整 */
}

/* 項目名・値が折り返されてつぶれないようにする */
.daily-history-table th,
.daily-history-table td {
  white-space: nowrap;
}

/* === 日計表入力ページ専用: ページヘッダー & コンテナ幅 === */
.daily-input-page {
  margin: 0 auto 0;
  padding: 0 16px 0;
}

.daily-header {
  margin-bottom: 1rem;
}

.daily-title {
  font-size: 1.6rem;
  font-weight: 600;
  margin: 0 0 0.25rem;
}

.daily-subtitle {
  font-size: 0.95rem;
  color: var(--muted);
}

/* 上半分テーブルの文字を少し大きめに */
.daily-input-page .daily-history-table th,
.daily-input-page .daily-history-table td {
  font-size: 12px;       /* デフォルトより +1pt 程度のイメージ */
}

/* === 日計表入力: 上半分テーブル用スクロール領域 === */
/* 横スクロールを発生させるための最小幅 */
.daily-input-page .daily-history-table {
  min-width: 1600px;      /* 列数に応じて 1800px などに調整可 */
  border-collapse: collapse;
}


/* ===== 日計表：ページレイアウト（左タイトル＋右コンテンツ） ===== */

/* 2 カラムレイアウト本体 */
.daily-page-flex {
  display: flex;
  align-items: flex-start;
  gap: 2.5rem;          /* 左右のすき間 */
}

/* 左側のタイトルブロック */
.daily-side {
  flex: 0 0 220px;      /* 固定幅 220px（必要なら 200〜260 で微調整可） */
  padding: 0 0 16px;
}

/* 左側タイトルの見た目を少しだけ調整 */
.daily-side .page-title {
  font-size: 1.6rem;
  margin: 0 0 0.75rem;
}

/* 右側のメインコンテンツ */
.daily-main {
  flex: 1 1 auto;
  min-width: 0;
}

/* ▼ スタイル②：カード型の見た目 */
.daily-side-card {
  padding: 18px 22px;
  background: #fff;
  border-radius: 16px;
  box-shadow: var(--shadow);
  border: 1px solid #e5e7eb;
}

.daily-side-title {
  font-size: 1.4rem;
  font-weight: 600;
  margin: 0 0 8px;
}

.daily-side-meta {
  font-size: 0.9rem;
  color: var(--muted);
  line-height: 1.5;
}

/* スマホでは縦並びにする */
@media (max-width: 992px) {
  .daily-page-flex {
    flex-direction: column;
  }
  .daily-side {
    flex: 0 0 auto;
  }
}

/* === 日計表入力ページ専用：外側 main.container を横に広げる === */
/* base.html で <main class="container"> の直下に .daily-input-page がある想定 */
main.container:has(> .daily-input-page) {
  max-width: none;      /* 幅は container--fluid に任せる（= 画面いっぱい） */
  padding-left: 0;
  padding-right: 0;
  /* ★CRITICAL FIX★: 日計表ページを持つ main.container のみ、残りの高さを占有させる */
  flex: 1 1 auto;

  /* ★追加：コンテナ共通の上下 5px マージンを消す */
  margin-bottom: 0;
}

/* === 日計表入力ページ専用: ページヘッダー & コンテナ幅 === */
/* inner: base.html の main.container 内側のラッパー */
.container.container--xl.daily-input-page {
  max-width: none !important;  /* ★修正: 汎用 .container の max-width を強制的に解除 */
  width: 100% !important;      /* ★追加: 幅を100%に強制 */
  margin: 2rem 0 0;        /* 上だけ余白。左右は 0（中央寄せは main 側） */
  padding: 0;              /* 左右パディングも main 側に任せる */
}

/* =========================================================
   日計表入力：左タイトル（②案：シンプルな装飾）
   ========================================================= */
.daily-side.simple-style {
  padding: 12px 0;
  margin-right: 24px;
  border-left: 6px solid var(--brand);  /* 青の強調ライン */
}

.simple-title {
  font-size: 24px;
  font-weight: 700;
  margin: 0 0 6px;
  padding-left: 12px;
}

.simple-sub {
  font-size: 14px;
  color: var(--muted);
  padding-left: 12px;
  line-height: 1.5;
}

/* === 日計表入力：左側タイトル（案2：下線タイプ） === */
.daily-input-page .daily-side {
  /* カード風になっている場合を打ち消す */
  background: transparent;
  border: none;
  box-shadow: none;

  padding: 0 0 16px;
}

.daily-input-page .daily-side .page-title {
  font-size: 1.8rem;
  font-weight: 600;
  margin: 0;
  padding-bottom: 6px;                 /* タイトルの下に余白 */
  border-bottom: 3px solid var(--brand); /* 下の青いライン */
  display: inline-block;               /* タイトルの下だけ線を引く */
}

.daily-input-page .daily-side .text-muted {
  margin-top: 8px;
  font-size: 0.95rem;
  color: var(--muted);
}

/* ===== 日計表入力：左タイトル（案2スタイル） ===== */
/* タイトルのスタイル + 下線 */
.daily-side .page-title {
  font-size: 1.6rem;
  font-weight: 700;
  margin: 0 0 6px;
  padding-bottom: 4px;
  border-bottom: 3px solid var(--brand);  /* 青いライン（案2） */
  display: inline-block;                  /* 文字幅ぶんだけ線を引く */
}

/* クリニック名 / 月表示 */
.daily-side .text-muted {
  font-size: 0.95rem;
  color: var(--muted);
  line-height: 1.5;
}

/* =========================================================
   日計表入力：左タイトル（案2：下線タイプ）
   ========================================================= */

/* タイトル（案2） */
.daily-side .page-title {
  font-size: 1.8rem;
  font-weight: 700;
  margin: 0;
  padding-bottom: 6px;
  border-bottom: 3px solid var(--brand);  /* 青線 */
  display: inline-block;
}

/* クリニック名 / 月表示 */
.daily-side .text-muted {
  margin-top: 8px;
  font-size: 0.95rem;
  color: var(--muted);
  line-height: 1.5;
}

/* =========================================
   日計表入力：高さ制御（上・下で個別スクロール）
   ========================================= */
@media (min-width: 993px) {

  /* 右側メインエリアを「画面に収まる高さ」に制限 */
  .daily-main {
    flex: 1 1 auto;
    min-width: 0;
    max-height: calc(100vh - 180px); /* 足りなければ 170 ～ 190 で微調整 */
    overflow: hidden;                /* ここはスクロールさせない */
  }

  /* 上下レイアウトを .daily-main の高さにフィットさせる */
  .daily-layout {
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  /* 上：当月一覧（個別にスクロール） */
  .daily-top {
    flex: 0 0 45%;      /* 初期は画面の上 45% を使用（お好みで 35～50% に調整可） */
    min-height: 200px;
    overflow: auto;     /* ここで縦スクロール */
  }

  /* 下：本日分入力（残りを全部使ってスクロール） */
  .daily-bottom {
    flex: 1 1 0;
    min-height: 150px;
    overflow: auto;     /* ここも縦スクロール */
  }
}

/* =========================================================
   日計表入力ページ専用レイアウト
   （右側を上下２分割スクロールにする）
   ========================================================= */

/* 日計表ページ全体：main の高さをそのままもらう */
.daily-input-page {
  max-width: 1440px;
  margin: 0 auto 0;
  padding: 0 16px 0;

  display: flex;
  flex-direction: column;
  height: 100%;      /* ← main.container の高さを全部使う */
  box-sizing: border-box;
}

/* 左タイトル＋右コンテンツの２カラム本体 */
.daily-page-flex {
  display: flex;
  align-items: flex-start;
  gap: 2.5rem;

  flex: 1 1 auto;    /* 上の余白を除いた残り全部を使う */
  min-height: 0;     /* ネストスクロール用のおまじない */
}

/* 左側（タイトル）は固定幅 */
.daily-side {
  flex: 0 0 220px;
}

/* 右側メインは、縦方向もフレックスで使い切る */
.daily-main {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* 上下分割のラッパー */
.daily-layout {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* 上：過去一覧エリア（高さ 40% くらいを目安） */
.daily-top {
  flex: 0 0 40%;
  min-height: 180px;
  overflow: auto;      /* 上半分だけ縦スクロール */
}

/* 下：本日入力エリア（残り全部） */
.daily-bottom {
  flex: 1 1 0;
  min-height: 150px;
  overflow: auto;      /* 下半分だけ縦スクロール */
}

/* 仕切りバーは高さ固定でOK */
.daily-divider {
  flex: 0 0 auto;
}

/* 上半分の中のテーブル部分は、枠いっぱいに使う */
.daily-top .daily-history-wrapper {
  max-height: none;    /* 以前の max-height を無効化 */
  height: 100%;
}

/* =========================================
   日計表入力レイアウト 再調整（2025-11-xx）
   ========================================= */

/* 左タイトル + 右コンテンツの2カラム本体 */
.daily-page-flex {
  display: flex;
  align-items: flex-start;
  gap: 2.5rem;
}

/* 左側：タイトルブロック */
.daily-side {
  flex: 0 0 220px;   /* 固定幅 */
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 0 16px;
}

/* 右側：メインコンテンツ */
.daily-main {
  flex: 1 1 auto;
  min-width: 0;      /* テーブルの横スクロール用 */
}

/* 上下分割ラッパー */
.daily-layout {
  display: flex;
  flex-direction: column;
  gap: 4px;
  height: auto;      /* 以前の height:calc(100vh-140px) を上書き */
  min-height: 0;
  overflow: visible; /* 以前の overflow:hidden を上書き */
}

/* 上：過去分一覧（初期は 260px くらい） */
.daily-top {
  flex: 0 0 260px;   /* 初期高さ。ドラッグすると inline style で上書きされる */
  min-height: 160px;
  overflow: auto;    /* 上半分だけスクロール */
}

/* 下：本日分入力（残りを全部使う） */
.daily-bottom {
  flex: 1 1 auto;
  min-height: 150px;
  overflow: auto;    /* 下半分だけスクロール */
}

/* スマホなど縦長画面では縦並び */
@media (max-width: 992px) {
  .daily-page-flex {
    flex-direction: column;
  }
  .daily-side {
    flex: 0 0 auto;
  }
}

/* === 日計表入力：過去分テーブル用カードの overflow を解除 === */
.daily-input-page .daily-top .card,
.daily-input-page .daily-top .card-body {
  overflow: visible !important;
}

/* =========================================================
   日計表入力：過去分テーブル スクロール＋2行ヘッダー固定（決定版）
   ========================================================= */

/* 1) .daily-top 自体はスクロールさせず、高さだけ確保する */
.daily-input-page .daily-top {
  display: flex;
  flex-direction: column;
  /* 上下２分割のレイアウトは既存の flex 指定をそのまま利用 */
  overflow: hidden;          /* ← スクロールは wrapper に任せる */
}

/* 2) 中のカードを「高さ100%の入れ物」にする */
.daily-input-page .daily-top .card {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  margin-bottom: 0;          /* ここは好みで調整可。隙間が欲しければ戻してOK */
}

.daily-input-page .daily-top .card-body {
  flex: 1 1 auto;
  min-height: 0;             /* flex 内でスクロールを効かせるおまじない */
  display: flex;
  flex-direction: column;
  padding: 8px 12px;         /* 余白はお好みで。0 にすると枠いっぱいに広がります */
  overflow: hidden;          /* スクロールは wrapper に任せる */
}

/* 3) 実際にスクロールさせる箱は .daily-history-wrapper に統一する */
.daily-input-page .daily-top .daily-history-wrapper {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto !important; /* ← 縦横両方ここでスクロールさせる */
  max-height: none;
  height: 100%;
}

/* 4) sticky ヘッダー（2行分） */
.daily-input-page .daily-history-table {
  border-collapse: separate; /* sticky と相性を良くするため separate 推奨 */
  border-spacing: 0;
}

/* 1行目（カテゴリ行） */
.daily-input-page .daily-history-table thead tr:first-child th {
  position: sticky !important;
  top: 0;
  z-index: 1;
  background-color: #f8f9fb;
  border-bottom: 1px solid #dee2e6;
}

/* 2行目（項目名行） */
.daily-input-page .daily-history-table thead tr:nth-child(2) th {
  position: sticky !important;
  top: 30px;  /* 1行目の高さに合わせて 28〜32px くらいで微調整してください */
  z-index: 1;
  background-color: #f8f9fb;
  border-bottom: 1px solid #dee2e6;
}

/* （必要なら）左上の「日付」セルを横スクロール時も固定したい場合 */
.daily-input-page .daily-history-table thead tr:first-child th:first-child {
  z-index: 2;
}

/* =========================================================
   日計表入力：過去分テーブル 固定ヘッダー（最終版）
   ========================================================= */

/* スクロールさせるのは .daily-history-wrapper だけにする */
.daily-input-page .daily-top,
.daily-input-page .daily-top .card,
.daily-input-page .daily-top .card-body {
  overflow: visible !important;       /* ここはスクロールさせない */
}

.daily-input-page .daily-top .card,
.daily-input-page .daily-top .card-body {
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* 縦横スクロールのコンテナを .daily-history-wrapper に一本化 */
.daily-input-page .daily-top .daily-history-wrapper {
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  max-height: none;
  overflow: auto !important;          /* ← 縦横のスクロールバーはここだけ */
}

/* テーブル本体（sticky が効きやすいように） */
.daily-input-page .daily-top .daily-history-table {
  border-collapse: separate;
  border-spacing: 0;
}

/* 共通：ヘッダーセルを sticky 化 */
.daily-input-page .daily-top .daily-history-table thead th {
  position: sticky !important;
  z-index: 5;
  background-color: #f8f9fb;
  top: 0;
}

/* 1行目（カテゴリ行） */
.daily-input-page .daily-top .daily-history-table thead tr:first-child th {
  top: 0 !important;
}

/* 2行目（項目名行） */
.daily-input-page .daily-top .daily-history-table thead tr:nth-child(2) th {
  top: 28px !important;   /* 1 行目の高さに応じて 26〜30px くらいで微調整可 */
}

/* =================================================================
   【決定版】日計表：上半分テーブルのヘッダー固定修正
   ================================================================= */

/* 1. 親要素(.daily-top)のスクロールを止め、高さを確保する */
.daily-top {
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important; /* ★重要：ここでスクロールさせない */
}

/* 2. カードとカードボディを、親の高さ一杯まで広げる */
.daily-top .card {
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
  margin-bottom: 0 !important;
  height: 100% !important;
  overflow: hidden !important; /* カード自体もスクロールさせない */
}

.daily-top .card-body {
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
  padding: 0 !important;       /* 端までテーブルを表示するため余白削除 */
  overflow: hidden !important;
}

/* 3. ラッパー(.daily-history-wrapper)にだけスクロール機能を持たせる */
.daily-history-wrapper {
  flex: 1 1 auto !important;
  width: 100% !important;
  height: 100% !important;
  max-height: none !important;
  overflow: auto !important;   /* ★重要：スクロールバーはここに出す */
}

/* 4. テーブルの設定（Stickyを効かせるため separate にする） */
.daily-history-table {
  border-collapse: separate !important; 
  border-spacing: 0;
  width: max-content;          /* 内容に合わせて横幅を確保 */
  min-width: 100%;
}

/* 5. ヘッダー固定の設定（1行目・2行目共通） */
.daily-history-table thead th {
  position: sticky !important;
  z-index: 1;
  background-color: #f8f9fa !important; /* 背景色がないと文字が透ける */
  /* 枠線の見切れ防止 */
  border-top: 1px solid #dee2e6;
  border-bottom: 1px solid #dee2e6;
  border-right: 1px solid #dee2e6; 
  box-shadow: inset 0 1px 0 #dee2e6, inset 0 -1px 0 #dee2e6; /* 枠線補強 */
}

/* --- 1行目（カテゴリ）の固定位置 --- */
.daily-history-table thead tr:first-child th {
  top: 0 !important;
  z-index: 11; /* 2行目より少し上扱い */
}

/* --- 2行目（項目名）の固定位置 --- */
.daily-history-table thead tr:nth-child(2) th {
  /* ★重要: 1行目の高さ分だけずらす。
     表示崩れする場合、この 33px を 30px〜40px の間で微調整してください */
  top: 33px !important; 
  z-index: 10;
  border-top: none; /* 1行目との境界線重複を防ぐ */
}

/* (任意) 左上の「日付」セルだけは、横スクロールしても常に左上に居てほしい場合 */
.daily-history-table thead tr:first-child th:first-child {
  left: 0 !important;
  z-index: 12 !important; /* 最前面 */
  border-left: 1px solid #dee2e6;
}

/* 左列の日付データ部分も横スクロール固定したい場合（任意） */
/*
.daily-history-table tbody td:first-child {
  position: sticky !important;
  left: 0 !important;
  background-color: #fff;
  z-index: 9;
  border-right: 1px solid #dee2e6;
}
*/


/* =================================================================
   【追加】日計表：左端「日付」列の横スクロール固定
   ================================================================= */

/* 1. 左上の「日付」ヘッダーセル（最強の固定） */
/* 縦スクロールでも横スクロールでもその場に留まる */
.daily-history-table thead tr:first-child th:first-child {
  left: 0 !important;
  z-index: 20 !important;        /* 他のヘッダー(z=10)より手前に表示 */
  border-right: 1px solid #dee2e6; /* 固定列の右に境界線を表示 */
  
  /* 念のため背景色を再指定（透け防止） */
  background-color: #f8f9fa !important; 
}

/* 2. ボディ部分の「日付」列（tbodyの1列目） */
/* 横スクロールしたときに左端に張り付く */
.daily-history-table tbody td:first-child {
  position: sticky !important;
  left: 0 !important;
  z-index: 15 !important;        /* 普通のセルより上、ヘッダーよりは下 */
  background-color: #fff !important; /* ★重要：背景を白にしないと文字が透けて重なる */
  border-right: 1px solid #dee2e6; /* 固定列の右に境界線を表示 */
}

/* (微調整) 固定列に影をつけて浮いているように見せたい場合（お好みで） */
/*
.daily-history-table thead tr:first-child th:first-child,
.daily-history-table tbody td:first-child {
  box-shadow: 2px 0 5px rgba(0,0,0,0.05);
  clip-path: inset(0 -10px 0 0);
}
*/

/* =========================================================
   日計表：手動入力以外の項目列の色分け
   - semi_auto / auto_calc / auto_batch を対象
   ========================================================= */

/* 列全体（ボディ部）を薄く色付け */
.daily-input-page .daily-history-table col.metric-auto-col {
  background-color: #fffaf0;   /* やわらかい薄い色：お好みで調整可 */
}

/* ヘッダー（項目名行）の背景を少し濃いめに */
.daily-input-page .daily-history-table thead th.metric-auto-header {
  background-color: #fff4d6 !important;
}

/* ★★★ 強制幅解除テスト（main.css の一番下に追加） ★★★ */
/* 画面幅全体 (body) > main コンテナ (container) > daily-input-page の順に指定 */
body main.container .daily-input-page {
    max-width: none !important;
    width: 100% !important;
}

/* 下半分：自動系項目の軽いハイライト */
.daily-metric-auto {
  background-color: #fffaf0;   /* 上半分とトーンを揃えた、ごく薄い色 */
  border-radius: 6px;
  padding: 6px 8px;
}

.daily-metric-auto .form-label {
  font-weight: 600;
}

.daily-metric-auto input[readonly] {
  background-color: #fff7e0;
}

/* 日計表ページだけフッター上の余白を少し詰める */
.daily-input-page .site-footer {
  margin-top: 8px;  /* お好みで 0〜12px くらいに調整可。元は 28px */
}

/* $$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$  */

/* ==============================================
   ステップ1：枠の余白を消してテーブルを密着させる
   ============================================== */

/* カード（外枠）の余白をゼロにする */
.daily-input-page .daily-top .card {
  padding: 0 !important;       /* カード内側の余白を削除 */
  overflow: hidden;            /* 角丸からテーブルがはみ出ないようにする */
}

/* カードボディ（中身）の余白もゼロにする */
.daily-input-page .daily-top .card-body {
  padding: 0 !important;       /* これでテーブルが端まで広がります */
}

/* --- 修正版：ヘッダーの余白を詰める --- */

/* カードヘッダー */
.daily-input-page .daily-top .card-header {
  /* 既存： padding: 12px 16px; */
  padding: 8px 12px !important; /* ← 上下を8pxに縮小 */
  border-bottom: 1px solid #e5e7eb;
  /* 高さ方向の中央揃えを確実にする */
  display: flex;
  align-items: center;
  min-height: 40px; /* 必要なら最小高さを指定 */
}

/* カードタイトル（文字部分） */
.daily-input-page .card-title {
  margin-top: 0 !important;      /* 上下の余白を完全に消す */
  line-height: 1.2;          /* 行間も少し詰める */
}



/* ==============================================
   ステップ2：CSV取込エリア（ドラッグ＆ドロップ）のデザイン
   ============================================== */

/* CSV取込行のコンテナ */
.daily-input-page .import-row {
  display: flex;
  align-items: center;       /* 上下中央揃え */
  padding: 16px;
  background-color: #f9fafb; /* 少し背景色をつけてエリアを区別 */
  border-bottom: 1px solid #e5e7eb;
}

/* ドラッグ＆ドロップエリア（点線枠） */
.daily-input-page .dropzone {
  flex: 1;                   /* 横幅いっぱいに広げる */
  border: 2px dashed #d1d5db;/* グレーの点線 */
  border-radius: 8px;
  padding: 24px;
  text-align: center;
  background-color: #fff;
  color: #6b7280;            /* 文字色（グレー） */
  transition: all 0.2s ease;
}

/* ファイルをドラッグして乗せた時のハイライト（JSでクラス付与） */
.daily-input-page .dropzone.dragover {
  border-color: #2563eb;     /* 青色に変更 */
  background-color: #eff6ff; /* 薄い青背景 */
  color: #2563eb;
}

/* 右側のボタンエリア */
.daily-input-page .import-actions {
  display: flex;
  flex-direction: column;    /* ボタンを縦に並べる（横なら row に変更可） */
  gap: 8px;
  margin-left: 16px;
  min-width: 120px;          /* ボタン幅をある程度確保 */
}

/* HTMLで使用したクラスのスタイル定義（main.cssにない場合への備え） */
.daily-input-page .btn-outline-secondary {
  background: #fff;
  border: 1px solid #d1d5db;
  color: #374151;
}
.daily-input-page .btn-outline-secondary:hover {
  background: #f3f4f6;
  color: #111;
}

/* ==============================================
   ステップ3：入力フォームのレイアウト改善（3列・上下配置）
   ============================================== */

/* 1. グリッドを3列固定にする */
.daily-input-page .daily-metrics-grid {
  display: grid;
  /* 画面幅に応じて3列を基本とする */
  grid-template-columns: repeat(3, 1fr);
  /* 項目間の隙間を調整（横24px, 縦20px） */
  gap: 20px 24px;
  margin-top: 12px;
}

/* 画面が狭いとき（タブレット・スマホ）用の調整 */
@media (max-width: 900px) {
  .daily-input-page .daily-metrics-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 600px) {
  .daily-input-page .daily-metrics-grid {
    grid-template-columns: 1fr;
  }
}

/* 2. 各項目のレイアウト（ラベル上・入力下） */
.daily-input-page .daily-metric-item {
  display: flex;
  flex-direction: column; /* 縦並びにする */
  gap: 6px;               /* ラベルと入力欄の隙間 */
}

/* ラベルのデザイン */
.daily-input-page .daily-metric-item .form-label {
  font-size: 12px;
  color: #6b7280;         /* 薄いグレー */
  font-weight: 500;
  display: flex;
  align-items: center;    /* 単位などを垂直中央揃え */
  margin: 0;
}

/* 単位（ラベル内の span） */
.daily-input-page .daily-metric-item .text-muted.small {
  font-size: 11px;
  color: #9ca3af;
  margin-left: 6px;
}

/* 入力欄のデザイン（サンプル風） */
.daily-input-page .daily-metric-item input[type="number"],
.daily-input-page .daily-metric-item input[type="text"] {
  width: 100%;
  height: 42px;           /* 高さを少し広げて押しやすく */
  padding: 10px 12px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  background-color: #f9fafb; /* 少しグレーがかった背景 */
  font-size: 14px;
  text-align: right;         /* 数値は右寄せ */
  transition: all 0.2s;
}

/* 入力時のフォーカス表現 */
.daily-input-page .daily-metric-item input:focus {
  background-color: #fff;
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
  outline: none;
}

/* 自動計算項目（readonly）の見た目 */
.daily-input-page .daily-metric-item input[readonly] {
  background-color: #f3f4f6; /* 入力不可とわかるグレー */
  color: #6b7280;
  border-color: #e5e7eb;
  cursor: default;
}

/* ==============================================
   ステップ4：入力欄のカスタマイズ（列数・必須色）
   ============================================== */

/* 必須項目のラベルを赤字にする */
.daily-input-page .field label.text-danger {
  color: #e03131; /* 鮮やかな赤 */
  font-weight: 700;
}
/* 赤字になった場合、単位（unit）の色も少し調整 */
.daily-input-page .field label.text-danger .unit {
  color: #ff8787; /* 親の赤に合わせて少し薄く */
}

/* 「分析」カテゴリ用の5列グリッド */
.daily-input-page .fields.cols-5 {
  grid-template-columns: repeat(5, 1fr);
}

/* --- レスポンシブ対応（画面が狭いときは列数を減らす） --- */

/* 画面幅 1200px以下なら 5列→3列 に戻す */
@media (max-width: 1200px) {
  .daily-input-page .fields.cols-5 {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* 画面幅 900px以下なら 全て2列に */
@media (max-width: 900px) {
  .daily-input-page .fields,
  .daily-input-page .fields.cols-5 {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* 画面幅 600px以下なら 全て1列に */
@media (max-width: 600px) {
  .daily-input-page .fields,
  .daily-input-page .fields.cols-5 {
    grid-template-columns: 1fr;
  }
}
/* ==============================================
   ステップ3 & 4 修正版：新しいHTML構造用レイアウト
   ============================================== */

/* 1. 入力項目のグリッドコンテナ (.fields) */
.daily-input-page .fields {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* デフォルトは3列 */
  gap: 20px 24px;
  padding: 12px 14px;
}

/* 「分析」カテゴリ用の5列グリッド */
.daily-input-page .fields.cols-5 {
  grid-template-columns: repeat(5, 1fr);
}

/* 2. 各項目のレイアウト (.field) */
.daily-input-page .field {
  display: flex;
  flex-direction: column; /* ラベルを上、入力欄を下へ */
  gap: 6px;
}

/* ラベルのデザイン */
.daily-input-page .field label {
  font-size: 12px;
  color: #6b7280;
  font-weight: 500;
  display: flex;
  align-items: center;
  margin: 0;
}

/* 必須項目の赤字設定 */
.daily-input-page .field label.text-danger {
  color: #e03131;
  font-weight: 700;
}

/* 単位（label内のspan） */
.daily-input-page .field .unit {
  font-size: 11px;
  color: #9ca3af;
  margin-left: 6px;
}
/* 必須項目の単位色 */
.daily-input-page .field label.text-danger .unit {
  color: #ff8787;
}

/* 3. 入力欄のデザイン */
.daily-input-page .field input[type="number"],
.daily-input-page .field input[type="text"] {
  width: 100%;
  height: 42px;
  padding: 10px 12px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  background-color: #f9fafb;
  font-size: 14px;
  text-align: right;
  transition: all 0.2s;
}

.daily-input-page .field input:focus {
  background-color: #fff;
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
  outline: none;
}

.daily-input-page .field input[readonly] {
  background-color: #f3f4f6;
  color: #6b7280;
  border-color: #e5e7eb;
  cursor: default;
}

/* --- レスポンシブ対応 --- */
@media (max-width: 1200px) {
  .daily-input-page .fields.cols-5 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
  .daily-input-page .fields,
  .daily-input-page .fields.cols-5 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .daily-input-page .fields,
  .daily-input-page .fields.cols-5 { grid-template-columns: 1fr; }
}

/* ==============================================
   ステップ5：カテゴリ枠のデザインと自動項目の色付け
   ============================================== */

/* 1. カテゴリ全体をカード化して区切る */
.daily-input-page .section {
  background-color: #fff;
  border: 1px solid #e5e7eb;    /* 薄い枠線 */
  border-radius: 8px;           /* 角丸 */
  margin-bottom: 16px;          /* 下のカテゴリとの間隔 */
  overflow: hidden;             /* 内部のはみ出し防止 */
  box-shadow: 0 1px 2px rgba(0,0,0,0.05); /* ごく薄い影 */
}

/* カテゴリヘッダー（グレーの帯） */
.daily-input-page .section .head {
  background-color: #f9fafb;
  padding: 10px 14px;
  border-bottom: 1px solid #e5e7eb;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.daily-input-page .section .head h3 {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: #111827;
}

/* 2. 自動入力項目（auto-field）の色付け */
/* 入力欄の背景を薄い黄色にする */
.daily-input-page .field.auto-field input {
  background-color: #fffbeb;    /* 薄い黄色 */
  border-color: #fef3c7;        /* 黄色の枠線 */
  color: #92400e;               /* 茶色っぽい文字 */
}

/* 自動項目のラベルバッジ */
.daily-input-page .badge.auto-badge {
  background-color: #fffbeb;
  color: #b45309;
  border: 1px solid #fcd34d;
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 4px;
  margin-left: auto; /* ラベルの右端に寄せる */
}

/* コンテナ全体の余白調整（任意） */
.daily-input-page .input-sections {
  padding: 16px 0; /* 上下に少し余白 */
}

/* ==============================================
   ステップ6：ZIPパスワード入力欄のデザイン
   ============================================== */

/* パスワード入力のラッパー */
.daily-input-page .pass-wrapper {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 4px; /* ボタンとの隙間 */
  justify-content: flex-end; /* 右寄せ */
}

/* ラベル "Pass:" */
.daily-input-page .pass-label {
  font-size: 11px;
  color: #6b7280;
}

/* 入力欄 */
.daily-input-page .input-pass {
  width: 60px;          /* 必要最小限の幅 */
  height: 28px;         /* ボタンより少し小さく */
  padding: 0 6px;
  font-size: 12px;
  text-align: center;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  background-color: #fff;
  color: #374151;
}
.daily-input-page .input-pass:focus {
  border-color: #2563eb;
  outline: none;
}


/* ==============================================
   ステップ2最終版：CSVエリア（左）を最大化し、ボタン（右）を端に寄せる
   ============================================== */

/* 行全体のコンテナ */
.daily-input-page .import-row {
  display: flex;
  align-items: stretch; /* 高さを揃える */
  gap: 20px;
  padding: 16px;
  background-color: #f9fafb;
  border-bottom: 1px solid #e5e7eb;
}

/* 左側の取込グループ（ここを最大限広げる！） */
.daily-input-page .import-group {
  flex: 1 1 auto;       /* ★重要: 残りの幅をすべて奪う */
  display: flex;
  gap: 12px;
  align-items: center;
  min-width: 0;         /* 縮小可能にしてはみ出し防止 */
}

/* ドロップゾーン（親に合わせて広げる） */
.daily-input-page .dropzone {
  width: 100%;          /* ★重要: 親(import-group)の幅いっぱいに */
  height: 100%;         /* 高さも合わせる */
  padding: 16px;
  border: 2px dashed #d1d5db;
  border-radius: 8px;
  text-align: center;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  /* flex: 1; は不要（width: 100% で十分） */
}

/* ファイル選択後のアクションボタン群 */
.daily-input-page .import-actions {
  flex: 0 0 auto;       /* 幅を固定（中身に合わせる） */
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* 右側の計算ボタングループ（幅を中身に合わせる） */
.daily-input-page .calc-group {
  flex: 0 0 auto;       /* ★重要: 伸び縮みさせない */
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-left: 20px;
  border-left: 1px solid #e5e7eb;
  min-width: 160px;     /* 最低幅保証 */
}

/* 自動計算ボタン */
.daily-input-page #btnCalcUpdate {
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;

  background-color: #10b981;
  color: #ffffff;
  border: 1px solid #059669;
  font-size: 14px;
  font-weight: 700;
  border-radius: 6px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  transition: all 0.2s;
}
.daily-input-page #btnCalcUpdate:hover {
  background-color: #059669;
  transform: translateY(-1px);
}

/* 注釈テキスト */
.daily-input-page .calc-group .text-muted {
  margin-top: 6px;
  text-align: center;
  font-size: 10px;
  line-height: 1.2;
  white-space: nowrap;
}

/* その他パーツ */
.daily-input-page .select-link {
  color: #2563eb; cursor: pointer; text-decoration: underline; margin-left: 4px;
}
.daily-input-page .pass-wrapper {
  display: flex; align-items: center; gap: 4px; margin-bottom: 4px; justify-content: flex-end;
}
.daily-input-page .pass-label { font-size: 11px; color: #6b7280; }
.daily-input-page .input-pass {
  width: 60px; height: 28px; padding: 0 6px; font-size: 12px; text-align: center;
  border: 1px solid #d1d5db; border-radius: 4px; background-color: #fff; color: #374151;
}

/* =========================================================
   【修正版】カテゴリヘッダーの色変更（クラス名 .head 対応）
   ========================================================= */
/* 現在のHTML構造 (.section > .head) に合わせて指定します */
.daily-input-page .section .head {
  /* 視認性を高めるため濃いグレーに変更 */
  background-color: #e2e8f0 !important;

  /* 下線も濃くする */
  border-bottom: 1px solid #cbd5e1 !important;
}

/* =========================================================
   【修正】自動入力項目のスタイル（クラス名 .auto-field 対応）
   ========================================================= */
/* 通常時は readonly なので薄い黄色 + ヘルプカーソル */
.daily-input-page .auto-field input[readonly] {
  background-color: #fffaf0 !important;
  cursor: help !important;
}

/* ロック解除後（readonly属性が消えたら）は白背景に戻る */
.daily-input-page .auto-field input:not([readonly]) {
  background-color: #ffffff !important;
  cursor: text !important;
  border-color: #2563eb !important;
}

/* =========================================================
   【UI調整】日計表入力画面：スロット区切りとヘッダー色
   ========================================================= */

/* --- 1. 診療科（スロット）の区切りを明確化 --- */

/* スロットヘッダー（小見出し） */
.daily-input-page .slot-header {
  background-color: #f1f5f9 !important; /* 薄いグレー */
  color: #1e293b !important;            /* 濃い文字色 */
  font-size: 14px !important;
  padding: 10px 14px !important;
  border-bottom: 2px solid #cbd5e1 !important; /* 下線を太く */
  border-top: 1px solid #e2e8f0;
  margin-top: 0;
}

/* 2つ目以降のスロット枠の上には太い境界線を入れる */
.daily-input-page .slot-header:not(:first-child) {
  border-top: 4px solid #cbd5e1 !important; /* 太い区切り線 */
  margin-top: 20px !important;              /* 上に隙間を空ける */
}

/* スロット内の入力エリア（余白調整） */
.daily-input-page .fields {
  padding-bottom: 24px !important; /* 下に余白を持たせる */
}


/* --- 2. カテゴリヘッダー（大見出し）のデザイン --- */

/* ヘッダー帯（落ち着いたスレートブルー） */
.daily-input-page .section .head {
  background-color: #334155 !important; /* 濃い紺色 */
  border-bottom: 1px solid #1e293b !important;
}

/* ヘッダー内の文字色（白） */
.daily-input-page .section .head h3 {
  color: #f8fafc !important; /* 真っ白よりわずかに柔らかい白 */
  font-weight: 700 !important;
  letter-spacing: 0.05em;
}

/* =========================================================
   【UI調整】値が入っているセルの強調表示
   ========================================================= */

/* 1. 手動入力項目：値が入ると「薄い青グレー」にする */
.daily-input-page .field input:not([readonly]):not(:placeholder-shown) {
  background-color: #f1f5f9 !important; /* 値あり：少し濃いグレー */
  border-color: #94a3b8;                 /* 枠線も少し濃く */
  font-weight: 600;                      /* 文字を太く */
}

/* 2. 自動入力項目：値が入ると「濃いめの黄色」にする */
/* (通常は #fffaf0 薄い黄色) */
.daily-input-page .field.auto-field input[readonly]:not(:placeholder-shown) {
  background-color: #fef08a !important; /* 値あり：しっかりした黄色 */
  border-color: #facc15;                 /* 枠線も強調 */
  font-weight: 600;
  color: #854d0e;                        /* 文字色を濃い茶色に */
}

/* =========================================================
   【UI調整】日計表入力画面：スロット区切りとヘッダー色（最終版）
   ========================================================= */

/* --- 1. 診療科（スロット）の区切りを明確化 --- */

/* スロットヘッダー（小見出し: 小児科1診など） */
.daily-input-page .slot-header {
  background-color: #f1f5f9 !important; /* 薄いグレー */
  color: #1e293b !important;            /* 濃い文字色 */
  font-size: 14px !important;
  padding: 10px 14px !important;
  border-bottom: 2px solid #cbd5e1 !important; /* 下線を太くして区切りを明確に */
  border-top: 1px solid #e2e8f0;
  margin-top: 0;
}

/* 2つ目以降のスロット枠の上には太い境界線を入れる */
.daily-input-page .slot-header:not(:first-child) {
  border-top: 4px solid #cbd5e1 !important; /* 太い区切り線 */
  margin-top: 20px !important;              /* 上に隙間を空ける */
}

/* スロット内の入力エリア（余白調整） */
.daily-input-page .fields {
  padding-bottom: 24px !important; /* 下に余白を持たせる */
}


/* --- 2. カテゴリヘッダー（大見出し: 診療室など）のデザイン --- */

/* ヘッダー帯（落ち着いたスレートブルー） */
.daily-input-page .section .head {
  background-color: #334155 !important; /* 濃い紺色 */
  border-bottom: 1px solid #1e293b !important;
}

/* ヘッダー内の文字色（白） */
.daily-input-page .section .head h3 {
  color: #f8fafc !important; /* 真っ白よりわずかに柔らかい白 */
  font-weight: 700 !important;
  letter-spacing: 0.05em;
}

/* ===== お知らせ設定ページ専用スタイル ===== */

/* セクションタイトル（ヘッダー風） */
.section-header {
  font-weight: 700;
  margin: -18px -18px 16px -18px;
  font-size: 16px;
  background: #f0f4f8;
  padding: 10px 12px;
  border-bottom: 1px solid #d1dae3;
  color: #222;
  border-radius: 12px 12px 0 0;
}

/* 登録済みエリアのセクションタイトル（下のマージンを調整） */
.section-header.list-header {
  margin-bottom: 12px;
}

/* お知らせ設定のカードボックス */
.announcement-card {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 12px;
  padding: 18px;
  margin-bottom: 16px;
}

/* フォーム行の共通スタイル */
.announcement-form-row {
  margin-bottom: 16px;
}

/* フォームグリッド（横並びレイアウト） */
.announcement-form-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 16px;
}

/* レスポンシブ対応 */
@media (max-width: 992px) {
  .announcement-form-grid {
    grid-template-columns: 1fr;
  }
}

/* フォームラベルの共通スタイル */
.announcement-form-label {
  display: block;
  font-weight: 400;
  font-size: 14px;
  color: #374151;
  margin-bottom: 4px;
}

/* テキストエリアのスタイル */
.announcement-textarea {
  width: 100%;
  padding: 6px 10px;
  border: 1px solid #d6d6d6;
  border-radius: 8px;
  background: #fff;
  font-size: 14px;
  resize: vertical;
  font-family: inherit;
}

/* 日時・日付入力欄のスタイル */
.announcement-input {
  width: 100%;
  padding: 6px 10px;
  border: 1px solid #d6d6d6;
  border-radius: 8px;
  background: #fff;
  font-size: 14px;
}

/* セレクトボックスのスタイル */
.announcement-select {
  width: 100%;
  height: 40px;
  padding: 6px 10px;
  border: 1px solid #d6d6d6;
  border-radius: 8px;
  background: #fff;
  font-size: 14px;
}

/* チェックボックス行のスタイル */
.announcement-checkbox-row {
  margin-bottom: 20px;
}

/* チェックボックスラベル */
.announcement-checkbox-label {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.announcement-checkbox-label input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin-right: 8px;
  cursor: pointer;
}

.announcement-checkbox-label span {
  font-size: 14px;
  color: #374151;
}

/* ボタングループ */
.announcement-btn-group {
  display: flex;
  gap: 10px;
  margin-top: 12px;
}

/* 更新ボタンエリア */
.announcement-update-area {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 12px;
}

/* テーブルラッパー */
.announcement-table-wrapper {
  overflow-x: auto;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 12px;
  overflow: hidden;
}

/* テーブル本体 */
.announcement-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 14px;
}

/* テーブルヘッダー */
.announcement-table thead tr {
  text-align: left;
  background: #fafafa;
  border-bottom: 1px solid #eee;
}

.announcement-table thead th {
  padding: 10px 12px;
  vertical-align: top;
}

/* テーブルボディ */
.announcement-table tbody tr {
  cursor: pointer;
  border-bottom: 1px solid #f3f4f6;
}

.announcement-table tbody tr:hover {
  background: #f9fafb;
}

.announcement-table tbody td {
  padding: 10px 12px;
  vertical-align: top;
}

/* テーブル内の文字色 */
.announcement-table tbody td.text-muted {
  color: #6b7280;
  font-size: 13px;
}

/* テーブル内の文字省略 */
.announcement-table tbody td.text-truncate {
  max-width: 300px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* バッジスタイル */
.announcement-badge {
  padding: 2px 6px;
  border-radius: 6px;
  font-size: 11px;
}

.announcement-badge.badge-yes {
  background: #dbeafe;
  color: #1e40af;
}

.announcement-badge.badge-no {
  background: #f3f4f6;
  color: #6b7280;
}

/* 編集ボタン */
.announcement-edit-btn {
  background: #fff;
  border: 1px solid #d6d6d6;
  color: #111;
  border-radius: 8px;
  padding: 4px 10px;
  font-size: 13px;
  cursor: pointer;
}

.announcement-edit-btn:hover {
  background: #f9fafb;
}

/* 空状態 */
.announcement-empty {
  text-align: center;
  padding: 32px 20px;
  color: #9ca3af;
}

.announcement-empty svg {
  margin: 0 auto 10px;
  opacity: 0.25;
}

.announcement-empty p {
  font-size: 14px;
  margin: 0;
  color: #9ca3af;
}

/* 更新ボタン（小） */
.announcement-update-btn {
  display: inline-block;
  padding: 6px 10px;
  border: 1px solid #d6d6d6;
  border-radius: 8px;
  background: #fff;
  color: #2563eb;
  text-decoration: none;
  font-size: 13px;
}

.announcement-update-btn:hover {
  background: #f9fafb;
}

/* テーブル列幅の指定 */
.announcement-table th.col-num { width: 36px; }
.announcement-table th.col-datetime { width: 160px; }
.announcement-table th.col-date { width: 120px; }
.announcement-table th.col-clinic { width: 140px; }
.announcement-table th.col-sendall { width: 100px; text-align: center; }
.announcement-table th.col-action { width: 80px; text-align: center; }

/* main が flex レイアウトの子として縮むのを防ぐ */
main.container {
  flex: 1 1 auto !important;
  width: 100% !important;
  max-width: 1440px !important; /* ここは既存に合わせる */
}

/* ==============================
   Settings layout unified (820px)
   タイトル / パンくず / カード / ボタン列の「位置」と「幅」だけを統一
   ============================== */

.container.container--xl .page-title,
.container.container--xl nav.crumbs.modern,
.container.container--xl .table-wrap,
.container.container--xl .form-actions{
  width: 100%;
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
}

/* パンくずは左寄せ固定 */
.container.container--xl nav.crumbs.modern{
  justify-content: flex-start;
}

/* ボタン列は横並び・折り返し */
.container.container--xl .form-actions{
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

/* === 設定画面共通：カード枠 === */
.table-wrap{
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--shadow);
}

/* === 設定画面共通：テーブル === */
.table--settings{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
}
.table--settings thead tr{ background:#fafafa; }
.table--settings th,
.table--settings td{
  padding:10px 12px;
  border-bottom:1px solid #f3f4f6;
  text-align:left;
  vertical-align:top;
}

/* 大入り：小物（他一覧でも使える） */
.col-n{ width:36px; }
.col-amount{ width:300px; }
.row-title{ font-weight:600; }
.row-sub{ font-size:12px; color:#6b7280; margin-top:2px; }
.goal-input{ width:100%; text-align:right; }


/* === 設定系：アクション行（保存/戻る）の共通余白 === */
.form-actions{
  margin-top: 16px;
}

/* === FIX: category settings table clipped on full width === */
.container.container--xl{
  width: 100% !important;
  max-width: 1440px !important; /* 既存と同じだが末尾で確実に勝たせる */
  min-width: 0;                 /* flex/layoutでの縮みバグ回避 */
}

/* 保険区分：6列 */
.daily-input-page .fields.cols-6 {
  grid-template-columns: repeat(6, 1fr);
}

/* 画面幅 1200px以下なら 6列→3列（cols-5 と同じ落とし方） */
@media (max-width: 1200px) {
  .daily-input-page .fields.cols-6 {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* 画面幅 900px以下なら 2列 */
@media (max-width: 900px) {
  .daily-input-page .fields.cols-6 {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* 画面幅 600px以下なら 1列 */
@media (max-width: 600px) {
  .daily-input-page .fields.cols-6 {
    grid-template-columns: 1fr;
  }
}