@charset "utf-8";

/* ============================================================================
   パーツ定義（module.css）
   ============================================================================
   
   セクション構成
   1. ヘッダー
   2. メインエリア
   3. サイドバー
   4. ページタイトル
   5. 検索エリア
   6. テーブル
   7. フォーム要素
   8. ボタン
   9. ラベル
   10. 見出し
   11. ボックス
   12. カード
   13. アコーディオン
   14. ダイアログ、モーダル
   15. ローディング
   16. ページャー
   17. タブ
   18. アップロード
   19. カレンダー
   20. ログイン
   
============================================================================ */

/* ============================================================================
   1. ヘッダー
============================================================================ */
.header {
  position: fixed;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  background-color: #fff;
  width: 100%;
  height: var(--header-h);
  padding: 0 14px;
  border-bottom: 1px solid var(--c-bdr-2);
  box-sizing: border-box;
  z-index: 100;
}

.header-R {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

/* ロゴ */
.header-ttl {
  font-size: 15px;
  font-weight: 700;
}

.header-ttl a {
  color: var(--c-text-ttl);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 9px;
  letter-spacing: 0.01em;
}
.header-ttl a i {
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--c-main);
  color: #fff;
  border-radius: var(--radius);
  font-size: 12px;
}

.header-ttl a:hover {
  opacity: 0.8;
}

/* ユーザー名 */
.header-name {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.2s ease;
}

.header-name:hover {
  background: #f5f5f5;
}

.header-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  background: var(--color-secondary);
  border-radius: 50%;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
}

.header-name > span:not(.header-avatar) {
  color: var(--c-text-ttl);
  font-size: 12.5px;
  font-weight: 600;
}

.header-name i {
  color: #999;
  font-size: 10px;
  margin-left: 4px;
}

/* ハンバーガーボタン（SP） */
.header-sp {
  float: right;
}

.header-sp-btn {
  position: relative;
  width: 36px;
  height: 23px;
  display: inline-block;
  background-color: transparent;
  border: none;
  cursor: pointer;
}

.header-sp-btn span {
  width: 36px;
  height: 2px;
  display: block;
  background-color: #333;
  position: absolute;
  left: 0;
  transition: all 0.3s ease;
}

.header-sp-btn span:nth-child(1) {
  top: 0;
}
.header-sp-btn span:nth-child(2) {
  top: calc(50% - 1px);
}
.header-sp-btn span:nth-child(3) {
  bottom: 0;
}

@media screen and (max-width: 1200px) {
  .header {
    padding: 0 16px;
  }

  
}

/* ============================================================================
   2. メインエリア
============================================================================ */
.main {
  width: calc(100% - var(--sidebar-w));
  margin-left: var(--sidebar-w);
  padding: var(--header-h) 12px 0 12px;
  box-sizing: border-box;
  transition: 0.3s ease;
  background-color: var(--c-bg-page);
  min-height: 100vh;
}

.main.is-close {
  width: 100%;
  margin-left: 0;
  padding-left: 0;
  transition: 0.3s ease;
}
/* サイドバー折りたたみ時はメインを全幅に（app-ui で確実に効くよう優先度を上げる） */
body.app-ui .main.is-close {
  width: 100% !important;
  margin-left: 0 !important;
  padding-left: 0 !important;
}

/* メインボックス
   - 一画面に多くのコンテンツを収めるため余白を圧縮
*/
.main-inner {
  background-color: #fff;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05);
  padding: 8px 12px 14px;
  min-height: calc(100vh - var(--header-h) - 8px);
}
@media screen and (max-width: 1200px) {
  .main-inner {
    padding: 8px 10px 14px;
  }
}

@media screen and (max-width: 1200px) {
  .main {
    width: 100%;
    margin-left: 0;
    padding: var(--header-h) 0 0 0;
    transition: 0.3s ease;
  }
  .main.is-close {
    width: 100%;
    margin-left: 0;
    padding-left: 0;
    transition: 0.3s ease;
  }
  .main-inner {
    padding: 8px 10px 14px;
  }
}

/* インナーレイアウト */
.inner {
  width: 100%;
  margin: 0 auto;
  padding: 60px 0;
}
@media screen and (max-width: 768px) {
  .inner {
    width: 100%;
  }
}

/* ２カラム */
.l-2col {
  display: flex;
  width: 100%;
  height: 100%;
  justify-content: space-between;
}
.l-2col form {
  width: 100%;
}
.l-2col-box {
  width: 49.5%;
}

.edit-2col {
  display: flex;
  gap: 16px;
}
.edit-2col > div {
  flex: 1;
  min-width: 0;
}
/* 編集ver1の請求/経費（edit-2col）：詰まって見えるため 10016 風に行・見出しへゆとりを持たせる */
.edit-2col .group-label {
  font-size: 13px;
  padding: 0;
  margin: 14px 0 9px;
  color: var(--c-text-ttl);
}
.edit-2col .tbl-list tbody td {
  height: 40px;
  padding: 6px 12px;
  font-size: 12.5px;
}
.edit-2col .tbl-list thead th {
  padding: 8px 12px;
}

@media screen and (max-width: 768px) {
  .l-2col {
    display: block;
  }
  .l-2col-box {
    display: block;
    width: 100%;
  }
}

/* ============================================================================
   3. サイドバー
============================================================================ */
.sidebar {
  position: fixed;
  top: var(--header-h);
  left: 0;
  height: calc(100vh - var(--header-h));
  width: var(--sidebar-w);
  background-color: #f4f6f9;
  overflow: hidden;
  overflow-y: auto;
  transition: 0.3s ease;
  border-right: 1px solid #e2e8f0;
}
.sidebar.is-close {
  left: calc(-1 * var(--sidebar-w));
}
.sidebar li {
  display: table;
  width: 100%;
}
.sidebar li button {
  width: 100%;
  height: 34px;
  padding: 0 12px;
  text-align: left;
  color: #475569;
  font-size: 13px;
  font-weight: 700;
  border-width: 0;
  border-left: 3px solid transparent;
  background-color: transparent;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.sidebar li button.is-open {
  background-color: #ededed;
}
.sidebar-list {
  margin-top: 5px;
}
.sidebar-list ul {
  background-color: #f8f8f8;
}
.sidebar a {
  display: table-cell;
  width: 100%;
  height: 32px;
  vertical-align: middle;
  padding-left: 12%;
  color: #64748b;
  font-weight: 600;
  font-size: 12.5px;
  line-height: 1.3;
  border-width: 0;
  text-decoration: none;
}
.sidebar li a:hover {
  background-color: #ededed;
}
.sidebar li a.is-active {
  background: url(/common/image/icn_check.svg) no-repeat 6.5% center #0f172a;
  background-size: 14px;
  font-weight: 600;
}
.sidebar-btn {
  position: fixed;
  width: 13px;
  height: 100%;
  left: var(--sidebar-w);
  top: var(--header-h);
  background: url(/common/image/icn_close.svg) no-repeat 2px 48% #c5c5c5;
  background-size: 7px;
  border: none;
  transition: 0.3s ease;
}
.sidebar-btn.is-close {
  left: 0;
  background-image: url(/common/image/icn_open.svg);
}

/* ============================================================================
   サイドバー 右側メニュー（ユーザーアカウント）
   - シンプル & かっこいい：センター揃えアバター・ガラス感閉じるボタン・
     アイコンタイル・滑らかなスライドイン
============================================================================ */
.sidebar-menu {
  position: fixed;
  top: 0;
  right: -340px;
  width: 320px;
  height: 100vh;
  background: #fff;
  box-shadow: -8px 0 30px rgba(15, 23, 42, 0.12);
  z-index: 200;
  transition: right 0.28s ease;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.sidebar-menu.is-open {
  right: 0;
}

/* ----- 閉じるボタン（パネル右上に絶対配置・ガラスフレーム） ----- */
.sidebar-menu-close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  background: rgba(255, 255, 255, 0.14);
  border: 0;
  color: #fff;
  font-size: 14px;
  cursor: pointer;
  border-radius: 8px;
  transition: background 0.18s ease;
}
.sidebar-menu-close:hover {
  background: rgba(255, 255, 255, 0.28);
}

/* ----- ユーザー情報パネル（センター揃え・グラデーション + 装飾光） ----- */
.sidebar-menu-user {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  background: #fff;
  color: #1e293b;
  text-align: left;
  overflow: hidden;
  flex-shrink: 0;
  border-bottom: 1px solid #eef1f7;
}
.sidebar-menu-user-meta {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.sidebar-menu-user::before {
  content: none;
}

/* アバター: 大きめ＋白枠＋オンラインドット */
.sidebar-menu-avatar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: var(--color-secondary);
  color: #fff;
  border-radius: 50%;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.02em;
  flex-shrink: 0;
  box-shadow: none;
}
.sidebar-menu-avatar::after {
  content: "";
  position: absolute;
  bottom: 1px;
  right: 1px;
  width: 11px;
  height: 11px;
  background: #22c55e;
  border: 2px solid #fff;
  border-radius: 50%;
}

.sidebar-menu-user-name {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.02em;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sidebar-menu-user-role {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #64748b;
}
.sidebar-menu-user-role i {
  font-size: 9px;
  opacity: 0.9;
}

/* メニュー本体は左ナビと同じ sidebar-list を使用（スクロール領域） */
.sidebar-menu .sidebar-list {
  flex: 0 1 auto;
  overflow-y: auto;
  padding: 6px 0;
  margin: 0;
}
.sidebar-menu-footer {
  flex-shrink: 0;
}

/* ----- フッター（ゴーストアウトラインのログアウトボタン） ----- */
.sidebar-menu-footer {
  padding: 12px 16px 16px;
  background: transparent;
  border-top: 1px solid #eef1f7;
}
.sidebar-menu-footer form {
  margin: 0;
}
.sidebar-menu-logout {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 40px;
  padding: 0 14px;
  background: #fff;
  border: 1px solid #fecaca;
  color: var(--color-danger);
  font-size: 13px;
  font-weight: 600;
  border-radius: 10px;
  cursor: pointer;
  transition: 0.18s ease;
}
.sidebar-menu-logout:hover {
  background: var(--color-danger);
  border-color: var(--color-danger);
  color: #fff;
}
.sidebar-menu-logout i {
  font-size: 13px;
  transition: transform 0.18s ease;
}
.sidebar-menu-logout:hover i {
  transform: translateX(2px);
}
.sidebar-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 199;
  display: none;
}
.sidebar-overlay.is-open {
  display: block;
}
.sidebar-toggle {
  cursor: pointer;
}
.sidebar-toggle:hover {
  opacity: 0.8;
}

@media screen and (max-width: 1200px) {
  .sidebar {
    position: fixed;
    top: 60px;
    right: -450px;
    left: auto;
    width: 450px;
    z-index: 100;
  }
  .sidebar-btn {
    display: none;
  }
  .sidebar.is-open {
    left: auto;
    right: 0;
    z-index: 9999;
  }

  /* SPメニュー開閉時背景 */
  .sp-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.5);
    display: none;
    content: "";
    opacity: 0;
    transition: 0.3s ease;
    z-index: 88;
  }
  .sp-bg.is-open {
    opacity: 1;
    display: block;
  }

  .sidebar .header-R {
    background-color: #fff;
    font-size: 12px;
    padding: 30px 0 10px;
  }
  .sidebar .header-R .header-setting {
    margin-right: 10px !important;
  }
}

/* ============================================================================
   4. ページタイトル
============================================================================ */

.top {
  display: table;
  width: 100%;
  height: 35px;
  background-repeat: repeat;
  background-position: center center;
  z-index: 9999;
}
.top-ttl,
.top-btn {
  display: table-cell;
  vertical-align: middle;
}

/* ボタン */
.top-btn {
  text-align: right;
  padding: 0 5px;
}

/* 追従時 */
.top.is-fixed {
  position: fixed;
  top: auto;
  left: 0;
  bottom: 0;
  /* ★.topへ記述を移動 */
  /* z-index:9999; */
  box-shadow: 1.5px 0 3px 1.5px rgba(0, 0, 0, 0.1);
}

.top.is-fixed .top-btn {
  text-align: center;
  width: 100%;
}

/* ============================================================================
   5. 検索エリア
============================================================================ */
.search {
  margin-bottom: -25px;
  background-color: #f8f8f8;
  position: relative;
  padding-top: 50px;
  /* ★追記 */
  z-index: 9998;
}

/* form */
.search-form {
  padding: 15px;
  display: none;
}
.search-form dl {
  width: 100%;
  margin-bottom: 10px;
}
.search-form dl dt,
.search-form dl dd {
  display: table-cell;
  vertical-align: middle;
}
.search-form dl dt {
  min-width: 150px;
  font-weight: bold;
  padding-right: 10px;
}
.search-form dl dt i {
  vertical-align: middle;
  margin-right: 5px;
  color: #777;
}
.search-form dl dd {
  width: 100%;
  padding-right: 20px;
}

/* button */
.search-btn {
  text-align: center;
}
.search-btn i {
  vertical-align: middle;
  margin-right: 5px;
}

/* 検索開閉 */
.search-open {
  position: absolute;
  right: 0;
  bottom: -40px;
}
.search-open button {
  width: 40px;
  height: 40px;
  background-color: #f8f8f8;
  border: none;
  border-bottom: 2px solid #e2e2e2;
}

/* ============================================================================
   検索条件ボックス
============================================================================ */
.search-box {
  background-color: var(--c-bg-white);
  border: 1px solid var(--c-bdr-2);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-1);
  overflow: hidden;
  margin-bottom: 8px;
}

.search-box-body {
  padding: 8px 10px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px 12px;
  width: 100%; /* base.css .col-2/.col-3 の幅衝突を打ち消す */
}
.search-box-body.col-1 {
  grid-template-columns: 1fr;
}
.search-box-body.col-2 {
  grid-template-columns: repeat(2, 1fr);
}
.search-box-body.col-3 {
  grid-template-columns: repeat(3, 1fr);
}
.search-box-body.col-4 {
  grid-template-columns: repeat(4, 1fr);
}

.search-box-body.col-6 {
  grid-template-columns: repeat(6, 1fr);
}
.search-field {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 3px;
}
.search-field > label:first-child {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--c-text-ttl);
  letter-spacing: 0.02em;
}
.search-field input[type="text"],
.search-field input[type="search"],
.search-field input[type="tel"],
.search-field input[type="url"],
.search-field input[type="email"],
.search-field input[type="password"],
.search-field input[type="number"],
.search-field input[type="date"],
.search-field input[type="time"],
.search-field input[type="datetime-local"],
.search-field input[type="month"],
.search-field input[type="week"],
.search-field select {
  width: 100%;
  height: 28px;
  padding: 0 10px;
  font-size: 12.5px;
  border: 1px solid var(--c-bdr);
  border-radius: var(--radius);
  background-color: #fff;
  box-sizing: border-box;
  transition: var(--t-fast);
}
.search-field input:hover,
.search-field select:hover {
  border-color: var(--c-text-light);
}
.search-field input:focus,
.search-field select:focus {
  border-color: var(--c-main);
  box-shadow: var(--shadow-focus);
  outline: none;
}
.search-field input.readonly {
  background-color: #f5f5f5;
  color: #666;
}
/* 全幅フィールド（備考など。検索パネルでも列をまたいで1行占有。edit-box の .full と対） */
.search-field.full {
  grid-column: 1 / -1;
}
/* テキストエリア（上の .search-field input ルールは textarea を含まないため個別指定） */
.search-field textarea {
  width: 100%;
  min-height: 64px;
  padding: 8px;
  font-size: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background-color: #fff;
  box-sizing: border-box;
  font-family: inherit;
  resize: vertical;
}
/* レンジ／カラー／ファイル／複数選択（input全パターン網羅。テキスト系と高さ・枠を揃える） */
.search-field input[type="range"] {
  width: 100%;
  height: 26px;
  padding: 0;
  margin: 0;
  accent-color: var(--color-secondary);
  cursor: pointer;
}
.search-field input[type="color"] {
  width: 100%;
  height: 26px;
  padding: 2px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background-color: #fff;
  box-sizing: border-box;
  cursor: pointer;
}
.search-field input[type="file"] {
  width: 100%;
  height: 26px;
  font-size: 11px;
  line-height: 24px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background-color: #fff;
  box-sizing: border-box;
}
.search-field select[multiple] {
  height: auto;
  min-height: 54px;
  padding: 4px 8px;
}
/* レンジの現在値表示（ラベル右に小さく） */
.search-field .range-out {
  margin-left: 6px;
  font-weight: 700;
  color: var(--color-secondary);
}
.search-field-range {
  display: flex;
  align-items: center;
  gap: 5px;
}
.search-field-range input {
  flex: 1;
  min-width: 0;
}
.search-field-range .range-separator {
  color: #999;
  font-size: 12px;
}
.search-field-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  padding: 4px 0;
  min-height: 32px;
}
.search-field-group label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  font-weight: normal;
  color: #333;
  cursor: pointer;
  line-height: 1;
}
.search-field-group input[type="checkbox"],
.search-field-group input[type="radio"] {
  margin: 0;
  vertical-align: middle;
  flex-shrink: 0;
}
.search-field .field-text {
  font-size: 13px;
  color: #333;
  padding: 6px 0;
}

/* タブレット：多列はほどよく圧縮（4列→2列 / 6列→3列） */
@media screen and (max-width: 1200px) {
  .search-box-body.col-4 {
    grid-template-columns: repeat(2, 1fr);
  }
  .search-box-body.col-6 {
    grid-template-columns: repeat(3, 1fr);
  }
}
/* SP：すべて1列 */
@media screen and (max-width: 768px) {
  .search-box-body,
  .search-box-body.col-2,
  .search-box-body.col-3,
  .search-box-body.col-4,
  .search-box-body.col-6 {
    grid-template-columns: 1fr;
  }
}

/* ============================================================================
   編集ボックス
============================================================================ */

/* コンテナ */
.edit-box {
  background-color: #fff;
  border: 1px solid var(--c-bdr-2);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-1);
  overflow: hidden;
  margin-bottom: 12px;
  width: 100%;
  box-sizing: border-box;
}

/* ヘッダー（グループラベル）：10016準拠＝中立グレー地・slate見出し・ネイビーアイコン */
.edit-box .edit-box-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: var(--c-bg-gray);
  border-bottom: 1px solid var(--c-bdr-2);
  padding: 9px 14px;
  font-size: 12px;
  font-weight: 700;
  color: var(--c-text-ttl);
}
.edit-box .edit-box-header i {
  color: var(--c-main);
}

/* ボディ（グリッドコンテナ） */
.edit-box .edit-box-body {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px 16px;
  padding: 8px 12px;
  box-sizing: border-box;
  width: 100%; /* base.css .col-2/.col-3（table-cell/幅%）の衝突を打ち消す */
}

.edit-box .edit-box-body.col-1 {
  grid-template-columns: 1fr;
}

.edit-box .edit-box-body.col-2 {
  grid-template-columns: repeat(2, 1fr);
}

.edit-box .edit-box-body.col-3 {
  grid-template-columns: repeat(3, 1fr);
}

.edit-box .edit-box-body.col-4 {
  grid-template-columns: repeat(4, 1fr);
}

/* 各フィールド */
.edit-box .edit-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

/* 幅広フィールド */
.edit-box .edit-field.wide {
  grid-column: span 2;
}

.edit-box .edit-field.full {
  grid-column: 1 / -1;
}

/* ラベル */
.edit-box .edit-field > label:first-child {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--c-text-ttl);
  letter-spacing: 0.02em;
}

/* 必須マーク（10016準拠＝アクセントのピンク） */
.edit-box .edit-field > label .required {
  color: var(--c-accent);
  margin-left: 4px;
  font-size: 11px;
}

/* 入力フィールド共通 */
/* ⚠️ 入力型カバレッジは .search-field 側（module.css 上部）と必ず揃えること（型を足したら両方に足す）。
   違いは高さのみ（edit=28px / search=26px）。これが集約の肝。 */
.edit-box .edit-field input[type="text"],
.edit-box .edit-field input[type="search"],
.edit-box .edit-field input[type="date"],
.edit-box .edit-field input[type="datetime-local"],
.edit-box .edit-field input[type="month"],
.edit-box .edit-field input[type="week"],
.edit-box .edit-field input[type="time"],
.edit-box .edit-field input[type="number"],
.edit-box .edit-field input[type="tel"],
.edit-box .edit-field input[type="email"],
.edit-box .edit-field input[type="password"],
.edit-box .edit-field input[type="url"],
.edit-box .edit-field select,
.edit-box .edit-field textarea {
  width: 100%;
  height: 28px;
  padding: 0 10px;
  font-size: 12.5px;
  border: 1px solid var(--c-bdr);
  border-radius: var(--radius);
  background-color: #fff;
  box-sizing: border-box;
  margin: 0;
  font-family: inherit;
  transition: var(--t-fast);
}
.edit-box .edit-field input:focus,
.edit-box .edit-field select:focus,
.edit-box .edit-field textarea:focus {
  border-color: var(--c-main);
  box-shadow: var(--shadow-focus);
  outline: none;
}

.edit-box .edit-field textarea {
  height: auto;
  min-height: 64px;
  padding: 8px 10px;
  resize: vertical;
}

/* range / color / file（.search-field と同じ型カバレッジ。編集画面でも当たるように） */
.edit-box .edit-field input[type="range"] {
  width: 100%;
  height: 28px;
  padding: 0;
  margin: 0;
  accent-color: var(--color-secondary);
  cursor: pointer;
}
.edit-box .edit-field input[type="color"] {
  width: 100%;
  height: 28px;
  padding: 2px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background-color: #fff;
  box-sizing: border-box;
  cursor: pointer;
}
.edit-box .edit-field input[type="file"] {
  width: 100%;
  height: 28px;
  font-size: 12px;
  line-height: 26px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background-color: #fff;
  box-sizing: border-box;
}

.edit-box .edit-field input[type="file"].form-control {
  padding: 6px 12px;
  border: 1px solid #ccc;
  font-size: 14px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background-color: #fff;
  box-sizing: border-box;
}

.edit-box .edit-field select[multiple].form-control {
  background-image: none;
  padding-right: 12px;
  min-height: 80px;
}

/* フォーカス時 */
.edit-box .edit-field input:focus,
.edit-box .edit-field select:focus,
.edit-box .edit-field textarea:focus {
  border-color: var(--color-secondary);
  box-shadow: 0 0 0 2px rgba(16, 49, 124, 0.15);
  outline: none;
}

/* 読み取り専用 */
.edit-box .edit-field input[readonly],
.edit-box .edit-field input.readonly {
  background-color: #f5f5f5;
  color: #666;
  cursor: not-allowed;
}

/* セレクトボックス矢印 */
.edit-box .edit-field select {
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M2 4l4 4 4-4H2z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 30px;
}

/* ラジオ・チェックボックスグループ（上下中央揃え徹底） */
.edit-box .edit-field-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  padding: 6px 0;
  margin: 0;
}

.edit-box .edit-field-group label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  font-weight: normal;
  color: #333;
  cursor: pointer;
  margin: 0;
  padding: 0;
  line-height: 1;
}

.edit-box .edit-field-group label span {
  margin-left: 0;
}

.edit-box .edit-field-group input[type="radio"],
.edit-box .edit-field-group input[type="checkbox"] {
  margin: 0;
  cursor: pointer;
  width: auto;
  height: auto;
  vertical-align: middle;
}

/* テキスト表示のみ */
.edit-box .edit-field .field-text {
  font-size: 14px;
  color: #333;
  padding: 8px 0;
  line-height: 1.5;
}

.edit-box .edit-field input[list] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M2 4l4 4 4-4H2z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 30px;
}

@media screen and (max-width: 1200px) {
  .edit-box .edit-box-body.col-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media screen and (max-width: 768px) {
  .edit-box .edit-box-body,
  .edit-box .edit-box-body.col-2,
  .edit-box .edit-box-body.col-3,
  .edit-box .edit-box-body.col-4 {
    grid-template-columns: 1fr;
  }
  .edit-box .edit-field.wide {
    grid-column: span 1;
  }
  
}

/* ============================================================================
   6. テーブル
============================================================================ */

/* 分類：一覧テーブル
   - 上下の色帯を廃止。横罫線のみのモダンなデータテーブル
   - 偶数行ストライプ + 行ホバーで操作対象を明確化
*/
.tbl-list {
  width: 100%;
  background-color: #fff;
  border: 1px solid var(--c-bdr-2);
  border-radius: var(--radius-l);
  overflow: clip; /* 角丸クリップは維持しつつ sticky thead を有効化（hidden だとスクロールコンテナ化で sticky が効かない） */
  box-shadow: var(--shadow-1);
}

.tbl-list table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: auto;
}
.tbl-list thead th {
  background-color: var(--c-bg-gray);
  border-bottom: 1px solid var(--c-bdr-2);
  text-align: left;
  padding: 9px 12px;
  vertical-align: middle;
  font-size: 12px;
  font-weight: 600;
  color: var(--c-text-sub);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  line-height: 1.4;
  white-space: nowrap;
}
/* ヘッダーとボディの境目を明確に：最下段ヘッダーに濃いめの下線（user 2026-06。全一覧テーブル共通） */
.tbl-list thead tr:last-child th { border-bottom: 2px solid var(--c-bdr); }
.tbl-list tbody th {
  background-color: #f8fafc;
  border-bottom: 1px solid #f1f5f9;
  font-weight: 600;
  color: #334155;
  white-space: nowrap;
}
.tbl-list tbody td,
.tbl-list tfoot td {
  background-color: #fff;
  vertical-align: middle;
  font-weight: 500;
  border-bottom: 1px solid var(--c-bdr-2);
  height: 30px;
  box-sizing: border-box;
  padding: 4px 12px;
  font-size: 12px;
  line-height: 1.4;
  color: var(--c-text);
  white-space: nowrap;
}
/* 一覧画面（/list/）は 10016 の表示リストに合わせて行高を 44px に（2行セルにゆとり）。
   list2/list3 のような密な編集グリッドは対象外（data-page スコープで /list/ のみ）。 */
body[data-page="list"] .tbl-list tbody td {
  height: 44px;
  padding: 6px 12px;
}

