/* --------------------------------------------------------------------------
   アクアフーズ 受発注システム - custom stylesheet

   ServerModule.CustomFiles に 'files/app.css' を登録してあるので、
   uniGUI がメインページに <link rel="stylesheet"> を出力する。
   uniGUI(Ext JS) 側の CSS より後に読み込まれるため、ここでの指定が勝つ。

   ブレークポイントの数値は uAppTypes.pas の WidthToBreakpoint と揃える
   （768 / 1100）。Delphi 側と CSS 側で数字がずれると挙動が食い違う。
   -------------------------------------------------------------------------- */

/* ==== サイドメニューの選択中ボタン ==========================================
   Main.pas の HighlightMenu が
     Button.JSInterface.JSCall('addCls', ['nav-active'])
   で付け外ししているクラス。                                                */

.nav-active .x-btn-inner {
  color: #ffffff !important;
  font-weight: bold;
}

.nav-active .x-btn-icon-el {
  color: #ffffff !important;
}

.nav-active {
  background-color: #0f6f43 !important;
  background-image: none !important;
  border-color: #0f6f43 !important;
  border-radius: 4px;
}

/* サイドメニューのボタンは左寄せのほうがメニューらしい。
   .side-menu は Main.dfm の pnlSide.LayoutConfig.Cls で付けている。

   Ext は既定で「アイコン + ラベル」をひとかたまりにしてボタン中央に置くため、
   左に大きな余白ができる。包んでいる .x-btn-button / .x-btn-wrap を左寄せにする。 */
.side-menu .x-btn-button,
.side-menu .x-btn-wrap {
  text-align: left !important;
  justify-content: flex-start !important;
}

.side-menu .x-btn-inner {
  text-align: left !important;
}

.side-menu .x-btn-icon-el {
  margin-right: 10px !important;
}

/* ==== スケルトン画面（uFrmPlaceholder / Mainm） ============================ */

.ph-wrap {
  font-family: "Segoe UI", "Meiryo", "Yu Gothic UI", sans-serif;
  padding: 20px;
  color: #333333;
}

.ph-lead {
  font-size: 14px;
  color: #555555;
  line-height: 1.7;
  margin-bottom: 16px;
}

.ph-card {
  background: #ffffff;
  border: 1px solid #dddddd;
  border-radius: 6px;
  padding: 16px 20px;
  margin-bottom: 16px;
  max-width: 900px;
}

.ph-card-head {
  font-weight: bold;
  font-size: 14px;
  color: #0f6f43;
  border-bottom: 2px solid #0f6f43;
  padding-bottom: 6px;
  margin-bottom: 12px;
}

.ph-list {
  margin: 0;
  padding-left: 20px;
  line-height: 2.0;
  font-size: 14px;
}

.ph-note {
  background: #f7faf8;
}

.ph-table {
  border-collapse: collapse;
  font-size: 13px;
}

.ph-table th {
  text-align: left;
  color: #666666;
  font-weight: normal;
  padding: 4px 20px 4px 0;
  white-space: nowrap;
  vertical-align: top;
}

.ph-table td {
  padding: 4px 0;
}

/* スマホ側は余白を詰める */
.ph-mobile {
  padding: 12px;
}

.ph-mobile .ph-card {
  padding: 12px 14px;
}

.ph-mobile .ph-list {
  line-height: 1.9;
  font-size: 13px;
}

/* ==== 受注入力（確認・送信ステップの伝票表示） ============================ */

.oe-wrap {
  font-family: "Segoe UI", "Meiryo", "Yu Gothic UI", sans-serif;
  padding: 16px;
  color: #333333;
}

.oe-slip {
  background: #ffffff;
  border: 1px solid #dddddd;
  border-radius: 6px;
  padding: 16px 20px;
  max-width: 860px;
}

.oe-slip-head {
  border-bottom: 2px solid #0f6f43;
  padding-bottom: 8px;
  margin-bottom: 12px;
}

.oe-slip-title {
  font-size: 16px;
  font-weight: bold;
  color: #0f6f43;
  margin-right: 14px;
}

.oe-slip-sub {
  font-size: 12px;
  color: #666666;
}

.oe-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.oe-table th {
  background: #f2f6f4;
  border-bottom: 1px solid #dddddd;
  padding: 6px 8px;
  text-align: left;
  font-weight: normal;
  color: #555555;
}

.oe-table td {
  border-bottom: 1px solid #eeeeee;
  padding: 6px 8px;
}

.oe-table .r, .oe-total td {
  text-align: right;
}

.oe-table .c {
  text-align: center;
}

.oe-total {
  margin-top: 12px;
  margin-left: auto;
  border-collapse: collapse;
  font-size: 13px;
}

