/* ==========================================================================
   ProcessHack — アプリ共通スタイル（Bootstrap 5.3 の上に載せる 1 枚）
   読み込み順: vendor/bootstrap → vendor/jquery-ui → このファイル
   目次: 1.トークン 2.レイアウト 3.サイドバー 4.トップバー 5.ページヘッダ
         6.フィルタ 7.テーブル 8.バッジ 9.フォーム 10.取込カード
         11.ページネーション 12.モーダル 13.QRシート＋印刷 14.ユーティリティ
   ========================================================================== */

/* --- 1. トークン --------------------------------------------------------- */
:root {
  --ph-navy: #171c61;          /* ロゴのネイビー */
  --ph-navy-dark: #10143f;
  --ph-navy-soft: #2b3180;
  --ph-ink: #1f2430;
  --ph-muted: #6b7280;
  --ph-line: #e3e6ee;
  --ph-bg: #f4f5f9;
  --ph-surface: #ffffff;
  --ph-head: #f7f8fc;
  --ph-radius: 10px;
  --ph-sidebar-w: 220px;
  --ph-shadow: 0 1px 2px rgba(23, 28, 97, .06), 0 1px 10px rgba(23, 28, 97, .05);

  --bs-primary: var(--ph-navy);
  --bs-primary-rgb: 23, 28, 97;
  --bs-link-color: var(--ph-navy);
  --bs-link-color-rgb: 23, 28, 97;
  --bs-link-hover-color: var(--ph-navy-soft);
  --bs-body-color: var(--ph-ink);
  --bs-body-bg: var(--ph-bg);
  --bs-border-color: var(--ph-line);
}