.tbl-list tbody tr:hover td {
  background-color: var(--c-main-ll);
}
.tbl-list tbody tr:last-child td,
.tbl-list tbody tr:last-child th {
  border-bottom: none;
}
.tbl-list tbody th {
  vertical-align: middle;
  padding: 0 10px;
  box-sizing: border-box;
  font-size: 12px;
}
.tbl-list tfoot th {
  background-color: #eef2f8;
  border-top: 1px solid #d4deeb;
  text-align: center;
  padding: 0 8px;
  vertical-align: middle;
  font-size: 12px;
  font-weight: 700;
  color: #1e293b;
  height: 30px;
}

/* リスト内フォームパーツ調整 */
.tbl-list input[type="text"],
.tbl-list input[type="date"],
.tbl-list input[type="month"],
.tbl-list input[type="time"],
.tbl-list input[type="number"],
.tbl-list input[type="tel"],
.tbl-list input[type="email"],
.tbl-list select {
  border: none;
  width: 100%;
  outline: none;
  vertical-align: middle;
  background-color: transparent;
  position: relative;
  height: 100%;
}
.tbl-list tbody textarea {
  margin-bottom: 0 !important;
  border: none;
  min-height: 30px;
  height: 30px;
  background-color: transparent;
}
.tbl-list input[type="text"]:focus-within,
.tbl-list input[type="date"]:focus-within,
.tbl-list input[type="month"]:focus-within,
.tbl-list input[type="time"]:focus-within,
.tbl-list input[type="number"]:focus-within,
.tbl-list input[type="tel"]:focus-within,
.tbl-list input[type="email"]:focus-within,
.tbl-list select:focus-within {
  border: var(--color-secondary) solid 1px;
}
.tbl-list tbody textarea:focus-within {
  border: var(--color-secondary) solid 1px;
}

.tbl-list span {
  font-size: 11px;
}

/* ※一覧ボタン調整 */
.tbl-list tbody .btn-normal {
  min-width: 50px;
  height: 26px;
  padding: 0 8px;
  font-size: 12px;
  line-height: 1;
}

/* SP対応 */
@media screen and (max-width: 768px) {
  .tbl-list {
    min-width: 100% !important;
  }
  .tbl-list thead {
    display: none;
  }
  .tbl-list tbody th,
  .tbl-list tbody td {
    display: table;
    width: 100% !important;
    border-bottom: 1px solid #ccc;
    border-right: none;
  }
  .tbl-list tbody tr th:last-child,
  .tbl-list tbody tr td:last-child {
    border-bottom: none;
  }
  
  
  
  
}