.oe-total th {
  text-align: right;
  font-weight: normal;
  color: #666666;
  padding: 4px 16px 4px 0;
}

.oe-total td {
  padding: 4px 0;
  min-width: 110px;
}

.oe-total .oe-grand th,
.oe-total .oe-grand td {
  font-size: 17px;
  font-weight: bold;
  color: #0f6f43;
  border-top: 2px solid #0f6f43;
  padding-top: 8px;
}

.oe-note {
  margin-top: 14px;
  font-size: 12px;
  color: #555555;
  background: #f7faf8;
  border-left: 3px solid #0f6f43;
  padding: 8px 12px;
}

/* ==== ログイン画面のデモ用アカウント案内 ================================== */

.demo-box {
  font-family: "Segoe UI", "Meiryo", "Yu Gothic UI", sans-serif;
  font-size: 12px;
  color: #555555;
}

.demo-head {
  font-weight: bold;
  color: #0f6f43;
  margin-bottom: 6px;
}

.demo-table {
  border-collapse: collapse;
  width: 100%;
}

.demo-table td {
  padding: 2px 0;
  vertical-align: top;
}

.demo-table td:first-child {
  width: 76px;
  font-family: Consolas, "Courier New", monospace;
  color: #333333;
}

/* ==== ブレークポイント ==================================================== */

/* タブレット以下 (< 1100px) */
@media (max-width: 1099px) {
  .ph-wrap {
    padding: 14px;
  }
}

/* スマホ (< 768px) */
@media (max-width: 767px) {
  .ph-wrap {
    padding: 10px;
  }

  .ph-list {
    font-size: 13px;
  }
}

/* ------------------------------------------------------------------
   家具図面管理システム 追加分
   ------------------------------------------------------------------ */

/* 切り出し画面のモード選択ボタン（TUniButton に押下状態が無いので CSS で示す） */
.mode-on .x-btn-inner,
.mode-on .x-btn-button {
  font-weight: 700;
}
.mode-on {
  outline: 2px solid #215a70;
  outline-offset: -2px;
}

/* 検索タグの説明など、画面上の補足文 */
.hint-note {
  color: #6b7280;
  font-size: 12px;
  line-height: 1.7;
}

/* ========== 図面・添付のカード一覧（uFrmSiteDetail の htmlFiles） ========== */

.fc-wrap{ padding:10px 8px; }

