/* ==================================================
   MC SMS - 共通スタイルシート (common.css?v=6)
   ================================================== */

   @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Noto+Sans+JP:wght@400;500;700&display=swap');

   /* ---- ベース ---------------------------------------- */
   body {
       font-family: 'Inter', 'Noto Sans JP', sans-serif;
       background-color: #FFFFFF;
   }

   /* ---- サイドバー ------------------------------------- */
   .sidebar {
       background-color: #0F172A;
       width: 240px;
       transition: width 0.2s ease;
       position: relative;
   }

   /* 初期描画時はアコーディオン開閉アニメーションを抑止 */
   .sidebar.sidebar-no-anim,
   .sidebar.sidebar-no-anim .sub-menu,
   .sidebar.sidebar-no-anim .sidebar-chevron {
       transition: none !important;
   }
   
   /* サイドバー閉じたとき */
   .sidebar.sidebar-collapsed {
       width: 64px;
   }
   
   .sidebar.sidebar-collapsed .sidebar-text,
   .sidebar.sidebar-collapsed .sub-menu {
       display: none !important;
   }
   
   .sidebar.sidebar-collapsed .sidebar-item {
       justify-content: center;
       padding-left: 0;
       padding-right: 0;
   }
   
   .sidebar.sidebar-collapsed .sidebar-item .sidebar-chevron {
       display: none;
   }
   
   .sidebar.sidebar-collapsed .sidebar-header-inner {
       justify-content: center;
       padding: 0.5rem;
   }
   
   .sidebar.sidebar-collapsed .sidebar-header-inner .sidebar-text {
       display: none;
   }
   
   .sidebar.sidebar-collapsed .sidebar-user-block {
       justify-content: center;
       padding-left: 0.5rem;
       padding-right: 0.5rem;
   }
   
   /* 閉じたときはユーザー名ラップを非表示にしてアバターのみ中央に */
   .sidebar.sidebar-collapsed .sidebar-user-label {
       display: none !important;
   }
   
   .sidebar.sidebar-collapsed .sidebar-toggle .sidebar-text {
       display: none;
   }
   
   /* 開いているときはトグル内アイコンを右寄せ、閉じているときは中央 */
   .sidebar-toggle {
       display: flex;
       align-items: center;
       justify-content: flex-end;
       gap: 0.5rem;
       width: 100%;
       padding: 0.5rem 0.75rem;
       color: #94A3B8;
       background: transparent;
       border: none;
       border-radius: 0.375rem;
       cursor: pointer;
       font-size: 0.875rem;
       transition: color 0.2s, background 0.2s;
   }
   
   .sidebar.sidebar-collapsed .sidebar-toggle {
       justify-content: center;
       padding-left: 0.5rem;
       padding-right: 0.5rem;
   }
   
   /* 開閉で表示するアイコンを切り替え（矢印の向き） */
   .sidebar-toggle-icon-closed {
       display: none !important;
   }
   
   .sidebar.sidebar-collapsed .sidebar-toggle-icon-open {
       display: none !important;
   }
   
   .sidebar.sidebar-collapsed .sidebar-toggle-icon-closed {
       display: inline-block !important;
   }
   
   .sidebar-toggle:hover {
       color: #fff;
       background-color: #1E293B;
   }
   
   .sidebar-item {
       color: #94A3B8;
       transition: all 0.2s;
       cursor: pointer;
   }
   
   .sidebar-item:hover {
       color: #FFFFFF;
       background-color: #1E293B;
   }
   
   .sidebar-item.active {
       color: #FFFFFF;
       background-color: #1E293B;
   }
   
   /* サブメニュー（アコーディオン） */
   .sub-menu {
       max-height: 0;
       overflow: hidden;
       transition: max-height 0.3s ease-out;
       background-color: #111827;
   }
   
   .sub-menu.open {
       max-height: 300px;
   }
   
   .sub-item {
       display: block;
       padding: 0.6rem 1rem 0.6rem 2.5rem;
       font-size: 0.825rem;
       color: #94A3B8;
       transition: color 0.2s;
   }
   
   .sub-item:hover {
       color: #FFFFFF;
   }
   
   .sub-item.active {
       color: #6366F1;
       font-weight: 600;
   }

   .main-sc-area {
    background: #f5f5f5;
   }
   
   /* ---- テーブル --------------------------------------- */
   .table-row:hover,
   .table-row-hover:hover {
       background-color: rgb(241 245 249) !important;
   }

   /* 取消バッジ（一覧＝コンパクト、詳細＝やや強調） */
   .badge-cancelled {
       display: inline-flex;
       align-items: center;
       flex-shrink: 0;
       font-weight: 600;
       line-height: 1.25;
       color: rgb(185 28 28);
       background-color: rgb(254 242 242);
       border: 1px solid rgb(254 202 202);
       border-radius: 0.25rem;
       white-space: nowrap;
   }

   .badge-cancelled--list {
       padding: 0.125rem 0.25rem;
       font-size: 11px;
       min-width: 1.125rem;
       justify-content: center;
   }

   .badge-cancelled--detail {
       padding: 0.2rem 0.35rem;
       font-size: 0.75rem;
       min-width: 1.25rem;
       justify-content: center;
   }

   /* 詳細：伝票取消時の鏡ブロック（全面塗りなし・枠のみ強調） */
   .section-card--slip-cancelled {
       border-color: rgb(252 165 165) !important;
       box-shadow: 0 0 0 1px rgb(254 202 202 / 0.45);
   }
   
   .table-container {
       overflow-x: auto;
       -webkit-overflow-scrolling: touch;
       min-width: 0;
   }
   
   /* 一覧テーブル：列をビューポート幅に押しつぶさず、必要なら横スクロール */
   .table-container > table {
       width: max-content;
       min-width: 100%;
       max-width: none;
       table-layout: auto;
   }
   
   .table-container > table th,
   .table-container > table td {
       overflow: visible;
       text-overflow: clip;
       white-space: nowrap;
   }

   /* 詳細画面など、横スクロール枠直下の表：固定レイアウト＋省略で列が潰れないようにする */
   .overflow-x-auto > table {
       width: max-content;
       min-width: 100%;
       max-width: none;
       table-layout: auto;
   }
   .overflow-x-auto > table th,
   .overflow-x-auto > table td {
       overflow: visible;
       text-overflow: clip;
   }
   
   table {
       min-width: 1200px;
       table-layout: fixed;
   }
   
   th, td {
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
   }
   
   /* テーブル列幅 */
   .col-check    { width: 45px; min-width: 45px; }
   .col-code     { width: 14rem; min-width: 9rem; }
   .col-name     { width: 14rem; min-width: 10rem; }
   .col-100px    { width: 100px; min-width: 100px; }
   .col-date     { width: 160px; min-width: 9rem; }
   .col-spec     { min-width: 11rem; }
   .col-customer { min-width: 10rem; }
   .col-supplier { min-width: 10rem; }
   .col-drawing  { min-width: 4.5rem; }
   .col-link     { width: 60px; min-width: 60px; }

  /* ---- 業務一覧テーブル（印刷/番号付与/生成系） ----------------- */
  .ops-scroll-region {
      box-sizing: border-box;
      max-width: 100%;
      overflow-x: auto;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
  }

  .ops-grid {
      width: max-content;
      min-width: unset !important;
      border-collapse: collapse;
      table-layout: fixed;
  }

  .ops-grid th,
  .ops-grid td {
      overflow: visible;
      text-overflow: clip;
      white-space: normal;
      vertical-align: middle;
  }

  .ops-grid th {
      padding: 0.45rem 0.75rem;
      text-align: center;
      background: #f8fafc;
      color: #64748b;
      font-size: 0.75rem;
      font-weight: 700;
      letter-spacing: 0.02em;
      border-right: 1px solid rgb(226 232 240);
      border-bottom: 2px solid rgb(226 232 240);
      white-space: nowrap;
  }

  .ops-grid th:last-child {
      border-right: none;
  }

  .ops-grid tbody td {
      padding: 0.45rem 0.75rem;
      border-right: 1px solid rgb(226 232 240);
      border-bottom: 1px solid rgb(241 245 249);
  }

  .ops-grid tbody td:last-child {
      border-right: none;
  }

  .ops-grid tbody tr:last-child td {
      border-bottom: none;
  }

  .ops-grid td.ops-col-clip {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      max-width: 0;
  }

  .ops-grid .ops-cell-center { text-align: center; }
  .ops-grid .ops-cell-right { text-align: right; }
   
   /* ---- バッジ / ステータス ---------------------------- */
   .status-tag {
       display: inline-flex;
       align-items: center;
       padding: 2px 8px;
       border-radius: 4px;
       font-size: 11px;
       font-weight: 600;
   }
   
   .status-pill {
       display: inline-flex;
       align-items: center;
       gap: 6px;
       padding: 4px 12px;
       border-radius: 9999px;
       font-size: 0.875rem;
       font-weight: 600;
   }
   
   /* ---- タイムライン ----------------------------------- */
   .timeline-item::before {
       content: '';
       position: absolute;
       left: 7px;
       top: 24px;
       bottom: -8px;
       width: 2px;
       background-color: #E2E8F0;
   }
   
   .timeline-item:last-child::before {
       display: none;
   }
   
   /* ==================================================
      部品詳細ページ用（フォーム・カード・折りたたみ）
      ================================================== */
   
   /* フィールドラベル・値（表示用） */
   .field-label {
       font-size: 0.8rem;
       font-weight: 600;
       color: #64748B;
       margin-bottom: 0.25rem;
   }
   
   .field-value {
       font-size: 0.875rem;
       color: #1E293B;
       padding: 0.4rem 0.75rem;
       background: #fafafa;
       border: 1px solid #E2E8F0;
       border-radius: 0.5rem;
       min-height: 36px;
       min-width: 40px;
       display: flex;
       align-items: center;
   }
   
   .field-value-textarea {
       font-size: 0.875rem;
       color: #1E293B;
       padding: 0.5rem 0.75rem;
       background: #fafafa;
       border: 1px solid #E2E8F0;
       border-radius: 0.5rem;
       min-height: 4.5em;
       line-height: 1.5;
   }
   
   /* 受注明細：ラベル・表示枠は色分けなし（field-label / field-value と同系のニュートラル） */
   .field-label-so-detail,
   .field-label-so-ext {
       font-size: 0.8rem;
       font-weight: 500;
       color: #64748B;
       margin-bottom: 0.25rem;
   }
   
   /* システム・マスタ・計算など自動表示：薄い黄色背景で区別 */
   .field-display-auto,
   .field-display-calculated {
       font-size: 0.875rem;
       color: #1E293B;
       padding: 0.5rem 0.75rem;
       background: #fff9e1;
       /* border: 1px solid #fef3c7; */
       border-radius: 0.375rem;
       box-shadow: none;
       min-height: 36px;
       min-width: 0;
       display: flex;
       align-items: center;
   }
   
   .field-display-auto-textarea {
       font-size: 0.875rem;
       color: #1E293B;
       padding: 0.5rem 0.75rem;
       background: #fffbeb;
       border: 1px solid #fef3c7;
       border-radius: 0.375rem;
       box-shadow: none;
       min-height: 4.5em;
       line-height: 1.5;
   }
   
   /* ユーザー入力値の閲覧：枠付き */
   .field-display-readonly {
       font-size: 0.875rem;
       color: #1E293B;
       padding: 0.5rem 0.75rem;
       background: #fafafa;
       border: 1px solid #E2E8F0;
       border-radius: 0.5rem;
       min-height: 36px;
       min-width: 40px;
       display: flex;
       align-items: center;
   }
   
   .field-display-readonly-textarea {
       font-size: 0.875rem;
       color: #1E293B;
       padding: 0.5rem 0.75rem;
       background: #fafafa;
       border: 1px solid #E2E8F0;
       border-radius: 0.5rem;
       min-height: 4.5em;
       line-height: 1.5;
   }
   
   /* ---- 一覧・モーダル：従来 Tailwind 相当の input（input 用に集約） ---- */
   .filter-input-full,
   .filter-input-date,
   .filter-input-slip,
   .filter-input-slip-sm,
   .filter-input-modal-search {
       box-sizing: border-box;
       padding: 0.4rem 0.75rem;
       border: 1px solid #e2e8f0;
       border-radius: 0.5rem;
       background: #fff;
       outline: none;
   }
   
   .filter-input-full:focus,
   .filter-input-date:focus,
   .filter-input-slip:focus,
   .filter-input-slip-sm:focus,
   .filter-input-modal-search:focus {
       box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2);
   }
   
   .filter-input-full {
       width: 100%;
   }
   
   .filter-input-date {
       width: 170px;
       padding-top: 0.375rem;
       padding-bottom: 0.375rem;
   }
   
   input[type="date"].filter-input-date,
   input[type="date"].filter-input-full {
       max-height: 35px;
   }
   
   .filter-input-slip,
   .filter-input-slip-sm {
       width: 90px;
   }
   
   .filter-input-slip-sm,
   .filter-input-modal-search {
       font-size: 0.875rem;
   }

   /* 品番選択モーダル（受注単価新規登録などと同一） */
   #item-select-modal .filter-input-modal-search {
       width: 100%;
       display: block;
   }

   /* 見積明細：品番検索の案内・0件メッセージ */
   #item-select-modal .item-select-message-cell {
       padding: 2rem 1.5rem;
       vertical-align: top;
   }
   #item-select-modal .item-select-message-cell--simple {
       text-align: center;
       font-size: 0.875rem;
   }
   #item-select-modal .item-select-message-block {
       margin: 0;
       text-align: center;
   }
   #item-select-modal .item-select-message-title {
       margin: 0;
       font-size: 0.875rem;
       font-weight: 500;
       line-height: 1.5;
       color: #64748b;
   }
   #item-select-modal .item-select-message-detail {
       margin: 0.75rem 0 0;
       font-size: 0.875rem;
       font-weight: 400;
       line-height: 1.65;
       color: #475569;
       text-wrap: wrap;
       overflow-wrap: anywhere;
       white-space: pre-line;
   }
   #item-select-modal .item-select-message--error .item-select-message-title {
       color: #e11d48;
   }
   #item-select-modal .item-select-message--error .item-select-message-detail {
       color: #be123c;
   }
   
   /* 一覧フィルター：検索・クリア（filter-input の上下 0.4rem に揃える） */
   .list-filter-btn-search {
       box-sizing: border-box;
       display: inline-flex;
       align-items: center;
       gap: 0.5rem;
       padding: 0.5rem 1.25rem;
       background: #1e293b;
       color: #fff;
       border: none;
       border-radius: 0.5rem;
       font-size: 0.875rem;
       font-weight: 500;
       font-family: inherit;
       line-height: 1.25;
       cursor: pointer;
       transition: background-color 0.2s;
   }
   
   .list-filter-btn-search:hover {
       background: #0f172a;
   }
   
   .list-filter-btn-clear {
       box-sizing: border-box;
       display: inline-flex;
       align-items: center;
       gap: 0.5rem;
       padding: 0.5rem 0.5rem;
       border: 1px solid #e2e8f0;
       border-radius: 0.5rem;
       color: #64748b;
       background: transparent;
       font-family: inherit;
       font-size: inherit;
       line-height: 1.25;
       cursor: pointer;
       transition: background-color 0.2s, border-color 0.2s;
   }
   
   .list-filter-btn-clear:hover {
       background: #fff;
   }
   
   /* ページヘッダー：戻る・主要アクション（filter 行の 0.4rem 相当に揃えた縦余白） */
   .page-header-back {
       box-sizing: border-box;
       display: inline-flex;
       align-items: center;
       justify-content: center;
       padding: 0.5rem;
       border-radius: 0.5rem;
       color: #94a3b8;
       text-decoration: none;
       transition: background-color 0.2s;
   }
   
   .page-header-back:hover {
       background: #f8fafc;
   }
   
   .page-header-btn-outline,
   .page-header-btn-primary,
   .page-header-btn-danger,
   .page-header-btn-success {
       box-sizing: border-box;
       display: inline-flex;
       align-items: center;
       gap: 0.5rem;
       padding: 0.5rem 1rem;
       border-radius: 0.5rem;
       font-size: 0.875rem;
       font-weight: 500;
       font-family: inherit;
       line-height: 1.25;
       cursor: pointer;
       transition: background-color 0.2s, border-color 0.2s, color 0.2s;
       text-decoration: none;
   }
   
   .page-header-btn-outline {
       border: 1px solid #e2e8f0;
       color: #475569;
       background: transparent;
   }
   
   .page-header-btn-outline:hover {
       background: #f8fafc;
   }
   
   .page-header-btn-primary {
       border: none;
       background: #4f46e5;
       color: #fff;
       box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
   }
   
   .page-header-btn-primary:hover {
       background: #4338ca;
   }

   /* 紫ボタン（編集以外の primary：登録・保存など）の無効時 — page-header-btn-edit は下記ルールを維持 */
   button.page-header-btn-primary:disabled:not(.page-header-btn-edit),
   button.page-header-btn-primary[disabled]:not(.page-header-btn-edit) {
       opacity: 0.4 !important;
       cursor: not-allowed !important;
       filter: grayscale(0.35);
       box-shadow: none !important;
   }
   button.page-header-btn-primary:disabled:not(.page-header-btn-edit):hover,
   button.page-header-btn-primary[disabled]:not(.page-header-btn-edit):hover {
       background: #4f46e5 !important;
       filter: grayscale(0.35);
   }
   
   .page-header-btn-danger {
       border: 1px solid #fecaca;
       color: #ef4444;
       background: transparent;
   }
   
   .page-header-btn-danger:hover:not(:disabled) {
       background: #fef2f2;
   }
   
   .page-header-btn-danger:disabled {
       opacity: 0.5;
       pointer-events: none;
   }
   
   .page-header-btn-success {
       border: 1px solid #a7f3d0;
       color: #047857;
       background: #fff;
   }
   
   .page-header-btn-success:hover {
       background: #ecfdf5;
   }
   
   /* 品番詳細：製番一覧の絞り込み・追加モーダル input */
   .item-serial-filter-input,
   .item-serial-dialog-input {
       box-sizing: border-box;
       width: 100%;
       font-size: 0.875rem;
       background: #fff;
       border: 1px solid #e2e8f0;
       border-radius: 0.375rem;
       outline: none;
       transition: border-color 0.2s, box-shadow 0.2s;
   }
   
   .item-serial-filter-input {
       padding: 0.375rem 0.75rem;
   }
   
   .item-serial-dialog-input {
       padding: 0.5rem 0.75rem;
   }
   
   /* 製番一覧の絞り込み：フォーカス時も紫のリングを付けない（通常枠のまま） */
   .item-serial-filter-input:focus {
       border-color: #e2e8f0;
       box-shadow: none;
   }

   .item-serial-dialog-input:focus {
       border-color: #6366f1;
       box-shadow: 0 0 0 1px #6366f1;
   }
   
   /* テーブル内チェックボックス */
   input[type="checkbox"].table-checkbox-all {
       width: 1rem;
       height: 1rem;
       border-radius: 0.25rem;
       accent-color: #4f46e5;
       color: #4f46e5;
   }
   
   input[type="checkbox"].table-checkbox {
       width: 1rem;
       height: 1rem;
       border-radius: 0.25rem;
       border: 1px solid #cbd5e1;
       accent-color: #4f46e5;
       color: #4f46e5;
   }
   
   input[type="checkbox"].table-checkbox-accent {
       width: 1rem;
       height: 1rem;
       border-radius: 0.25rem;
       border: 1px solid #cbd5e1;
       accent-color: #4f46e5;
       color: #4f46e5;
   }
   
   /* フォーム・明細の標準チェックボックス（16px） */
   input[type="checkbox"].form-checkbox {
       width: 1rem;
       height: 1rem;
       flex-shrink: 0;
       border-radius: 0.25rem;
       border: 1px solid #cbd5e1;
       accent-color: #4f46e5;
       color: #4f46e5;
   }
   
   input[type="checkbox"].form-checkbox-readonly {
       pointer-events: none;
   }
   
   /* 工程登録などコンパクトチェックボックス（14px） */
   input[type="checkbox"].form-checkbox-compact {
       width: 0.875rem;
       height: 0.875rem;
       flex-shrink: 0;
       border-radius: 0.25rem;
       border: 1px solid #cbd5e1;
       accent-color: #4f46e5;
       color: #4f46e5;
   }
   
   /* 受注明細：閲覧時チェックボックス */
   .so-detail-checkbox-view {
       width: 1rem;
       height: 1rem;
       flex-shrink: 0;
       border-radius: 0.25rem;
       border: 1px solid #cbd5e1;
       accent-color: #4f46e5;
       color: #4f46e5;
   }
   
   /* 受注明細：閲覧時チェックボックス（無効だが状態は分かるよう少しだけコントラスト） */
   .so-detail-checkbox-view:disabled {
       opacity: 0.9;
   }
   
   /*
    * 受注明細フォーム：鏡情報プレビューと同じ1行値の高さ（字は通常ウェイト）
    */
   .sales-order-detail-form .field-display-auto,
   .sales-order-detail-form .field-display-calculated,
   .sales-order-detail-form .field-display-readonly {
       padding: 0.375rem 0.75rem;
       min-height: 36px;
       border-radius: 0.5rem;
       font-weight: 400;
       box-sizing: border-box;
       align-items: flex-start;
       line-height: 1.4;
   }
   
   .sales-order-detail-form .field-input {
       padding: 0.375rem 0.75rem;
       min-height: 36px;
       border-radius: 0.5rem;
       font-weight: 400;
       box-sizing: border-box;
   }
   
   .sales-order-detail-form .field-display-readonly-textarea,
   .sales-order-detail-form .field-textarea {
       padding: 0.375rem 0.75rem;
       border-radius: 0.5rem;
       font-weight: 400;
       box-sizing: border-box;
   }
   
   /*
    * 閲覧用セルは display:flex 付きのため、Tailwind の .hidden だけだと display が負けて
    * 編集モードでも要素が残ることがある → .hidden 時は必ず非表示にする
    */
   .sales-order-detail-form [data-line-detail-view].hidden {
       display: none !important;
   }
   
   .sales-order-detail-form [data-line-detail-edit].hidden {
       display: none !important;
   }
   
   /* 明細フォーム内は本文と同じファミリ（等幅指定を使わない方針の補強） */
   .sales-order-detail-form,
   .sales-order-detail-form input,
   .sales-order-detail-form textarea,
   .sales-order-detail-form button {
       font-family: 'Inter', 'Noto Sans JP', sans-serif;
   }
   
   /* 編集モード用 input */
   .field-input {
       font-size: 0.875rem;
       color: #1E293B;
       padding: 0.4rem 0.75rem;
       background: #FFFFFF;
       border: 1px solid #A5B4FC;
       border-radius: 0.5rem;
       min-height: 36px;
       width: 100%;
       outline: none;
       transition: border-color 0.2s, box-shadow 0.2s;
   }
   
   .field-input:focus {
       border-color: #6366F1;
       box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
   }
   
   .field-textarea {
       font-size: 0.875rem;
       color: #1E293B;
       padding: 0.4rem 0.75rem;
       background: #FFFFFF;
       border: 1px solid #A5B4FC;
       border-radius: 0.5rem;
       min-height: 4.5em;
       line-height: 1.5;
       width: 100%;
       resize: vertical;
       outline: none;
       transition: border-color 0.2s, box-shadow 0.2s;
   }
   
   .field-textarea:focus {
       border-color: #6366F1;
       box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
   }
   
   /* セクションカード */
   .section-card {
       background: #FFFFFF;
       border: 1px solid #E2E8F0;
       border-radius: 1rem;
       padding: 1.5rem;
       box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
       transition: border-color 0.3s;
   }
   
   body.edit-mode .section-card {
       border-color: #C7D2FE;
   }

  /* フォーム共通エラー表示（社員/受注単価など） */
  .form-error-card {
      font-size: 0.75rem;
      font-weight: 700;
      color: #e11d48;
  }

  .form-error-list {
      display: flex;
      flex-direction: column;
      gap: 0.25rem;
  }

  .form-error-item {
      display: flex;
      align-items: center;
      gap: 0.375rem;
  }

  .form-error-icon {
      width: 0.875rem;
      height: 0.875rem;
      flex-shrink: 0;
  }
   
   .section-title {
       font-size: 0.9rem;
       font-weight: 700;
       color: #334155;
       text-transform: uppercase;
       letter-spacing: 0.05em;
       margin-bottom: 1.25rem;
       display: flex;
       align-items: center;
       gap: 0.5rem;
   }
   
   .section-title i {
       color: #6366F1;
   }
   
   /* 書類の「変更」ボタン: 編集モードのみ表示 */
   .file-change-btn {
       display: none;
   }
   body.edit-mode .file-change-btn {
       display: inline-flex;
   }

   /* 編集モードバナー: レイアウトの縦幅を使わない（全画面共通で非表示） */
   .edit-banner {
       display: none !important;
   }
   
   /* 各画面の main 直下ヘッダー（px-8 py-5 border-b slate-100 / flex / bg-white 相当） */
   .page-header {
       display: flex;
       align-items: center;
       justify-content: space-between;
       flex-shrink: 0;
       padding: .9rem 2rem .65rem;
       background: #ffffff;
       border-bottom: 1px solid #f1f5f9;
   }

   /* 編集・新規の合図: ヘッダー背景・下線（文言なし） */
   body.edit-mode .page-header,
   body.item-new-page .page-header {
       background: linear-gradient(180deg, #eef2ff 0%, #ffffff 55%, #f8faff 100%);
       border-bottom: 1px solid #a5b4fc;
   }

   /* 編集中ラベル（h1 隣に <span class="page-header-edit-badge">編集中</span>） */
   .page-header-edit-badge {
       display: none;
       align-items: center;
       font-size: 0.75rem;
       font-weight: 700;
       color: #4338ca;
       padding: 0.125rem 0.5rem;
       border-radius: 0.375rem;
       background: #e0e7ff;
       border: 1px solid rgba(199, 210, 254, 0.85);
       letter-spacing: 0.04em;
       white-space: nowrap;
       flex-shrink: 0;
   }
   body.edit-mode .page-header-edit-badge {
       display: inline-flex;
   }

   /* 詳細ヘッダー：タイトル行右・このレコード（画面）の最終更新 */
   .page-header-record-meta {
       box-sizing: border-box;
       font-size: 0.75rem;
       line-height: 1.25;
       color: #64748b;
       text-align: right;
       flex-shrink: 0;
       max-width: 100%;
       margin-left: 0.25rem;
       padding-left: 0.75rem;
       border-left: 1px solid #e2e8f0;
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
   }
   @media (min-width: 640px) {
       .page-header-record-meta {
           max-width: min(100%, 20rem);
       }
   }

   /* 編集開始ボタンが無効のとき（押せないことを明示） */
   button.page-header-btn-edit:disabled,
   button.page-header-btn-edit[disabled] {
       opacity: 0.4 !important;
       cursor: not-allowed !important;
       filter: grayscale(0.35);
       box-shadow: none !important;
   }
   button.page-header-btn-edit:disabled:hover,
   button.page-header-btn-edit[disabled]:hover {
       background: #4f46e5 !important;
       filter: grayscale(0.35);
   }

   /* 各画面ヘッダー：幅が狭いときタイトルとボタンエリアを折り返す */
   main > header {
       flex-wrap: wrap;
       gap: 0.75rem;
   }
   main > header > div[class*="flex"] {
       flex-wrap: wrap;
   }

   /* 一覧テーブル下のページネーション（縦の占有を抑える） */
   .list-pagination-footer {
       flex-shrink: 0;
       display: flex;
       align-items: center;
       justify-content: space-between;
       flex-wrap: wrap;
       row-gap: 0.375rem;
       column-gap: 1.25rem;
       padding: 0.625rem 1.5rem;
       border-top: 1px solid #f1f5f9;
       font-size: 0.875rem;
       line-height: 1.375rem;
       color: #64748b;
       background: #ffffff;
   }
   .list-pagination-footer select {
       padding: 0.25rem 0.5rem;
       font-size: inherit;
       line-height: 1.375rem;
   }
   
   /* 図面ファイルカード（部品共通・製番別共通） */
   .drawing-file-card {
       display: flex;
       align-items: center;
       gap: 0.75rem;
       padding: 0.75rem 1rem;
       border: 1px solid #E2E8F0;
       border-radius: 0.5rem;
       transition: background 0.2s;
       max-width: 320px;
       min-width: 0;
   }
   
   .drawing-file-card:hover {
       background: #fafafa;
   }
   
   .drawing-file-icon {
       width: 2.25rem;
       height: 2.25rem;
       border-radius: 0.5rem;
       display: flex;
       align-items: center;
       justify-content: center;
       flex-shrink: 0;
   }
   
   .drawing-file-icon.pdf { background: #FEF2F2; color: #EF4444; }
   .drawing-file-icon.img { background: #EFF6FF; color: #3B82F6; }
   
   .drawing-file-add {
       display: flex;
       align-items: center;
       gap: 0.5rem;
       padding: 0.75rem 1rem;
       border: 2px dashed #CBD5E1;
       border-radius: 0.5rem;
       color: #94A3B8;
       transition: border-color 0.2s, color 0.2s;
   }
   
   .drawing-file-add:hover {
       border-color: #818CF8;
       color: #6366F1;
   }
   
   /* 図面カードの削除ボタン：編集モード時のみ表示 */
   .drawing-delete-btn {
       display: none;
       align-items: center;
       justify-content: center;
   }
   body.edit-mode .drawing-delete-btn {
       display: flex;
   }

   /* 部品詳細（item_detail.html）: 編集モードでは図面削除も可 */
   body.item-detail-page.edit-mode .drawing-delete-btn {
       display: flex !important;
   }
   
   /* 製番ごとの「ファイル追加」：編集モード時のみ表示 */
   .add-serial-drawing-btn {
       display: none !important;
   }
   body.edit-mode .add-serial-drawing-btn,
   body.item-new-page .add-serial-drawing-btn {
       display: flex !important;
   }
   
   /* 新規製番追加ボタン：編集モード時のみ表示 */
   .add-serial-btn-wrap {
       display: none;
   }
   body.edit-mode .add-serial-btn-wrap,
   body.item-new-page .add-serial-btn-wrap {
       display: flex;
   }
   
   /* 製番削除ボタン：編集モード時のみ表示 */
   .serial-delete-btn {
       display: none;
       align-items: center;
       justify-content: center;
   }
   body.edit-mode .serial-delete-btn,
   body.item-new-page .serial-delete-btn {
       display: flex;
   }

   /* 部品詳細（item_detail.html）: 編集モードでは製番削除も可 */
   body.item-detail-page.edit-mode .serial-delete-btn {
       display: flex !important;
   }

   .serial-table {
       border-collapse: collapse;
       width: 100%;
   }
   
   /* 製番ブロック（各製番の見出し＋図面エリア） */
   
   .serial-block-header {
       display: flex;
       align-items: center;
       justify-content: space-between;
       padding: 0.75rem 1rem;
       background: #fafafa;
       border-bottom: 1px solid #E2E8F0;
       cursor: pointer;
       user-select: none;
   }
   
   .serial-block-header:hover {
       background: #F1F5F9;
   }
   
   .serial-block-body {
       padding: 0.75rem 1rem;
       background: #FFFFFF;
   }
   
   .serial-block-drawings {
       margin-top: 0.5rem;
       padding-top: 0.5rem;
       border-top: 1px solid #F1F5F9;
   }
   
   .serial-empty-msg {
       font-size: 0.8125rem;
       color: #94A3B8;
       padding: 1rem;
       text-align: center;
       background: #fafafa;
       border-radius: 0.5rem;
       border: 1px dashed #E2E8F0;
   }
   
   /* 製番一覧セクション見出し */
   .serial-list-heading {
       font-size: 0.9rem;
       font-weight: 700;
       color: #334155;
       letter-spacing: 0.02em;
       margin-bottom: 0.5rem;
       display: flex;
       align-items: center;
       gap: 0.5rem;
   }
   
   .serial-list-heading i {
       color: #6366F1;
   }
   
   /* 製番番号を目立たせる（ラベル＋番号） */
   .serial-number-cell {
       display: flex;
       align-items: center;
       gap: 0.4rem;
       padding: 0.3rem 0.6rem;
       background: #fafafa;
       border: 1px solid #E2E8F0;
       border-radius: 0.5rem;
       min-width: 0;
       max-width: 12rem;
   }
   
   .serial-number-cell .serial-label {
       font-size: 0.7rem;
       font-weight: 600;
       color: #64748B;
       text-transform: uppercase;
       letter-spacing: 0.04em;
       white-space: nowrap;
       flex-shrink: 0;
   }
   
   .serial-number-cell .serial-value {
       font-size: 0.875rem;
       font-weight: 700;
       color: #1E293B;
   }
   
   /* 製番の input：8文字がみ切れない幅（編集モード時は余白を詰めて確実に） */
   .serial-number-cell .field-input {
       min-width: 6rem;
       max-width: 11rem;
       box-sizing: border-box;
   }
   
   /* 編集モード時・新規登録時：製番・メモまわりの余白を詰め、製番8文字表示・メモ幅を確保 */
   body.edit-mode .serial-block-body,
   body.item-new-page .serial-block-body {
       padding: 0.5rem 0.75rem;
   }
   
   body.edit-mode .serial-block-body > .flex.flex-wrap.items-center,
   body.item-new-page .serial-block-body > .flex.flex-wrap.items-center {
       gap: 0.35rem;
       margin-bottom: 0.5rem;
   }
   
   body.edit-mode .serial-number-cell,
   body.item-new-page .serial-number-cell {
       padding: 0.25rem 0.5rem;
       gap: 0.35rem;
       max-width: 12rem;
   }
   
   body.edit-mode .serial-number-cell .field-input,
   body.item-new-page .serial-number-cell .field-input {
       min-width: 9ch;
       max-width: 11rem;
   }
   
   body.edit-mode .serial-memo-wrap,
   body.item-new-page .serial-memo-wrap {
       max-width: 100% !important;
       min-width: 0;
       gap: 0.35rem !important;
   }
   
   body.edit-mode .serial-block-drawings,
   body.item-new-page .serial-block-drawings {
       margin-top: 0.35rem;
       padding-top: 0.35rem;
   }
   
   /* 製番ブロック内のメモ：編集モード時も他フィールドと同程度の大きさ（小さくしない） */
   .serial-memo-wrap .field-label {
       font-size: 0.75rem;
   }
   
   .serial-memo-wrap .field-value {
       font-size: 0.875rem;
       padding: 0.4rem 0.6rem;
       min-height: 32px;
   }
   
   /* 編集モード時のメモ textarea：通常の field-textarea と同程度の高さ・フォント */
   .serial-memo-wrap .field-textarea {
       font-size: 0.875rem;
       padding: 0.5rem 0.75rem;
       min-height: 4em;
       line-height: 1.5;
   }
   
   /* 製番一覧（表形式）：メモ列の text input は1行用に高さ・余白を抑える */
   body.edit-mode #serial-table .serial-memo-wrap .field-input {
       min-height: 0;
       height: 1.75rem;
       padding: 0.15rem 0.45rem;
       font-size: 0.8125rem;
       line-height: 1.3;
       border-radius: 0.375rem;
   }
   
   body.edit-mode #serial-table .serial-memo-wrap .field-input:focus {
       box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.15);
   }
   
   /* 製番一覧を3列で横並び（狭いときは2列→1列で折り返し） */
   .serial-list-grid {
       display: grid;
       grid-template-columns: repeat(3, 1fr);
       gap: 0.75rem;
       margin-bottom: 0.75rem;
   }
   
   @media (max-width: 1440px) {
       .serial-list-grid {
           grid-template-columns: repeat(2, 1fr);
       }
   }
   
   @media (max-width: 800px) {
       .serial-list-grid {
           grid-template-columns: 1fr;
       }
   }

  /* 製番一覧（大量件数）: tbody を display:block にせず、外側ラッパーで縦スクロール */
  #serial-table-scroll {
      max-height: 500px;
      overflow-y: auto;
      width: 100%;
  }

  #serial-table thead th {
      position: sticky;
      top: 0;
      z-index: 5;
      background: #fafafa;
  }
   
   /* 梱包情報・個装情報グリッド（折り返し） */
   .pack-grid {
       display: flex;
       flex-wrap: wrap;
       gap: 0.9rem;
   }
   
   .ind-grid {
       display: flex;
       flex-wrap: wrap;
       gap: 0.9rem;
   }
   
   /* 梱包・個装：重要度低のため入力幅・文字を小さく、単位は input 横に表示 */
   .pack-grid .field-label,
   .ind-grid .field-label {
       font-size: 0.7rem;
       margin-bottom: 0.15rem;
   }
   
   .pack-grid .field-with-unit,
   .ind-grid .field-with-unit {
       gap: 0.2rem;
   }
   
   .pack-grid .field-value,
   .pack-grid .field-input,
   .ind-grid .field-value,
   .ind-grid .field-input {
       max-width: 4.5rem;
       font-size: 0.75rem;
       padding: 0.2rem 0.35rem;
       min-height: 30px;
   }
   
   .pack-grid .unit-suffix,
   .ind-grid .unit-suffix {
       font-size: 0.7rem;
       color: #64748b;
       flex-shrink: 0;
   }
   
   /* Tom Select: 他の input / .field-input と同じ見た目に統一 */
   .ts-wrapper .ts-control {
       font-size: 0.875rem !important;
       color: #1E293B !important;
       padding: 0.4rem 2rem 0.4rem 0.75rem !important;
       background: #FFFFFF !important;
       border: 1px solid #A5B4FC !important;
       border-radius: 0.5rem !important;
       box-shadow: none !important;
       line-height: 1.25rem !important;
       /* 空値・プレースホルダー無しでも潰れない（他の filter-input と同程度の高さ） */
       min-height: 2.3rem !important;
       display: flex !important;
       align-items: center !important;
   }
   .ts-wrapper.focus .ts-control,
   .ts-wrapper.dropdown-active .ts-control {
       border-color: #6366F1 !important;
       box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15) !important;
   }
   .ts-wrapper .ts-control > input {
       font-size: 0.875rem !important;
       color: #1E293B !important;
       min-height: 1.25rem !important;
   }
   .ts-dropdown {
       z-index: 50 !important;
       border: 1px solid #A5B4FC !important;
       border-radius: 0 0 0.5rem 0.5rem !important;
       border-top: none !important;
       box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
       margin-top: 0 !important;
   }
   .ts-dropdown .option,
   .ts-dropdown .optgroup-header,
   .ts-dropdown .no-results,
   .ts-dropdown .create {
       padding: 0.5rem 0.75rem !important;
       font-size: 0.875rem !important;
       min-height: 2.25rem !important;
       display: flex !important;
       align-items: center !important;
   }
   .ts-dropdown .active.option {
       background-color: #EEF2FF !important;
       color: #4338CA !important;
   }
   .ts-dropdown [data-selectable].option:hover {
       background-color: #F1F5F9 !important;
   }
   
   /* 一覧フィルター内: ドロップダウンが thead の下に隠れないように */
   .list-filter-bar {
       position: relative;
       z-index: 20;
   }
   /* 一覧フィルター内: 隣の input（border-slate-200）と同じ枠色に */
   .list-filter-bar .ts-wrapper .ts-control {
       border-color: #E2E8F0 !important;
   }
   .list-filter-bar .ts-wrapper.focus .ts-control,
   .list-filter-bar .ts-wrapper.dropdown-active .ts-control {
       border-color: #6366F1 !important;
       box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15) !important;
   }
   /* 検索条件（一覧フィルター・詳細条件パネル・図面保守）内の日付入力 */
   .list-filter-bar input[type="date"],
   #detail-filter-panel input[type="date"],
   .dm-filter-compact input[type="date"],
   #dm-modal input[type="date"] {
       width: 130px !important;
       min-width: 130px;
       max-width: 130px;
       box-sizing: border-box;
   }

   #dm-modal,
   #dm-modal .filter-input-full,
   #dm-modal .filter-input-date,
   #dm-modal select.filter-input-full,
   #dm-modal input[type="file"] {
       font-size: 0.875rem;
   }

   /* 図面モーダル：ファイル選択ボタンをコンパクトに */
   #dm-modal input.dm-modal-file-input[type="file"]::file-selector-button {
       font-size: 0.75rem;
       font-weight: 500;
       padding: 0.2rem 0.4rem;
       margin-right: 0.5rem;
       border: 0;
       border-radius: 0.25rem;
       background: #f1f5f9;
       color: #475569;
       cursor: pointer;
   }

   #dm-modal input.dm-modal-file-input[type="file"]::file-selector-button:hover {
       background: #e2e8f0;
   }

   #dm-modal input.dm-modal-file-input[type="file"]::-webkit-file-upload-button {
       font-size: 0.75rem;
       font-weight: 500;
       padding: 0.2rem 0.4rem;
       margin-right: 0.5rem;
       border: 0;
       border-radius: 0.25rem;
       background: #f1f5f9;
       color: #475569;
       cursor: pointer;
   }

   #dm-modal input.dm-modal-file-input[type="file"]::-webkit-file-upload-button:hover {
       background: #e2e8f0;
   }

   /* 受注単価・発注単価フォーム・見積モーダル: Tom Select で二重枠にならないように */
   .order-price-form .ts-wrapper,
   .partner-form .ts-wrapper,
   #so-new-modal .ts-wrapper,
   #item-register-modal .ts-wrapper {
       border: none !important;
       box-shadow: none !important;
       outline: none !important;
       background: transparent !important;
   }
   .order-price-form .ts-wrapper.field-input,
   .partner-form .ts-wrapper.field-input,
   #so-new-modal .ts-wrapper.field-input,
   #item-register-modal .ts-wrapper.field-input {
       padding: 0 !important;
       min-height: 0 !important;
   }
   .order-price-form .ts-wrapper:focus-within,
   .partner-form .ts-wrapper:focus-within,
   #so-new-modal .ts-wrapper:focus-within,
   #item-register-modal .ts-wrapper:focus-within {
       outline: none !important;
       box-shadow: none !important;
   }
   .order-price-form .ts-wrapper select,
   .partner-form .ts-wrapper select,
   #so-new-modal .ts-wrapper select,
   #item-register-modal .ts-wrapper select {
       border: none !important;
       box-shadow: none !important;
   }

   
   /* ==================================================
      取引先マスタ（詳細・新規）: 入力幅を詰めて折り返し対応
      ================================================== */
   .partner-form {
       max-width: 1280px;
       width: 100%;
   }

   /* Tailwind max-w-4xl と併用時はこちらを優先（common.css が CDN より後に読まれるため） */
   .partner-form.max-w-4xl {
       max-width: 56rem;
   }

   /* 幅が狭いときヘッダー・フォーム内のflex要素を折り返す */
   body.partner-detail-page main > header,
   body.partner-detail-page .partner-form .section-card [class*="flex"] {
       flex-wrap: wrap;
   }
   body.partner-detail-page main > header {
       gap: 0.75rem;
   }
   @media (max-width: 639px) {
       body.partner-detail-page main > header {
           flex-direction: column;
           align-items: stretch;
       }
       body.partner-detail-page main > header > div:last-child {
           justify-content: flex-start;
       }
       body.partner-detail-page .partner-form .partner-grid > div[class*="col-span"] {
           grid-column: 1 / -1;
       }
   }
   
   /* グリッド: 狭い幅で1列、中で2列、広い幅で3列に折り返し */
   .partner-form .partner-grid {
       display: grid;
       grid-template-columns: 1fr;
       gap: 0.75rem 1rem;
   }

   .partner-form .partner-grid > div {
       min-width: 0;
   }
   
   @media (min-width: 640px) {
       .partner-form .partner-grid {
           grid-template-columns: repeat(2, 1fr);
           gap: 0.75rem 1.25rem;
       }
   }
   
   @media (min-width: 1024px) {
       .partner-form .partner-grid {
           grid-template-columns: repeat(3, 1fr);
           gap: 0.75rem 1.25rem;
       }
   }
   
   /* 支払・回収条件: 項目が多いので4列まで */
   .partner-form .partner-grid.partner-grid-4col {
       grid-template-columns: 1fr;
   }
   
   @media (min-width: 640px) {
       .partner-form .partner-grid.partner-grid-4col {
           grid-template-columns: repeat(2, 1fr);
       }
   }
   
   @media (min-width: 1024px) {
       .partner-form .partner-grid.partner-grid-4col {
           grid-template-columns: repeat(4, 1fr);
       }
   }

   /* 帳票送付先: Tom Select のラッパーを select.field-input と同じ max-width に揃え、ドロップと枠のズレを防ぐ */
   #customer-section-send-dest .partner-grid > div:not([class*="col-span"]) .ts-wrapper {
       position: relative;
       display: block;
       width: 100%;
       max-width: 100%;
       min-width: 0;
       box-sizing: border-box;
   }
   @media (min-width: 1024px) {
       #customer-section-send-dest .partner-grid > div:not([class*="col-span"]) .ts-wrapper {
           max-width: 20rem;
       }
   }
   #customer-section-send-dest .ts-wrapper .ts-control {
       width: 100%;
       max-width: 100%;
       box-sizing: border-box;
   }
   /*
    * Tom Select single: 矢印▽（開閉で回転）
    * - 取引先マスタ 帳票送付先
    * - 受注・発注 一覧フィルター（取引先/発注先）
    * - 受注・発注 新規・詳細の取引先/発注先（.order-price-form）
    * - 見積一覧「見積伝票の新規登録」モーダル（#so-new-modal）
    * - 見積詳細「部品マスタに登録」モーダル（#item-register-modal）
    */
   #customer-section-send-dest .ts-wrapper.single .ts-control,
   .list-filter-bar .ts-wrapper.single .ts-control,
   .order-price-form .ts-wrapper.single .ts-control,
   #so-new-modal .ts-wrapper.single .ts-control,
   #item-register-modal .ts-wrapper.single .ts-control {
       flex-wrap: nowrap !important;
       position: relative;
   }
   /* 選択済み・閉じているとき：取引先名は最大2行（2行目末尾で…）。検索 input は横に出さない */
   #customer-section-send-dest .ts-wrapper.single:not(.dropdown-active) .ts-control:has(.item),
   .list-filter-bar .ts-wrapper.single:not(.dropdown-active) .ts-control:has(.item),
   .order-price-form .ts-wrapper.single:not(.dropdown-active) .ts-control:has(.item),
   #so-new-modal .ts-wrapper.single:not(.dropdown-active) .ts-control:has(.item),
   #item-register-modal .ts-wrapper.single:not(.dropdown-active) .ts-control:has(.item) {
       align-items: flex-start !important;
       height: auto !important;
   }
   #customer-section-send-dest .ts-wrapper.single:not(.dropdown-active) .ts-control:has(.item) .item,
   .list-filter-bar .ts-wrapper.single:not(.dropdown-active) .ts-control:has(.item) .item,
   .order-price-form .ts-wrapper.single:not(.dropdown-active) .ts-control:has(.item) .item,
   #so-new-modal .ts-wrapper.single:not(.dropdown-active) .ts-control:has(.item) .item,
   #item-register-modal .ts-wrapper.single:not(.dropdown-active) .ts-control:has(.item) .item {
       display: -webkit-box !important;
       -webkit-box-orient: vertical !important;
       -webkit-line-clamp: 2 !important;
       line-clamp: 2 !important;
       flex: 1 1 auto !important;
       min-width: 0 !important;
       max-width: calc(100% - 1.75rem) !important;
       overflow: hidden !important;
       white-space: normal !important;
       word-break: break-word !important;
       line-height: 1.25rem !important;
   }
   #customer-section-send-dest .ts-wrapper.single:not(.dropdown-active) .ts-control:has(.item) > input,
   .list-filter-bar .ts-wrapper.single:not(.dropdown-active) .ts-control:has(.item) > input,
   .order-price-form .ts-wrapper.single:not(.dropdown-active) .ts-control:has(.item) > input,
   #so-new-modal .ts-wrapper.single:not(.dropdown-active) .ts-control:has(.item) > input,
   #item-register-modal .ts-wrapper.single:not(.dropdown-active) .ts-control:has(.item) > input {
       width: 0 !important;
       min-width: 0 !important;
       max-width: 0 !important;
       padding: 0 !important;
       margin: 0 !important;
       border: 0 !important;
       opacity: 0 !important;
       flex: 0 0 0 !important;
   }
   /* ドロップダウンを開いているときだけ：ラベルを隠して検索 input を表示 */
   #customer-section-send-dest .ts-wrapper.single.dropdown-active .ts-control:has(.item) .item,
   .list-filter-bar .ts-wrapper.single.dropdown-active .ts-control:has(.item) .item,
   .order-price-form .ts-wrapper.single.dropdown-active .ts-control:has(.item) .item,
   #so-new-modal .ts-wrapper.single.dropdown-active .ts-control:has(.item) .item,
   #item-register-modal .ts-wrapper.single.dropdown-active .ts-control:has(.item) .item {
       display: none !important;
   }
   #customer-section-send-dest .ts-wrapper.single.dropdown-active .ts-control:has(.item) > input,
   .list-filter-bar .ts-wrapper.single.dropdown-active .ts-control:has(.item) > input,
   .order-price-form .ts-wrapper.single.dropdown-active .ts-control:has(.item) > input,
   #so-new-modal .ts-wrapper.single.dropdown-active .ts-control:has(.item) > input,
   #item-register-modal .ts-wrapper.single.dropdown-active .ts-control:has(.item) > input {
       flex: 1 1 auto !important;
       width: 100% !important;
       min-width: 0 !important;
       max-width: calc(100% - 1.75rem) !important;
       opacity: 1 !important;
   }
   #customer-section-send-dest .ts-wrapper.single:not(.rtl):not(.disabled) .ts-control::after,
   .list-filter-bar .ts-wrapper.single:not(.rtl):not(.disabled) .ts-control::after,
   .order-price-form .ts-wrapper.single:not(.rtl):not(.disabled) .ts-control::after,
   #so-new-modal .ts-wrapper.single:not(.rtl):not(.disabled) .ts-control::after,
   #item-register-modal .ts-wrapper.single:not(.rtl):not(.disabled) .ts-control::after {
       content: "";
       position: absolute;
       right: 0.7rem;
       top: 50%;
       width: 0.45rem;
       height: 0.45rem;
       margin-top: -0.2rem;
       border-right: 2px solid #64748b;
       border-bottom: 2px solid #64748b;
       transform: rotate(45deg);
       pointer-events: none;
       z-index: 2;
       flex: none;
   }
   #customer-section-send-dest .ts-wrapper.single.dropdown-active:not(.rtl):not(.disabled) .ts-control::after,
   .list-filter-bar .ts-wrapper.single.dropdown-active:not(.rtl):not(.disabled) .ts-control::after,
   .order-price-form .ts-wrapper.single.dropdown-active:not(.rtl):not(.disabled) .ts-control::after,
   #so-new-modal .ts-wrapper.single.dropdown-active:not(.rtl):not(.disabled) .ts-control::after,
   #item-register-modal .ts-wrapper.single.dropdown-active:not(.rtl):not(.disabled) .ts-control::after {
       margin-top: 0.05rem;
       transform: rotate(-135deg);
   }

   #so-new-modal .ts-wrapper,
   #item-register-modal .ts-wrapper {
       display: block;
       width: 100%;
   }
   
   /* 1列・2列のセル内は input/field-value の幅を抑える（col-span 以外） */
   .partner-form .partner-grid > div:not([class*="col-span"]) .field-input,
   .partner-form .partner-grid > div:not([class*="col-span"]) .field-value,
   .partner-form .partner-grid > div:not([class*="col-span"]) select.field-input {
       max-width: 100%;
   }
   
   @media (min-width: 1024px) {
       .partner-form .partner-grid > div:not([class*="col-span"]) .field-input,
       .partner-form .partner-grid > div:not([class*="col-span"]) .field-value,
       .partner-form .partner-grid > div:not([class*="col-span"]) select.field-input {
           max-width: 20rem;
       }
   }
   
   /* 4列グリッド内も同様に幅を抑える */
   @media (min-width: 1024px) {
       .partner-form .partner-grid.partner-grid-4col > div .field-input,
       .partner-form .partner-grid.partner-grid-4col > div .field-value,
       .partner-form .partner-grid.partner-grid-4col > div select.field-input {
           max-width: 14rem;
       }
   }
   
   /* 狭い画面ではセクションカードのパディングを少し削る */
   @media (max-width: 639px) {
       body.partner-detail-page .section-card,
       body.partner-new-page .section-card {
           padding: 1rem;
       }
   }

   /* 長いテキスト（URL等）の折り返し */
   .partner-form .field-value,
   .partner-form .field-value-textarea {
       word-break: break-all;
       overflow-wrap: break-word;
       min-width: 0;
   }

   /* 保存トースト（main の左下に表示） */
   main { position: relative; }
   .save-toast {
       position: absolute; bottom: 1.5rem; left: 1.5rem; z-index: 100;
       display: flex; align-items: center; gap: 0.5rem;
       padding: 0.875rem 1.5rem; background: #334155; color: #fff;
       border-radius: 0.5rem; font-size: 0.9375rem;
       box-shadow: 0 4px 12px rgba(0,0,0,0.15);
       animation: saveToastIn 0.5s ease-out; pointer-events: none;
   }
   @keyframes saveToastIn {
       from { opacity: 0; transform: translateY(0.75rem); }
       to { opacity: 1; transform: translateY(0); }
   }

   /* ==================================================
      工程マスタ詳細ページ (process_detail.html) 用
      ================================================== */
   .process-reg-block { position: relative; background: #fff; border: 1px solid #e2e8f0; border-radius: 0.5rem; padding: 0.75rem; min-width: 0; box-shadow: 0 1px 2px rgba(0,0,0,0.04); }
   body.partner-detail-page .process-reg-block.process-reg-block--assy {
       background: #ecfdf5;
       border-color: #bbf7d0;
   }
   body.partner-detail-page .process-reg-block.process-reg-block--process {
       background: #fff7ed;
       border-color: #fed7aa;
   }
   .process-reg-inner { display: flex; flex-wrap: wrap; gap: 0.5rem 0.75rem; font-size: 0.8125rem; }
   .process-reg-top-grid { display: flex; flex-direction: column; gap: 0.5rem; flex: 1 1 100%; min-width: 0; }
   .process-reg-top-row-1 { display: grid; grid-template-columns: 4.5rem 1fr; gap: 0 0.5rem; align-items: center; }
   /* 「使用する」列が無い閲覧画面では子が1つだけ → 品番が 4.5rem 列に入らないよう全幅に */
   .process-reg-top-row-1:has(> :only-child) { grid-template-columns: 1fr; }
   /* 編集: 「使用する」列なし時は削除ボタン幅のみ（品番を広く） */
   body.edit-mode .process-reg-top-row-1 { grid-template-columns: auto 1fr; }
   .process-reg-top-row-2 { width: 100%; min-width: 0; }
   /* 工程属性＋発注先：flex で横並び（TomSelect 等で子 DOM が変わっても列が崩れにくい） */
   .process-reg-meta-pair {
       display: flex;
       flex-direction: row;
       flex-wrap: nowrap;
       align-items: flex-start;
       gap: 0.5rem;
       width: 100%;
       min-width: 0;
   }
   .process-reg-meta-pair.process-reg-meta-pair--assy {
       flex-direction: column;
   }
   .process-reg-meta-pair.process-reg-meta-pair--assy .js-pr-category-wrap {
       display: none !important;
   }
   body.edit-mode .process-reg-meta-pair:not(.process-reg-meta-pair--assy) .js-pr-category-wrap {
       flex: 0 0 4.25rem;
       width: 4.25rem;
       max-width: 4.75rem;
       min-width: 0;
   }
   body:not(.edit-mode) .process-reg-meta-pair:not(.process-reg-meta-pair--assy) .js-pr-category-wrap {
       flex: 0 0 3.5rem;
       width: 3.5rem;
       max-width: 4rem;
       min-width: 0;
   }
   .process-reg-meta-pair .process-reg-customer-wrap {
       flex: 1 1 0;
       min-width: 0;
   }
   .process-reg-meta-pair.process-reg-meta-pair--assy .process-reg-customer-wrap {
       width: 100%;
       flex: 1 1 auto;
   }
   .process-reg-inner .field-process-class { min-width: 0; }
   body.edit-mode .process-reg-inner .field-use-check { flex-wrap: nowrap; white-space: nowrap; gap: 0.5rem; }
   body.edit-mode .process-reg-block-delete-wrap { margin-right: 0.5rem; }
   .process-reg-inner .field-memo-wrap { flex: 1 1 100%; min-width: 0; }
   .process-reg-inner .field-pair-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0.5rem 0.5rem; flex: 1 1 100%; min-width: 0; }
   .process-reg-inner .field-leadtime-row {
       display: grid;
       grid-template-columns: minmax(0, 1fr) minmax(3.25rem, 4rem) minmax(3.25rem, 4rem);
       gap: 0.5rem 0.5rem;
       flex: 1 1 100%;
       min-width: 0;
   }
   .process-reg-inner .field-use-check { min-width: 0; }
   .process-reg-inner .field-label { font-size: 0.7rem; margin-bottom: 0.125rem; }
   .process-reg-inner .field-value { min-height: 32px; padding: 0.35rem 0.5rem; font-size: 0.8125rem; display: block; box-sizing: border-box; line-height: 1.5; word-wrap: break-word; overflow-wrap: break-word; white-space: normal; }
   .add-reg-btn-wrap { display: none; flex-shrink: 0; }
   body.edit-mode .add-reg-btn-wrap { display: flex; }
   body:not(.edit-mode) .field-use-check { pointer-events: none; cursor: default; }
   .add-process-btn-wrap { display: none !important; }
   body.edit-mode .add-process-btn-wrap { display: flex !important; }
   .process-regs-row { display: grid; grid-template-columns: 1fr; gap: 0.75rem; align-items: start; min-height: 80px; padding: 0.5rem 0; }
   body.edit-mode .process-regs-row:empty::before { content: 'ここにドロップ'; display: flex; align-items: center; justify-content: center; min-height: 72px; color: #94a3b8; font-size: 0.8rem; border: 2px dashed #cbd5e1; border-radius: 0.5rem; background: #fafafa; }
   @media (min-width: 640px) { .process-regs-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
   @media (min-width: 1024px) { .process-regs-row { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
   @media (min-width: 1536px) { .process-regs-row { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
   .process-section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem; }
   .process-section-title { font-weight: 700; color: #334155; font-size: 0.9rem; }
   .process-section.section-card { padding: 1rem; }
   body.edit-mode .process-section.section-card { border-color: #E2E8F0; }
   body.edit-mode .process-reg-block { border-color: #C7D2FE; }
   body.edit-mode.partner-detail-page .process-reg-block.process-reg-block--assy {
       background: #ecfdf5;
       border-color: #86efac;
   }
   body.edit-mode.partner-detail-page .process-reg-block.process-reg-block--process {
       background: #fff7ed;
       border-color: #fdba74;
   }
   .parent-item-info { font-size: 0.8125rem; }
   .parent-item-info .info-item { border-bottom: 1px solid #f1f5f9; padding: 0.5rem 0; }
   .parent-item-info .info-item:last-child { border-bottom: none; }
   .process-reg-block.draggable { cursor: grab; }
   .process-reg-block.draggable:active { cursor: grabbing; }
   .process-reg-block-delete-wrap { display: none; flex-shrink: 0; order: -1; }
   body.edit-mode .process-reg-block-delete-wrap { display: flex; }
   .process-reg-block.dragging { opacity: 0.6; }
   .process-reg-block.drag-over { outline: 2px dashed #6366f1; outline-offset: 2px; border-radius: 0.5rem; }
   body.edit-mode .process-reg-block { cursor: grab; }
   .process-reg-inner .ts-wrapper.field-input { padding: 0 !important; }

   /* 工程詳細: カード内グリッドで長文・select が列幅いっぱいに伸びる（モック process_detail と同様） */
   body.partner-detail-page .process-regs-row > .process-reg-block {
       min-width: 0;
   }
   body.partner-detail-page .process-reg-inner .field-pair-row > div,
   body.partner-detail-page .process-reg-inner .field-leadtime-row > div,
   body.partner-detail-page .process-reg-inner .process-reg-meta-pair > div {
       min-width: 0;
   }
   body.partner-detail-page .process-reg-inner .field-input,
   body.partner-detail-page .process-reg-inner select.field-input,
   body.partner-detail-page .process-reg-inner .field-value {
       max-width: 100%;
       box-sizing: border-box;
   }
   body.partner-detail-page .process-reg-inner .js-pr-item-ts + .ts-wrapper,
   body.partner-detail-page .process-reg-inner .js-pr-item-ts.ts-hidden-accessible + .ts-wrapper {
       width: 100%;
       max-width: 100%;
       min-width: 0;
   }
  .process-reg-item-link {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: auto;
      height: auto;
      color: #2563eb;
      text-decoration: none;
      background: transparent;
      border: none;
  }
  .process-reg-item-link:hover {
      color: #1d4ed8;
  }
  .process-reg-item-head-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 0.35rem;
      min-width: 0;
  }
  .process-reg-item-head-row > .field-label {
      margin-bottom: 0.125rem;
  }
  .process-reg-item-link--inline {
      flex-shrink: 0;
      margin-bottom: 0.125rem;
  }