.tbl-list td.cell-clamp,
.tbl-list td .cell-clamp {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  white-space: normal;
  word-break: break-word;
  line-height: 1.35;
}
/* 注意：子クラスは .main / .sub などの汎用名を避ける（レイアウトの .main と衝突するため） */
.cell-2line {
  display: flex;
  flex-direction: column;
  gap: 0;
  line-height: 1.2;
}
.cell-2line .c2-main {
  font-weight: 600;
  font-size: 12px;
  line-height: 1.25;
  color: #1e293b;
}
.cell-2line .c2-sub {
  font-size: 10px;
  line-height: 1.2;
  color: #64748b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* 原価 / 原価率セル（右寄せ2行：原価＝主・原価率＝副） */
.cell-cost { align-items: flex-end; text-align: right; }
.cell-cost .c2-sub { color: var(--c-text-sub); font-weight: 600; }

.tbl-list td.cell-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* ============================================================
 * 一覧(ver1) 案件リスト — 文字リンク / 数値 / 窓口・原価率ツールチップ /
 * 粗利率セルの背景色 / 商談・契約日セル
 * ============================================================ */
/* 数値カラム（売上・原価率・粗利）: 等幅・タブ揃え（.tbl-list span の 11px を上書き）*/
.tbl-list .fw-num {
  font-family: var(--ff-num, inherit);
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  font-weight: 600;
  color: var(--c-text);
}

/* セル内テキストリンク（取引先名 → 詳細へ） */
.link-text {
  color: var(--c-main);
  text-decoration: none;
}
.link-text:hover { text-decoration: underline; }
.link-text:hover .c2-main { color: var(--c-accent); }
.link-text .c2-main { transition: color .12s; }

/* ホバーで内訳を出すツールチップ（取引先窓口 / 原価率の内訳） */
.has-tip {
  position: relative;
  font-size: 12px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  white-space: nowrap;
}
.has-tip .tip-ic {
  color: var(--c-text-light);
  font-size: 10px;
}
.has-tip:hover .tip-ic { color: var(--c-main); }
/* ホバー/フォーカスで「?」→「クリップボード」アイコンに変化（クリックで .tip-pop の内容をコピー） */
.has-tip .tip-ic-copy { display: none; }
.has-tip:hover .tip-ic-q,
.has-tip:focus-within .tip-ic-q { display: none; }
.has-tip:hover .tip-ic-copy,
.has-tip:focus-within .tip-ic-copy { display: inline-block; color: var(--c-main); }
/* コピー直後：クリップボード→緑チェックを1.2秒表示（JS がクラス付与） */
.has-tip .tip-ic-copy.is-copied { color: #10b981 !important; }
/* ツールチップ本体は子要素 .tip-pop（data-tip/native title を使わず、見た目も維持） */
.has-tip .tip-pop {
  position: fixed; /* JS が表示時に top/left を設定。overflow:clip のテーブル内でも隠れず、端でのみ反転/シフト */
  left: 0;
  top: 0;
  white-space: nowrap;
  text-align: left;
  background: #1e293b;
  color: #fff;
  padding: 8px 11px;
  border-radius: var(--radius);
  font-size: 11px;
  line-height: 1.7;
  font-weight: 500;
  letter-spacing: .01em;
  box-shadow: var(--shadow-3);
  opacity: 0;
  visibility: hidden;
  transform: translateY(3px);
  transition: opacity .14s, transform .14s, visibility .14s;
  z-index: 1000;
  pointer-events: none;
}
.has-tip .tip-pop b { color: #cdd9ef; font-weight: 600; }
.has-tip .tip-pop hr { border: none; border-top: 1px solid #475569; margin: 5px 0; }
.has-tip:hover .tip-pop,
.has-tip:focus-within .tip-pop {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* 粗利 / 粗利率セル（％の高低で背景色・左ボーダー） */
.tbl-list td.cell-profit {
  text-align: right;
  line-height: 1.2;
  border-left: 2px solid transparent;
}
.cell-profit .cp-amt {
  display: block;
  font-size: 12px;
}
.cell-profit .cp-rate {
  display: block;
  font-size: 10px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.tbl-list td.profit-hi   { background: var(--st-success-bg, #ecfdf5); border-left-color: var(--c-success, #16a34a); }
.tbl-list td.profit-hi   .cp-rate { color: var(--c-success, #16a34a); }
.tbl-list td.profit-mid  { background: #f0fdf4; border-left-color: #65a30d; }
.tbl-list td.profit-mid  .cp-rate { color: #4d7c0f; }
.tbl-list td.profit-lo   { background: var(--st-warn-bg, #fffbeb); border-left-color: var(--c-warn, #d97706); }
.tbl-list td.profit-lo   .cp-rate { color: var(--c-warn, #b45309); }
.tbl-list td.profit-bad  { background: var(--st-error-bg, #fef2f2); border-left-color: var(--c-error, #dc2626); }
.tbl-list td.profit-bad  .cp-rate { color: var(--c-error, #dc2626); }
.tbl-list td.profit-none { color: var(--c-text-light); }
.tbl-list td.profit-none .cp-amt,
.tbl-list td.profit-none .cp-rate { color: var(--c-text-light); }
/* hover時も粗利セルの色を保持（行ホバーの淡色に負けない） */
.tbl-list tbody tr:hover td.profit-hi  { background: #e3f9ee; }
.tbl-list tbody tr:hover td.profit-mid { background: #e7f8e3; }
.tbl-list tbody tr:hover td.profit-lo  { background: #fef6e0; }
.tbl-list tbody tr:hover td.profit-bad { background: #fde8e8; }

/* 商談 / 契約 セル（アイコン＋日付の2段） */
.cell-dates .c2-sub,
.cell-dates .c2-main {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}
.cell-dates i {
  width: 12px;
  color: var(--c-text-light);
  font-size: 11px;
}
.cell-dates .c2-main i { color: var(--c-main); }

/* 分類：編集テーブル */
.tbl-edit {
  width: 100%;
  border-spacing: 0;
  border-collapse: collapse;
  background-color: #fff;
  font-size: 13px;
}
.tbl-edit table {
  width: 100%;
  white-space: nowrap;
}
.tbl-edit tbody tr {
  width: 100%;
  height: 45px !important;
  box-sizing: border-box;
  border-bottom: 1px dashed #ccc;
  border-top: 1px dashed #ccc;
}
.tbl-edit tr:first-child {
  border-top: none;
}
.tbl-edit tr:last-child {
  border-bottom: none;
}
.tbl-edit tbody tr input[type="text"],
.tbl-edit tbody tr input[type="date"],
.tbl-edit tbody tr input[type="month"],
.tbl-edit tbody tr input[type="time"],
.tbl-edit tbody tr input[type="password"],
.tbl-edit tbody tr input[type="number"],
.tbl-edit tbody tr input[type="tel"],
.tbl-edit tbody tr input[type="email"],
.tbl-edit tbody tr select,
.tbl-edit tbody tr textarea {
  height: 30px;
}
.tbl-edit tbody th {
  border-color: #ccc;
  background-color: #f5f5f5;
  font-weight: 600;
  vertical-align: middle;
  padding: 0 5px;
  width: 12%;
}
.tbl-edit tbody td {
  padding: 0 10px;
  vertical-align: middle;
}
.tbl-edit button {
  vertical-align: middle;
  position: relative;
  top: -1.5px;
  height: 35px;
  min-width: 75px;
  font-size: 12px;
}
.tbl-edit span {
  color: #666;
  font-size: 14px !important;
}
.tbl-edit input[type="text"]:focus-within,
.tbl-edit input[type="date"]:focus-within,
.tbl-edit input[type="month"]:focus-within,
.tbl-edit input[type="time"]:focus-within,
.tbl-edit input[type="number"]:focus-within,
.tbl-edit input[type="tel"]:focus-within,
.tbl-edit input[type="email"]:focus-within,
.tbl-edit select:focus-within {
  border: var(--color-secondary) solid 1px;
}
.tbl-edit tbody textarea:focus-within {
  border: var(--color-secondary) solid 1px;
}
.tbl-edit.min {
  font-size: 12px;
}
.tbl-edit.min tbody tr {
  border-bottom: 1px solid #ccc;
  border-top: 1px solid #ccc;
  height: 35px !important;
  box-sizing: border-box;
}
.tbl-edit.min tbody tr input[type="text"],
.tbl-edit.min tbody tr input[type="date"],
.tbl-edit.min tbody tr input[type="month"],
.tbl-edit.min tbody tr input[type="time"],
.tbl-edit.min tbody tr input[type="password"],
.tbl-edit.min tbody tr input[type="number"],
.tbl-edit.min tbody tr input[type="tel"],
.tbl-edit.min tbody tr input[type="email"],
.tbl-edit.min tbody tr select,
.tbl-edit.min tbody tr textarea {
  height: 30px;
}
.tbl-edit.min tbody th,
.tbl-edit.min tbody td {
  padding: 0 5px;
  vertical-align: middle;
  border-left: 1px solid #ccc;
}
.tbl-edit.min tbody th:first-child {
  border-left: none;
}
.tbl-edit.min tbody th {
  width: 7%;
}
.tbl-edit.min button {
  vertical-align: middle;
  position: relative;
  top: -1.5px;
  height: 30px;
  min-width: 30px;
  font-size: 13px;
}
.tbl-edit.min span {
  font-size: 12px !important;
}

/* min：固定レイアウト＋colgroup（col.cg-lbl）でラベル列幅を統一し、
   colspan行が混在しても値の開始位置を全行で揃える（不揃い対策） */
.tbl-edit.min table {
  table-layout: fixed;
}
.tbl-edit.min col.cg-lbl {
  width: 110px;
}
.tbl-edit.min tbody td {
  overflow: hidden;
  text-overflow: ellipsis;
}
/* タブレット以下：明細編集テーブルはコンパクト化＋横スクロール */
@media screen and (max-width: 1200px) {
  .tbl-edit,
  .tbl-edit.min {
    font-size: 12px;
    overflow-y: scroll;
  }
  .tbl-edit button {
    font-size: 13px;
    padding: 0 3px;
  }
  .tbl-edit span,
  .tbl-edit.min span {
    font-size: 11px !important;
  }
}

/* テーブルホバー */
.tbl-list tbody tr:hover,
.tbl-normal tbody tr:hover,
.tbl-edit tbody tr:hover {
  background-color: #f8fbfd;
}

/* テーブルヘッダー固定 */
.tbl-fix {
  border-collapse: collapse;
}
.tbl-fix th {
  position: sticky;
  white-space: nowrap;
  z-index: 1;
}
.tbl-fix thead tr:nth-child(1) th {
  /*top: -10px;*/
  top: 0px;
  z-index: 2;
}
.tbl-fix thead tr:nth-child(2) th {
  top: 30px;
}
.tbl-fix th:before {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  width: 100%;
  height: 100%;
  border: 1px solid #ccc;
}
/* 一覧ver2: ヘッダーセルの区切り線（枠線）は不要 → list2 のみ枠を消す。
   .tbl-fix はパーツ集の見本でも使うため、グローバルでは消さず data-page で限定。 */
[data-page="list2"] .tbl-fix thead th:before,
[data-page="transport"] .tbl-fix thead th:before,
[data-page="transport_edit"] .tbl-fix thead th:before,
[data-page="copy"] .tbl-fix thead th:before,
[data-page="config"] .tbl-fix thead th:before {
  display: none;
}

/* テーブルスクロール（縦＝本文スクロールでヘッダー固定 / 横＝列が多い時にスクロール） */
.tbl-scroll {
  overflow: auto;
}
/* 一覧グリッド(list2 等)：列が多い時は横スクロール、ヘッダーは縦横固定 */
.tbl-list.tbl-scroll > table {
  width: max-content;
  min-width: 100%;
}
.tbl-list.is-grid.tbl-scroll {
  /* 縦幅は固定せず、リストの行数分だけ自動調整（縦は伸ばす。横スクロールのみ担当） */
  max-height: none;
}
.tbl-list.is-grid.tbl-scroll td input,
.tbl-list.is-grid.tbl-scroll td select {
  width: 100%;
  box-sizing: border-box;
}
/* list2：先頭2列（チェック / コード）を横スクロール中も左に固定（縦横固定） */
[data-page="list2"] .tbl-list.is-grid.tbl-scroll thead th:nth-child(1),
[data-page="list2"] .tbl-list.is-grid.tbl-scroll tbody td:nth-child(1) {
  position: sticky;
  left: 0;
}
[data-page="list2"] .tbl-list.is-grid.tbl-scroll thead th:nth-child(2),
[data-page="list2"] .tbl-list.is-grid.tbl-scroll tbody td:nth-child(2) {
  position: sticky;
  left: 34px;
}
[data-page="list2"] .tbl-list.is-grid.tbl-scroll tbody td:nth-child(1),
[data-page="list2"] .tbl-list.is-grid.tbl-scroll tbody td:nth-child(2) {
  background: #fff;
  z-index: 2;
}
[data-page="list2"] .tbl-list.is-grid.tbl-scroll thead th:nth-child(1),
[data-page="list2"] .tbl-list.is-grid.tbl-scroll thead th:nth-child(2) {
  z-index: 6;
}
/* list2: セルのフォントを一段大きく（視認性向上・user 2026-06） */
[data-page="list2"] .tbl-list.is-grid tbody td,
[data-page="list2"] .tbl-list.is-grid tbody td input,
[data-page="list2"] .tbl-list.is-grid tbody td select {
  font-size: 13px;
  font-weight: 500;
}
/* list2: 編集不可カラム（コード・金額）に背景色。sticky な先頭列も上書き */
.tbl-list.is-grid td.cell-readonly { background: #e8edf4; }
[data-page="list2"] .tbl-list.is-grid.tbl-scroll tbody td.cell-readonly { background: #e8edf4; }
/* カレンダー: 月選択ナビの位置クラス（左 / 中央 / 右） */
.cal-monthnav { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cal-monthnav.is-left { justify-content: flex-start; }
.cal-monthnav.is-center { justify-content: center; }
.cal-monthnav.is-right { justify-content: flex-end; }
/* ページ操作ボタン（page-actions）の配置をクラスで切替（既定=右）。user 2026-06 */
.page-bar .page-actions.is-left { margin-right: auto; }
.page-bar .page-actions.is-center { margin-left: auto; margin-right: auto; }
.page-bar .page-actions.is-right { margin-left: auto; }
/* 一覧画面ver4: 高密度テーブルは共通の .tbl-compact（10016 業務トンマナ）に統一。個別スコープは撤去。 */

/* ============================================================
 * 一覧画面ver6: 2段ヘッダー＋グループ列（版/トラック/順）。全ルール [data-page="list6"] スコープ＝他画面に無影響
 * ============================================================ */
[data-page="list6"] .tbl-list.tbl-grouped table { border-collapse: separate; border-spacing: 0; }
[data-page="list6"] .tbl-list.tbl-grouped thead th,
[data-page="list6"] .tbl-list.tbl-grouped tbody td {
  border-right: 1px solid var(--c-bdr-2);
  border-bottom: 1px solid var(--c-bdr-2);
  white-space: nowrap;
}
/* グループ見出し（colspan=3）＝中央寄せ・淡い地色 */
[data-page="list6"] .tbl-list.tbl-grouped thead .grp-head { text-align: center; font-weight: 700; background: var(--c-bg-gray-2); }
/* 2段目（版/トラック/順）＝小さめ・サブ色 */
[data-page="list6"] .tbl-list.tbl-grouped thead tr:nth-child(2) th { font-size: 11px; font-weight: 600; color: var(--c-text-sub); }
/* グループ境界＝右に濃いめの縦線 */
[data-page="list6"] .tbl-list.tbl-grouped .grp-end { border-right: 2px solid var(--c-bdr); }
/* コード・店名＝横スクロール時も左に固定（各90px幅） */
[data-page="list6"] .tbl-list.tbl-grouped .grp-fix { position: sticky; width: 90px; min-width: 90px; max-width: 90px; }
[data-page="list6"] .tbl-list.tbl-grouped tbody td.grp-fix { background: #fff; z-index: 3; }
[data-page="list6"] .tbl-list.tbl-grouped thead th.grp-fix { background: var(--c-bg-gray); z-index: 12; }
[data-page="list6"] .tbl-list.tbl-grouped .grp-fix:nth-child(1) { left: 0; }
[data-page="list6"] .tbl-list.tbl-grouped .grp-fix:nth-child(2) { left: 90px; }
/* 2段ヘッダーを縦スクロール時に上部固定：コンテナを内部スクロール化（tbl-scroll の overflow:auto + 最大高さ）し thead を sticky。コード/店名は左＋上＝角固定 */
/* 縦は要素分だけ＝コンテンツ高さ（max-height なし）。横スクロールは tbl-scroll の overflow:auto が担当 */
[data-page="list6"] .tbl-list.tbl-grouped thead th { position: sticky; z-index: 10; }
[data-page="list6"] .tbl-list.tbl-grouped thead tr:nth-child(1) th { top: 0; }
[data-page="list6"] .tbl-list.tbl-grouped thead tr:nth-child(2) th { top: 28px; }
/* ヘッダー・セルの高さを低く（user 2026-06）。上の段オフセット top は1段目の実高さに合わせる */
[data-page="list6"] .tbl-list.tbl-grouped tbody td { padding-top: 4px !important; padding-bottom: 4px !important; height: 32px !important; line-height: 1.3 !important; }
[data-page="list6"] .tbl-list.tbl-grouped thead th { padding-top: 4px !important; padding-bottom: 4px !important; height: 28px !important; line-height: 1.3 !important; }
/* 画面名（page-bar）とテーブルの隙間を詰める */
/* 画面名↔テーブルの余白は全画面共通（.page-bar）に統一。list6 個別指定は撤去 */

/* 通常路線モーダル: list2 と同じ常時編集グリッド（.is-grid＝全セル input。base の is-grid CSS が input/select を幅100%に）。チェックボックスのみ幅自動 */
[data-page="list6"] #route-list td input[type="checkbox"] { width: auto; }
/* モーダル(通常路線)の縦幅を拡大（行追加でも見やすく）。tbl-mh400 より優先 */
[data-page="list6"] #route-list { max-height: calc(100vh - 260px); }
/* モーダル(通常路線)の行高を本体テーブルの行高(32px)に合わせる（is-grid の入力欄も縮める） */
[data-page="list6"] #route-list tbody td { height: 32px !important; padding-top: 2px !important; padding-bottom: 2px !important; }
[data-page="list6"] #route-list tbody td input:not([type="checkbox"]),
[data-page="list6"] #route-list tbody td select { height: 26px; box-sizing: border-box; }

/* 検索選択: 取引先モーダルは行クリックで選択（選択列/ボタン廃止）。行をクリック可能に */
[data-page="list5"] #select-list tbody .select-row { cursor: pointer; }
[data-page="list5"] #select-list tbody .select-row:hover td { background: var(--c-bg-gray-2); }

/* ============================================================
 * 受注伝票入力(list3)：10012/order_entry の使いやすいレイアウトを移植。
 * テーブルの行高・要素は 10016（＝現行 theme.css の 54px・#fbfcffヘッダー）ベースを維持。
 * ============================================================ */
/* 淡い背景に白カードを浮かせて奥行き（10012） */
body.app-ui[data-page="list3"] .main-inner { background: #eef1f8; }
body.app-ui[data-page="list3"] .search-box.is-dense,
body.app-ui[data-page="list3"] .totals-bar { background: #fff; border: 1px solid var(--th-line); border-radius: var(--th-card-r); box-shadow: var(--th-sh-1); }
/* 検索ラベルを見やすく（10012） */
body.app-ui[data-page="list3"] .search-field label { font-weight: 700; }
/* 検索アイコンを入力欄の右隣にピル配置（10012） */
body.app-ui[data-page="list3"] .oe-cell-search > input { width: calc(100% - 30px); padding-right: 8px; }
body.app-ui[data-page="list3"] .oe-cell-search-btn { right: 2px; width: 24px; height: 26px; background: #eef2fb; border-radius: 6px; color: var(--th-navy); opacity: 1; font-size: 12px; }
body.app-ui[data-page="list3"] .oe-cell-search-btn:hover { background: var(--th-navy); color: #fff; }
/* 数値は等幅・金額は太字ネイビー・総合計を主役に（10016ネイビー基調と整合） */
body.app-ui[data-page="list3"] .tbl-list.is-grid td input.tar,
body.app-ui[data-page="list3"] .tbl-list.is-grid td .input-amount,
body.app-ui[data-page="list3"] .totals-cell .totals-val { font-variant-numeric: tabular-nums; }
body.app-ui[data-page="list3"] .tbl-list.is-grid td .input-amount { font-weight: 700; color: var(--th-ink); }
body.app-ui[data-page="list3"] .totals-cell.is-grand .totals-val { font-size: 23px; }
body.app-ui[data-page="list3"] .tbl-list.is-grid tbody td[data-col-key="no"] { color: var(--th-mut); font-weight: 700; }

/* ============================================================================
   7. フォーム要素
============================================================================ */
input[type="text"],
input[type="date"],
input[type="month"],
input[type="time"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="email"],
input[type="search"],
input[type="url"],
input[type="datetime-local"],
input[type="week"],
select,
textarea {
  font-family: inherit;
  border: 1px solid var(--c-bdr);
  border-radius: var(--radius);
  font-size: 12.5px;
  padding: 0 10px;
  height: 30px;
  background-color: #fff;
  color: var(--c-text);
  transition: var(--t-fast);
}
input[type="text"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="time"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="email"]:focus,
input[type="search"]:focus,
input[type="url"]:focus,
input[type="datetime-local"]:focus,
input[type="week"]:focus,
select:focus,
textarea:focus {
  border-color: var(--c-main);
  box-shadow: var(--shadow-focus);
  outline: none;
}
select {
  cursor: pointer;
  background-repeat: no-repeat;
  background-size: 10px 5px;
  background-position: right 10px center;
}
input[type="radio"],
input[type="checkbox"] {
  position: relative;
  top: 2.25px;
}

textarea {
  width: 100%;
  height: 100%;
  min-height: 60px;
  resize: vertical;
  padding: 5px;
}
@media screen and (max-width: 1200px) {
  input[type="text"],
  input[type="date"],
  input[type="month"],
  input[type="time"],
  input[type="password"],
  input[type="number"],
  input[type="tel"],
  input[type="email"],
  select,
  textarea {
    padding: 5px;
  }
}

/* フリー入力付きセレクトボックス */
.custom-select {
  position: relative;
  width: 100%;
}
.custom-select details {
  position: relative;
}
.custom-select summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  background: #fff;
  border: 1px solid #aaa;
  cursor: pointer;
  list-style: none;
  font-size: 14px;
}
.custom-select summary::-webkit-details-marker {
  display: none;
}
.custom-select details[open] summary {
  border-bottom: none;
}
.custom-select summary .selected-text {
  color: #333;
}
.custom-select summary .selected-text.empty {
  color: #999;
}
.custom-select summary .arrow {
  width: 16px;
  height: 16px;
  color: #666;
  transition: transform 0.2s ease;
}
.custom-select details[open] summary .arrow {
  transform: rotate(180deg);
}
.custom-select .dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid #aaa;
  border-top: none;
  z-index: 100;
}
.custom-select .dropdown .search-box {
  border-radius: 0;
  margin-bottom: 0;
}
.custom-select .search-box input {
  width: 100%;
  padding: 8px 10px;
  border: none;
  font-size: 12px;
  outline: none;
  background: transparent;
  color: #333;
}
.custom-select .search-box input::placeholder {
  color: rgba(255, 255, 255, 0.7);
}
.custom-select .options {
  max-height: 280px;
  overflow-y: auto;
}
.custom-select .options label {
  display: block;
  padding: 8px 10px;
  cursor: pointer;
  font-size: 12px;
  color: #333;
  border-bottom: 1px solid #eee;
}
.custom-select .options label:last-child {
  border-bottom: none;
}
.custom-select .options label:hover {
  background: #f5f5f5;
}
.custom-select .options input[type="radio"] {
  display: none;
}
.custom-select .options input[type="radio"]:checked + span {
  color: #4a8a99;
  font-weight: 600;
}

/* ============================================================================
   8. ボタン、リンク系
============================================================================ */
.buttons {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 3px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-decoration: none;
  background-color: #e8e8e8;
  border: none !important;
  padding: 0 13px;
  border-radius: var(--radius);
  font-size: 11.5px;
  font-weight: 600;
  min-width: auto;
  height: 28px;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  transition: var(--t-fast);
  letter-spacing: 0.01em;
  position: relative;
}
.btn i {
  color: #fff;
  font-size: 11px;
}
.btn img {
  width: 16px;
  height: auto;
  position: absolute;
  top: 6px;
  left: 3px;
}
.btn-tool {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 500;
  border-radius: 2px;
  width: 40px;
  height: 25px;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  letter-spacing: 0.3px;
  position: relative;
  border: none !important;
}
.btn-tbl-tool {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 500;
  border-radius: 2px;
  padding: 0 8px;
  width: auto;
  height: 25px;
  line-height: 1;
  gap: 8px;
  cursor: pointer;
  white-space: nowrap;
  letter-spacing: 0.3px;
  position: relative;
  border: none !important;
}
.btn:hover {
  filter: brightness(0.93);
  box-shadow: var(--shadow-1);
}
.btn:active {
  transform: translateY(1px);
}
/* 無効状態（App.submit のスコープ外 disable / 行追加時の入力 disable などで使用） */
.btn:disabled,
.btn[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}
/* キーボードフォーカスの可視化（a11y。マウスclickでは出ない :focus-visible） */
.btn:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus, 0 0 0 3px rgba(16, 49, 124, 0.35));
}
.btn-normal-min {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  text-decoration: none;
  background-color: #f2f2f2;
  color: #444;
  padding: 0 10px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 500;
  min-width: 30px;
  height: 26px;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.15s ease;
  border: none !important;
}
.btn-normal-min:hover {
  opacity: 0.85;
}
/* ミニボタン色バリエーション */
.btn-normal-min.btn-edit {
  background-color: var(--color-edit);
  color: #fff;
  border-color: var(--color-edit);
}
.btn-normal-min.btn-output {
  background-color: #3a8a7e;
  color: #fff;
  border-color: #3a8a7e;
}
.btn-normal-min.btn-csv {
  background-color: #3a8a7e;
  color: #fff;
  border-color: #3a8a7e;
}
.btn-normal-min.btn-excel {
  background-color: #3a8a7e;
  color: #fff;
  border-color: #3a8a7e;
}
.btn-normal-min.btn-delete {
  background-color: var(--color-danger);
  color: #fff;
  border-color: var(--color-danger);
}
.btn-normal-min.btn-save {
  background-color: var(--color-primary);
  color: #fff;
  border-color: #2c4f8c;
}
/* 主操作（保存・登録・検索実行）：ブランドのピンク＝「この画面のメインアクション」。
   削除（赤）と明確に区別して直感性を確保 */
.btn-save {
  color: #fff;
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  font-size: 10px;
}
.btn-save:hover {
  background-color: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
}
.btn-add {
  color: #fff;
  background-color: #2c4f8c;
  border-color: #2c4f8c;
  font-size: 10px;
}
.btn-add:hover {
  background-color: #26467c;
  border-color: #26467c;
}

/* 編集系（ブルー） */
.btn-edit {
  color: #fff;
  background-color: var(--color-edit);
  border-color: var(--color-edit);
  font-size: 10px;
}
.btn-edit:hover {
  background-color: #3f83cc;
  border-color: #3f83cc;
}

/* 削除系（ゴーストアウトライン: 通常時は灰色、ホバーで赤反転）
   - サイドバーのログアウトボタンと統一感のあるデザイン
*/
.btn-delete {
  color: #64748b !important;
  background-color: #fff !important;
  border: 1px solid #cbd5e1 !important;
  font-size: 10px;
  transition: all 0.15s ease;
}
.btn-delete i {
  color: inherit !important;
}
.btn-delete:hover {
  color: #fff !important;
  background-color: var(--color-danger) !important;
  border-color: var(--color-danger) !important;
  box-shadow: 0 4px 12px rgba(220, 38, 38, 0.25);
}
.btn-delete:hover i {
  color: #fff !important;
}
.btn-normal-min.btn-delete {
  color: #64748b;
  background-color: #fff;
  border: 1px solid #cbd5e1;
}
.btn-normal-min.btn-delete:hover {
  color: #fff;
  background-color: var(--color-danger);
  border-color: var(--color-danger);
}

/* 帳票・出力系（ティール） */
.btn-csv,
.btn-output,
.btn-excel {
  color: #fff;
  background-color: #3a8a7e;
  border-color: #3a8a7e;
  font-size: 10px;
}
.btn-csv:hover,
.btn-output:hover,
.btn-excel:hover {
  background-color: #327d72;
  border-color: #327d72;
}

/* 戻る（グレー） */
.btn-back {
  background-color: #9f9f9f;
  border-color: #9f9f9f;
  color: #fff;
  font-size: 10px;
}
.btn-back:hover {
  background-color: #5f6870;
  border-color: #5f6870;
}
.btn-back i {
  color: #fff;
}
.is-select {
  border: 1px solid var(--color-secondary) !important;
}

/* sizes - 既存の高さに上書き */
.btn-xs,
.btn.btn-xs {
  height: 22px !important;
  padding: 0 8px !important;
  font-size: 10px !important;
}

/* -------------------------------------------------
   パーツ集の カテゴリ見出し
   - sub-ttl とは別のレベル（章見出し）
   ------------------------------------------------- */
.parts-category {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 28px 0 8px;
  padding: 8px 14px;
  background: linear-gradient(
    135deg,
    var(--color-secondary) 0%,
    var(--color-secondary-dark) 100%
  );
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  border-radius: 6px;
  letter-spacing: 0.06em;
  box-shadow: 0 4px 12px rgba(16, 49, 124, 0.2);
}
.parts-category::before {
  content: "";
  display: inline-block;
  width: 4px;
  height: 16px;
  background: var(--color-primary);
  border-radius: 2px;
}
.parts-category i {
  font-size: 12px;
  opacity: 0.9;
  margin-right: 2px;
}
.parts-category .parts-category-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  background: rgba(255, 255, 255, 0.18);
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0;
}
.parts-category-desc {
  font-size: 11px;
  font-weight: 500;
  opacity: 0.85;
  margin-left: auto;
  letter-spacing: 0;
}
.parts-category:first-child {
  margin-top: 0;
}

/* ============================================================================
   9. ラベル
============================================================================ */
.lbl {
  display: inline-block;
  margin: 0 2.5px 5px;
  border: none;
  text-decoration: none;
  color: #333;
  background-color: #ddd;
  font-family: inherit;
  vertical-align: middle;
  border-radius: 5px;
  min-width: 60px;
  font-size: 13px;
  padding: 0 5px;
  height: 40px;
  line-height: 40px;
}
input:checked + .lbl {
  color: #fff;
  background-color: #50505b;
}
.group-label {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  margin: 16px 0 10px;
  font-size: 13px;
  font-weight: 700;
  color: var(--c-text-ttl);
  background: transparent;
  letter-spacing: 0.02em;
}
.group-label > span { display: inline-flex; align-items: center; }
/* タイトルのアイコンだけネイビーchip化（ボタン内アイコンは対象外） */
.group-label > span > i,
.group-label > i:first-child {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 23px;
  height: 23px;
  border-radius: 6px;
  flex-shrink: 0;
  background: var(--c-main-l, #eaf0fa);
  color: var(--c-main);
  font-size: 12px;
}
.group-label .btn { margin-left: auto; }

.sub-ttl {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 0 6px 0;
  margin: 14px 0 8px;
  font-size: 13px;
  font-weight: 700;
  color: #1e293b;
  background: transparent;
  text-align: left;
  line-height: 1.4;
  min-height: auto;
  border-bottom: 1px solid #e2e8f0;
  letter-spacing: 0.02em;
}
.sub-ttl:first-child {
  margin-top: 4px;
}
.sub-ttl-orange {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 0 6px 0;
  margin: 12px 0 8px;
  font-size: 13px;
  font-weight: 700;
  color: #c25a30;
  background: transparent;
  text-align: left;
  min-height: auto;
  border-bottom: 1px dashed #e8a07e;
}

.box-gray {
  background-color: #f8fafc;
  padding: 12px 14px;
  box-sizing: border-box;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  font-size: 12.5px;
  color: #475569;
  line-height: 1.6;
}
.box-gray p {
  margin: 0 0 4px;
}
.box-gray p:last-child {
  margin-bottom: 0;
}

/* ============================================================================
   12. カード（カードグリッド）
   ========================================================================== */

.card-grid-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
}
.card-grid-count {
  font-size: 13px;
  color: var(--c-text-sub);
}
.card-grid-count strong {
  color: var(--c-text-ttl);
  font-size: 15px;
  font-weight: 700;
}
.card-grid-count i {
  color: var(--c-main);
  margin-right: 5px;
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 15px;
}

/* タブレット：3列 / SP：1列（2段ブレイクポイントに統一） */
@media screen and (max-width: 1200px) {
  .card-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media screen and (max-width: 768px) {
  .card-grid {
    grid-template-columns: 1fr;
  }
}
.card-grid-item {
  position: relative;
  background: #fff;
  border: 1px solid var(--c-bdr-2);
  border-radius: var(--radius-l);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-1);
  transition:
    box-shadow 0.18s ease,
    transform 0.18s ease,
    border-color 0.18s ease;
  cursor: default;
  /* button要素リセット */
  padding: 0;
  font: inherit;
  color: inherit;
  text-align: left;
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
}
.card-grid-item:hover {
  box-shadow: var(--shadow-3);
  transform: translateY(-3px);
  border-color: var(--c-bdr);
}

/* 上部ステータスアクセントバー（ネイビー既定／状態色で区別） */
.card-grid-item-accent {
  display: block;
  height: 3px;
  background: var(--c-main);
}
.card-grid-item-accent.accent-red {
  background: var(--c-error);
}
.card-grid-item-accent.accent-yellow {
  background: var(--c-warn);
}
.card-grid-item-accent.accent-green {
  background: var(--c-success);
}
.card-grid-item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 13px 14px 0;
}
.card-grid-item-id {
  font-size: 11px;
  color: var(--c-text-light);
  font-family: var(--ff-num), monospace;
  letter-spacing: 0.04em;
}
.card-grid-item-company {
  padding: 9px 14px 0;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--c-text-sub);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.card-grid-item-title {
  padding: 3px 14px 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--c-text-ttl);
  line-height: 1.45;
  min-height: 30px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.card-grid-item-body {
  padding: 12px 14px;
  flex: 1;
}
.card-grid-item-salary {
  background: var(--c-main-ll);
  border: 1px solid var(--c-main-l);
  border-radius: var(--radius);
  padding: 9px 12px;
  margin-bottom: 11px;
}
.card-grid-item-salary-label {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 700;
  color: var(--c-text-sub);
  letter-spacing: 0.04em;
  margin-bottom: 3px;
}
.card-grid-item-salary-label i {
  color: var(--c-main);
}
.card-grid-item-salary-value {
  display: block;
  font-size: 17px;
  font-weight: 800;
  color: var(--c-main);
  line-height: 1.25;
  font-variant-numeric: tabular-nums;
}
.card-grid-item-meta {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.card-grid-item-meta-row {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  color: var(--c-text);
}
.card-grid-item-meta-row i {
  width: 14px;
  text-align: center;
  color: var(--c-text-light);
  font-size: 11px;
  flex-shrink: 0;
}
.card-grid-item-meta-row span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.card-grid-item-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  border-top: 1px solid var(--c-bdr-2);
  background: var(--c-bg-gray);
  margin-top: auto;
}

.card-grid-item-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 700;
  color: var(--c-main);
  text-decoration: none;
  letter-spacing: 0.02em;
  transition: gap 0.18s ease;
}
.card-grid-item:hover .card-grid-item-link {
  gap: 9px;
}
.card-grid-item-link i {
  font-size: 10px;
  color: var(--c-main);
  transition: transform 0.18s ease;
}
.card-grid-item:hover .card-grid-item-link i {
  transform: translateX(2px);
}
.card-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px 3px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.4;
}
.card-badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}
.card-badge-active {
  background-color: var(--c-info-bg);
  color: #1d4ed8;
}
.card-badge-closed {
  background-color: var(--st-rejected-bg);
  color: var(--st-rejected-fg);
}
.card-badge-hold {
  background-color: var(--st-pending-bg);
  color: var(--st-pending-fg);
}
.card-badge-new {
  background-color: var(--st-approved-bg);
  color: var(--st-approved-fg);
}

.card-badge-mini {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.5;
}
.badge-haken {
  background-color: var(--c-info-bg);
  color: #1d4ed8;
}
.badge-tokutei {
  background-color: var(--c-warn-bg);
  color: #b45309;
}
.badge-koudo {
  background-color: var(--st-approved-bg);
  color: var(--st-approved-fg);
}

/* ============================================================================
   13. アコーディオン
============================================================================ */
/* 開閉ボタン */
.accordion-L,
.accordion-M,
.accordion-S {
  width: 100%;
  border: none;
  padding: 5px 10px;
  text-align: left;
  font-family: inherit;
  font-size: 14px;
  background-repeat: no-repeat;
  background-position: right 15px center;
}
.accordion-L {
  font-weight: bold;
  color: #fff;
  background-color: #50505b;
  padding: 10px;
  border-left: 4px solid var(--color-primary);
  background-image: url("/common/image/icn_acc_l_close.png");
}
.accordion-L.is-close {
  background-image: url("/common/image/icn_acc_l_open.png");
}
.accordion-L span {
  font-size: 12px;
  padding-left: 15px;
  color: #bbb;
}
.accordion-M {
  font-weight: bold;
  background-color: #c8c6ce;
  border-bottom: 1px solid #fff;
  background-image: url("/common/image/icn_acc_m_close.png");
}
.accordion-M.is-close {
  background-image: url("/common/image/icn_acc_m_open.png");
}
.accordion-S {
  background-color: #f2f2f4;
  border-bottom: 1px solid #fff;
  background-image: url("/common/image/icn_acc_s_close.png");
}
.accordion-S.is-close {
  background-image: url("/common/image/icn_acc_s_open.png");
}

/* 開閉先 */
.accordion-tgt {
  padding: 0;
}
.accordion-tgt.is-close {
  display: none;
}

/* ============================================================================
   13. モーダル、ダイアログ
============================================================================ */
/* モーダル（flexbox型でシンプル＆崩れない） */
.modal {
  display: none;
}

.modal.is-full,
.modal:target {
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.5);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 9999;
  padding: 20px;
  box-sizing: border-box;
  animation: modal-bg-in 0.16s ease;
}
@keyframes modal-bg-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.modal.is-full .modal-window,
.modal:target .modal-window {
  position: relative;
  background: #fff;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-4);
  width: 100%;
  max-width: 720px;
  max-height: calc(100vh - 40px);
  height: auto;
  margin: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: modal-in 0.22s cubic-bezier(0.34, 1.4, 0.64, 1);
}
@keyframes modal-in {
  from {
    opacity: 0;
    transform: translateY(-10px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.modal.is-full .modal-window.is-S,
.modal:target .modal-window.is-S {
  max-width: 480px;
}
.modal.is-full .modal-window.is-M,
.modal:target .modal-window.is-M {
  max-width: 640px;
}
.modal.is-full .modal-window.is-L,
.modal:target .modal-window.is-L {
  max-width: 1000px;
}
.modal.is-full .modal-window.is-XL,
.modal:target .modal-window.is-XL {
  max-width: 1320px;
}

.modal-window-main,
.modal-window-main-L,
.modal-window-main-M,
.modal-window-main-S {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 16px 18px;
  margin: 0;
  height: auto !important;
  box-sizing: border-box;
}

.modal-window-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  padding: 12px 18px;
  border-top: 1px solid #e2e8f0;
  background: #f8fafc;
  flex-shrink: 0;
}

@media screen and (max-width: 768px) {
  .modal.is-full,
  .modal:target {
    padding: 12px;
  }
}

/* 閉じるボタン（×）：ヘッダー内右上に配置 */
.modal-btn-close {
  position: absolute;
  top: 12px;
  right: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: transparent;
  border: 1px solid #e2e8f0;
  border-radius: 50%;
  color: #64748b;
  cursor: pointer;
  z-index: 10;
  font-size: 12px;
  transition: 0.15s ease;
}
.modal-btn-close::before {
  content: "\f00d";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
}
.modal-btn-close:hover {
  background: #f1f5f9;
  color: #1e293b;
  transform: rotate(90deg);
}

.modal-btn {
  border-left: 1px solid #e2e8f0;
  text-align: center;
}

.modal-ttl {
  font-weight: 700;
  font-size: 15px;
  color: #1e293b;
  border-bottom: none;
  padding: 0;
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* モーダルヘッダー：タイトル+ボタン横並び */
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid #e2e8f0;
  padding: 14px 18px;
  background: #fafbfd;
  flex-shrink: 0;
}
.modal-header .modal-ttl {
  border: none;
  padding: 0;
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: #1e293b;
}
.modal-header-btns {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

@media screen and (max-width: 1200px) {
  .modal-window.w70,
  .modal-window.w40 {
    width: 90% !important;
  }
}

/* 登録完了ポップアップ */
.popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: 9999;
}

/* ============================================================================
   15. ローディング
============================================================================ */
.loading {
  position: fixed;
  width: 100%;
  height: 100vh;
  z-index: 599999999;
  top: 0;
  left: 0;
  background-color: rgba(96, 96, 96, 0.5);
}
.loading img {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

/* ============================================================================
   16. ページャー
============================================================================ */

/* ============================================================================
   17. タブ
============================================================================ */
/* タブ（モダンアンダーライン型） */
.tab {
  margin: 0 0 12px;
}
.tab-main {
  padding: 12px 0 0;
  background: transparent;
  border: none;
}
.tab-select {
  margin-bottom: 0;
}
.tab-select ul {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
  border-bottom: 2px solid #e2e8f0;
  font-size: 0;
}
.tab-select ul li {
  display: inline-flex;
  position: relative;
  padding: 0;
  margin-bottom: -2px;
}
.tab-select ul li button,
.tab-select ul li a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 36px;
  padding: 0 18px;
  min-width: auto;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: #64748b;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  letter-spacing: 0.02em;
  transition: 0.18s ease;
  float: none;
}
.tab-select ul li button:hover,
.tab-select ul li a:hover {
  color: #1e293b;
  background: #f8fafc;
}
.tab-select ul li.is-active button,
.tab-select ul li.is-active a {
  color: var(--color-secondary);
  border-bottom-color: var(--color-secondary);
  background: transparent;
  font-weight: 700;
}
.tab-select ul li button::before,
.tab-select ul li button::after,
.tab-select ul li a::before,
.tab-select ul li a::after {
  display: none;
}
.tab-select ul li button i,
.tab-select ul li a i {
  font-size: 11px;
  color: inherit;
}

/* 増減リスト
----------------------------------------------------------------------------- */
.list-add li {
  background-color: #f1f1f1;
  margin: 0 0 5px;
  padding: 5px;
  clear: both;
}
.list-add li.list-add-btn {
  background-color: #fff;
  text-align: center;
}
.list-add li input,
.list-add li select {
  margin-right: 5px;
}

/* コピー元 */
.list-add-copy {
  display: none !important;
}

/* add btn */
.list-add li.list-add-btn {
  display: block;
  width: 150px;
  margin: 0 auto;
}
.list-add li.list-add-btn button {
  width: 150px;
  background-color: #50505b;
  color: #fff;
  font-size: 20px;
  border: none;
  height: 30px;
  line-height: 30px;
  font-weight: bold;
  vertical-align: middle;
}

/* ============================================================================
   18. 画像アップロード
============================================================================ */
.upload {
  display: inline-block;
  position: relative;
  width: 100%;
  padding: 0 10%;
  margin: 0 10px 10px 0;
}

/* プレビューエリア */
.upload-preview {
  display: block;
  border: 5px solid #eee;
  width: 100%;
  height: 400px;
  background-image: url("/common/image/noimage.jpg");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 125px 125px;
  cursor: pointer;
  overflow: hidden;
  position: relative;
}
.upload-preview img {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: auto;
  max-width: 99999px;
  height: 100%;
}

.upload-input {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  text-align: center;
  padding: 10px;
}
.upload-input button {
  display: inline-block;
  margin: 0 5px 5px;
  border-radius: 3px;
  padding: 5px 10px;
  font-size: 14px;
  box-shadow: 0px 1px 0px 1px #bbb;
  border: none;
  font-family: inherit;
}
.upload-input-file {
  width: 0;
}
.upload-input-file-btn {
  background-color: #333;
  color: #fff;
}
.upload-clear {
  background-color: #ccc;
  color: #444;
}

.file-upload-area {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  border: 1px dashed #cbd5e1;
  padding: 6px 10px;
  background: #f8fafc;
  border-radius: 6px;
  transition: 0.15s ease;
}
.file-upload-area:hover {
  border-color: var(--color-secondary);
  background: var(--color-secondary-light);
}
.file-upload-area input[type="file"] {
  display: none;
}
.file-upload-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0 10px;
  height: 26px;
  background: var(--color-secondary);
  color: #fff;
  border-radius: 4px;
  cursor: pointer;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  transition: 0.15s ease;
}
.file-upload-btn:hover {
  background: var(--color-secondary-dark);
}
.file-upload-btn i {
  font-size: 11px;
}
.file-upload-area p {
  margin: 0;
  font-size: 11px;
  color: #94a3b8;
}

/* ============================================================================
   19. カレンダー
============================================================================ */
.tbl-calendar {
  width: 100%;
  margin-bottom: 10px;
  padding: 8px;
  background-color: #f1f1f1;
}
.tbl-calendar table {
  width: 100%;
  white-space: nowrap;
}
.tbl-calendar thead th,
.tbl-calendar tbody th {
  background-color: #f5f5f5;
  border: 1px solid #ddd;
  text-align: center;
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 600;
  color: #444;
  height: 30px;
  vertical-align: middle;
  padding: 0 3px;
  box-sizing: border-box;
}
.tbl-calendar tbody td {
  background-color: #fff;
  vertical-align: middle;
  border: 1px solid #ccc;
  height: 30px !important;
  box-sizing: border-box;
  padding: 0;
}
.tbl-calendar tbody td input[type="number"] {
  border-right: 1px solid #ccc;
}

/* リスト内フォームパーツ調整 */
.tbl-calendar tbody input[type="text"],
.tbl-calendar tbody input[type="date"],
.tbl-calendar tbody input[type="month"],
.tbl-calendar tbody input[type="time"],
.tbl-calendar tbody input[type="number"],
.tbl-calendar tbody input[type="tel"],
.tbl-calendar tbody input[type="email"],
.tbl-calendar tbody select {
  border: none;
  width: 100%;
  outline: none;
  vertical-align: middle;
  background-color: transparent;
  position: relative;
  height: 30px;
  box-sizing: border-box;
}
.tbl-calendar tbody textarea {
  margin-bottom: 0 !important;
  border: none;
  min-height: 30px;
  height: 30px;
  background-color: transparent;
}
.tbl-calendar tbody input[type="text"]:focus-within,
.tbl-calendar tbody input[type="date"]:focus-within,
.tbl-calendar tbody input[type="month"]:focus-within,
.tbl-calendar tbody input[type="time"]:focus-within,
.tbl-calendar tbody input[type="number"]:focus-within,
.tbl-calendar tbody input[type="tel"]:focus-within,
.tbl-calendar tbody input[type="email"]:focus-within,
.tbl-calendar tbody select:focus-within {
  outline: var(--color-secondary) solid 1px;
}
.tbl-calendar tbody textarea:focus-within {
  outline: var(--color-secondary) solid 1px;
}

/* 表示条件操作（ナビゲーション） */
.calendar-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  padding: 5px 0;
  background: #f5f5f5;
  border-radius: 4px;
}
.calendar-nav-title {
  font-size: 14px;
  font-weight: 600;
  min-width: 200px;
  text-align: center;
}
.calendar-nav-btn {
  width: 30px;
  height: 30px;
  border: 1px solid #ccc;
  background: #fff;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
}
.calendar-nav-btn:hover {
  background: #e5e5e5;
}
.calendar-nav-today {
  padding: 5px 10px;
  font-size: 12px;
  background: #2c4f8c;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
.calendar-nav-today:hover {
  background: #1e3a6e;
}

.mark-item {
  display: flex;
  align-items: center;
  font-size: 11px;
  gap: 5px;
  padding: 5px 12px;
  border: 2px solid #ccc;
  border-radius: 20px;
  cursor: pointer;
  transition: 0.2s;
}
.mark-item:hover {
  border-color: var(--color-secondary);
}
.mark-item.is-active {
  border-color: var(--color-secondary);
  background: #f0f4ff;
}
.mark-item input {
  display: none;
}
.mark-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  display: inline-block;
}
.mark-dot.red {
  background: var(--color-danger);
}
.mark-dot.blue {
  background: var(--color-secondary);
}
.mark-dot.green {
  background: #28a745;
}
.mark-dot.yellow {
  background: #ffc107;
}
.mark-dot.purple {
  background: #6f42c1;
}
.mark-dot.orange {
  background: #fd7e14;
}

/* 週折り返しカレンダー */
.calendar-grid {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}
.calendar-grid th {
  background: #f5f5f5;
  border: 1px solid #ddd;
  padding: 10px;
  text-align: center;
  font-weight: 600;
  color: #444;
}
.calendar-grid th.sunday {
  color: var(--color-danger);
}
.calendar-grid th.saturday {
  color: var(--color-secondary);
}
.calendar-grid td {
  border: 1px solid #ccc;
  height: 100px;
  vertical-align: top;
  padding: 5px;
  background: #fff;
}
.calendar-grid td.other-month {
  background: #f9f9f9;
}
.calendar-grid td.today {
  background: #fffde7;
}
.calendar-grid .grid-date {
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 5px;
}
.calendar-grid .grid-date.sunday {
  color: var(--color-danger);
}
.calendar-grid .grid-date.saturday {
  color: var(--color-secondary);
}
.calendar-grid .grid-date.holiday {
  color: var(--color-danger);
}
.calendar-grid .grid-content {
  font-size: 11px;
}
.calendar-grid .grid-event {
  display: block;
  padding: 2px 5px;
  margin-bottom: 2px;
  border-radius: 3px;
  color: #fff;
  font-size: 11px;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.calendar-grid .grid-event.red {
  background: var(--color-danger);
}
.calendar-grid .grid-event.blue {
  background: var(--color-secondary);
}
.calendar-grid .grid-event.green {
  background: #28a745;
}
.calendar-grid .grid-event.yellow {
  background: #ffc107;
  color: #333;
}
.calendar-grid .grid-event:hover {
  opacity: 0.8;
}
.calendar-grid td:hover {
  background: #f8fbfd;
}

/* ============================================================================
   20. ログイン / パスワード再設定（サイドバー無しの認証画面）
   ・.main.is-fullscreen 内に .auth を置く想定（ヘッダー／左ナビは読み込まない）
   ・グラデーションは使わない（プロジェクト方針）。白カード＋淡い背景で構成
============================================================================ */
/* 中央寄せの土台 */
.auth {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 32px 16px;
  box-sizing: border-box;
}

/* カード本体 */
.auth-card {
  width: 100%;
  max-width: 400px;
  background: #fff;
  border: 1px solid var(--c-bdr-2);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-3);
  padding: 32px 28px;
  box-sizing: border-box;
}

/* ブランド */
.auth-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 18px;
}
.auth-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: var(--color-secondary);
  color: #fff;
  font-size: 16px;
}
.auth-logo i {
  color: #fff;
}
.auth-brand-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--c-text-ttl);
  letter-spacing: 0.02em;
}

/* 見出し */
.auth-title {
  margin: 0 0 4px;
  font-size: 20px;
  font-weight: 700;
  color: var(--c-text-ttl);
  text-align: center;
}
.auth-lead {
  margin: 0 0 22px;
  font-size: 12.5px;
  color: var(--c-text-sub);
  text-align: center;
  line-height: 1.7;
}

/* アラート（認証失敗：com_user.php の $loginMsg 等） */
.auth-alert,
.auth-ok {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 18px;
  padding: 10px 12px;
  font-size: 12.5px;
  line-height: 1.6;
  border-radius: var(--radius);
}
.auth-alert {
  color: #991b1b;
  background: var(--c-error-bg);
  border: 1px solid #fca5a5;
}
.auth-ok {
  color: #065f46;
  background: var(--c-success-bg);
  border: 1px solid #6ee7b7;
}
.auth-alert i,
.auth-ok i {
  margin-top: 2px;
}

/* フォーム */
.auth-form {
  margin: 0;
}
.auth-field {
  margin-bottom: 16px;
}
.auth-field > label {
  display: block;
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--c-text);
}

/* アイコン付き入力 */
.auth-input {
  position: relative;
  display: block;
}
.auth-input-ic {
  position: absolute;
  top: 50%;
  left: 12px;
  transform: translateY(-50%);
  color: var(--c-text-light);
  font-size: 13px;
  pointer-events: none;
}
.auth-input input {
  width: 100%;
  height: 44px;
  padding: 0 12px 0 36px;
  font-size: 13.5px;
  color: var(--c-text);
  background: #fff;
  border: 1px solid var(--c-bdr);
  border-radius: var(--radius);
  box-sizing: border-box;
  transition: border-color var(--t-base), box-shadow var(--t-base);
}
.auth-input input::placeholder {
  color: var(--c-text-light);
}
.auth-input input:focus {
  outline: none;
  border-color: var(--color-secondary);
  box-shadow: var(--shadow-focus);
}
/* パスワード表示トグルがある場合は右余白を確保 */
.auth-input.has-eye input {
  padding-right: 42px;
}
.auth-eye {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 0;
  background: transparent;
  color: var(--c-text-light);
  cursor: pointer;
  border-radius: var(--radius);
}
.auth-eye i {
  color: inherit;
  font-size: 13px;
}
.auth-eye:hover {
  color: var(--c-text-sub);
}

/* 行（ログイン状態保持＋補助リンク） */
.auth-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 4px 0 20px;
  font-size: 12px;
}
.auth-check {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--c-text-sub);
  cursor: pointer;
  line-height: 1.4;
}
.auth-check input {
  width: 15px;
  height: 15px;
  margin: 0;
  accent-color: var(--color-secondary);
}
.auth-link {
  color: var(--color-secondary);
  text-decoration: none;
  font-weight: 600;
}
.auth-link:hover {
  text-decoration: underline;
}

/* フルワイドボタン（認証 CTA。.btn を全幅・少し大きめに） */
.btn-block {
  width: 100%;
  height: 44px;
  font-size: 13.5px;
  border-radius: var(--radius);
}
.btn-block + .btn-block {
  margin-top: 10px;
}

/* カード内の区切り＋補助リンク */
.auth-sep {
  margin: 18px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--c-bdr-2);
  text-align: center;
  font-size: 12px;
  color: var(--c-text-sub);
}
.auth-sep .auth-link {
  margin-left: 4px;
}

/* コピーライト */
.auth-foot {
  margin: 18px 0 0;
  font-size: 11px;
  color: var(--c-text-light);
  text-align: center;
}

/* 項目別バリデーションメッセージ（is-error の入力欄直下に表示） */
.field-error {
  margin-top: 4px;
  font-size: 11px;
  color: var(--color-error);
  line-height: 1.4;
}

/* SP */
@media screen and (max-width: 768px) {
  .auth {
    padding: 20px 14px;
  }
  .auth-card {
    padding: 26px 20px;
  }
}

/* ============================================================================
   21. ソート、ツールチップ
============================================================================ */

/* ソート列ヘッダー（サーバー側ソート：見出しは <a href="?sort=…&order=…"> リンク。
   クリックで sort/order を GET 送信し、サーバーが並べ替える。▲▼ は sortTh() が文字で出力） */
.sort-th {
  padding: 0;
}
.sort-th .sort-link {
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 8px 10px;
  color: var(--color-secondary);
  text-decoration: none;
  white-space: nowrap;
  user-select: none;
  cursor: pointer;
}
.sort-th .sort-link:hover {
  background-color: #eef2f9;
  text-decoration: underline;
}
.sort-th.tar .sort-link {
  justify-content: flex-end; /* 数値列は右寄せ見出し */
}
.sort-th .sort-link.is-asc,
.sort-th .sort-link.is-desc {
  font-weight: 700;
  color: var(--color-primary); /* 並べ替え中の列を強調 */
}

/* ツールチップ */
.tooltip {
  position: relative;
  display: inline-block;
}
.tooltip a {
  color: var(--color-secondary);
  text-decoration: underline;
}
.tooltip .tooltip-text {
  all: initial;
  box-sizing: border-box;
  visibility: hidden;
  display: inline-block;
  background-color: #333;
  color: #fff;
  text-align: center;
  padding: 5px;
  border-radius: 4px;
  position: absolute;
  z-index: 9999;
  top: 125%;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: 11px;
  font-family: inherit;
  line-height: 1.6;
}
.tooltip .tooltip-text::after {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent #333 transparent;
}
.tooltip:hover .tooltip-text {
  visibility: visible;
}

/* ============================================================================
   22. パネルリスト
============================================================================ */
/* パネルリスト（コンパクト） */
.panel-list {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
}

.panel-list-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  border-bottom: 1px solid #e2e8f0;
  background: #f8fafc;
}

.panel-list-header h3 {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  color: #1e293b;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.panel-list-header h3 i {
  color: #64748b;
  font-size: 12px;
}

.panel-list-view {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.view-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: 1px solid #cbd5e1;
  background: #fff;
  border-radius: 4px;
  cursor: pointer;
  color: #64748b;
  font-size: 11px;
  transition: 0.15s ease;
}

.view-btn:hover,
.view-btn.active {
  background: var(--color-secondary);
  border-color: var(--color-secondary);
  color: #fff;
}

/* グリッドサイズを縮小（最小160px） */
.panel-list-body {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 8px;
  padding: 10px;
}

/* パネルアイテム（コンパクト） */
.panel-item {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  overflow: hidden;
  transition: 0.18s ease;
  cursor: pointer;
}

.panel-item:hover {
  border-color: #cbd5e1;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
  transform: translateY(-1px);
}

.panel-thumbnail {
  position: relative;
  aspect-ratio: 4 / 3;
  background: #f8fafc;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.panel-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* file-icon 内のアイコンを少し小さく（コンパクト化） */
.panel-thumbnail .file-icon {
  font-size: 28px;
}

.panel-info {
  padding: 7px 10px 8px;
}

.panel-title {
  margin: 0 0 3px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: #1e293b;
}

.panel-meta {
  margin: 0;
  font-size: 10.5px;
  color: #94a3b8;
  line-height: 1.4;
}

/* リスト表示時 */
.panel-list-body.view-list {
  grid-template-columns: 1fr;
}

.panel-list-body.view-list .panel-item {
  display: flex;
  align-items: center;
}

.panel-list-body.view-list .panel-thumbnail {
  width: 160px;
  min-width: 160px;
  aspect-ratio: 16 / 9;
}

.panel-list-body.view-list .panel-info {
  flex: 1;
}

@media (max-width: 768px) {
  .panel-list-body {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  }

  
}

.preview-info {
  flex: 1;
  min-width: 0;
}

.preview-meta {
  margin: 0;
  font-size: 11px;
  color: #888;
}

@media (max-width: 768px) {
  .panel-list-body {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  }

  

  

  

  
}

/* ============================================================================
   24. ダッシュボード統計カード
============================================================================ */
/* 統計カード（コンパクト＋スタイリッシュ） */
/* 統計カード（KPI）：アイコン左＋ラベル/数値＋トレンドの横並びでコンパクト */
.stat-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 11px;
  background: #fff;
  border: 1px solid var(--c-bdr-2);
  border-radius: var(--radius-l);
  padding: 9px 13px 9px 16px;
  overflow: hidden;
  transition: var(--t-base);
}
.stat-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--c-main);
  transition: var(--t-base);
}
.stat-card.kind-success::before {
  background: var(--c-success);
}
.stat-card.kind-warn::before {
  background: var(--c-warn);
}
.stat-card.kind-error::before {
  background: var(--c-error);
}
.stat-card.kind-accent::before {
  background: var(--c-accent);
}
.stat-card:hover {
  border-color: var(--c-bdr);
  box-shadow: var(--shadow-2);
  transform: translateY(-1px);
}
.stat-card:hover::before {
  width: 4px;
}
.stat-icon {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  background: var(--color-secondary-light);
  color: var(--color-secondary);
  font-size: 15px;
}
.stat-card.kind-success .stat-icon {
  background: #d1fae5;
  color: #047857;
}
.stat-card.kind-warn .stat-icon {
  background: #fef3c7;
  color: #b45309;
}
.stat-card.kind-error .stat-icon {
  background: #fee2e2;
  color: #b91c1c;
}
.stat-body {
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex: 1;
  min-width: 0;
}
.stat-label {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: #64748b;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.stat-label i {
  color: #94a3b8;
  font-size: 11px;
}
.stat-value {
  font-size: 19px;
  font-weight: 700;
  color: #1e293b;
  line-height: 1.15;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.stat-value.alert {
  color: var(--color-error);
}
.stat-value.success {
  color: var(--color-success);
}
.stat-trend {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
}
.stat-trend.up {
  color: #047857;
}
.stat-trend.down {
  color: #b91c1c;
}
.stat-trend i {
  font-size: 9px;
}
.notification-badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 3px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.6;
}
.notification-badge.important {
  background: #fef2f2;
  color: var(--color-danger);
  border: 1px solid #f8bbd0;
}
.notification-badge.info {
  background: #e8f4fd;
  color: #1976d2;
  border: 1px solid #bbdefb;
}
.notification-badge.normal {
  background: #f5f5f5;
  color: #616161;
  border: 1px solid #e0e0e0;
}
.notification-unread {
  font-weight: 700;
  color: #333;
}
.notification-read {
  color: #999;
}
.activity-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.activity-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 15px;
  border-bottom: 1px solid #f0f0f0;
  font-size: 13px;
}
.activity-item:last-child {
  border-bottom: none;
}
.activity-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  flex-shrink: 0;
}
.activity-icon.edit {
  background: #e3f2fd;
  color: #1976d2;
}
.activity-icon.create {
  background: #e8f5e9;
  color: #2e7d32;
}
.activity-icon.delete {
  background: #fef2f2;
  color: var(--color-danger);
}
.activity-content {
  flex: 1;
}
.activity-content strong {
  color: #333;
}
.activity-time {
  font-size: 11px;
  color: #999;
  white-space: nowrap;
  align-self: center;
}

/* ============================================================================
   25. 帳票プレビュー（スクリーン用）
============================================================================ */
.doc-preview {
  background: #fff;
  padding: 40px;
  max-width: 800px;
  margin: 0 auto;
  font-family: "Yu Mincho", "游明朝", "Hiragino Mincho ProN", serif;
}
.doc-preview-header {
  text-align: center;
  margin-bottom: 30px;
  border-bottom: 3px double #333;
  padding-bottom: 15px;
}
.doc-preview-title {
  font-size: 28px;
  font-weight: bold;
  letter-spacing: 8px;
  margin: 0 0 10px;
}
.doc-preview-meta {
  font-size: 12px;
  color: #666;
}
.doc-preview-meta p {
  margin: 2px 0;
}
.doc-preview-amount-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #f5f6fa;
  border: 2px solid #333;
  padding: 12px 20px;
  margin: 20px 0;
}
.doc-preview-amount-label {
  font-size: 16px;
  font-weight: 700;
}
.doc-preview-amount-value {
  font-size: 24px;
  font-weight: 700;
  color: var(--color-secondary);
}
.doc-preview-info {
  display: flex;
  justify-content: space-between;
  margin-bottom: 25px;
}
.doc-preview-to {
  flex: 1;
}
.doc-preview-client {
  font-size: 18px;
  font-weight: bold;
  border-bottom: 1px solid #333;
  padding-bottom: 5px;
  display: inline-block;
  margin-bottom: 5px;
}
.doc-preview-from {
  text-align: right;
  font-size: 12px;
  line-height: 1.8;
}
.doc-preview-table {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0;
}
.doc-preview-table th,
.doc-preview-table td {
  border: 1px solid #999;
  padding: 8px 12px;
  font-size: 13px;
}
.doc-preview-table thead th {
  background-color: #f0f0f0;
  font-weight: bold;
  text-align: center;
}
.doc-preview-table tbody td {
  background: #fff;
}
.doc-preview-table tfoot th,
.doc-preview-table tfoot td {
  background-color: #f8f8f8;
}
.doc-preview-note {
  margin-top: 20px;
  padding: 12px;
  border: 1px solid #ccc;
  font-size: 12px;
  line-height: 1.8;
  background: #fafafa;
}
.doc-preview-note p {
  margin: 2px 0;
}

/* is-changed for individual inputs */
input.is-changed,
select.is-changed,
textarea.is-changed {
  background-color: #f7ecb0 !important;
}

/* Tooltip top arrow variant */
.tooltip .tooltip-text.tooltip-top::after {
  bottom: auto;
  top: 100%;
  border-color: #333 transparent transparent transparent;
}

/* ============================================================================
   26. ドロップダウンボタン（クリック時メニュー表示）
============================================================================ */
.btn-dropdown {
  position: relative;
  display: inline-block;
}
.btn-dropdown-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
}
.btn-dropdown-toggle .caret {
  font-size: 10px;
  margin-left: 4px;
  opacity: 0.85;
  transition: transform 0.2s ease;
}
.btn-dropdown.is-open .btn-dropdown-toggle .caret {
  transform: rotate(180deg);
}
/* メニュー本体 - フェードイン + スライド + 強化シャドウ */
.btn-dropdown-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 1000;
  min-width: 180px;
  padding: 6px 0;
  background-color: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  list-style: none;
  box-shadow:
    0 12px 32px rgba(15, 23, 42, 0.14),
    0 4px 8px rgba(15, 23, 42, 0.06);
  margin: 0;
  /* 開閉アニメーション（display:none ではなく opacity/visibility） */
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px) scale(0.98);
  transform-origin: top left;
  transition:
    opacity 0.16s ease,
    transform 0.16s ease,
    visibility 0.16s ease;
  pointer-events: none;
}
/* 三角の指針（ドロップダウン上部） */
.btn-dropdown-menu::before {
  content: "";
  position: absolute;
  top: -5px;
  left: 16px;
  width: 10px;
  height: 10px;
  background: #fff;
  border-top: 1px solid #e2e8f0;
  border-left: 1px solid #e2e8f0;
  transform: rotate(45deg);
}
.btn-dropdown-menu.align-right {
  left: auto;
  right: 0;
  transform-origin: top right;
}
.btn-dropdown-menu.align-right::before {
  left: auto;
  right: 16px;
}
.btn-dropdown.is-open .btn-dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  pointer-events: auto;
  /* JS で position:fixed に切替える瞬間に opacity/visibility トランジションが中途半端になるのを防ぐ＝開く時は即時表示 */
  transition: none;
}
.btn-dropdown-menu li {
  display: block;
  padding: 0 6px;
}
.btn-dropdown-menu li a,
.btn-dropdown-menu li button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 7px 10px;
  font-size: 12.5px;
  color: #1e293b;
  text-decoration: none;
  background: none;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  text-align: left;
  font-family: inherit;
  transition: 0.12s ease;
  border-radius: 5px;
  margin: 0;
  font-weight: 500;
  line-height: 1;
  min-height: 30px;
}
.btn-dropdown-menu li a:hover,
.btn-dropdown-menu li button:hover {
  background-color: var(--color-secondary-light);
  color: var(--color-secondary);
}
.btn-dropdown-menu li a i,
.btn-dropdown-menu li button i {
  width: 14px;
  text-align: center;
  color: #94a3b8;
  font-size: 11px;
  transition: color 0.12s ease;
}
.btn-dropdown-menu li a:hover i,
.btn-dropdown-menu li button:hover i {
  color: var(--color-secondary);
}
.btn-dropdown-menu .divider {
  height: 1px;
  margin: 4px 8px;
  background-color: #f1f5f9;
}
/* 危険系アクション（削除等） */
.btn-dropdown-menu li a.is-danger,
.btn-dropdown-menu li button.is-danger {
  color: var(--color-danger);
}
.btn-dropdown-menu li a.is-danger i,
.btn-dropdown-menu li button.is-danger i {
  color: #f87171;
}
.btn-dropdown-menu li a.is-danger:hover,
.btn-dropdown-menu li button.is-danger:hover {
  background-color: #fef2f2;
  color: #b91c1c;
}
.btn-dropdown-menu li a.is-danger:hover i,
.btn-dropdown-menu li button.is-danger:hover i {
  color: #b91c1c;
}

/* ============================================================================
   27. 必須マーク（.is-required をlabelに付与するだけで表示）
============================================================================ */
label.is-required::after {
  content: "必須";
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  background-color: var(--color-danger);
  border-radius: 3px;
  vertical-align: middle;
  line-height: 1.4;
}

/* ============================================================================
   28. インライン置き換え用ユーティリティクラス
============================================================================ */
.icon-gap-r {
  margin-right: 5px;
}
.icon-color-sub {
  color: #666;
}

.link-primary {
  color: #2c4f8c;
  text-decoration: underline;
}
.textarea-m {
  height: 80px;
}
.label-field {
  font-size: 11px;
  font-weight: 600;
  color: #444;
  letter-spacing: 0.3px;
}
.modal-p-center {
  padding: 20px;
  text-align: center;
  font-size: 14px;
}

.buttons-left {
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 8px;
}
.search-box-footer {
  padding: 0 8px 8px;
}

/* modal-inner: modal-window-main互換 */
.modal-inner {
  padding: 10px 15px;
  overflow-y: auto;
}

/* ============================================================================
   29. 拡張パーツ（10011 由来）
   ----------------------------------------------------------------------------
   - チップ / アラートボックス / トースト / アコーディオンカード
   - お知らせリスト / アクションリスト / セグメント
   - 統計カードバリエーション / レジェンド / 進捗サマリー
   - ローディング / エラーダイアログ
   - インライン置換用ユーティリティ（列幅・最大高さ・状態色 等）
============================================================================ */

/* ----------------------------------------------------------------------------
   29-1. ステータスチップ（.chip）+ サイズ/スタイルバリエーション
---------------------------------------------------------------------------- */
.chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 2px 9px;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.02em;
  border-radius: 4px;
  background: var(--st-draft-bg);
  color: var(--st-draft-fg);
  white-space: nowrap;
  vertical-align: middle;
  border: 1px solid transparent;
}
.chip i {
  font-size: 6px;
  line-height: 1;
}
.chip-draft {
  background: var(--st-draft-bg);
  color: var(--st-draft-fg);
}
.chip-pending {
  background: var(--st-pending-bg);
  color: var(--st-pending-fg);
}
.chip-approved {
  background: var(--st-approved-bg);
  color: var(--st-approved-fg);
}
.chip-rejected {
  background: var(--st-rejected-bg);
  color: var(--st-rejected-fg);
}
.chip-paid {
  background: var(--st-paid-bg);
  color: var(--st-paid-fg);
}
.chip-overdue {
  background: var(--st-overdue-bg);
  color: var(--st-overdue-fg);
}
.chip-info {
  background: var(--st-info-bg);
  color: var(--st-info-fg);
}
.chip-warn {
  background: var(--st-warn-bg);
  color: var(--st-warn-fg);
}

/* サイズバリエーション */
.chip-sm {
  padding: 1px 7px;
  font-size: 10px;
  gap: 3px;
  border-radius: 9px;
}
.chip-sm i {
  font-size: 9px;
}
.chip-lg {
  padding: 5px 14px;
  font-size: 13px;
  gap: 6px;
  border-radius: 14px;
}
.chip-lg i {
  font-size: 12px;
}

/* outline スタイル（背景透明・色付きボーダー） */
.chip-outline {
  background: #fff;
  border-color: #cbd5e1;
  color: #64748b;
}
.chip-outline.chip-pending {
  border-color: #fcd34d;
  color: var(--st-pending-fg);
}
.chip-outline.chip-approved {
  border-color: #6ee7b7;
  color: var(--st-approved-fg);
}
.chip-outline.chip-rejected {
  border-color: #fca5a5;
  color: var(--st-rejected-fg);
}
.chip-outline.chip-paid {
  border-color: #6ee7b7;
  color: var(--st-paid-fg);
}
.chip-outline.chip-overdue {
  border-color: #fca5a5;
  color: var(--st-overdue-fg);
}
.chip-outline.chip-info {
  border-color: #93c5fd;
  color: var(--st-info-fg);
}
.chip-outline.chip-warn {
  border-color: #fcd34d;
  color: var(--st-warn-fg);
}

/* solid スタイル（強調表示） */
.chip-solid {
  background: #64748b;
  color: #fff;
  border-color: transparent;
}
.chip-solid.chip-pending {
  background: #d97706;
}
.chip-solid.chip-approved {
  background: #059669;
}
.chip-solid.chip-rejected {
  background: var(--color-danger);
}
.chip-solid.chip-paid {
  background: #059669;
}
.chip-solid.chip-overdue {
  background: var(--color-danger);
}
.chip-solid.chip-info {
  background: var(--color-secondary);
}
.chip-solid.chip-warn {
  background: var(--color-warning);
}

/* ドット付き（左に色丸） */
.chip-dot::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  margin-right: 4px;
  flex-shrink: 0;
}

/* ----------------------------------------------------------------------------
   29-2. アラートボックス（.alert-box）
---------------------------------------------------------------------------- */
.alert-box {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 6px;
  border: 1px solid transparent;
  background: var(--st-info-bg);
  color: #1e293b;
  font-size: 12px;
  line-height: 1.5;
}
.alert-box > i {
  font-size: 14px;
  line-height: 1;
  flex-shrink: 0;
}
.alert-box > div {
  flex: 1;
  min-width: 0;
}
.alert-ttl {
  display: inline;
  font-size: 12.5px;
  font-weight: 700;
  margin-right: 6px;
  line-height: 1.5;
}
.alert-desc {
  display: inline;
  font-size: 12px;
  color: #475569;
  line-height: 1.5;
}
.alert-box.is-info {
  background: var(--st-info-bg);
  border-color: #bfdbfe;
}
.alert-box.is-info > i {
  color: var(--color-info);
}
.alert-box.is-warn {
  background: var(--st-warn-bg);
  border-color: #fde68a;
}
.alert-box.is-warn > i {
  color: var(--color-warning);
}
.alert-box.is-error {
  background: var(--st-rejected-bg);
  border-color: #fecaca;
}
.alert-box.is-error > i {
  color: var(--color-error);
}
.alert-box.is-success {
  background: var(--st-approved-bg);
  border-color: #a7f3d0;
}
.alert-box.is-success > i {
  color: var(--color-success);
}

/* バリエーション: ミニ（1行・極コンパクト） */
.alert-box.is-mini {
  padding: 5px 10px;
  font-size: 11.5px;
  gap: 6px;
}
.alert-box.is-mini > i {
  font-size: 12px;
}

/* バリエーション: フラット（背景なし・左ボーダーのみ） */
.alert-box.is-flat {
  background: transparent;
  border: none;
  border-left: 3px solid #cbd5e1;
  border-radius: 0;
  padding: 6px 12px;
}
.alert-box.is-flat.is-info {
  border-left-color: var(--color-info);
}
.alert-box.is-flat.is-warn {
  border-left-color: var(--color-warning);
}
.alert-box.is-flat.is-error {
  border-left-color: var(--color-error);
}
.alert-box.is-flat.is-success {
  border-left-color: var(--color-success);
}

/* バリエーション: 強調（左に色付きアイコン枠） */
.alert-box.is-strong > i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.7);
}