.fc-card{
  display:flex; align-items:stretch; gap:14px;
  background:#fff; border:1px solid #d7dde5; border-radius:6px;
  padding:10px 12px; margin:0 0 10px 0; cursor:pointer;
  transition:border-color .12s, box-shadow .12s, background .12s;
}
.fc-card:hover{ border-color:#7fa8d8; box-shadow:0 1px 6px rgba(0,0,0,.10); }
.fc-card.fc-sel{ border-color:#1f4e8c; background:#eef4fc; box-shadow:0 0 0 1px #1f4e8c inset; }

/* 左のサムネイル。枠の大きさは固定して、画像だけ中で収める */
.fc-thumb{
  flex:0 0 160px; width:160px; height:120px;
  display:flex; align-items:center; justify-content:center;
  background:#f4f6f9; border:1px solid #e2e7ee; border-radius:4px; overflow:hidden;
}
.fc-thumb img{ max-width:100%; max-height:100%; display:block; }
.fc-noimg{ color:#8a97a8; font-size:12px; font-weight:bold; letter-spacing:.04em; }

.fc-body{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; justify-content:center; }
.fc-title{
  font-size:15px; font-weight:bold; color:#1a2a3a; margin-bottom:6px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.fc-meta{ margin-bottom:5px; }
.fc-tag{
  display:inline-block; font-size:11px; line-height:18px; padding:0 8px;
  border-radius:9px; background:#e8edf4; color:#41536b; margin-right:6px;
}
.fc-tag.fc-kind{ background:#1f4e8c; color:#fff; }
.fc-tag.fc-open{ background:#1d7a4d; color:#fff; }
.fc-sub{ font-size:12px; color:#5a6b80; }
.fc-orig{
  font-size:11px; color:#8a97a8; margin-top:3px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

.fc-empty{ padding:28px 12px; color:#7b8798; font-size:13px; text-align:center; }

/* 狭い画面ではサムネイルを小さくして、1 行に収まる情報を優先する */
@media (max-width:767px){
  .fc-card{ gap:10px; padding:8px; }
  .fc-thumb{ flex:0 0 96px; width:96px; height:76px; }
  .fc-title{ font-size:14px; }
  .fc-orig{ display:none; }
}

/* キャッシュ制御の確認用（この行は残してよい） */

/* ========== 保存領域のインジケーター（uFrmFiles の htmlGauge） ========== */

.qg-wrap{ font-size:13px; color:#1a2a3a; }
.qg-label{ font-weight:bold; margin-bottom:4px; }

.qg-bar{
  position:relative; height:26px; border-radius:13px; overflow:hidden;
  background:#e8edf4; border:1px solid #d7dde5;
}
.qg-fill{ position:absolute; left:0; top:0; bottom:0; transition:width .25s; }
.qg-bar.qg-ok     .qg-fill{ background:#2f7ed8; }
.qg-bar.qg-warn   .qg-fill{ background:#e08a1e; }
.qg-bar.qg-danger .qg-fill{ background:#c0392b; }

.qg-text{
  position:relative; line-height:26px; text-align:center;
  font-weight:bold; color:#1a2a3a; text-shadow:0 0 3px rgba(255,255,255,.85);
}
.qg-bar.qg-nolimit .qg-text{ color:#5a6b80; font-weight:normal; }

.qg-free{ margin-top:4px; font-size:12px; color:#5a6b80; }

/* ========== 明細の切り出し一覧（uFrmSiteDetail の htmlItemCrops） ==========
   一覧の右に置く細い欄なので、サムネイルを上・文字を下の縦積みにする。 */

.fc-tag.fc-item{ background:#fff3d6; color:#7a5300; }

.ic-wrap{ padding:8px; }
.ic-head{
  font-size:13px; font-weight:bold; color:#1a2a3a;
  margin:2px 2px 8px 2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.ic-card{
  background:#fff; border:1px solid #d7dde5; border-radius:6px;
  padding:8px; margin:0 0 10px 0; cursor:pointer;
  transition:border-color .12s, box-shadow .12s;
}
.ic-card:hover{ border-color:#7fa8d8; box-shadow:0 1px 6px rgba(0,0,0,.10); }
.ic-thumb{
  height:150px; display:flex; align-items:center; justify-content:center;
  background:#f4f6f9; border:1px solid #e2e7ee; border-radius:4px; overflow:hidden;
}
.ic-thumb img{ max-width:100%; max-height:100%; display:block; }
.ic-title{
  font-size:13px; font-weight:bold; color:#1a2a3a; margin:6px 0 3px 0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.ic-sub{ font-size:11px; color:#5a6b80; }
.ic-empty{ padding:24px 10px; color:#7b8798; font-size:12px; text-align:center; line-height:1.7; }

/* ---- 切り出す図面を選ぶダイアログ（uFrmPickSource。2026-11-01）
   この物件 / 全体 の切り替え、カードは横 2 枚（スマホ幅は 1 枚）。ページ送りは .fm-pager を使う ---- */
.ps-scope{ display:flex; flex-wrap:wrap; gap:6px; margin:0 0 10px 0; }
.ps-tab{
  display:inline-block; padding:5px 14px; font-size:13px; border:1px solid #c9d3df; border-radius:16px;
  background:#fff; color:#1f4e8c; cursor:pointer;
}
.ps-tab:hover{ background:#eef4fc; }
.ps-tab.ps-on{ background:#1f4e8c; border-color:#1f4e8c; color:#fff; cursor:default; }
.ps-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
/* 図面・添付タブ（uFrmSiteDetail の htmlFiles）は横 3 枚・30 件ごと（2026-11-01）。カードの中は選ぶダイアログと同じ */
.fc-grid3{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.ps-grid .fc-card, .fc-grid3 .fc-card{ margin:0; gap:10px; padding:8px 10px; user-select:none; -webkit-user-select:none; }
.ps-grid .fc-thumb, .fc-grid3 .fc-thumb{ flex:0 0 120px; width:120px; height:90px; }
.ps-grid .fc-title, .fc-grid3 .fc-title{ font-size:14px; margin-bottom:4px; }
.fc-grid3 .fc-tag{ margin-bottom:3px; }
.fc-grid3 + .fm-pager{ margin:12px 0 4px 0; }
.ps-site{ font-size:12px; color:#41536b; margin-bottom:4px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ps-site .fc-tag{ margin-right:4px; }
@media (max-width:1100px){ .fc-grid3{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:767px){ .ps-grid, .fc-grid3{ grid-template-columns:minmax(0,1fr); } }

/* ========== ファイル管理のカード（uFrmFiles の htmlCards / htmlUsage。2026-10-31） ==========
   横に最大 3 枚。狭い幅では 2 枚 → 1 枚に落とす。 */

.fm-wrap{ padding:10px 10px 16px 10px; }
.fm-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.fm-card{
  background:#fff; border:1px solid #d7dde5; border-radius:6px; padding:10px;
  cursor:pointer; min-width:0; user-select:none; -webkit-user-select:none;
  transition:border-color .12s, box-shadow .12s, background .12s;
}
.fm-card:hover{ border-color:#7fa8d8; box-shadow:0 1px 6px rgba(0,0,0,.10); }
.fm-card.fm-sel{ border-color:#1f4e8c; background:#eef4fc; box-shadow:0 0 0 1px #1f4e8c inset; }
.fm-thumb{
  height:150px; display:flex; align-items:center; justify-content:center;
  background:#f4f6f9; border:1px solid #e2e7ee; border-radius:4px; overflow:hidden;
}
.fm-thumb img{ max-width:100%; max-height:100%; display:block; }
.fm-title{
  font-size:14px; font-weight:bold; color:#1a2a3a; margin:8px 0 5px 0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.fm-meta{ margin-bottom:4px; }
.fm-size{ font-size:12px; color:#41536b; font-weight:bold; }
.fm-date{ font-size:11px; color:#7a8796; margin-left:8px; }
.fm-sub{ font-size:12px; color:#5a6b80; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fm-dim{ color:#8a97a8; }

.fm-pager{ display:flex; align-items:center; flex-wrap:wrap; gap:6px; margin:2px 0 10px 0; }
.fm-count{ font-size:13px; color:#41536b; margin-right:10px; }
.fm-pg{
  display:inline-block; min-width:28px; padding:3px 8px; text-align:center; font-size:13px;
  border:1px solid #c9d3df; border-radius:4px; background:#fff; color:#1f4e8c; cursor:pointer;
}
.fm-pg:hover{ background:#eef4fc; }
.fm-pg.fm-cur{ background:#1f4e8c; border-color:#1f4e8c; color:#fff; cursor:default; }

.fu-rel{ font-size:12px; font-weight:bold; color:#7a5300; margin:10px 2px 6px 2px; }
.fu-item{ background:#fff; border:1px solid #d7dde5; border-radius:6px; padding:8px; margin:0 0 8px 0; }
.fu-site{ font-size:11px; color:#5a6b80; }
.fu-name{ font-size:13px; font-weight:bold; color:#1a2a3a; margin:2px 0 3px 0; }
.fu-open{ display:inline-block; margin-top:5px; font-size:12px; color:#1f4e8c; cursor:pointer; text-decoration:underline; }

@media (max-width:1100px){ .fm-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:767px){ .fm-grid{ grid-template-columns:minmax(0,1fr); } }

/* ---- 他社への表示項目（uFrmPartnerColumn。2026-10-31） ---- */
.pc-wrap{ padding:10px 14px 18px 14px; }
.pc-lead{ font-size:13px; color:#41536b; line-height:1.6; margin:0 0 12px 0; }
.pc-lead-warn{ margin-top:4px; padding:4px 10px; border-radius:4px; background:#fff3cd; color:#5c4400; font-weight:bold; }
.pc-lead-sub{ margin-top:2px; color:#5a6b80; }
.pc-group{ margin-bottom:18px; }
.pc-gh{ font-size:15px; font-weight:bold; color:#1a2a3a; margin:4px 0 6px 0; }
.pc-tbl{ width:100%; border-collapse:collapse; font-size:13px; background:#fff; }
.pc-tbl th{ text-align:left; font-weight:bold; color:#41536b; background:#f2f5f9; border-bottom:1px solid #d5dde8; padding:6px 8px; }
.pc-tbl td{ border-bottom:1px solid #e6ebf2; padding:6px 8px; vertical-align:middle; }
.pc-c1{ width:34%; } .pc-c4{ width:66%; }
.pc-tbl tr.pc-dim td{ color:#8a97a8; background:#fafbfc; }
.pc-tbl tr.pc-new td{ background:#fff8e6; }
.pc-btn{
  display:inline-block; padding:3px 12px; margin-right:6px; border:1px solid #c5d0de; border-radius:4px;
  font-size:12px; color:#41536b; background:#fff; cursor:pointer; user-select:none;
}
.pc-btn:hover{ background:#eef4fc; }
.pc-btn.pc-show.pc-on{ background:#1f6f3f; border-color:#1f6f3f; color:#fff; }
.pc-btn.pc-hide.pc-on{ background:#8c2f1f; border-color:#8c2f1f; color:#fff; }
.pc-badge{ display:inline-block; padding:1px 8px; border-radius:10px; font-size:11px; background:#f0b429; color:#3a2a00; }
.pc-warn{ display:inline-block; padding:0 6px; border-radius:8px; font-size:11px; background:#fde2e1; color:#8c2f1f; margin-left:4px; }
.pc-fixed{ font-weight:bold; color:#1f6f3f; margin-right:8px; }
.pc-sys{ font-weight:bold; color:#8a97a8; margin-right:8px; }
.pc-note{ font-size:11px; color:#8a97a8; }
@media (max-width:767px){
  .pc-c1{ width:40%; } .pc-c4{ width:60%; }
  .pc-btn{ margin:2px 4px 2px 0; }
}