body {
  background-color: var(--ph-bg);
  color: var(--ph-ink);
  font-size: .9rem;
  font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo,
    system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* ネイビーを主ボタン・リンクに流す（Bootstrap の変数をそのまま使う） */
.btn-primary {
  --bs-btn-bg: var(--ph-navy);
  --bs-btn-border-color: var(--ph-navy);
  --bs-btn-hover-bg: var(--ph-navy-soft);
  --bs-btn-hover-border-color: var(--ph-navy-soft);
  --bs-btn-active-bg: var(--ph-navy-dark);
  --bs-btn-active-border-color: var(--ph-navy-dark);
  --bs-btn-disabled-bg: var(--ph-navy);
  --bs-btn-disabled-border-color: var(--ph-navy);
}
.btn-outline-primary {
  --bs-btn-color: var(--ph-navy);
  --bs-btn-border-color: var(--ph-navy);
  --bs-btn-hover-bg: var(--ph-navy);
  --bs-btn-hover-border-color: var(--ph-navy);
  --bs-btn-active-bg: var(--ph-navy);
  --bs-btn-active-border-color: var(--ph-navy);
}
.form-control:focus,
.form-select:focus {
  border-color: var(--ph-navy-soft);
  box-shadow: 0 0 0 .2rem rgba(23, 28, 97, .15);
}

/* --- 2. レイアウト ------------------------------------------------------- */
.ph-main {
  min-height: 100vh;
  margin-left: 0;
}
.ph-page {
  padding: 1rem 1.25rem 3rem;
}
@media (min-width: 992px) {
  .ph-main { margin-left: var(--ph-sidebar-w); }
}
@media (max-width: 575.98px) {
  .ph-page { padding: .75rem .75rem 2.5rem; }
}

/* --- 3. サイドバー ------------------------------------------------------- */
/* 1 枚の markup を Bootstrap の responsive offcanvas（.offcanvas-lg）で兼用する。
   992px 以上では固定レール、未満ではオフキャンバス。 */
.ph-sidebar.offcanvas-lg {
  /* Bootstrap が 992px 未満で offcanvas として使う変数。既定の 400px は狭い画面で
     画面全体を覆ってしまうため絞る。992px 以上は下の固定レール指定が勝つ。 */
  --bs-offcanvas-width: 280px;
  background-color: var(--ph-navy) !important;
  color: #e9eaf5;
  border-right: 0;
}
.ph-sidebar .offcanvas-header { color: #fff; }
.ph-sidebar .offcanvas-body {
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow-y: auto;
}
@media (min-width: 992px) {
  .ph-sidebar.offcanvas-lg {
    position: fixed;
    top: 0;
    left: 0;
    width: var(--ph-sidebar-w);
    height: 100vh;
    z-index: 1030;
  }
  .ph-sidebar .offcanvas-body { height: 100vh; }
}
.ph-sidebar__brand {
  display: block;
  padding: 1.1rem 1rem .9rem;
}
.ph-sidebar__brand img {
  display: block;
  width: 100%;
  max-width: 160px;
  height: auto;
  /* ロゴはネイビー単色。ネイビー地の上では白く反転させて使う */
  filter: brightness(0) invert(1);
}
.ph-nav { flex: 1 1 auto; padding: .25rem 0 1rem; }
.ph-nav-group { padding: .35rem 0 .6rem; }
.ph-nav-group__label {
  margin: 0;
  padding: .45rem 1rem .25rem;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .08em;
  color: rgba(233, 234, 245, .55);
}
.ph-nav-link {
  display: block;
  padding: .5rem 1rem;
  color: #e9eaf5;
  font-size: .85rem;
  text-decoration: none;
  border-left: 3px solid transparent;
}
.ph-nav-link:hover,
.ph-nav-link:focus { background-color: rgba(255, 255, 255, .08); color: #fff; }
.ph-nav-link.is-active {
  background-color: rgba(255, 255, 255, .14);
  border-left-color: #fff;
  font-weight: 700;
  color: #fff;
}
.ph-sidebar__foot {
  flex: 0 0 auto;
  padding: .5rem 0 1rem;
  border-top: 1px solid rgba(255, 255, 255, .14);
}

/* --- 4. トップバー ------------------------------------------------------- */
.ph-topbar {
  position: sticky;
  top: 0;
  z-index: 1020;
  display: flex;
  align-items: center;
  gap: .75rem;
  min-height: 48px;
  padding: .4rem .9rem;
  background-color: var(--ph-surface);
  border-bottom: 1px solid var(--ph-line);
}
.ph-topbar__user {
  margin: 0 0 0 auto;
  font-size: .8rem;
  color: var(--ph-muted);
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ph-topbar__logo { height: 22px; width: auto; }

/* --- 5. ページヘッダ ----------------------------------------------------- */
.ph-page-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem .75rem;
  margin: .25rem 0 1rem;
}
.ph-page-header__title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--ph-navy);
}
.ph-page-header__sub {
  margin: 0;
  font-size: .8rem;
  color: var(--ph-muted);
}
.ph-page-header__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-left: auto;
}
.ph-section-title {
  margin: 1.25rem 0 .5rem;
  font-size: 1rem;
  font-weight: 700;
  color: var(--ph-ink);
}

/* --- 6. フィルタカード --------------------------------------------------- */
.ph-filter-card {
  margin-bottom: 1rem;
  padding: .75rem .9rem;
  background-color: var(--ph-surface);
  border: 1px solid var(--ph-line);
  border-radius: var(--ph-radius);
  box-shadow: var(--ph-shadow);
}
.ph-filter .form-label {
  margin-bottom: .2rem;
  font-size: .72rem;
  font-weight: 700;
  color: var(--ph-muted);
}
.ph-filter .form-control,
.ph-filter .form-select { font-size: .85rem; }
.ph-filter__field { min-width: 9rem; }
.ph-filter__field--wide { min-width: 12rem; }
.ph-filter__range { display: flex; align-items: center; gap: .35rem; }
.ph-filter__range .form-control { min-width: 8.5rem; }
.ph-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: .6rem;
}