/* ----------------------------------------------------------------------------
   29-3. トースト通知（.toast）
   - JS から動的生成: App.toast.success('...') / .error / .warn / .info
---------------------------------------------------------------------------- */
/* 通知バー（旧トースト廃止 → 画面上部中央のピル型バナーに変更） */
.notify-area,
.toast-area {
  position: fixed;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  z-index: 10001;
  pointer-events: none;
  max-width: 92vw;
}
.toast {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  max-width: 90vw;
  padding: 11px 22px;
  background: #1e293b;
  color: #fff;
  font-size: 13.5px;
  font-weight: 600;
  border-radius: 999px;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.28);
  transition: opacity 0.2s ease;
  pointer-events: auto;
  animation: toast-in 0.28s cubic-bezier(0.22, 0.94, 0.36, 1);
}
.toast i {
  font-size: 16px;
  line-height: 1;
  flex-shrink: 0;
}
.toast-success i {
  color: #34d399;
}
.toast-error i {
  color: #f87171;
}
.toast-warn i {
  color: #fbbf24;
}
.toast-info i {
  color: #60a5fa;
}
@keyframes toast-in {
  from {
    opacity: 0;
    transform: translateY(-12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 受信パラメータ デバッグパネル（DEBUG_PARAM=true のとき表示） */
.param-debug {
  position: fixed;
  left: 12px;
  bottom: 46px;
  z-index: 9000;
  width: 360px;
  max-width: 80vw;
  max-height: 42vh;
  display: flex;
  flex-direction: column;
  background: #0b1220;
  color: #e2e8f0;
  border: 1px solid #334155;
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  overflow: hidden;
}
.param-debug-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 10px;
  background: #131c2e;
  color: #93c5fd;
  font-weight: 700;
  font-size: 11.5px;
}
.param-debug-x {
  background: transparent;
  border: 0;
  color: #94a3b8;
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
}
.param-debug-x:hover {
  color: #fff;
}
.param-debug-body {
  margin: 0;
  padding: 8px 10px;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-all;
  font-family: "Consolas", "SFMono-Regular", monospace;
  font-size: 11px;
  line-height: 1.5;
}

/* ----------------------------------------------------------------------------
   29-4. アコーディオンカード（.accordion-card）
   - 既存「13. アコーディオン」とは別パターン（カード型・補助情報用）
---------------------------------------------------------------------------- */
.accordion-card {
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  background: #fff;
  margin-bottom: 8px;
  overflow: hidden;
}
.accordion-card-head {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 14px 18px;
  background: #f8fafc;
  border: none;
  font-size: 13px;
  font-weight: 600;
  color: #1e293b;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease;
}
.accordion-card-head:hover {
  background: #f1f5f9;
}
.accordion-card-head i {
  color: var(--color-secondary);
  font-size: 14px;
  transition: transform 0.2s ease;
}
.accordion-card.is-open .accordion-card-head i {
  transform: rotate(45deg);
}
.accordion-card-body {
  display: none;
  padding: 16px 18px;
  border-top: 1px solid #e2e8f0;
}
.accordion-card.is-open .accordion-card-body {
  display: block;
}

/* ----------------------------------------------------------------------------
   29-5. お知らせリスト（.notice-list）
---------------------------------------------------------------------------- */
/* お知らせリスト（コンパクト） */
.notice-list {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  overflow: hidden;
}
.notice-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 12px;
  background: #fff;
  border-bottom: 1px solid #f1f5f9;
  transition: background 0.15s ease;
  cursor: pointer;
}
.notice-item:last-child {
  border-bottom: none;
}
.notice-item:hover {
  background: #f8fafc;
}
.notice-icn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--color-secondary-light);
  color: var(--color-secondary);
  font-size: 11px;
  flex-shrink: 0;
}
.notice-item.kind-warn .notice-icn {
  background: var(--st-warn-bg);
  color: var(--color-warning);
}
.notice-item.kind-error .notice-icn {
  background: var(--st-rejected-bg);
  color: var(--color-error);
}
.notice-item.kind-info .notice-icn {
  background: var(--st-info-bg);
  color: var(--color-info);
}
.notice-info {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}
.notice-ttl-line {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  min-width: 0;
  margin-bottom: 0;
}
.notice-ttl {
  font-size: 12.5px;
  font-weight: 500;
  color: #1e293b;
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.notice-item.is-unread .notice-ttl {
  font-weight: 700;
}
.notice-item.is-unread .notice-ttl::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-primary);
  margin-right: 6px;
  vertical-align: middle;
  flex-shrink: 0;
}
.notice-meta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 10.5px;
  color: #94a3b8;
  flex-shrink: 0;
}
.notice-meta .cat {
  padding: 1px 6px;
  background: #f1f5f9;
  border-radius: 3px;
  color: #475569;
  font-size: 10px;
}
.notice-meta i {
  font-size: 9px;
  margin-right: 2px;
}

