/* ============================================================
   Josys 連携アプリ一覧 早見表／詳細ビュー
   対象記事: 5080138646686（アプリごとのサポート範囲）
   style.css の末尾に追記してください。
   すべて .saas-app-matrix 配下にスコープしているので、
   他の記事・テーマ全体には影響しません。
   ============================================================ */
.saas-app-matrix,
.saas-app-matrix * { box-sizing: border-box; }

.saas-app-matrix {
  --saas-am-surface-1:      #fcfcfb;
  --saas-am-page-plane:     #f9f9f7;
  --saas-am-text-primary:   #0b0b0b;
  --saas-am-text-secondary: #52514e;
  --saas-am-text-muted:     #898781;
  --saas-am-gridline:       #e1e0d9;
  --saas-am-baseline:       #c3c2b7;
  --saas-am-border:         rgba(11,11,11,0.10);
  --saas-am-border-strong:  rgba(11,11,11,0.18);

  --saas-am-create:  #2a78d6; /* 作成 */
  --saas-am-suspend: #eb6834; /* 停止 */
  --saas-am-delete:  #1baf7a; /* 削除 */
  --saas-am-role:    #eda100; /* ロール変更 */
  --saas-am-lic:     #e87ba4; /* ライセンス変更 */
  --saas-am-licv:    #008300; /* ライセンス可視化 */
  --saas-am-nu:      #4a3aa7; /* 非活用判定 */
  --saas-am-rolev:   #e34948; /* ロール可視化 */

  --saas-am-band-op:          rgba(42,120,214,0.08);
  --saas-am-band-op-solid:    #ebf1f8; /* band-opの不透明版。固定表示中に下の行がにじんで見えないようにするため */
  --saas-am-band-info:        rgba(227,73,72,0.07);
  --saas-am-band-info-solid:  #faefee; /* band-infoの不透明版。band-opと同じ理由でヘッダー固定表示に使う */
  --saas-am-band-op-text:     #1a5aa8;
  --saas-am-band-info-text:   #a83432;

  font-family: system-ui, -apple-system, "Segoe UI", "Hiragino Sans", "Noto Sans JP", sans-serif;
  background: transparent;
  color: var(--saas-am-text-primary);
  display: block;
  max-width: 100%;
  margin: 0 auto;
  padding: 12px 0 40px;
}

.saas-app-matrix__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 18px; }
.saas-app-matrix__h1 { font-size: 20px; margin: 0 0 4px; font-weight: 700; }
.saas-app-matrix__sub { font-size: 14.5px; color: var(--saas-am-text-secondary); margin: 0; max-width: 640px; line-height: 1.6; }