/* --- 7. テーブルカード --------------------------------------------------- */
.ph-table-card {
  background-color: var(--ph-surface);
  border: 1px solid var(--ph-line);
  border-radius: var(--ph-radius);
  box-shadow: var(--ph-shadow);
  overflow: hidden;
}
.ph-table-card > .table-responsive { margin-bottom: 0; }
.ph-table-card .table {
  margin-bottom: 0;
  font-size: .82rem;
  --bs-table-hover-bg: rgba(23, 28, 97, .04);
}
.ph-table-card .table > thead th {
  background-color: var(--ph-head);
  color: var(--ph-muted);
  font-size: .74rem;
  font-weight: 700;
  white-space: nowrap;
  border-bottom: 1px solid var(--ph-line);
}
.ph-table-card .table > tbody td,
.ph-table-card .table > tbody th {
  vertical-align: middle;
  font-weight: 400;
}
.ph-table-card .table .ph-col-actions { white-space: nowrap; }
.ph-table-card .table .ph-col-num { width: 4.5rem; }
.ph-truncate {
  display: inline-block;
  max-width: 11rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
}
.ph-truncate--wide { max-width: 16rem; }
tr.ph-row-idle > * { background-color: #fbfbfd; }
.ph-empty { padding: 1.5rem; color: var(--ph-muted); text-align: center; }

/* --- 8. ステータスバッジ ------------------------------------------------- */
.ph-badge {
  display: inline-block;
  padding: .2rem .5rem;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 700;
  line-height: 1.3;
  white-space: nowrap;
}
.ph-badge--1 { background-color: #e7e9ef; color: #4a5160; }           /* 未着手 */
.ph-badge--2 { background-color: var(--ph-navy); color: #fff; }       /* 作業中 */
.ph-badge--3 { background-color: #198754; color: #fff; }              /* 作業完了 */
.ph-badge--4 { background-color: #ffc107; color: #4a3b00; }           /* 出荷待ち */
.ph-badge--5 { background-color: #343a40; color: #fff; }              /* 出荷済み */
.ph-badge--ng { background-color: #dc3545; color: #fff; }
.ph-badge--order-1 { background-color: #cff4fc; color: #055160; }     /* 内示 */
.ph-badge--order-2 { background-color: #d6d8ef; color: var(--ph-navy); } /* 確定 */

/* --- 9. フォーム --------------------------------------------------------- */
.ph-form-card {
  max-width: 720px;
  padding: 1.1rem 1.2rem;
  background-color: var(--ph-surface);
  border: 1px solid var(--ph-line);
  border-radius: var(--ph-radius);
  box-shadow: var(--ph-shadow);
}
.ph-form-card--wide { max-width: 960px; }
.ph-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: .5rem;
  margin-top: 1rem;
}
/* 旧テンプレート由来の素の widget にも見た目を与える */
.ph-form-card input[type="text"]:not(.form-control),
.ph-form-card input[type="email"]:not(.form-control),
.ph-form-card input[type="number"]:not(.form-control),
.ph-form-card input[type="password"]:not(.form-control),
.ph-form-card textarea:not(.form-control),
.ph-form-card select:not(.form-select) {
  display: block;
  width: 100%;
  padding: .375rem .75rem;
  font-size: .9rem;
  line-height: 1.5;
  color: var(--ph-ink);
  background-color: #fff;
  border: 1px solid var(--ph-line);
  border-radius: .375rem;
}
.ph-field-hint { display: block; margin-top: .25rem; font-size: .75rem; color: var(--ph-muted); }
.ph-messages { margin-bottom: 1rem; }
.ph-messages .alert:last-child { margin-bottom: 0; }

/* ログイン */
.ph-login-body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem 1rem;
  background: linear-gradient(160deg, var(--ph-navy) 0%, var(--ph-navy-dark) 100%);
}
.ph-login-card {
  width: 100%;
  max-width: 400px;
  padding: 1.75rem 1.5rem 1.4rem;
  background-color: var(--ph-surface);
  border-radius: 14px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .3);
}
.ph-login-card__logo { margin: 0 0 1.25rem; text-align: center; }
.ph-login-card__logo img { width: 100%; max-width: 230px; height: auto; }
.ph-login-card__foot {
  margin: 1.1rem 0 0;
  font-size: .72rem;
  color: var(--ph-muted);
  text-align: center;
}

/* --- 10. 取込カード（オプション・CSV） ----------------------------------- */
.ph-import-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
  margin: 0 0 1rem;
  padding: 0;
  list-style: none;
}
@media (min-width: 992px) {
  .ph-import-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.ph-import-card {
  padding: .9rem 1rem 1rem;
  background-color: var(--ph-surface);
  border: 1px solid var(--ph-line);
  border-radius: var(--ph-radius);
  box-shadow: var(--ph-shadow);
}
.ph-import-card__head {
  margin-bottom: .75rem;
  font-size: .9rem;
  font-weight: 700;
  color: var(--ph-navy);
}
.ph-route-msg { font-size: .78rem; color: var(--ph-muted); }
.ph-route-msg--error { color: #b02a37; }
.ph-route-blocked { margin: 0; font-size: .8rem; color: #b02a37; }

/* --- 11. ページネーション ------------------------------------------------ */
.ph-pagination { margin-top: 1rem; }
.ph-pagination .pagination { margin-bottom: 0; }
.ph-pagination .page-link { color: var(--ph-navy); font-size: .82rem; }
.ph-pagination .page-item.active .page-link {
  background-color: var(--ph-navy);
  border-color: var(--ph-navy);
  color: #fff;
}

/* --- 12. モーダル -------------------------------------------------------- */
.modal-title { font-size: 1rem; font-weight: 700; color: var(--ph-navy); }
.ph-modal-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem .75rem;
  margin-bottom: .75rem;
}
.ph-modal-row__label {
  flex: 0 0 8rem;
  margin: 0;
  font-size: .8rem;
  font-weight: 700;
  color: var(--ph-muted);
}
.ph-modal-row__body { flex: 1 1 12rem; min-width: 0; }
.ph-modal-scroll { max-height: 40vh; overflow-y: auto; }
/* jQuery UI datepicker は Bootstrap modal（z-index 1055）より前に出す */
.ui-datepicker { z-index: 1080 !important; font-size: .85rem; }

/* --- 13. QR シート（印刷） ----------------------------------------------- */
.ph-qr-sheet__title { margin: 0 0 .75rem; font-size: 1rem; font-weight: 700; }
.ph-qr-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 6mm 5mm;
}
.ph-qr-label {
  padding: 3mm;
  background-color: #fff;
  border: 1px solid #c9ccda;
  border-radius: 4px;
  text-align: center;
  break-inside: avoid;
}
.ph-qr-label__img { display: block; width: 100%; max-width: 32mm; height: auto; margin: 0 auto 2mm; }
.ph-qr-label__name { font-size: .78rem; font-weight: 700; word-break: break-all; }
.ph-qr-label__code { font-size: .7rem; color: var(--ph-muted); word-break: break-all; }
.ph-qr-label__meta { font-size: .66rem; color: var(--ph-muted); }

@media print {
  @page { size: A4; margin: 10mm; }
  body { background: #fff; }
  .ph-sidebar,
  .ph-topbar,
  .ph-noprint,
  .ph-page-header,
  .ph-messages,
  .ph-filter-card,
  .ph-pagination { display: none !important; }
  .ph-main { margin-left: 0 !important; }
  .ph-page { padding: 0 !important; }
  .ph-qr-grid { grid-template-columns: repeat(4, 1fr); gap: 4mm; }
  .ph-qr-label { border-color: #888; }
  a[href]:after { content: none !important; }
}

/* --- 14. ユーティリティ -------------------------------------------------- */
.ph-nowrap { white-space: nowrap; }
.ph-num { text-align: right; font-variant-numeric: tabular-nums; }
.ph-hidden { display: none !important; }
.ph-stack { display: flex; flex-wrap: wrap; gap: .5rem; }
.ph-hr { margin: 0 0 1rem; border: 0; border-top: 1px solid var(--ph-line); }