/* アクションリスト（.action-list）は不要のため削除（2026-06）。
   parts カタログのデモごと撤去。.action-list / .action-row / .badge-num は他で未使用。 */

/* ----------------------------------------------------------------------------
   29-7. セグメント（.segment）— ラジオボタンの代替
---------------------------------------------------------------------------- */
.segment {
  display: inline-flex;
  align-items: stretch;
  background: #f1f5f9;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  padding: 2px;
  gap: 0;
}
.segment > button,
.segment > label,
.segment > a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 28px;
  padding: 0 14px;
  background: transparent;
  border: none;
  font-size: 12px;
  font-weight: 600;
  color: #475569;
  cursor: pointer;
  border-radius: 4px;
  transition:
    background 0.15s ease,
    color 0.15s ease;
  line-height: 1;
  text-decoration: none;
}
.segment > button:hover,
.segment > label:hover,
.segment > a:hover {
  color: var(--color-secondary);
}
.segment > button.is-active,
.segment > label.is-active,
.segment > a.is-active {
  background: var(--color-secondary);
  color: #fff;
}
.segment > button i,
.segment > label i,
.segment > a i {
  font-size: 11px;
}

/* ----------------------------------------------------------------------------
   29-8. 統計カードバリエーション（.stat-card.kind-*）
   - 左色バーは廃止（フラットでミニマル）
   - 種別色は .stat-value.alert / .stat-value.success で表現
---------------------------------------------------------------------------- */
/* kind-* クラスはHTML互換のため受けるが、視覚的な装飾は数値色のみ */

/* ----------------------------------------------------------------------------
   29-9. レジェンド（.legend）— 凡例
---------------------------------------------------------------------------- */
.legend {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
}
.legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #475569;
}
.legend-swatch {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 3px;
  background: #cbd5e1;
}
.legend-swatch.draft {
  background: #cbd5e1;
}
.legend-swatch.tentative {
  background: var(--color-warning);
}
.legend-swatch.confirmed {
  background: var(--color-secondary);
}
.legend-swatch.completed {
  background: var(--color-success);
}

/* ----------------------------------------------------------------------------
   29-10. 進捗サマリー（.progress-summary）
---------------------------------------------------------------------------- */
.progress-summary {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 18px;
  padding: 8px 16px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
}
.progress-summary .ps-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #475569;
}
.progress-summary .ps-item b {
  font-size: 16px;
  font-weight: 700;
  color: #1e293b;
  font-variant-numeric: tabular-nums;
}
.progress-summary .ps-item i {
  font-size: 13px;
}
.progress-summary .ps-item.ps-total {
  margin-left: auto;
  padding-left: 14px;
  border-left: 1px solid #cbd5e1;
}

/* ----------------------------------------------------------------------------
   29-11. ローディングオーバーレイ + エラーダイアログ
---------------------------------------------------------------------------- */
/* ローディング：display切替ではなく opacity/visibility で「ふわっと」表示/非表示
   - 非表示時は visibility:hidden でクリックを透過（裏側を操作可能）
   - .active 付与でフェードイン、除去でフェードアウト（JS:App.loading） */
#loading {
  display: flex;
  position: fixed;
  inset: 0;
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  z-index: 9999;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity var(--t-base),
    visibility var(--t-base);
}
#loading.active {
  opacity: 1;
  visibility: visible;
}
/* スピナー（回転）。⚠️ #loading .spinner に transform:scale を当てると、keyframe の
   暗黙 from が scale(1) になり rotate(360deg)（=単位行列）との行列補間が常時 identity になって
   “回らない”不具合になる。scale は当てず、keyframe を from/to の rotate で明示する。 */
.spinner {
  width: 34px;
  height: 34px;
  border: 3px solid #e2e8f0;
  border-top-color: var(--color-secondary);
  border-radius: 50%;
  animation: spinner-rot 0.7s linear infinite;
}
@keyframes spinner-rot {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

#error-dialog {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 10000;
  align-items: center;
  justify-content: center;
}
#error-dialog.active {
  display: flex;
}
.dialog-box {
  background: #fff;
  border-radius: 8px;
  padding: 24px;
  max-width: 360px;
  width: 90%;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
}
.dialog-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
  color: var(--color-error);
  margin-bottom: 12px;
}
.dialog-message {
  font-size: 13px;
  line-height: 1.6;
  margin-bottom: 20px;
  color: #334155;
}
.dialog-box .btn {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
}

/* ----------------------------------------------------------------------------
   29-12. select-editable（編集可能セレクト）の標準スタイル
---------------------------------------------------------------------------- */
.select-editable {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 100%;
  min-width: 120px;
}
.select-editable select,
.select-editable input {
  width: 100%;
  box-sizing: border-box;
}
.select-editable select {
  position: absolute;
  inset: 0;
  opacity: 0.01;
}
.select-editable input {
  position: relative;
  z-index: 1;
  background: transparent;
  pointer-events: none;
}
.select-editable.is-editing input {
  background: #fff;
  pointer-events: auto;
}

/* ----------------------------------------------------------------------------
   29-13. インライン置換用ユーティリティ
---------------------------------------------------------------------------- */
/* テーブル列幅 */
.col-w30 {
  width: 30px;
}
.col-w34 {
  width: 34px;
}
.col-w40 {
  width: 40px;
}
.col-w45 {
  width: 45px;
}
.col-w50 {
  width: 50px;
}
.col-w60 {
  width: 60px;
}
.col-w70 {
  width: 70px;
}
.col-w80 {
  width: 80px;
}
.col-w90 {
  width: 90px;
}
.col-w100 {
  width: 100px;
}
.col-w120 {
  width: 120px;
}
.col-w140 {
  width: 140px;
}
.col-w110 {
  width: 110px;
}
.col-w130 {
  width: 130px;
}
.col-w150 {
  width: 150px;
}
.col-w160 {
  width: 160px;
}
.col-w180 {
  width: 180px;
}
.col-w200 {
  width: 200px;
}
.col-w220 {
  width: 220px;
}

/* テーブル最大高さ（スクロールコンテナ） */
.tbl-mh200 {
  max-height: 200px;
}
.tbl-mh250 {
  max-height: 250px;
}
.tbl-mh300 {
  max-height: 300px;
}
.tbl-mh400 {
  max-height: 400px;
}
.tbl-mh600 {
  max-height: 600px;
}

/* 4列グリッド（コンパクト） */
.grid-4col {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  padding: 4px 0;
}
@media screen and (max-width: 1200px) {
  .grid-4col {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media screen and (max-width: 768px) {
  .grid-4col {
    grid-template-columns: 1fr;
  }
}

/* readonly input: 標準でグレー背景 */
input[readonly]:not([type="checkbox"]):not([type="radio"]),
textarea[readonly] {
  background: #f5f5f5;
  cursor: not-allowed;
}

/* モーダル内プレビューエリア（請求書プレビュー等） */
.modal-preview {
  overflow-y: auto;
  background: #e5e5e5;
  padding: 20px;
}

/* 帳票プレビューモーダル: 90% 幅、最大 900px */
.modal.is-full .modal-window.is-L.modal-preview-window,
.modal:target .modal-window.is-L.modal-preview-window {
  width: 90%;
  max-width: 900px;
}

/* 白背景＋薄ボーダーの汎用カードボックス */
.box-light {
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
}

/* アイコン余白（label is-required アイコンと組み合わせる時） */
.icon-mr6 {
  margin-right: 6px;
}

/* ファイルタイプ別アイコン色（panel-thumbnail 等で使用） */
.file-icon {
  font-size: 36px;
  line-height: 1;
}
.file-icon.is-pdf {
  color: #e74c3c;
}
.file-icon.is-image {
  color: #3498db;
}
.file-icon.is-excel {
  color: #27ae60;
}
.file-icon.is-word {
  color: #2980b9;
}

/* ----------------------------------------------------------------------------
   29-16. トグルスイッチ（PICKUP等のON/OFF）
   - <input type="checkbox" name="upAry[xxx]" value="1"> でフォーム送信される
   - JSなしでHTML/CSSだけで動作
---------------------------------------------------------------------------- */
.toggle-switch {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
}
.toggle-switch input[type="checkbox"] {
  position: relative;
  appearance: none;
  -webkit-appearance: none;
  width: 44px;
  height: 24px;
  background-color: #cbd5e1;
  border-radius: 12px;
  cursor: pointer;
  transition: background-color 0.25s ease;
  margin: 0;
  flex-shrink: 0;
}
.toggle-switch input[type="checkbox"]::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.25s ease;
  box-shadow: 0 2px 4px rgba(15, 23, 42, 0.2);
}
.toggle-switch input[type="checkbox"]:checked {
  background-color: var(--color-secondary);
}
.toggle-switch input[type="checkbox"]:checked::after {
  transform: translateX(20px);
}
.toggle-switch input[type="checkbox"]:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(16, 49, 124, 0.18);
}
.toggle-switch-lbl {
  font-size: 12px;
  font-weight: 600;
  color: #64748b;
  min-width: 28px;
  transition: color 0.18s ease;
}
.toggle-switch input[type="checkbox"]:checked ~ .toggle-switch-lbl {
  color: var(--color-secondary);
}

/* ----------------------------------------------------------------------------
   29-17. メッセージUI（チャット風 - 左:相手 / 右:自分）
   - .msg-list で会話を縦並び
   - .msg-item.is-mine で自分の発言（右寄せ・色付き吹き出し）
---------------------------------------------------------------------------- */
.msg-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 16px;
  max-height: 480px;
  overflow-y: auto;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
}
.msg-item {
  display: flex;
  gap: 10px;
  max-width: 75%;
  align-self: flex-start;
}
.msg-item.is-mine {
  align-self: flex-end;
  flex-direction: row-reverse;
}
.msg-day-sep {
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 4px 0;
  padding: 3px 12px;
  font-size: 11px;
  font-weight: 600;
  color: #64748b;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
}
.msg-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: #e2e8f0;
  color: #475569;
  border-radius: 50%;
  font-size: 13px;
  font-weight: 700;
  flex-shrink: 0;
  align-self: flex-end;
}
.msg-item.is-mine .msg-avatar {
  background: var(--color-secondary);
  color: #fff;
}
.msg-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.msg-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: #94a3b8;
  padding: 0 4px;
}
.msg-item.is-mine .msg-meta {
  flex-direction: row-reverse;
}
.msg-meta .msg-name {
  font-weight: 700;
  color: #475569;
}
.msg-bubble {
  padding: 10px 14px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 14px 14px 14px 4px;
  font-size: 13px;
  line-height: 1.6;
  color: #1e293b;
  word-break: break-word;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.msg-item.is-mine .msg-bubble {
  background: var(--color-secondary);
  color: #fff;
  border-color: var(--color-secondary);
  border-radius: 14px 14px 4px 14px;
  box-shadow: 0 2px 6px rgba(16, 49, 124, 0.15);
}
.msg-bubble .msg-attachment {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  padding: 4px 10px;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 4px;
  font-size: 11px;
  color: inherit;
  text-decoration: none;
}
.msg-item:not(.is-mine) .msg-bubble .msg-attachment {
  background: #f1f5f9;
  border-color: #e2e8f0;
  color: var(--color-secondary);
}
.msg-input {
  display: flex;
  gap: 8px;
  align-items: flex-end;
  padding: 10px 12px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  margin-top: 10px;
}
.msg-input textarea {
  flex: 1;
  min-height: 44px;
  max-height: 160px;
  padding: 8px 12px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 13px;
  font-family: inherit;
  resize: vertical;
  background: #fff;
  transition:
    border-color 0.18s,
    box-shadow 0.18s;
}
.msg-input textarea:focus {
  outline: none;
  border-color: var(--color-secondary);
  box-shadow: 0 0 0 2px rgba(16, 49, 124, 0.12);
}
.msg-input-tools {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.msg-input-tool {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  color: #64748b;
  cursor: pointer;
  transition: 0.15s ease;
}
.msg-input-tool:hover {
  background: var(--color-secondary-light);
  border-color: var(--color-secondary);
  color: var(--color-secondary);
}
.msg-input-send {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 36px;
  padding: 0 16px;
  background: var(--color-secondary);
  color: #fff;
  border: 1px solid var(--color-secondary);
  border-radius: 6px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: 0.15s ease;
}
.msg-input-send:hover {
  background: var(--color-secondary-dark);
  border-color: var(--color-secondary-dark);
  box-shadow: 0 4px 12px rgba(16, 49, 124, 0.25);
}

/* ----------------------------------------------------------------------------
   29-18. 上部検索バー（一覧画面用キーワード検索）
   - 9999 風: 1行に検索アイコン + キーワード入力 + 絞り込みセレクト + 検索ボタン
---------------------------------------------------------------------------- */
.search-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  margin-bottom: 12px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
}
.search-bar-icn {
  color: var(--color-secondary);
  font-size: 14px;
  flex-shrink: 0;
}
.search-bar input[type="search"],
.search-bar input[type="text"] {
  flex: 1;
  min-width: 100px;
  height: 32px;
  padding: 0 12px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 13px;
  background: #fff;
  transition: 0.15s ease;
  box-sizing: border-box;
}
.search-bar input:focus {
  outline: none;
  border-color: var(--color-secondary);
  box-shadow: 0 0 0 2px rgba(16, 49, 124, 0.1);
}
.search-bar select {
  height: 32px;
  padding: 0 30px 0 12px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 13px;
  background: #fff
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M2 4l4 4 4-4H2z'/%3E%3C/svg%3E")
    no-repeat right 10px center;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  flex-shrink: 0;
  min-width: 130px;
}
.search-bar select:focus {
  outline: none;
  border-color: var(--color-secondary);
  box-shadow: 0 0 0 2px rgba(16, 49, 124, 0.1);
}
.search-bar .btn-search,
.search-bar button[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 32px;
  padding: 0 16px;
  background: var(--color-secondary);
  color: #fff;
  border: 1px solid var(--color-secondary);
  border-radius: 6px;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  transition: 0.15s ease;
  flex-shrink: 0;
  white-space: nowrap;
}
.search-bar .btn-search:hover,
.search-bar button[type="submit"]:hover {
  background: var(--color-secondary-dark);
  border-color: var(--color-secondary-dark);
  box-shadow: 0 4px 12px rgba(16, 49, 124, 0.2);
}

/* ----------------------------------------------------------------------------
   29-19. 詳細画面（読み取り専用フィールド）
   - .edit-box の input を <p> に置き換える運用
   - 横並びの縦積み（grid 3列）でコンパクトに情報表示
---------------------------------------------------------------------------- */
.edit-box .edit-field .field-value {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  width: 100%;
  margin: 0;
  padding: 7px 10px;
  min-height: 32px;
  background: #f8fafc;
  border: 1px solid #f1f5f9;
  border-radius: 4px;
  font-size: 13px;
  color: #1e293b;
  line-height: 1.5;
  word-break: break-word;
  box-sizing: border-box;
}
.edit-box .edit-field .field-value:empty::before {
  content: "—";
  color: #cbd5e1;
}
.edit-box .edit-field .field-value.is-multiline {
  display: block;
  min-height: 64px;
  padding: 8px 10px;
  white-space: pre-wrap;
  line-height: 1.6;
}

/* ----------------------------------------------------------------------------
   29-21. パンくずリスト（.breadcrumb）
---------------------------------------------------------------------------- */
.breadcrumb {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0;
  padding: 6px 0;
  margin: 0 0 8px;
  font-size: 12px;
  color: #94a3b8;
  list-style: none;
}
.breadcrumb li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.breadcrumb li:not(:last-child)::after {
  content: "\f054";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 9px;
  color: #cbd5e1;
  margin: 0 8px;
}
.breadcrumb a {
  color: #64748b;
  text-decoration: none;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: color 0.15s ease;
}
.breadcrumb a:hover {
  color: var(--color-secondary);
}
.breadcrumb a i {
  font-size: 11px;
}
.breadcrumb li.is-current,
.breadcrumb li[aria-current="page"] {
  color: #1e293b;
  font-weight: 700;
}

/* ----------------------------------------------------------------------------
   29-22. ページネーション（.pagination）
---------------------------------------------------------------------------- */
.pagination {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.pagination li {
  display: inline-flex;
}
.pagination a,
.pagination button,
.pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  height: 30px;
  padding: 0 8px;
  background: #fff;
  color: #475569;
  border: 1px solid #e2e8f0;
  border-radius: 5px;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: 0.15s ease;
  font-variant-numeric: tabular-nums;
}
.pagination a:hover,
.pagination button:hover {
  background: var(--color-secondary-light);
  border-color: var(--color-secondary);
  color: var(--color-secondary);
}
.pagination .is-active a,
.pagination .is-active button,
.pagination .is-active span {
  background: var(--color-secondary);
  border-color: var(--color-secondary);
  color: #fff;
  cursor: default;
}
.pagination .is-disabled a,
.pagination .is-disabled button,
.pagination .is-disabled span {
  color: #cbd5e1;
  background: #f8fafc;
  cursor: not-allowed;
  pointer-events: none;
}
.pagination .pagination-ellipsis {
  background: transparent;
  border: none;
  color: #94a3b8;
  cursor: default;
  pointer-events: none;
}

/* ----------------------------------------------------------------------------
   29-22b. ページャー（func_pager.php dispPager の出力 .pager>ul>li>a。.pagination と同デザイン）
   ※ .pager のCSSが無く、既定の縦並びリスト＋リンク色で崩れていた不具合の修正
---------------------------------------------------------------------------- */
.pager {
  display: flex;
  justify-content: center;
  margin-top: 10px;
}
.pager ul {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.pager li {
  display: inline-flex;
}
.pager a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  height: 30px;
  padding: 0 8px;
  background: #fff;
  color: #475569;
  border: 1px solid #e2e8f0;
  border-radius: 5px;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: 0.15s ease;
  font-variant-numeric: tabular-nums;
}
.pager a:hover {
  background: var(--color-secondary-light);
  border-color: var(--color-secondary);
  color: var(--color-secondary);
}
.pager li.is-current a {
  background: var(--color-secondary);
  border-color: var(--color-secondary);
  color: #fff;
  cursor: default;
}
/* 詳細ページャー（前へ／次へ：アイコンと文字の間隔） */
.pager.pager-detail a {
  gap: 4px;
}

/* ページャー全体（情報 + ページネーション + 件数選択） */
.pagination-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 10px 0;
  margin-top: 8px;
}
.pagination-info {
  font-size: 12px;
  color: #64748b;
}
.pagination-info b {
  color: #1e293b;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.pagination-perpage {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #64748b;
}
.pagination-perpage select {
  height: 28px;
  padding: 0 24px 0 8px;
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  font-size: 12px;
  background: #fff
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M2 4l4 4 4-4H2z'/%3E%3C/svg%3E")
    no-repeat right 6px center;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}

/* ----------------------------------------------------------------------------
   29-23. 空状態 (.empty-state)
---------------------------------------------------------------------------- */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  background: #fff;
  border: 1px dashed #e2e8f0;
  border-radius: 8px;
  text-align: center;
}
.empty-state-icn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  background: #f1f5f9;
  border-radius: 50%;
  color: #94a3b8;
  font-size: 24px;
  margin-bottom: 12px;
}
.empty-state-ttl {
  font-size: 14px;
  font-weight: 700;
  color: #1e293b;
  margin: 0 0 4px;
}
.empty-state-desc {
  font-size: 12px;
  color: #94a3b8;
  margin: 0 0 16px;
  max-width: 360px;
  line-height: 1.6;
}
.empty-state-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
/* コンパクト版（テーブル空行など） */
.empty-state.is-mini {
  padding: 18px 20px;
  flex-direction: row;
  gap: 12px;
  text-align: left;
}
.empty-state.is-mini .empty-state-icn {
  width: 36px;
  height: 36px;
  font-size: 16px;
  margin: 0;
}
.empty-state.is-mini .empty-state-ttl {
  font-size: 12.5px;
}
.empty-state.is-mini .empty-state-desc {
  font-size: 11.5px;
  margin-bottom: 0;
}

/* ----------------------------------------------------------------------------
   29-24. プログレスバー (.progress-bar)
---------------------------------------------------------------------------- */
.progress-bar {
  display: block;
  width: 100%;
  height: 8px;
  background: #e2e8f0;
  border-radius: 4px;
  overflow: hidden;
  position: relative;
}
.progress-bar-fill {
  display: block;
  height: 100%;
  background: var(--color-secondary);
  border-radius: 4px;
  transition: width 0.4s ease;
  position: relative;
}
.progress-bar-fill.is-success {
  background: var(--color-success);
}
.progress-bar-fill.is-warn {
  background: var(--color-warning);
}
.progress-bar-fill.is-error {
  background: var(--color-error);
}
.progress-bar-fill.is-info {
  background: var(--color-info);
}

/* パーセンテージ値（5%刻み） */
.progress-bar-fill.is-p0 {
  width: 0%;
}
.progress-bar-fill.is-p5 {
  width: 5%;
}
.progress-bar-fill.is-p10 {
  width: 10%;
}
.progress-bar-fill.is-p15 {
  width: 15%;
}
.progress-bar-fill.is-p20 {
  width: 20%;
}
.progress-bar-fill.is-p25 {
  width: 25%;
}
.progress-bar-fill.is-p30 {
  width: 30%;
}
.progress-bar-fill.is-p35 {
  width: 35%;
}
.progress-bar-fill.is-p40 {
  width: 40%;
}
.progress-bar-fill.is-p45 {
  width: 45%;
}
.progress-bar-fill.is-p50 {
  width: 50%;
}
.progress-bar-fill.is-p55 {
  width: 55%;
}
.progress-bar-fill.is-p60 {
  width: 60%;
}
.progress-bar-fill.is-p65 {
  width: 65%;
}
.progress-bar-fill.is-p70 {
  width: 70%;
}
.progress-bar-fill.is-p75 {
  width: 75%;
}
.progress-bar-fill.is-p80 {
  width: 80%;
}
.progress-bar-fill.is-p85 {
  width: 85%;
}
.progress-bar-fill.is-p90 {
  width: 90%;
}
.progress-bar-fill.is-p95 {
  width: 95%;
}
.progress-bar-fill.is-p100 {
  width: 100%;
}