.saas-app-matrix__controls { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.saas-app-matrix__search-wrap { flex: 1; min-width: 220px; max-width: 340px; }
.saas-app-matrix__search {
  width: 100%; padding: 9px 12px; border-radius: 8px;
  border: 1px solid var(--saas-am-border-strong);
  background: var(--saas-am-surface-1); color: var(--saas-am-text-primary);
  font-size: 14px; outline: none;
}
.saas-app-matrix__search:focus { border-color: var(--saas-am-create); }

.saas-app-matrix__tabs { display: inline-flex; background: var(--saas-am-surface-1); border: 1px solid var(--saas-am-border); border-radius: 9px; padding: 3px; gap: 2px; }
.saas-app-matrix__tab-btn { border: none; background: transparent; color: var(--saas-am-text-secondary); font-size: 14px; font-weight: 600; padding: 7px 14px; border-radius: 7px; cursor: pointer; }
.saas-app-matrix__tab-btn--active { background: var(--saas-am-create); color: #fff; }

.saas-app-matrix__csv-btn {
  display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600;
  padding: 7px 14px; border-radius: 7px; border: 1px solid var(--saas-am-border-strong);
  background: var(--saas-am-surface-1); color: var(--saas-am-text-secondary); cursor: pointer;
}
.saas-app-matrix__csv-btn:hover { border-color: var(--saas-am-create); color: var(--saas-am-create); }

.saas-app-matrix__result-count { font-size: 13px; color: var(--saas-am-text-muted); margin-left: auto; }

.saas-app-matrix__legend { background: var(--saas-am-surface-1); border: 1px solid var(--saas-am-border); border-radius: 10px; padding: 12px 16px; margin-bottom: 16px; font-size: 13px; color: var(--saas-am-text-secondary); }
.saas-app-matrix__filter-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.saas-app-matrix__filter-row:last-of-type { margin-bottom: 0; }
.saas-app-matrix__filter-row-label { font-weight: 700; font-size: 12px; padding: 2px 8px; border-radius: 5px; flex-shrink: 0; }
.saas-app-matrix__filter-row-label--op   { background: var(--saas-am-band-op);   color: var(--saas-am-band-op-text); }
.saas-app-matrix__filter-row-label--info { background: var(--saas-am-band-info); color: var(--saas-am-band-info-text); }
.saas-app-matrix__legend-item { display: flex; align-items: center; gap: 6px; }
.saas-app-matrix__dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex-shrink: 0; }

.saas-app-matrix__chip-filter {
  display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600;
  padding: 5px 11px 5px 8px; border-radius: 999px; border: 1px solid var(--saas-am-border-strong);
  background: var(--saas-am-surface-1); color: var(--saas-am-text-secondary); cursor: pointer;
  transition: background .1s, color .1s, border-color .1s;
}
.saas-app-matrix__chip-filter .saas-app-matrix__dot { border: 1.5px solid currentColor; background: transparent !important; }
.saas-app-matrix__chip-filter:hover { border-color: var(--saas-am-text-muted); color: var(--saas-am-text-primary); }
.saas-app-matrix__chip-filter--active { color: #fff; border-color: transparent; }
.saas-app-matrix__chip-filter--active .saas-app-matrix__dot { border-color: #fff; background: #fff !important; }
.saas-app-matrix__filter-clear { font-size: 12.5px; color: var(--saas-am-text-muted); background: none; border: none; text-decoration: underline; cursor: pointer; padding: 0; margin-left: 4px; }
.saas-app-matrix__status-legend { display: flex; flex-wrap: wrap; gap: 8px 16px; padding-top: 8px; margin-top: 8px; border-top: 1px solid var(--saas-am-gridline); }

.saas-app-matrix__panel { display: none; }
.saas-app-matrix__panel--active { display: block; }

/* 角丸＋枠線は、スクロールする内側ではなく外側の枠(matrix-frame)だけに付ける。
   sticky なヘッダー/列がスクロール中に角丸の外へ描画され、枠線が途切れて
   裏側が見えてしまう現象を避けるため（内側はoverflow:hiddenにしない＝スクロール用）。 */
.saas-app-matrix__matrix-frame { border: 1px solid var(--saas-am-border); border-radius: 10px; background: var(--saas-am-surface-1); overflow: hidden; }
.saas-app-matrix__matrix-scroll { overflow: auto; max-height: 72vh; }

/* ここから下： 実機（本番テーマ）を直接調査した結果、テーマの記事本文の既定表スタイル
   （.article-body table / .article-body table th / .article-body table td）が
     border: 1px solid #333 / 1px dashed #bbb を !important で強制し、
     border-collapse: collapse・font-size: 15px・padding: 18px 20px なども
     table 要素込みの高詳細度セレクタで上書きしてきていることが判明した。
   これが「スクロールすると罫線が消える」「表がExcelっぽい」の実際の原因（widget側の
   CSSではなくテーマ側の既定表スタイルが優先されていた）。
   ローカル環境ではこの !important つきテーマルールを再現できず、これまでの修正が
   本番で効いていなかった。ここでは .saas-app-matrix を前置して詳細度を上げ、
   かつ !important を付けて明示的に上書きする。 */
.saas-app-matrix .saas-app-matrix__matrix {
  border-collapse: separate !important;
  border-spacing: 0 !important;
  table-layout: fixed !important;
  font-size: 13.5px !important;
  margin: 0 !important;
  border: none !important;
  background: var(--saas-am-surface-1) !important;
}
.saas-app-matrix .saas-app-matrix__matrix th,
.saas-app-matrix .saas-app-matrix__matrix td {
  margin: 0 !important;
  border: none !important;
  padding: 7px 7px !important;
  border-bottom: 1px solid var(--saas-am-gridline) !important;
  text-align: center !important;
  vertical-align: middle !important;
  white-space: nowrap !important;
  line-height: 1.4 !important;
  font-weight: 400 !important;
  color: var(--saas-am-text-primary) !important;
}
.saas-app-matrix .saas-app-matrix__matrix thead th {
  position: sticky; top: 0; background: var(--saas-am-surface-1) !important; z-index: 2;
  font-size: 12px !important; color: var(--saas-am-text-secondary) !important; font-weight: 700 !important;
  border-bottom: 1px solid var(--saas-am-border-strong) !important;
  padding-top: 8px !important; padding-bottom: 6px !important;
}
.saas-app-matrix .saas-app-matrix__matrix thead tr.saas-app-matrix__band-row th {
  font-size: 11.5px !important; letter-spacing: .03em; padding-top: 5px !important; padding-bottom: 5px !important;
  border-bottom: none !important;
}
.saas-app-matrix .saas-app-matrix__matrix thead th.saas-app-matrix__band-op   { background: var(--saas-am-band-op-solid) !important; color: var(--saas-am-band-op-text) !important; position: sticky; z-index: 3; }
.saas-app-matrix .saas-app-matrix__matrix thead th.saas-app-matrix__band-info { background: var(--saas-am-band-info-solid) !important; color: var(--saas-am-band-info-text) !important; }
.saas-app-matrix .saas-app-matrix__matrix thead tr.saas-app-matrix__row-action th { border-bottom: 3px solid var(--saas-am-border-strong) !important; }
.saas-app-matrix .saas-app-matrix__matrix td.saas-app-matrix__col-name, .saas-app-matrix .saas-app-matrix__matrix th.saas-app-matrix__col-name {
  position: sticky; left: 0; background: var(--saas-am-surface-1) !important; text-align: left !important; z-index: 1; font-weight: 600 !important; overflow: hidden; text-overflow: ellipsis;
}
.saas-app-matrix .saas-app-matrix__matrix thead th.saas-app-matrix__col-name { z-index: 4; }
.saas-app-matrix .saas-app-matrix__matrix td.saas-app-matrix__col-method, .saas-app-matrix .saas-app-matrix__matrix th.saas-app-matrix__col-method {
  position: sticky; left: 170px; background: var(--saas-am-surface-1) !important; text-align: left !important; color: var(--saas-am-text-secondary) !important; font-size: 12.5px !important; z-index: 1; overflow: hidden; text-overflow: ellipsis;
}
.saas-app-matrix .saas-app-matrix__matrix thead th.saas-app-matrix__col-method { z-index: 4; }
.saas-app-matrix .saas-app-matrix__matrix .saas-app-matrix__col-op-fixed { position: sticky; background: var(--saas-am-surface-1) !important; z-index: 1; }
.saas-app-matrix .saas-app-matrix__matrix thead th.saas-app-matrix__col-op-fixed { z-index: 3; }
.saas-app-matrix .saas-app-matrix__matrix .saas-app-matrix__gutter-left { border-left: 2px solid var(--saas-am-border-strong) !important; }
.saas-app-matrix .saas-app-matrix__matrix tbody tr:hover td { background: var(--saas-am-page-plane) !important; }
.saas-app-matrix .saas-app-matrix__matrix tbody tr:hover td.saas-app-matrix__col-name,
.saas-app-matrix .saas-app-matrix__matrix tbody tr:hover td.saas-app-matrix__col-method,
.saas-app-matrix .saas-app-matrix__matrix tbody tr:hover td.saas-app-matrix__col-op-fixed { background: var(--saas-am-page-plane) !important; }

.saas-app-matrix__mark { display: inline-block; width: 14px; height: 14px; border-radius: 50%; position: relative; }
.saas-app-matrix__mark--no { background: transparent; border: 1.5px solid var(--saas-am-baseline); }

.saas-app-matrix__cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.saas-app-matrix__card { background: var(--saas-am-surface-1); border: 1px solid var(--saas-am-border); border-radius: 12px; padding: 14px 16px 16px; }
.saas-app-matrix__card-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 4px; }
.saas-app-matrix__card-head .saas-app-matrix__name { font-size: 16px; font-weight: 700; }
.saas-app-matrix__method-tag { font-size: 11.5px; color: var(--saas-am-text-secondary); background: var(--saas-am-page-plane); border: 1px solid var(--saas-am-border); border-radius: 6px; padding: 2px 7px; white-space: nowrap; }
.saas-app-matrix__group-label { font-size: 11.5px; color: var(--saas-am-text-muted); text-transform: uppercase; letter-spacing: .04em; margin: 10px 0 6px; font-weight: 700; }
.saas-app-matrix__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.saas-app-matrix__chip { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 600; padding: 4px 9px 4px 7px; border-radius: 999px; color: var(--saas-am-text-primary); background: var(--saas-am-page-plane); border: 1px solid var(--saas-am-border); }
.saas-app-matrix__empty-note { font-size: 12.5px; color: var(--saas-am-text-muted); }
.saas-app-matrix__card-note { margin-top: 10px; font-size: 12px; color: var(--saas-am-text-secondary); background: var(--saas-am-page-plane); border-radius: 6px; padding: 6px 8px; line-height: 1.5; }

.saas-app-matrix__footer { margin-top: 28px; padding-top: 14px; border-top: 1px solid var(--saas-am-gridline); font-size: 12.5px; color: var(--saas-am-text-muted); line-height: 1.7; }

/* JSが無効な場合のフォールバック表（noscript）はブラウザ標準の見た目のままでOK。
   JSが実行された場合は buildUI() がこのフォールバックを非表示にします。 */
.saas-app-matrix__fallback-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.saas-app-matrix__fallback-table th, .saas-app-matrix__fallback-table td { border: 1px solid #ddd; padding: 6px 8px; text-align: left; }