/* 縞模様アニメ（処理中表現） */
.progress-bar-fill.is-striped {
  background-image: linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.18) 25%,
    transparent 25%,
    transparent 50%,
    rgba(255, 255, 255, 0.18) 50%,
    rgba(255, 255, 255, 0.18) 75%,
    transparent 75%,
    transparent
  );
  background-size: 1rem 1rem;
  animation: progress-stripe 1s linear infinite;
}
@keyframes progress-stripe {
  from {
    background-position: 1rem 0;
  }
  to {
    background-position: 0 0;
  }
}

/* サイズバリエーション */
.progress-bar.is-sm {
  height: 5px;
}
.progress-bar.is-lg {
  height: 12px;
}

/* ラベル付き */
.progress-bar-wrap {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.progress-bar-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  color: #64748b;
}
.progress-bar-meta b {
  color: #1e293b;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* ----------------------------------------------------------------------------
   29-25. アバター + アバターグループ (.avatar / .avatar-group)
---------------------------------------------------------------------------- */
.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: var(--color-secondary);
  color: #fff;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: -0.02em;
  flex-shrink: 0;
  border: 2px solid transparent;
  overflow: hidden;
}
.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.avatar.is-xs {
  width: 22px;
  height: 22px;
  font-size: 10px;
}
.avatar.is-sm {
  width: 26px;
  height: 26px;
  font-size: 11px;
}
.avatar.is-lg {
  width: 40px;
  height: 40px;
  font-size: 15px;
}
.avatar.is-xl {
  width: 56px;
  height: 56px;
  font-size: 20px;
}

/* カラーバリエーション */
.avatar.is-pink {
  background: var(--color-primary);
}
.avatar.is-success {
  background: var(--color-success);
}
.avatar.is-warn {
  background: var(--color-warning);
}
.avatar.is-info {
  background: var(--color-info);
}
.avatar.is-gray {
  background: #94a3b8;
}

/* オンラインドット */
.avatar.is-online,
.avatar.is-offline,
.avatar.is-busy {
  position: relative;
  overflow: visible;
}
.avatar.is-online::after,
.avatar.is-offline::after,
.avatar.is-busy::after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  width: 9px;
  height: 9px;
  background: #22c55e;
  border: 2px solid #fff;
  border-radius: 50%;
}
.avatar.is-offline::after {
  background: #94a3b8;
}
.avatar.is-busy::after {
  background: var(--color-error);
}

/* グループ（重なって表示） */
.avatar-group {
  display: inline-flex;
  align-items: center;
}
.avatar-group .avatar {
  border-color: #fff;
  margin-left: -8px;
}
.avatar-group .avatar:first-child {
  margin-left: 0;
}
.avatar-group .avatar-more {
  background: #f1f5f9;
  color: #64748b;
  font-size: 10px;
}

/* ----------------------------------------------------------------------------
   29-26. スケルトンローダー (.skeleton)
---------------------------------------------------------------------------- */
.skeleton {
  display: block;
  width: 100%;
  height: 14px;
  background: linear-gradient(90deg, #f1f5f9 0%, #e2e8f0 50%, #f1f5f9 100%);
  background-size: 200% 100%;
  border-radius: 4px;
  animation: skeleton-shimmer 1.4s ease infinite;
}
@keyframes skeleton-shimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}
.skeleton.is-circle {
  border-radius: 50%;
}
.skeleton.is-text {
  height: 12px;
}
.skeleton.is-title {
  height: 18px;
  width: 50%;
}
.skeleton.is-button {
  height: 28px;
  width: 90px;
  border-radius: 6px;
}
.skeleton.is-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
}
.skeleton.is-thumbnail {
  aspect-ratio: 16 / 9;
  height: auto;
}
.skeleton.is-w80 {
  width: 80%;
}
.skeleton.is-w75 {
  width: 75%;
}
.skeleton.is-w60 {
  width: 60%;
}
.skeleton.is-w50 {
  width: 50%;
}
.skeleton.is-w40 {
  width: 40%;
}

/* スケルトンデモ用の親レイアウト */
.skeleton-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.skeleton-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.skeleton-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.skeleton-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.skeleton-btns {
  display: flex;
  gap: 6px;
}
@media screen and (max-width: 768px) {
  .skeleton-grid-3 {
    grid-template-columns: 1fr;
  }
}

/* ----------------------------------------------------------------------------
   29-27. テーブル選択行ハイライト + テキストエリアサイズ
   ----------------------------------------------------------------------------
   役割で配色を分離（いずれも「目立つ」が区別可能）：
     .is-selected … 現在の行   → ネイビー濃いめ＋左アクセントバー
     .is-checked  … 一括選択   → ネイビー淡め
   セル単位の選択は 29-28（.is-cell-active）を参照
---------------------------------------------------------------------------- */
/* 一括選択（チェックボックス）：淡いネイビー */
.tbl-list tbody tr.is-checked td {
  background-color: rgba(16, 49, 124, 0.06) !important;
  color: #1e293b;
}
.tbl-list tbody tr.is-checked:hover td {
  background-color: rgba(16, 49, 124, 0.1) !important;
}
/* 現在の行：ネイビー＋左アクセントバー（チェックより優先） */
.tbl-list tbody tr.is-selected td,
.tbl-list tbody tr.is-checked.is-selected td {
  background-color: var(--c-row-select) !important;
  color: #1e293b;
}
.tbl-list tbody tr.is-selected:hover td {
  background-color: var(--c-row-select-hover) !important;
}
.tbl-list tbody tr.is-selected td:first-child {
  box-shadow: inset 3px 0 0 0 var(--c-row-select-bar);
}

/* ----------------------------------------------------------------------------
   29-28. セル選択 / フォーカス強調 / データグリッド
   ----------------------------------------------------------------------------
   - .is-cell-active … 現在のセル（JS:App.grid が付与）→ 赤い背景（枠リングは廃止・user 2026-06）
   - td:has(入力欄:focus) … セル内の入力欄にフォーカスした時のみ強調（素のセル選択/チェック操作では枠を出さない）
   - 入力/ボタンのフォーカスは共通でネイビーのリング（現在位置を明確化）
   選択行・ホバーより「現在セル」が常に優先されるよう各組合せを明示
---------------------------------------------------------------------------- */
.tbl-list tbody td.is-cell-active,
.tbl-list tbody tr.is-selected td.is-cell-active,
.tbl-list tbody tr.is-selected:hover td.is-cell-active,
.tbl-list tbody tr.is-checked td.is-cell-active,
/* セル内の入力欄（text/select/textarea 等）にフォーカスした時のみ同様に強調。
   チェック/ラジオや、編集不可セルを素のままキー操作でフォーカスしただけでは枠を出さない。
   （:focus-within は td 自身のフォーカスにも一致してしまうため :has(入力欄:focus) で限定） */
.tbl-list tbody td:has(:is(input:not([type="checkbox"]):not([type="radio"]), select, textarea):focus) {
  background-color: #ffe3e3 !important;
  color: #1e293b !important;
}
/* フォーカス中セル内の入力は枠線を消して二重枠を防ぐ */
.tbl-list tbody td:focus-within input,
.tbl-list tbody td:focus-within select,
.tbl-list tbody td:focus-within textarea {
  border-color: transparent !important;
  box-shadow: none !important;
  background-color: transparent !important;
}
/* 入力可能セルの中身/アクティブ時のフォーカスは即時表示（"ふわっと"した遷移を廃止）・全画面共通 user 2026-06。行ホバーの淡色は維持 */
.tbl-list tbody td input,
.tbl-list tbody td select,
.tbl-list tbody td textarea,
.tbl-list tbody td.is-cell-active,
.tbl-list tbody td:focus-within {
  transition: none !important;
}
/* 編集不可セルは「行」のみ強調。td自身のフォーカス枠は出さない（キー操作用にfocusは受ける） */
/* 編集不可セルを直接フォーカスした時（App.grid（common.js）が td.focus でキーボード移動用に focus）は
   :focus-within のピンク枠を出さない＝「現在行」のハイライトのみにする。
   編集可セル（.is-cell-active）や、セル内入力にフォーカスした時（td:focus-within）はピンク枠を維持。 */
.tbl-list.is-grid tbody td:focus:not(.is-cell-active) {
  outline: none;
  box-shadow: none !important;
  background-color: transparent !important;
}
/* グリッドモード：セルにカーソルを出して操作可能と示す */
.tbl-list.is-grid tbody td {
  cursor: cell;
}

/* --- 共通フォーカスリング（現在フォーカス要素を分かりやすく） --- */
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  border-color: var(--color-secondary) !important;
  box-shadow: var(--shadow-focus);
  outline: none;
}
/* マウス操作でもリングを出す（:focus フォールバック） */
.search-field input:focus,
.search-field select:focus,
.search-field textarea:focus,
.edit-box .edit-field input:focus,
.edit-box .edit-field select:focus,
.edit-box .edit-field textarea:focus {
  border-color: var(--color-secondary) !important;
  box-shadow: var(--shadow-focus) !important;
  outline: none;
}
/* ボタン・リンクのキーボードフォーカス */
button:focus-visible,
a:focus-visible,
.btn:focus-visible {
  box-shadow: var(--shadow-focus);
  outline: none;
}

/* テキストエリアの汎用サイズ */
.textarea-s {
  min-height: 60px !important;
}
.textarea-m {
  min-height: 100px !important;
}

/* ----------------------------------------------------------------------------
   29-20. 週単位カレンダー（.cal-week-list）
   - 月別を週単位の集約リストで表示。各日にチップで予定を並べる
---------------------------------------------------------------------------- */
.cal-week-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cal-week {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  overflow: hidden;
}
.cal-week-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 14px;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
}
.cal-week-no {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  background: var(--color-secondary);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  border-radius: 10px;
  letter-spacing: 0.04em;
  flex-shrink: 0;
}
.cal-week-range {
  font-size: 12px;
  font-weight: 600;
  color: #64748b;
  flex: 1;
}
.cal-week-summary {
  font-size: 11px;
  color: #94a3b8;
  font-weight: 500;
}
.cal-week-days {
  display: flex;
  flex-direction: column;
}
.cal-day {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 14px;
  border-bottom: 1px solid #f1f5f9;
  min-height: 36px;
  cursor: pointer;
  transition: background 0.12s ease;
}
.cal-day:last-child {
  border-bottom: none;
}
.cal-day:hover {
  background: #f8fafc;
}
.cal-day.is-today {
  background: #eaf0fa;
}
.cal-day.is-today:hover {
  background: #dde7f5;
}
.cal-day.is-other {
  opacity: 0.45;
  cursor: default;
}
.cal-day-date {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  width: 56px;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}
.cal-day-date .dnum {
  font-size: 16px;
  font-weight: 700;
  color: #1e293b;
  min-width: 22px;
}
.cal-day-date .dwk {
  font-size: 11px;
  color: #94a3b8;
  font-weight: 600;
}
.cal-day.is-saturday .dnum,
.cal-day.is-saturday .dwk {
  color: #2563eb;
}
.cal-day.is-sunday .dnum,
.cal-day.is-sunday .dwk,
.cal-day.is-holiday .dnum,
.cal-day.is-holiday .dwk {
  color: var(--color-error);
}
.cal-day-events {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  min-width: 0;
}
.cal-day-empty {
  font-size: 11px;
  color: #cbd5e1;
}
.cal-day-add {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-left: auto;
  padding: 2px 8px;
  height: 22px;
  background: transparent;
  border: 1px dashed #cbd5e1;
  border-radius: 4px;
  color: #94a3b8;
  font-size: 10.5px;
  font-weight: 600;
  cursor: pointer;
  flex-shrink: 0;
  opacity: 0;
  transition: 0.15s ease;
}
.cal-day-add i {
  font-size: 9px;
}
.cal-day:hover .cal-day-add {
  opacity: 1;
}
.cal-day-add:hover {
  background: var(--color-secondary-light);
  border-color: var(--color-secondary);
  color: var(--color-secondary);
  border-style: solid;
}

/* ----------------------------------------------------------------------------
   29-14. 上下中央揃えの徹底（既存パーツへの安全な追補）
---------------------------------------------------------------------------- */
/* テーブルセル内 input/select は垂直中央 */
.tbl-list td,
.tbl-list th {
  vertical-align: middle;
}

/* ボタン共通: アイコン+テキストの中央揃え */
.btn,
.btn-tool,
.btn-tbl-tool,
.btn-normal-min {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  line-height: 1;
}
.btn i,
.btn-tool i,
.btn-tbl-tool i,
.btn-normal-min i {
  vertical-align: middle;
}

/* search-field-range の "～" 区切り */
.search-field-range {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.range-separator {
  display: inline-flex;
  align-items: center;
  color: #94a3b8;
}

/* search-field-group (radio/checkbox の横並び) */
.search-field-group {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}
.search-field-group label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
}

/* ============================================================================
   30. Functionキーバー（F1〜F12 + ESC のショートカット帯）
   ----------------------------------------------------------------------------
   ※ デザイン/構造は dirtfreak_bk を踏襲：
       .fkey-bar > .fkey（縦並び）> .fkey-num（ESC/F1…）+ .fkey-lbl（動作）
       data-fkey は数値（0=ESC, 1〜12=F1〜F12）
   - 画面ごとに $fnKeys を定義 → fnkey.php が描画
   - キー操作・フォーカス文脈ラベル切替は common.js(App.fkey)
   - .is-fixed-bottom は画面最下部固定（サイドバー幅に追従＝.is-expanded で left:0）
   配色: is-primary(navy)=検索/参照 / is-info(green)=出力 / is-danger(red)=破壊 /
         is-save(pink)=主CTA / is-off=未割当
============================================================================ */
.fkey-bar {
  display: grid;
  grid-template-columns: repeat(13, 1fr);
  gap: 3px;
  padding: 5px 6px;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-radius: 5px;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
}
/* 画面最下部固定（10008 のサイドバーは 15%）。サイドバー開閉に追従 */
.fkey-bar.is-fixed-bottom {
  position: fixed;
  bottom: 0;
  left: var(--sidebar-w, 15%);
  right: 0;
  z-index: 50;
  border-radius: 0;
  border-left: 1px solid #e2e8f0;
  border-right: none;
  margin: 0 !important;
  box-shadow: 0 -2px 10px rgba(15, 23, 42, 0.08);
  transition: left var(--t-slow);
}
.fkey-bar.is-fixed-bottom.is-expanded {
  left: 0;
}
@media screen and (max-width: 1200px) {
  .fkey-bar.is-fixed-bottom {
    left: 0;
  }
}
.fkey {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 0;
  padding: 3px 2px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 3px;
  color: #475569;
  cursor: pointer;
  transition: all 0.12s ease;
  font-family: inherit;
  line-height: 1.15;
}
.fkey:hover {
  border-color: var(--color-secondary);
  color: var(--color-secondary);
  background: #f8fafc;
}
/* キーボード押下フィードバック（App.fkey（common.js）が一瞬 .is-press を付与） */
.fkey.is-press {
  transform: translateY(1px);
  filter: brightness(0.95);
}
/* 未割当キー：淡色・操作不可 */
.fkey.is-off {
  opacity: 0.45;
  pointer-events: none;
  background: #f8fafc;
}
.fkey-num {
  font-size: 9px;
  font-weight: 700;
  color: #94a3b8;
  letter-spacing: 0.04em;
}
.fkey-lbl {
  font-size: 11px;
  font-weight: 700;
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
/* 配色グループ（意味別に視認性を確保） */
.fkey.is-primary {
  background: #eef2fa;
  border-color: #b8cce6;
  color: var(--color-secondary);
}
.fkey.is-primary:hover {
  background: #dbe5f1;
  border-color: var(--color-secondary);
  color: #0a2050;
}
.fkey.is-info {
  background: #ecfdf5;
  border-color: #6ee7b7;
  color: #047857;
}
.fkey.is-info:hover {
  background: #d1fae5;
  border-color: #059669;
  color: #065f46;
}
.fkey.is-info .fkey-num {
  color: #34a378;
}
.fkey.is-danger {
  background: #fef2f2;
  border-color: #fca5a5;
  color: #b91c1c;
}
.fkey.is-danger:hover {
  background: #fee2e2;
  border-color: #ef4444;
  color: #991b1b;
}
/* 主要CTA — ブランドピンクで唯一性を確保 */
.fkey.is-save {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
  box-shadow: 0 1px 2px rgba(237, 46, 100, 0.25);
}
.fkey.is-save:hover {
  background: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
  color: #fff;
}
.fkey.is-save .fkey-num {
  color: rgba(255, 255, 255, 0.7);
}

/* 固定バー分の余白をフロー内スペーサーで確保（fixed barの裏に最終行が隠れない） */
.fkey-spacer {
  height: 46px;
  width: 100%;
  flex-shrink: 0;
}

/* ============================================================================
   31. 確認ダイアログ（App.confirm がDOM生成 / Promise を返す）
   ----------------------------------------------------------------------------
   削除前確認 / 編集途中の遷移前確認 などに使用
============================================================================ */
.confirm-overlay {
  position: fixed;
  inset: 0;
  z-index: 10050;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(15, 23, 42, 0.45);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  opacity: 0;
  transition: opacity var(--t-base);
}
.confirm-overlay.is-active {
  opacity: 1;
}
.confirm-box {
  width: 100%;
  max-width: 400px;
  background: #fff;
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-4);
  padding: 20px 22px 18px;
  transform: translateY(-8px) scale(0.98);
  opacity: 0;
  transition:
    transform var(--t-base),
    opacity var(--t-base);
}
.confirm-overlay.is-active .confirm-box {
  transform: none;
  opacity: 1;
}
.confirm-ttl {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 15px;
  font-weight: 700;
  color: #1e293b;
  margin-bottom: 10px;
}
.confirm-ttl i {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: var(--color-secondary-light);
  color: var(--color-secondary);
  font-size: 14px;
}
.confirm-box.is-danger .confirm-ttl i {
  background: var(--st-rejected-bg);
  color: var(--color-error);
}
/* お知らせダイアログ（App.toast.* がモーダル表示する際のアイコン配色） */
.confirm-box.is-success .confirm-ttl i {
  background: var(--st-approved-bg);
  color: var(--color-success);
}
.confirm-box.is-warn .confirm-ttl i {
  background: var(--st-pending-bg);
  color: var(--color-warning);
}
.confirm-box.is-info .confirm-ttl i {
  background: var(--color-secondary-light);
  color: var(--color-secondary);
}
.confirm-msg {
  font-size: 13px;
  line-height: 1.6;
  color: #475569;
  margin-bottom: 18px;
  white-space: pre-line;
}
.confirm-btns {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
.confirm-btns .btn {
  height: 34px;
  padding: 0 16px;
  font-size: 12px;
}

/* モーダル表示中は背面スクロールを止める（App.modal） */
body.is-modal-open {
  overflow: hidden;
}

/* ============================================================================
   32. メディアプレビュー（動画 / 画像 / PDF を共通の枠で表示）
   ----------------------------------------------------------------------------
   - .media-frame … 枠。中に video / img / iframe(PDF) を収める（比率指定可）
   - .media-grid / .media-card … サムネイル一覧（クリックでモーダルプレビュー）
   - 動画サムネは .preview-thumb.video に再生アイコンを重ねる
============================================================================ */
.media-frame {
  position: relative;
  width: 100%;
  background: #0f172a;
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.media-frame.ratio-16x9 {
  aspect-ratio: 16 / 9;
}

.media-frame.ratio-a4 {
  aspect-ratio: 1 / 1.414;
  background: #f1f5f9;
}
.media-frame video,
.media-frame img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.media-frame iframe {
  width: 100%;
  height: 100%;
  border: 0;
  background: #fff;
}
.media-frame.is-image {
  background: #f8fafc;
}
.media-frame.is-image img {
  padding: 4px;
}

/* メディアサムネイル一覧 */
.media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
}
.media-card {
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  overflow: hidden;
  background: #fff;
  cursor: pointer;
  transition:
    box-shadow var(--t-fast),
    transform var(--t-fast);
}
.media-card:hover {
  box-shadow: var(--shadow-2);
  transform: translateY(-2px);
}
.media-card .thumb {
  position: relative;
  aspect-ratio: 4 / 3;
  background: #f1f5f9;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.media-card .thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.media-card .thumb .ficon {
  font-size: 26px;
  color: #94a3b8;
}
.media-card .thumb.is-pdf {
  background: #fdecec;
}
.media-card .thumb.is-pdf .ficon {
  color: #e74c3c;
}
.media-card .thumb.is-video {
  background: #0f172a;
}
.media-card .thumb.is-video .ficon {
  color: #fff;
}
.media-card .thumb .badge-dur {
  position: absolute;
  right: 6px;
  bottom: 6px;
  padding: 1px 6px;
  border-radius: 4px;
  background: rgba(15, 23, 42, 0.75);
  color: #fff;
  font-size: 10px;
}
.media-card .cap {
  padding: 7px 9px;
  font-size: 11.5px;
  color: #334155;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ============================================================================
   36. ラジオ/チェックボックス 上下中央揃え（ラベル文字と中央で揃える）
============================================================================ */
.edit-box .edit-field-group label,
.search-field-group label {
  line-height: 1.4;
}
.edit-box .edit-field-group input[type="radio"],
.edit-box .edit-field-group input[type="checkbox"],
.search-field-group input[type="radio"],
.search-field-group input[type="checkbox"] {
  margin: 0;
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  accent-color: var(--color-secondary);
}

/* ============================================================================
   37. インラインstyle置き換え用クラス（脱インラインstyle）
============================================================================ */
/* 一覧：一括操作バー（選択時のみ d-flex 表示） */
.bulk-bar {
  align-items: center;
  gap: 10px;
  font-size: 12px;
  margin-bottom: 8px;
  background: #eaf0fa;
  border: 1px solid #c7d6ef;
  border-radius: 6px;
  padding: 4px 10px;
}
/* 一覧：テーブル下の件数 + 表示件数バー */
.list-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 6px;
}
.sel-perpage {
  height: 28px;
  width: auto;
}
/* モーダル内の検索ボックスは余白を詰める */
.search-box-body.is-flush {
  padding: 0;
}
/* タイトル/見出し直後のチップ余白 */
.page-ttl .chip,
.group-label .chip {
  margin-left: 8px;
}
/* 添付メディア・グリッドの横幅制限（パーツ集のサンプル幅。インラインstyle廃止） */
.media-grid.is-narrow {
  max-width: 560px;
}

/* 状態セレクトの色付け（検索条件・明細セレクト。一覧チップと同配色。common.js applyStatusColor が sc-* を付与） */
select.js-status-color {
  transition:
    background-color 0.12s,
    color 0.12s,
    border-color 0.12s;
}
select.js-status-color.sc-approved {
  background: var(--st-approved-bg);
  color: var(--st-approved-fg);
  border-color: var(--st-approved-fg);
}
select.js-status-color.sc-pending {
  background: var(--st-pending-bg);
  color: var(--st-pending-fg);
  border-color: var(--st-pending-fg);
}
select.js-status-color.sc-draft {
  background: var(--st-draft-bg);
  color: var(--st-draft-fg);
  border-color: var(--st-draft-fg);
}
select.js-status-color.sc-rejected {
  background: var(--st-rejected-bg);
  color: var(--st-rejected-fg);
  border-color: var(--st-rejected-fg);
}
select.js-status-color.sc-paid {
  background: var(--st-paid-bg);
  color: var(--st-paid-fg);
  border-color: var(--st-paid-fg);
}
select.js-status-color.sc-overdue {
  background: var(--st-overdue-bg);
  color: var(--st-overdue-fg);
  border-color: var(--st-overdue-fg);
}

/* ===== 編集ver1：請求/経費の追加・PDF・複数回ツールチップ・期日超過行 ===== */
/* 見出し内「追加」ボタンは右寄せ＋極小サイズ */
.group-label .btn-xs {
  margin-left: auto;
}
.btn-xs {
  height: 24px;
  padding: 0 10px;
  font-size: 11px;
}
.btn-xs i {
  font-size: 11px;
  margin-right: 3px;
}
.nowrap {
  white-space: nowrap;
}

/* range（レンジ）入力：スライダー＋現在値 */
.range-field {
  display: flex;
  align-items: center;
  gap: 8px;
}
.range-field input[type="range"] {
  flex: 1;
  accent-color: var(--color-secondary);
}
.range-field output {
  min-width: 1.6em;
  text-align: center;
  font-weight: 700;
  color: var(--color-secondary);
  font-variant-numeric: tabular-nums;
}

/* ランクゲージ：レンジ入力を「進捗バー風」のゲージとして表示（左からの塗りで現在値＝ランクを示す）。
   実体は <input type="range"> のまま（ドラッグで編集・name で送信）。
   WebKit は --gauge-pct のグラデーション塗り（common.js が現在値から設定）、
   Firefox は ::-moz-range-progress でネイティブに塗られる。 */
.gauge-field {
  display: flex;
  align-items: center;
  gap: 10px;
}
.gauge-field input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  flex: 1;
  height: 16px;
  margin: 0;
  background: transparent;
  cursor: pointer;
  outline: none;
}
.gauge-field input[type="range"]::-webkit-slider-runnable-track {
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(
    to right,
    var(--c-main) var(--gauge-pct, 0%),
    var(--c-bdr-2) var(--gauge-pct, 0%)
  );
}
.gauge-field input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  margin-top: -4px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--c-main);
  box-shadow: var(--shadow-1);
  cursor: grab;
}
.gauge-field input[type="range"]:active::-webkit-slider-thumb {
  cursor: grabbing;
}
.gauge-field input[type="range"]::-moz-range-track {
  height: 8px;
  border-radius: 999px;
  background: var(--c-bdr-2);
}
.gauge-field input[type="range"]::-moz-range-progress {
  height: 8px;
  border-radius: 999px;
  background: var(--c-main);
}
.gauge-field input[type="range"]::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border: 2px solid var(--c-main);
  border-radius: 50%;
  background: #fff;
  box-shadow: var(--shadow-1);
  cursor: grab;
}
.gauge-field input[type="range"]:focus-visible::-webkit-slider-thumb {
  box-shadow: var(--shadow-focus);
}
.gauge-field input[type="range"]:focus-visible::-moz-range-thumb {
  box-shadow: var(--shadow-focus);
}
.gauge-field .gauge-val {
  min-width: 1.5em;
  text-align: center;
  font-weight: 700;
  font-size: 14px;
  color: var(--c-main);
  font-variant-numeric: tabular-nums;
}
.gauge-field .gauge-max {
  font-size: 12px;
  color: var(--c-text-sub);
  margin-left: -4px;
}

/* 期日超過＆未入金の請求行は全体を赤く */
tr.is-overdue td {
  background: var(--st-rejected-bg);
  color: var(--color-error);
}
tr.is-overdue:hover td {
  background: #fde0e0;
}

/* 分割請求などの INFO ツールチップ（ホバー/フォーカスで請求日一覧と完了状況） */
.info-tip {
  position: relative;
  display: inline-flex;
  margin-left: 4px;
  color: var(--color-info);
  cursor: help;
  vertical-align: middle;
}
.info-tip > i {
  font-size: 12px;
}
.info-tip-pop {
  position: absolute;
  left: 0;
  top: 150%;
  z-index: 30;
  min-width: 190px;
  padding: 8px 10px;
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.16);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition:
    opacity 0.12s,
    transform 0.12s,
    visibility 0.12s;
  font-weight: 400;
  color: #334155;
}
.info-tip:hover .info-tip-pop,
.info-tip:focus .info-tip-pop,
.info-tip:focus-within .info-tip-pop {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.info-tip-ttl {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: var(--color-secondary);
  margin-bottom: 4px;
}
.info-tip-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  font-size: 12px;
  padding: 2px 0;
  white-space: nowrap;
}
.info-tip-row .done {
  color: var(--color-success);
}
.info-tip-row .undone {
  color: var(--color-warning);
}
.info-tip-row i {
  margin-right: 3px;
}

/* カレンダーの予定はクリックで編集モーダル（data-page="calendar"） */
.calendar-grid .grid-event {
  cursor: pointer;
}

/* ===== 受注伝票入力 (一覧ver3)：密な検索パネル / セル内検索 / 合計バー / 列ON-OFF ===== */
/* 密な検索ボックス（ヘッダーパネル：縦幅を詰める） */
.search-box.is-dense {
  padding: 9px 12px;
}
.search-box.is-dense .search-field label {
  font-size: 11px;
  margin-bottom: 2px;
}
.search-box.is-dense .search-field input,
.search-box.is-dense .search-field select {
  height: 26px;
}

/* 明細セル内の検索ボタン（右端の虫眼鏡） */
.oe-cell-search {
  position: relative;
}
.oe-cell-search > input {
  width: 100%;
  box-sizing: border-box;
  padding-right: 20px;
}
.oe-cell-search-btn {
  position: absolute;
  top: 50%;
  right: 2px;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  color: var(--color-secondary);
  cursor: pointer;
  font-size: 11px;
  padding: 0;
}
.oe-cell-search-btn:hover {
  color: var(--color-primary);
}
/* Enter順送り/Tabでアイコンにフォーカスした時に見えるリング（キーボードで検索を開けると分かる） */
.oe-cell-search-btn:focus-visible {
  outline: none;
  color: var(--c-main);
  box-shadow: var(--shadow-focus);
  border-radius: 4px;
}
.input-amount {
  background: #f8fafc;
  font-weight: 700;
}
.input-code {
  font-variant-numeric: tabular-nums;
}
/* 補完で変化したセルの一時ハイライト（ajax メタキー _changed/_unchanged） */
.is-modified {
  background: #fff7ed;
  transition: background 1.4s ease;
}
/* 明細グリッドの無効セル（商品未確定時の数量/単価/消費税） */
.tbl-list.is-grid td input:disabled,
.tbl-list.is-grid td select:disabled {
  background: #f1f5f9;
  color: #b6c0cf;
  cursor: not-allowed;
}

/* 合計バー（明細下。固定Fキーバーの上に積む） */
/* 合計バー（10015/order_entry_v2 と同じ grid レイアウト。
   左=送付区分/送料/代引/値引を 4列グリッドで横一列、右=合計/税額/総合計）。
   旧 flex-wrap だと .search-field の width:100% で各項目が全幅に折返し→縦積みになっていた。 */
.totals-bar {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: end;
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 8px 14px;
}
.totals-bar-L {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px 8px;
}
.totals-bar-L .search-field {
  gap: 2px;
  margin: 0;
}
.totals-bar-L .search-field > label:first-child {
  font-size: 10px;
  line-height: 1.2;
}
.totals-bar-L .search-field input,
.totals-bar-L .search-field select {
  height: 26px;
  font-size: 12px;
  padding: 0 6px;
}
.totals-bar-R {
  display: flex;
  align-items: stretch;
  gap: 14px;
  padding-left: 16px;
  border-left: 1px solid var(--border-color);
}
.totals-cell {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  gap: 1px;
  min-width: 110px;
}
.totals-lbl {
  font-size: 10.5px;
  color: #64748b;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.totals-val {
  font-size: 14px;
  font-weight: 700;
  color: #1e293b;
  font-variant-numeric: tabular-nums;
}
.totals-cell.is-grand {
  padding-left: 14px;
  margin-left: 4px;
  border-left: 1px dashed #cbd5e1;
}
.totals-cell.is-grand .totals-lbl {
  color: #475569;
}
.totals-cell.is-grand .totals-val {
  font-size: 22px;
  color: var(--color-secondary);
  line-height: 1.05;
  font-weight: 800;
}

/* 表示項目モーダルの列ON/OFFリスト */
.col-toggle-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px 16px;
}
.col-toggle-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  cursor: pointer;
}
.col-toggle-item input {
  width: 15px;
  height: 15px;
  margin: 0;
  accent-color: var(--color-secondary);
}
/* マスタ検索モーダル内の候補リスト（高さ制限） */
.js-modal-list {
  max-height: 340px;
  overflow-y: auto;
}
.js-master-pick {
  cursor: pointer;
}
.js-master-pick:hover td {
  background: var(--color-secondary-light);
}

.fc-warn {
  color: var(--color-warning);
}
/* グリッド列スパン（search-box-body のグリッド内で項目を複数列ぶち抜き） */
.gc2 {
  grid-column: span 2;
}
.gc3 {
  grid-column: span 3;
}
.gc4 {
  grid-column: span 4;
}
.p20 {
  padding: 20px;
}
 /* mb5/mb10… に欠けていた8px（list3の見出し余白で使用） */
.wd135 {
  width: 135px;
} /* SPヘッダーのボタン幅（menu.php sp-only） */
/* .search-field は display:flex のため hidden 属性が効かない。確実に隠す（経費の科目別項目など） */
.search-field[hidden] {
  display: none !important;
}

/* 請求書プレビュー（編集ver1：請求書モーダルの PDF作成） */
.inv-sheet {
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  padding: 24px 28px;
  color: #1e293b;
  font-size: 13px;
}
.inv-sheet-ttl {
  text-align: center;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.4em;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--color-secondary);
  margin-bottom: 14px;
}
.inv-sheet-meta {
  display: flex;
  justify-content: flex-end;
  gap: 20px;
  font-size: 12px;
  color: #64748b;
  margin-bottom: 10px;
}
.inv-sheet-to {
  font-size: 16px;
  font-weight: 700;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 6px;
  margin-bottom: 14px;
}
.inv-sheet-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 12px;
}
.inv-sheet-table th,
.inv-sheet-table td {
  border: 1px solid var(--border-color);
  padding: 6px 10px;
  font-size: 12px;
}
.inv-sheet-table thead th {
  background: var(--color-secondary-light);
  color: var(--color-secondary);
}
.inv-sheet-sum {
  display: flex;
  justify-content: flex-end;
  gap: 24px;
  align-items: baseline;
  font-variant-numeric: tabular-nums;
}
.inv-sheet-grand {
  font-size: 18px;
  font-weight: 700;
  color: var(--color-primary);
}
.inv-sheet-issuer {
  text-align: right;
  margin-top: 18px;
  color: #475569;
}
/* メディアプレビュー プレースホルダ */
.media-ph {
  text-align: center;
}
.media-ph.is-video {
  color: #fff;
}
.media-ph.is-pdf {
  color: #64748b;
}
.media-ph i {
  font-size: 42px;
}
.media-ph .fa-file-pdf {
  color: #e74c3c;
}

/* フルスクリーン（ログイン等）main：ヘッダー無しなので上余白も消して全面化 */
.main.is-fullscreen {
  background: #eef1f6;
  margin-left: 0;
  width: 100%;
  min-height: 100vh;
  padding: 0;
}
.main-inner.is-flush {
  background: transparent;
  box-shadow: none;
  padding: 0;
}

/* ============================================================================
   38. サイドバー導線リンク（ドロップダウン＝アコーディオン / 現在地ハイライト）
============================================================================ */
/* --- ドロップダウン（アコーディオン）メニュー：左ナビ・右ドロワー共通 --- */
.sidebar-list {
  list-style: none;
}
.sidebar-list li {
  display: block;
  width: 100%;
}
.sidebar-list .accordion-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 38px;
  padding: 0 14px;
  background: transparent;
  border: 0;
  color: #334155;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  user-select: none;
  transition: background 0.15s ease;
}
.sidebar-list .accordion-btn:hover {
  background: #e9eef5;
}
.sidebar-list .accordion-btn .acc-ttl {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.sidebar-list .accordion-btn .acc-ttl i {
  width: 16px;
  text-align: center;
  font-size: 14px;
  color: #64748b;
  flex-shrink: 0;
}
.sidebar-list .accordion-btn .acc-arrow {
  font-size: 11px;
  color: #94a3b8;
  transition: transform 0.2s ease;
}
.sidebar-list .accordion-btn.is-close .acc-arrow {
  transform: rotate(-90deg);
}
.sidebar-list .accordion-tgt {
  list-style: none;
  margin: 0;
  padding: 1px 0 5px;
  background: transparent;
}
.sidebar-list .sidebar-sublink {
  display: flex;
  align-items: center;
  gap: 9px;
  height: 32px;
  padding: 0 14px 0 30px;
  color: #64748b;
  font-size: 12.5px;
  font-weight: 600;
  text-decoration: none;
  border-left: 3px solid transparent;
  transition:
    background 0.12s ease,
    color 0.12s ease,
    border-color 0.12s ease;
}
.sidebar-list .sidebar-sublink i {
  width: 15px;
  text-align: center;
  font-size: 12px;
  color: #94a3b8;
  flex-shrink: 0;
}
.sidebar-list .sidebar-sublink:hover {
  background: #eef2f8;
  color: var(--color-secondary);
}
.sidebar-list .sidebar-sublink:hover i {
  color: var(--color-secondary);
}
.sidebar-list .sidebar-sublink.is-active {
  background: #e7edf7;
  color: var(--color-secondary);
  border-left-color: var(--color-secondary);
  font-weight: 700;
}
.sidebar-list .sidebar-sublink.is-active i {
  color: var(--color-secondary);
}
.sidebar-list .sidebar-sublink .nav-badge {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 18px;
  padding: 0 6px;
  background: var(--color-primary);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  border-radius: 9px;
}

/* ============================================================================
   33. グラフ / ダッシュボード補助（Chart.js v2 + App.charts）
   ----------------------------------------------------------------------------
   - .chart-card … グラフのカード枠（タイトル＋表示切替＋キャンバス）
   - .chart-canvas-wrap … キャンバスの高さを固定（maintainAspectRatio:false用）
   - .dash-grid … 12カラムのダッシュボード配置
============================================================================ */
.chart-card {
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-1);
  padding: 14px 16px;
}
.chart-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}
.chart-card-ttl {
  font-size: 13px;
  font-weight: 700;
  color: #1e293b;
  display: flex;
  align-items: center;
  gap: 8px;
}
.chart-card-ttl i {
  color: var(--color-secondary);
  font-size: 13px;
}
.chart-canvas-wrap {
  position: relative;
  width: 100%;
  height: 260px;
}
.chart-canvas-wrap.is-sm {
  height: 200px;
}
.chart-canvas-wrap.is-lg {
  height: 320px;
}

/* ダッシュボードの12カラムグリッド */
.dash-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 14px;
}
/* grid 子要素は base.css の .col-*（display:table-cell / width:%）を打ち消す */
.dash-grid > [class*="col-"] {
  width: auto;
  min-width: 0;
  display: block;
}

.dash-grid > .col-8 {
  grid-column: span 8;
}
.dash-grid > .col-6 {
  grid-column: span 6;
}
.dash-grid > .col-4 {
  grid-column: span 4;
}
.dash-grid > .col-3 {
  grid-column: span 3;
}
@media screen and (max-width: 1200px) {
  .dash-grid > .col-9,
  .dash-grid > .col-8,
  .dash-grid > .col-6 {
    grid-column: span 12;
  }
  .dash-grid > .col-4,
  .dash-grid > .col-3 {
    grid-column: span 6;
  }
}
@media screen and (max-width: 768px) {
  .dash-grid > [class*="col-"] {
    grid-column: span 12;
  }
}

/* グラフ凡例（自前表示する場合の補助） */
.chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  margin-top: 10px;
}
.chart-legend .lg {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  color: #475569;
}
.chart-legend .lg i {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  display: inline-block;
}

/* ============================================================================
   34b. 大規模UI刷新 After デザイン用パーツ（参考④準拠 / ?ui=after）
   ----------------------------------------------------------------------------
   Before/Afterトグル・検索条件バー・KPIカード(前期比/ミニバー)・
   ドーナツ中央テキスト・お知らせ/お問合せ/承認待ちパネル。10008パレット内・グラデ無し。
============================================================================ */
/* 検索条件バー */
.cond-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: #fff;
  border: 1px solid var(--c-bdr-2);
  border-radius: var(--radius-l, 10px);
  box-shadow: var(--shadow-1);
  flex-wrap: wrap;
}
.cond-bar-lbl {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--c-text-ttl);
}
.cond-bar-lbl i { color: var(--c-main); }
.cond-select {
  height: 34px;
  min-width: 180px;
  padding: 0 10px;
  border: 1px solid var(--c-bdr);
  border-radius: var(--radius);
  background: #fff;
  font-size: 13px;
  color: var(--c-text);
}
.cond-show {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 14px;
  border: 1px solid var(--c-main);
  border-radius: var(--radius);
  background: var(--c-main-l, #eaf0fa);
  color: var(--c-main);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background .14s;
}
.cond-show:hover { background: #dde7f6; }
.cond-bar-meta { margin-left: auto; font-size: 12px; color: var(--c-text-sub); }

/* page-bar 内インライン検索条件（集計期間の左に配置） */
.page-bar .cond-inline { display: inline-flex; align-items: center; gap: 6px; }
.cond-inline-ic { color: var(--c-main); font-size: 12px; }
.cond-inline-sep { width: 1px; height: 22px; background: var(--c-bdr-2); margin: 0 4px; }
.page-bar .cond-select { min-width: 150px; height: 32px; }
.page-bar .cond-show { height: 32px; }
.cond-show.is-open { background: var(--c-main); color: #fff; }
/* 「条件を表示」で開く詳細条件パネル */
.cond-detail {
  background: #fff;
  border: 1px solid var(--c-bdr-2);
  border-radius: var(--radius-l, 10px);
  box-shadow: var(--shadow-1);
  padding: 14px 16px;
}
.cond-detail-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px 16px; }
@media screen and (max-width: 900px) { .cond-detail-grid { grid-template-columns: repeat(2, 1fr); } }

/* ============================================================
 * 検索条件パネルの明示化（is-labeled）＋ 現在条件チップ
 * 「検索条件であること」を直感的に。8項目表示＋詳細はモーダル＋条件チップ。
 * ============================================================ */
/* 検索条件パネル：タイトル/ヘッダーは付けず、淡い背景色で「検索エリア」と分かるように。
   左の青枠は廃止。入力項目は通常スタイル（ラベル上）を維持。詳細検索/条件クリアは page-bar 側へ移動。 */
.search-box.is-labeled {
  border: 1px solid var(--c-bdr-2);
  border-radius: var(--radius-l, 10px);
  background: #eef2f9;
}
/* 幅に応じて自動で列数を詰める（縦を抑える）。3クラス＝col-N/media(2クラス)より詳細度が高く上書き。 */
.search-box.is-labeled .search-box-body {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 8px 14px;
  padding: 12px 14px;
}

/* 現在設定中の検索条件チップ */
.search-chips { display: none; }
.search-chips.has-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  padding: 9px 14px;
  border-bottom: 1px solid var(--c-bdr-2);
  background: transparent;
}
.search-chips-lead {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--c-main);
}
.cond-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 4px 3px 9px;
  background: #fff;
  border: 1px solid #c7d6ec;
  border-radius: 999px;
  font-size: 11.5px;
  line-height: 1;
}
.cond-chip-k { color: var(--c-main); font-weight: 700; }
.cond-chip-k::after { content: ":"; margin-left: 1px; opacity: .55; }
.cond-chip-v { color: var(--c-text); font-variant-numeric: tabular-nums; }
.cond-chip-x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--c-text-sub);
  cursor: pointer;
  font-size: 10px;
}
.cond-chip-x:hover { background: var(--c-main); color: #fff; }
.cond-chip-clear {
  border: none;
  background: transparent;
  color: var(--c-text-sub);
  font-size: 11.5px;
  cursor: pointer;
  text-decoration: underline;
  margin-left: 2px;
}
.cond-chip-clear:hover { color: var(--c-error); }

/* 詳細検索モーダルの注記 */
.modal-note {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 12px;
  padding: 8px 11px;
  background: var(--c-info-bg);
  color: var(--st-info-fg);
  border-radius: var(--radius);
  font-size: 12px;
}
.modal-note i { color: var(--c-info); }

/* ============================================================
 * お知らせ/お問い合わせ 詳細ページ（参考②）: パンくず＋カードセクション＋右アンカーナビ
 * ============================================================ */
/* 行クリックで遷移するリスト行 */
.tbl-list tr.js-rowlink { cursor: pointer; }
.tbl-list tr.js-rowlink:hover td { background: var(--c-main-ll); }

/* お知らせ/お問い合わせ 一覧：カード化＋ゆとりある行高で洗練 */
body[data-page="notice"] .tbl-list,
body[data-page="inquiry"] .tbl-list {
  border: 1px solid var(--c-bdr-2);
  border-radius: var(--radius-l, 10px);
  box-shadow: var(--shadow-1);
  overflow: clip; /* hidden だと sticky thead のスクロールコンテナ化で見出しが中央に化ける */
}
body[data-page="notice"] .tbl-list thead th,
body[data-page="inquiry"] .tbl-list thead th {
  padding: 12px 16px;
}
body[data-page="notice"] .tbl-list tbody td,
body[data-page="inquiry"] .tbl-list tbody td {
  height: 50px;
  padding: 9px 16px;
}

/* パンくず + 操作バー */
.detail-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.detail-crumb { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--c-text-sub); min-width: 0; }
.detail-crumb a { display: inline-flex; align-items: center; gap: 5px; color: var(--c-main); text-decoration: none; font-weight: 600; }
.detail-crumb a:hover { text-decoration: underline; }
.detail-crumb > i { font-size: 9px; color: var(--c-text-light); }
.detail-crumb span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--c-text-ttl); font-weight: 600; }
.detail-actions { display: inline-flex; align-items: center; gap: 8px; }

/* レイアウト：本体 + 右アンカーナビ */
.detail-layout { display: flex; align-items: flex-start; gap: 16px; }
.detail-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.detail-aside { flex: 0 0 200px; position: sticky; top: calc(var(--header-h) + 16px); }

/* タイトル */
.detail-title { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0; font-size: 19px; font-weight: 700; color: var(--c-text-ttl); line-height: 1.4; }

/* カードセクション */
.detail-card { background: #fff; border: 1px solid var(--c-bdr-2); border-radius: var(--radius-l, 10px); box-shadow: var(--shadow-1); scroll-margin-top: calc(var(--header-h) + 16px); }
.detail-card-head { display: flex; align-items: center; gap: 8px; padding: 11px 18px; border-bottom: 1px solid var(--c-bdr-2); font-size: 14px; font-weight: 700; color: var(--c-text-ttl); }
.detail-card-head i { color: var(--c-main); }
.detail-card-head .head-count { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--c-main-l); color: var(--c-main); font-size: 11px; font-weight: 700; }
.detail-card-body { padding: 16px 18px; }

/* キー・バリュー グリッド */
.kv-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 28px; }
.kv { display: flex; gap: 14px; padding: 9px 0; border-bottom: 1px dashed var(--c-bdr-2); font-size: 13px; }
.kv-k { flex: 0 0 92px; color: var(--c-text-sub); font-weight: 600; }
.kv-v { color: var(--c-text); min-width: 0; word-break: break-word; }
@media (max-width: 768px) { .kv-grid { grid-template-columns: 1fr; } }

/* 本文 */
.detail-body { font-size: 13.5px; line-height: 1.9; color: var(--c-text); }

/* アンカーナビ */
.anchor-nav { display: flex; flex-direction: column; gap: 2px; background: #fff; border: 1px solid var(--c-bdr-2); border-radius: var(--radius-l, 10px); box-shadow: var(--shadow-1); padding: 8px; }
.anchor-nav-ttl { font-size: 11px; font-weight: 700; color: var(--c-text-light); padding: 4px 10px 6px; letter-spacing: .04em; }
.anchor-nav a { display: block; padding: 8px 10px; border-radius: var(--radius); font-size: 12.5px; color: var(--c-text-sub); text-decoration: none; border-left: 2px solid transparent; transition: background .12s, color .12s; }
.anchor-nav a:hover { background: var(--c-main-ll); color: var(--c-main); }
.anchor-nav a.is-active { background: var(--c-main-l); color: var(--c-main); font-weight: 700; border-left-color: var(--c-main); }

/* 対応履歴 timeline */
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline-item { position: relative; display: flex; gap: 12px; padding: 0 0 16px 4px; }
.timeline-item:last-child { padding-bottom: 0; }
.timeline-item:not(:last-child)::before { content: ""; position: absolute; left: 10px; top: 16px; bottom: 0; width: 2px; background: var(--c-bdr-2); }
.timeline-dot { flex: 0 0 14px; width: 14px; height: 14px; margin-top: 3px; border-radius: 50%; background: #fff; border: 3px solid var(--c-main); position: relative; z-index: 1; box-sizing: border-box; }
.timeline-body { flex: 1 1 auto; min-width: 0; }
.timeline-meta { display: flex; align-items: baseline; gap: 10px; margin-bottom: 3px; }
.timeline-who { font-size: 12.5px; font-weight: 700; color: var(--c-text-ttl); }
.timeline-date { font-size: 11px; color: var(--c-text-light); font-variant-numeric: tabular-nums; }
.timeline-text { font-size: 13px; line-height: 1.7; color: var(--c-text); }
.empty-note { font-size: 13px; color: var(--c-text-light); margin: 0; }

/* 返信 */
.reply-area { width: 100%; min-height: 96px; box-sizing: border-box; resize: vertical; padding: 10px 12px; border: 1px solid var(--c-bdr); border-radius: var(--radius); font-size: 13px; font-family: inherit; line-height: 1.6; }
.reply-area:focus { outline: none; border-color: var(--c-main); box-shadow: var(--shadow-focus); }
.reply-foot { display: flex; justify-content: flex-end; margin-top: 10px; }

/* SP: アンカーナビを上に回す */
@media (max-width: 900px) {
  .detail-layout { flex-direction: column; }
  .detail-aside { position: static; width: 100%; flex-basis: auto; order: -1; }
  .anchor-nav { flex-direction: row; flex-wrap: wrap; }
  .anchor-nav-ttl { display: none; }
}

/* KPIカード（前期比・ミニバー付き） */
.kpi2-card {
  background: #fff;
  border: 1px solid var(--c-bdr-2);
  border-radius: var(--radius-l, 10px);
  box-shadow: var(--shadow-1);
  padding: 16px 18px;
  height: 100%;
  box-sizing: border-box;
  transition: box-shadow .16s, transform .16s;
}
.kpi2-card:hover { box-shadow: var(--shadow-2); transform: translateY(-2px); }
.kpi2-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.kpi2-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--c-text-sub);
}
.kpi2-ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  font-size: 13px;
  background: var(--c-main-l, #eaf0fa);
  color: var(--c-main);
}
.kpi2-card.kind-success .kpi2-ic { background: var(--c-success-bg); color: #047857; }
.kpi2-card.kind-warn    .kpi2-ic { background: var(--c-warn-bg);    color: #b45309; }
.kpi2-card.kind-error   .kpi2-ic { background: var(--c-error-bg);   color: #b91c1c; }
.delta-pill {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.delta-pill i { font-size: 9px; }
.delta-pill.up   { background: var(--c-success-bg); color: #047857; }
.delta-pill.down { background: var(--c-error-bg);   color: #b91c1c; }
.kpi2-value {
  margin: 10px 0 12px;
  font-family: var(--ff-num, inherit);
  font-size: 28px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--c-text-ttl);
  font-variant-numeric: tabular-nums;
}
.kpi2-foot { display: flex; align-items: center; gap: 10px; }
.kpi2-bar {
  flex: 1;
  height: 6px;
  border-radius: 999px;
  background: var(--c-bg-gray, #eef2f7);
  overflow: hidden;
}
.kpi2-bar span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--c-main);
}
.kpi2-card.kind-success .kpi2-bar span { background: var(--c-success); }
.kpi2-card.kind-warn    .kpi2-bar span { background: var(--c-warn); }
.kpi2-card.kind-error   .kpi2-bar span { background: var(--c-error); }
.kpi2-prev { font-size: 11px; color: var(--c-text-light); white-space: nowrap; }

/* チャートヘッダーの自前インライン凡例 */
.legend-inline {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--c-text-sub);
}
.legend-inline .lg-bar,
.legend-inline .lg-line {
  display: inline-block;
  margin-left: 8px;
}
.legend-inline .lg-bar { width: 10px; height: 10px; border-radius: 2px; background: var(--c-main); }
.legend-inline .lg-line { width: 14px; height: 0; border-top: 2.5px solid var(--c-accent); }

/* ドーナツ中央テキスト */
.donut-wrap { position: relative; }
.donut-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: none;
  line-height: 1.1;
}
.donut-center-num {
  font-family: var(--ff-num, inherit);
  font-size: 26px;
  font-weight: 700;
  color: var(--c-text-ttl);
  font-variant-numeric: tabular-nums;
}
.donut-center-lbl { font-size: 11px; color: var(--c-text-sub); margin-top: 2px; }
.donut-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 14px;
  margin: 12px 0 2px;
  padding: 0;
  list-style: none;
}
.donut-legend li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  color: var(--c-text-sub);
}
.donut-legend li b { color: var(--c-text-ttl); font-variant-numeric: tabular-nums; }
.donut-legend .dl-dot { width: 9px; height: 9px; border-radius: 3px; background: #94a3b8; }
.donut-legend li:nth-child(1) .dl-dot { background: #10317C; }
.donut-legend li:nth-child(2) .dl-dot { background: #ed2e64; }
.donut-legend li:nth-child(3) .dl-dot { background: #3a8a7e; }
.donut-legend li:nth-child(4) .dl-dot { background: #f59e0b; }
.donut-legend li:nth-child(5) .dl-dot { background: #3b82f6; }

/* お知らせ / お問い合わせ / 承認待ち パネル */
.panel-card {
  background: #fff;
  border: 1px solid var(--c-bdr-2);
  border-radius: var(--radius-l, 10px);
  box-shadow: var(--shadow-1);
  height: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}
.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--c-bdr-2);
}
.panel-ttl {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--c-text-ttl);
}
.panel-ttl i { color: var(--c-main); }
.panel-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--c-accent);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
}
.panel-more {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11.5px;
  color: var(--c-main);
  text-decoration: none;
}
.panel-more:hover { text-decoration: underline; }
.panel-more i { font-size: 9px; }

.feed-list, .appr-list { list-style: none; margin: 0; padding: 4px 6px; }
a.feed-item { text-decoration: none; color: inherit; }
.feed-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 10px;
  border-radius: var(--radius);
  transition: background .12s;
}
.feed-item + .feed-item,
.appr-item + .appr-item { border-top: 1px solid var(--c-bdr-2); }
.feed-item:hover, .appr-item:hover { background: var(--c-main-ll, #f5f8fc); }
.feed-date { font-size: 11px; color: var(--c-text-light); white-space: nowrap; font-variant-numeric: tabular-nums; }
.feed-title {
  font-size: 12.5px;
  color: var(--c-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.feed-item-2line { flex-direction: column; align-items: stretch; gap: 4px; }
.feed-line1 { display: flex; align-items: center; gap: 8px; min-width: 0; }
.feed-line2 {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--c-text-sub);
}
.feed-line2 i { color: var(--c-text-light); }
.feed-line2 .feed-date { margin-left: auto; }

.tag-pill {
  display: inline-flex;
  align-items: center;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
  white-space: nowrap;
  flex-shrink: 0;
}
.tag-pill.st-error   { background: var(--st-rejected-bg); color: var(--st-rejected-fg); }
.tag-pill.st-warn    { background: var(--st-warn-bg);     color: var(--st-warn-fg); }
.tag-pill.st-info    { background: var(--st-info-bg);     color: var(--st-info-fg); }
.tag-pill.st-success { background: var(--st-approved-bg); color: var(--st-approved-fg); }
.tag-pill.st-default { background: var(--st-draft-bg);    color: var(--st-draft-fg); }

.appr-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border-radius: var(--radius);
  transition: background .12s;
}
.appr-item.is-urgent { background: #fef7f8; }
.appr-item.is-urgent:hover { background: #fdeef0; }
.appr-type {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 24px;
  border-radius: var(--radius);
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
}
.appr-type.appr-apply   { background: var(--st-info-bg);     color: var(--st-info-fg); }
.appr-type.appr-approve { background: var(--st-approved-bg); color: var(--st-approved-fg); }
.appr-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.appr-title {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--c-text-ttl);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.appr-meta { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: var(--c-text-sub); }
.appr-meta i { color: var(--c-text-light); }
.appr-due {
  font-size: 11px;
  font-weight: 700;
  color: var(--c-text-sub);
  white-space: nowrap;
  flex-shrink: 0;
}
.appr-due.is-urgent { color: var(--c-error); }

/* ============================================================================
   35. ページツールバー（タイトル＋操作を1行・スクロール追従）/ 高密度補助
   ----------------------------------------------------------------------------
   業務システム向け：画面タイトルと操作ボタンを1行に収め、ヘッダー直下に固定追従。
============================================================================ */
.page-bar {
  position: sticky;
  top: var(--header-h);
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 44px;
  margin: -12px -12px 4px; /* 画面名の上下余白を対称・小さめに（theme.css の .page-bar padding と合わせて上下6px）。横は main-inner いっぱい */
  padding: 4px 12px;
  background: #fff;
  border-bottom: 1px solid var(--c-bdr-2);
  flex-wrap: wrap;
}
.page-bar .page-ttl {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 700;
  color: var(--c-text-ttl);
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.page-bar .page-ttl i {
  color: var(--color-secondary);
  font-size: 14px;
}
/* 画面名の隣に置くセレクト（タイトルはそのまま。変更で GET 遷移＝common.js .js-scr-nav） */
.page-ttl-select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  height: 28px;
  max-width: 220px;
  padding: 0 28px 0 10px;
  font-size: 12px;
  font-weight: 600;
  color: var(--c-text);
  background-color: #fff;
  border: 1px solid var(--c-bdr);
  border-radius: var(--radius);
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2310317c' d='M2 4l4 4 4-4H2z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 9px center;
  background-size: 10px;
  transition: border-color var(--t-base), box-shadow var(--t-base);
}
.page-ttl-select:hover {
  border-color: var(--color-gray-light);
}
.page-ttl-select:focus-visible {
  outline: none;
  border-color: var(--color-secondary);
  box-shadow: var(--shadow-focus);
}
.page-bar .page-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
/* スクロール時：右上アクションを右下へ固定追従（全画面共通・JSが is-floating 付与＋bottom を設定してFキーバーを回避） */
.page-bar .page-actions.is-floating {
  position: fixed;
  right: 20px;
  z-index: 55;
  padding: 8px 10px;
  background: rgba(255, 255, 255, 0.97);
  border: 1px solid var(--c-bdr-2);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.18);
}
@media screen and (max-width: 1200px) {
  .page-bar {
    margin: -8px -10px 8px;
  }
}

/* ============================================================
 * テーブルヘッダーのスクロール追従 ＋ 見出し左寄せ（全画面・全バージョン統一）
 *   - 通常テーブル(window スクロール)：固定appヘッダー(--header-h)＋stickyページバー(44px)の下に吸着。
 *     （.tbl-list は overflow:clip にして sticky を機能させている）
 *   - グリッド(.tbl-scroll＝内部スクロール)：コンテナ上端 top:0 に吸着。
 *   - pro はページバーが static のため --header-h 直下に吸着（theme.css 側で top 上書き）。
 *   - 見出しは全列左寄せ（数値列 .tar の右寄せ／sort-link の flex-end を打ち消す）。
 * ============================================================ */
.tbl-list thead th {
  position: sticky;
  top: calc(var(--header-h) + 44px);
  z-index: 11;
  text-align: left;
}
.tbl-list thead th.tar,
.tbl-list thead th.tac { text-align: left !important; } /* base.css の .tar/.tac は !important のため合わせて打ち消す */
.tbl-list thead th .sort-link,
.tbl-list thead th.tar .sort-link { justify-content: flex-start; }
.tbl-list.tbl-scroll thead th { top: 0; } /* グリッドは内部スクロール基準 */

/* 進捗/KPIバーの幅：inline style 廃止のための段階クラス（5%刻み）。controllerが round() で算出した値を class に埋める */
.barw-0{width:0}.barw-5{width:5%}.barw-10{width:10%}.barw-15{width:15%}.barw-20{width:20%}.barw-25{width:25%}.barw-30{width:30%}.barw-35{width:35%}.barw-40{width:40%}.barw-45{width:45%}.barw-50{width:50%}.barw-55{width:55%}.barw-60{width:60%}.barw-65{width:65%}.barw-70{width:70%}.barw-75{width:75%}.barw-80{width:80%}.barw-85{width:85%}.barw-90{width:90%}.barw-95{width:95%}.barw-100{width:100%}

/* ============================================================
 * 日次業務（発刊日設定 / 部数指示 / 輸送計画一覧・編集）共通スタイル
 *   全ルール data-page スコープ。4画面で行高・列幅・画面名横の体裁を統一。
 *   ねらい：高密度（狭い行）・必要要素のみ・横スクロール最小化。
 * ============================================================ */

/* --- 行高：theme.css の height:54px/52px を解除（specificityを上げて確実に上書き）。
       本文=やや高め(38px)、ヘッダーはそれより高く（単段46px / 一覧2段は各30px=計60px） --- */
body.app-ui[data-page="transport"] .tbl-list.is-grid tbody td,
body.app-ui[data-page="transport_edit"] .tbl-list.is-grid tbody td,
body.app-ui[data-page="copy"] .tbl-list.is-grid tbody td,
body.app-ui[data-page="config"] .tbl-list.is-grid tbody td {
  height: 38px;
  font-size: 12px;
  font-weight: 500;
  padding: 2px 8px;
  line-height: 1.3;
}
/* 部数指示・発刊日設定はもう少しだけ低く（高密度） */
body.app-ui[data-page="copy"] .tbl-list.is-grid tbody td,
body.app-ui[data-page="config"] .tbl-list.is-grid tbody td {
  height: 32px;
  padding: 1px 8px;
}
/* 単段ヘッダーの3画面：本文より高く（46px） */
body.app-ui[data-page="transport_edit"] .tbl-list.is-grid thead th,
body.app-ui[data-page="copy"] .tbl-list.is-grid thead th,
body.app-ui[data-page="config"] .tbl-list.is-grid thead th {
  height: 46px;
  font-size: 12px;
  font-weight: 700;
  padding: 3px 8px;
}
/* ページスクロール時のヘッダー追従：ページバーは static のため、固定appヘッダー(--header-h)直下に吸着。
   tbl-fix の top:0（appヘッダー裏に潜る）を上書き */
body.app-ui[data-page="transport_edit"] .tbl-list.tbl-fix thead th,
body.app-ui[data-page="copy"] .tbl-list.tbl-fix thead th,
body.app-ui[data-page="config"] .tbl-list.tbl-fix thead th {
  top: var(--header-h);
}
/* 入力欄・セレクトも低く（行の縦幅を圧縮） */
[data-page="transport"] .tbl-list.is-grid td input,
[data-page="transport"] .tbl-list.is-grid td select,
[data-page="transport_edit"] .tbl-list.is-grid td input,
[data-page="transport_edit"] .tbl-list.is-grid td select,
[data-page="copy"] .tbl-list.is-grid td input,
[data-page="copy"] .tbl-list.is-grid td select,
[data-page="config"] .tbl-list.is-grid td input,
[data-page="config"] .tbl-list.is-grid td select {
  font-size: 12px;
  height: 28px;
  padding: 0 6px;
}
[data-page="transport_edit"] .tbl-list.is-grid td input[type="checkbox"] {
  height: 15px;
  width: 15px;
}

/* ------------------------------------------------------------
 * 輸送計画一覧（表示専用・横長マトリクス）。内容幅(auto)で省略記号無し。
 * 縦＝要素の高さ分（max-height無し・固定領域にしない）。横＝収まらない時だけスクロール（店名列freeze）。
 * コンテナは通常フロー＝サイドバー開閉で .main 幅に自動追従。
 * ------------------------------------------------------------ */
[data-page="transport"] .tbl-list tbody td,
[data-page="transport"] .tbl-list thead th { white-space: nowrap; font-size: 11px; }
/* セル余白：theme.css の padding:12px 14px を body.app-ui で確実に上書きし、限界まで詰める */
body.app-ui[data-page="transport"] .tbl-list.is-grid tbody td,
body.app-ui[data-page="transport"] .tbl-list.is-grid thead th { padding: 2px 3px; }
/* 版/トラック/順の両端余白は最小（2px）＝列を最大限スリムに */
body.app-ui[data-page="transport"] .tbl-list.is-grid tbody td.rc-hen,
body.app-ui[data-page="transport"] .tbl-list.is-grid tbody td.rc-truck,
body.app-ui[data-page="transport"] .tbl-list.is-grid tbody td.rc-jun,
body.app-ui[data-page="transport"] .tbl-list.is-grid thead th.route-sub { padding-left: 2px; padding-right: 2px; }
/* 店名：左は表端から少し空け、右余白はほぼ無し */
body.app-ui[data-page="transport"] .tbl-list.is-grid td.cell-store { padding: 1px 2px 1px 8px; }
/* 高さは要素分だけ（内部縦スクロールの固定領域にしない） */
body.app-ui[data-page="transport"] .tbl-list.is-grid.tbl-scroll { max-height: none; }
/* 表は内容幅（コンテナ幅へ引き伸ばさない）＝各列が最小幅になり、版/トラック/順の余白も最小化 */
body.app-ui[data-page="transport"] .tbl-list.tbl-scroll > table { width: max-content; min-width: 0; }
/* 2段ヘッダー：地色・段オフセット（横スクロール時の見え方安定）。box-sizingで段ズレ防止 */
[data-page="transport"] .tbl-list.tbl-scroll thead th { box-sizing: border-box; height: 26px; background: var(--c-bg-gray); }
[data-page="transport"] .tbl-list.tbl-scroll thead tr:nth-child(1) th { top: 0; z-index: 12; }
[data-page="transport"] .tbl-list.tbl-scroll thead tr:nth-child(2) th { top: 26px; z-index: 12; }
/* 路線グループ見出し＝中央・淡い地色。グループ境界に左罫線 */
[data-page="transport"] .tbl-list .route-grp { text-align: center; background: var(--c-bg-gray-2); font-weight: 700; color: var(--c-main); border-left: 1px solid var(--c-bdr-2); }
[data-page="transport"] .tbl-list .route-sub { font-size: 10px; font-weight: 600; color: var(--c-text-sub); text-align: center; }
/* 店名列（店名＝リンク／コード＝副・小）。横スクロール中も左固定（freeze） */
[data-page="transport"] .tbl-list.tbl-scroll thead tr:nth-child(1) th:nth-child(1),
[data-page="transport"] .tbl-list.tbl-scroll tbody td:nth-child(1) { position: sticky; left: 0; }
[data-page="transport"] .tbl-list.tbl-scroll tbody td:nth-child(1) { background: #fff; z-index: 4; }
[data-page="transport"] .tbl-list.tbl-scroll thead tr:nth-child(1) th:nth-child(1) { z-index: 14; }
[data-page="transport"] .tbl-list .cell-store { text-align: left; }
[data-page="transport"] .tbl-list .cell-store .store-name { display: block; font-weight: 700; line-height: 1.15; }
[data-page="transport"] .tbl-list .cell-store .store-code { display: block; font-size: 9px; color: var(--c-text-sub); line-height: 1.05; }
/* 版/トラック/順：内容幅(auto)。潰れない程度の最小幅のみ（max-widthで切らない＝省略記号にしない） */
[data-page="transport"] .tbl-list .rc-hen { min-width: 26px; }
[data-page="transport"] .tbl-list .rc-truck { min-width: 54px; }
[data-page="transport"] .tbl-list .rc-jun { min-width: 20px; }
[data-page="transport"] .tbl-list .fc-edition { color: var(--c-text); font-weight: 600; }
[data-page="transport"] .tbl-list .rc-truck .link-text { font-size: 11px; }
/* 行高（一覧のみ） */
body.app-ui[data-page="transport"] .tbl-list.is-grid tbody td { height: 38px; }

/* ------------------------------------------------------------
 * 部数指示／発刊日設定：読み取り専用セルの体裁
 * ------------------------------------------------------------ */
[data-page="copy"] .tbl-list tbody td.cell-readonly,
[data-page="config"] .tbl-list tbody td.cell-readonly { font-weight: 600; }
/* 読取専用セル（発刊日・発刊・建貢など）は左右中央 */
[data-page="copy"] .tbl-list.is-grid td.cell-readonly,
[data-page="config"] .tbl-list.is-grid td.cell-readonly { text-align: center; background: #e8edf4; }

/* ------------------------------------------------------------
 * 輸送計画編集：横スクロール無しで1画面・DnD・中継の入れ子表現
 * ------------------------------------------------------------ */
/* 列はコンテナ幅にフィット（経路・エリアが可変で余白を吸収）＝横スクロール不要 */
[data-page="transport_edit"] .tbl-list table { width: 100%; table-layout: auto; }
/* 発車順：ドラッグハンドル */
[data-page="transport_edit"] .cell-drag { cursor: grab; }
[data-page="transport_edit"] .drag-handle { color: var(--c-text-sub); cursor: grab; padding: 0 2px; }
[data-page="transport_edit"] .drag-handle:hover { color: var(--c-main); }
/* 中継行は親とまとめて移動＝単独のドラッグハンドルは出さない */
[data-page="transport_edit"] .row-relay .drag-handle { display: none; }
[data-page="transport_edit"] .ui-sortable-helper { display: table; box-shadow: 0 4px 14px rgba(0,0,0,.18); background: #fff; }
[data-page="transport_edit"] .drag-placeholder { height: 28px; background: #eef2fb; outline: 1px dashed var(--c-main); }
/* 中継行（入れ子）＝接続記号は絶対配置で重ねる→selectは常に全幅（右端カレットが全行で揃う＝ガタつき解消）。
   字下げはselectのpadding-leftで表現（セルのpaddingでselectを縮めない） */
[data-page="transport_edit"] .cell-truck { white-space: nowrap; position: relative; }
[data-page="transport_edit"] .relay-mark {
  position: absolute; left: 4px; top: 50%; transform: translateY(-50%);
  color: var(--c-text-sub); font-size: 11px; z-index: 1; pointer-events: none;
}
[data-page="transport_edit"] .row-relay .cell-truck select { padding-left: 20px; color: var(--c-text-sub); }

/* ============================================================
 * 画面名の横（全画面共通の体裁）：日付バッジ・切替セレクト・切替ボタン
 * ============================================================ */
.page-ttl .page-ttl-date {
  display: inline-flex; align-items: center; gap: 5px;
  margin-left: 10px; padding: 2px 9px; border-radius: 5px;
  background: var(--c-bg-gray-2); color: var(--c-main);
  font-size: 12px; font-weight: 700;
}
.page-ttl .page-ttl-date i { font-size: 11px; opacity: .8; }
.page-ttl .date-nav { display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; }
/* 日付切替ボタン＝白（前日/本日/翌日・前月/今月/次月で共通）。
   基底 .btn が border:none !important のため、枠線は box-shadow で描く（!important戦争を回避） */
.page-ttl .btn-date {
  background: #fff !important; color: var(--c-text);
  box-shadow: inset 0 0 0 1px var(--c-bdr);
  height: 28px; padding: 0 11px; font-size: 12px; font-weight: 600; border-radius: 5px;
}
.page-ttl .btn-date i { font-size: 10px; color: var(--c-text-sub); }
.page-ttl .btn-date:hover { background: var(--c-bg-gray-2) !important; box-shadow: inset 0 0 0 1px var(--c-main); color: var(--c-main); }
.page-ttl .btn-date:hover i { color: var(--c-main); }

/* 画面名の右に置く「セレクト風」選択ボタン（部数指示の販売店選択など）。
   基底 .btn は使わず素のbuttonに当てる（.btn i{color:#fff} 等の干渉を避ける） */
.page-ttl .page-ttl-pick {
  display: inline-flex; align-items: center; gap: 6px;
  margin-left: 8px; height: 28px; padding: 0 10px;
  background: #fff; box-shadow: inset 0 0 0 1px var(--c-bdr); border-radius: 5px;
  font-size: 12px; font-weight: 600; color: var(--c-text); cursor: pointer;
}
.page-ttl .page-ttl-pick:hover { box-shadow: inset 0 0 0 1px var(--c-main); }
.page-ttl .page-ttl-pick .pick-ic { color: var(--c-main); opacity: .75; font-size: 12px; }
.page-ttl .page-ttl-pick #selected-label { color: var(--c-main); font-weight: 700; }
.page-ttl .page-ttl-pick .pick-caret { color: var(--c-text-sub); font-size: 10px; margin-left: 2px; }

/* ============================================================
 * 全画面共通（app-ui）：テーブルの体裁を統一
 *   - 本文セルの font-weight を 500 に（一覧画面間の見え方を統一）
 *   - table の角丸を縮小（16px は大きすぎ → 8px）
 * ============================================================ */
body.app-ui .tbl-list tbody td { font-weight: 500; }
body.app-ui .tbl-list { border-radius: 8px; }
/* 編集グリッド(.is-grid)＝データ入力系は薄い縦罫線で列を見やすく。
   閲覧用の非グリッド一覧は行区切りのみ（現状維持）。色は淡色(--c-bdr-2)で重くしない。 */
body.app-ui .tbl-list.is-grid tbody td,
body.app-ui .tbl-list.is-grid thead th {
  border-right: 1px solid var(--c-bdr-2);
}
body.app-ui .tbl-list.is-grid tbody td:last-child,
body.app-ui .tbl-list.is-grid thead th:last-child {
  border-right: none;
}
/* ============================================================
 * .tbl-compact ＝ ログ/マスタ等のテーブルを業務画面のトンマナ（高密度）に揃える。
 *   theme.css の height:54px/52px を body.app-ui[data-page] で確実に上書き。
 *   ※ is-grid なら共通ルールで薄い縦罫線・編集セル強調も自動付与される。
 * ============================================================ */
body.app-ui[data-page] .tbl-list.tbl-compact tbody td { height: 36px; padding: 2px 10px; font-size: 12px; }
body.app-ui[data-page] .tbl-list.tbl-compact thead th { height: 42px; padding: 0 10px; }
body.app-ui[data-page] .tbl-list.tbl-compact thead th.sort-th { padding: 0; }
body.app-ui[data-page] .tbl-list.tbl-compact thead th.sort-th .sort-link { height: 42px; }
body.app-ui[data-page] .tbl-list.tbl-compact.is-grid td input,
body.app-ui[data-page] .tbl-list.tbl-compact.is-grid td select { height: 28px; }
/* モーダル内テーブルの行高も画面本体のテーブルに合わせて圧縮（販売店選択など） */
body.app-ui[data-page="copy"] .modal .tbl-list tbody td,
body.app-ui[data-page="copy"] .modal .tbl-list thead th {
  height: 38px; padding: 4px 12px; font-size: 12px;
}

/* ============================================================
 * 全画面共通：編集可能セルを視覚化（フィールド見た目＋ホバー/フォーカス強調）
 *   編集可＝白地＋薄枠、ホバー＝淡い青、フォーカス＝主色枠。読取専用(cell-readonly)は灰のまま。
 *   チェックボックスは対象外。
 * ============================================================ */
.app-ui .tbl-list.is-grid td input:not([type="hidden"]):not([type="checkbox"]):not([readonly]),
.app-ui .tbl-list.is-grid td select {
  background-color: #fff;
  box-shadow: inset 0 0 0 1px var(--c-bdr-2);
  border-radius: 4px;
}
.app-ui .tbl-list.is-grid td input:not([type="hidden"]):not([type="checkbox"]):not([readonly]):hover,
.app-ui .tbl-list.is-grid td select:hover {
  background-color: #f0f6ff;
  box-shadow: inset 0 0 0 1px var(--c-main);
}
.app-ui .tbl-list.is-grid td input:not([type="hidden"]):not([type="checkbox"]):not([readonly]):focus,
.app-ui .tbl-list.is-grid td select:focus {
  background-color: #fff;
  box-shadow: inset 0 0 0 2px var(--c-main);
}

/* 日付ナビの「今月／本日」だけ色付け（現在位置を明示） */
.page-ttl .btn-date.btn-date-now {
  background: var(--c-main) !important;
  box-shadow: none;
  color: #fff;
}
.page-ttl .btn-date.btn-date-now:hover {
  background: var(--c-main) !important;
  box-shadow: none;
  color: #fff;
  opacity: .9;
}

/* 部数指示・発刊日設定：テーブルヘッダーを左右中央に */
body.app-ui[data-page="copy"] .tbl-list thead th,
body.app-ui[data-page="config"] .tbl-list thead th {
  text-align: center !important;
}

/* 発刊日設定：輸送パターン(select)の文字が大きく見える問題を是正（12pxに固定） */
body.app-ui[data-page="config"] .tbl-list.is-grid td select.js-status-color {
  font-size: 12px;
}
/* 発刊日設定：建貢＝数値入力＋単位「P」（Pは固定テキスト、数値のみ編集） */
[data-page="config"] .tbl-list td.cell-unit { white-space: nowrap; }
[data-page="config"] .tbl-list td.cell-unit input { width: calc(100% - 15px); }
[data-page="config"] .tbl-list td.cell-unit .unit-suffix {
  display: inline-block; width: 12px; margin-left: 1px;
  font-size: 11px; font-weight: 600; color: var(--c-text-sub);
  text-align: left; vertical-align: middle;
}

/* 輸送計画編集：トラックselect右端のカレットを縦中央に（高さ・行高を揃える） */
[data-page="transport_edit"] .tbl-list .cell-truck select {
  height: 28px;
  line-height: 28px;
  vertical-align: middle;
}


/* ----------------------------------------------------------------------------
   ダッシュボード: カードヘッダー右寄せツール（90/30日トグル＋一覧リンク）
---------------------------------------------------------------------------- */
.dash-card-h-flex { flex-wrap: wrap; }
.dash-card-tools { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; }

/* ----------------------------------------------------------------------------
   在留カードOCR: 表面／裏面アップロード欄（横並び）
---------------------------------------------------------------------------- */
.ocr-upload-item { display: inline-flex; flex-direction: column; gap: 4px; }
.ocr-upload-label { font-size: 12px; font-weight: 700; color: #334155; }

/* ----------------------------------------------------------------------------
   スタッフCSV一括登録: 取込フォーム（横並び）
---------------------------------------------------------------------------- */
.import-form { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.import-note { margin: 8px 0 0; padding-left: 18px; list-style: disc; font-size: 12px; line-height: 1.7; color: #3d4654; }

/* ----------------------------------------------------------------------------
   ローディング: スピナー下のテキスト（AI-OCR／郵便番号逆引きで文言を出し分け）
   ※テキストが空（通常のフォーム送信ローディング等）のときは余白を出さない
---------------------------------------------------------------------------- */
.loading-inner { display: flex; flex-direction: column; align-items: center; }
.loading-text { font-size: 13px; font-weight: 700; color: #334155; text-align: center; max-width: 80vw; line-height: 1.5; }
.loading-text:not(:empty) { margin-top: 12px; }