/**
 * v6.17.0 機能アクセス権限管理画面 CSS
 *
 * DESIGN.md 準拠:
 * - 白基調、border-radius 20px カード、ピル型ボタン
 * - 44px 行高、Noto Sans JP
 * - ダークモード対応 ([data-theme="dark"])
 * - 色はステータス系（必須バッジ・編集ハイライト・toast）のみ最小限
 */

/* ===== ページ基本 ===== */
.fp-page {
  padding: 24px 28px 96px;  /* 下に sticky 保存バー分の余白 */
}

.fp-intro {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 16px;
  padding: 16px 20px;
  margin-bottom: 16px;
  color: var(--color-text-muted);
  font-size: 13px;
  line-height: 1.65;
}
.fp-intro p { margin: 0; }
.fp-intro p + p { margin-top: 6px; }
.fp-intro-note { font-size: 12px; color: var(--color-text-faint); }

.fp-status-bar {
  font-size: 12px;
  color: var(--color-text-muted);
  padding: 0 4px 10px;
  min-height: 18px;
}
.fp-status-info { color: var(--color-text-muted); }
.fp-status-error { color: var(--color-red); font-weight: 500; }

/* ===== カテゴリセクション ===== */
.fp-category {
  margin-bottom: 22px;
}
.fp-category-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text);
  margin: 0 0 10px 4px;
  letter-spacing: .01em;
}

.fp-table-wrap {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 16px;
  overflow: hidden;  /* 角丸の表現を維持 */
  box-shadow: var(--shadow-1);
}

/* ===== マトリクステーブル ===== */
.fp-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  background: var(--color-surface);
}
.fp-table thead th {
  background: var(--color-surface-2);
  color: var(--color-text-muted);
  font-weight: 600;
  font-size: 13px;
  padding: 10px 14px;
  text-align: center;
  border-bottom: 1px solid var(--color-divider);
}
.fp-th-feature {
  text-align: left !important;
  width: auto;
}
.fp-th-role {
  width: 110px;
}

.fp-row {
  transition: background .12s ease;
}
.fp-row:hover {
  background: var(--color-surface-2);
}
.fp-row + .fp-row .fp-cell,
.fp-row + .fp-row .fp-cell-feature {
  border-top: 1px solid var(--color-divider);
}

.fp-cell-feature {
  padding: 12px 16px;
  vertical-align: middle;
}
.fp-feature-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.fp-feature-code {
  font-size: 11px;
  color: var(--color-text-faint);
  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
  margin-top: 2px;
  letter-spacing: -.01em;
}

.fp-cell {
  padding: 10px 14px;
  vertical-align: middle;
  text-align: center;
  transition: background .15s ease;
}
.fp-cell.is-dirty {
  background: rgba(26, 115, 232, 0.10);  /* var(--color-primary-soft) と同等 */
}
.fp-cell.is-locked {
  background: rgba(60, 64, 67, 0.04);
  cursor: not-allowed;
}

/* ===== 必須バッジ ===== */
.fp-badge {
  display: inline-flex;
  align-items: center;
  height: 18px;
  padding: 0 8px;
  border-radius: 9999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
}
.fp-badge-protected {
  background: rgba(242, 153, 0, 0.16);
  color: #b06000;
}

/* ===== カスタムチェックボックス ===== */
.fp-cb-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  width: 40px;
  height: 40px;
}
.fp-cb {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.fp-cb-visual {
  width: 20px;
  height: 20px;
  border-radius: 6px;
  border: 1.5px solid var(--color-border);
  background: var(--color-surface);
  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.fp-cb:checked + .fp-cb-visual {
  background: var(--color-primary);
  border-color: var(--color-primary);
}
.fp-cb:checked + .fp-cb-visual::after {
  content: '';
  width: 11px;
  height: 5px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(-45deg) translate(1px, -1px);
}
.fp-cb:focus-visible + .fp-cb-visual {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}
.fp-cb:disabled + .fp-cb-visual {
  opacity: 0.6;
  cursor: not-allowed;
}
.fp-cb:disabled:checked + .fp-cb-visual {
  background: var(--color-text-muted);
  border-color: var(--color-text-muted);
}

/* ===== 保存バー (画面下部 sticky) ===== */
.fp-save-bar {
  position: fixed;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 9999px;
  box-shadow: var(--shadow-2);
  padding: 8px 12px 8px 20px;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
}
.fp-save-bar.is-hidden {
  display: none !important;
}
.fp-save-bar-inner {
  display: flex;
  align-items: center;
  gap: 14px;
}
.fp-change-count {
  font-size: 13px;
  color: var(--color-text);
  font-weight: 500;
  white-space: nowrap;
}
.fp-save-bar-actions {
  display: flex;
  gap: 8px;
}
.fp-save-bar-actions button {
  height: 40px;
  padding: 0 18px;
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
}

/* gs-btn-pill / gs-btn-primary は public/css/style.css 側で定義済を上書きせず流用 */

/* ===== トースト ===== */
.fp-toast {
  position: fixed;
  bottom: 96px;  /* 保存バーの上 */
  left: 50%;
  transform: translateX(-50%);
  padding: 12px 20px;
  border-radius: 9999px;
  font-size: 13px;
  font-weight: 500;
  box-shadow: var(--shadow-2);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
  z-index: 60;
  max-width: 80vw;
  text-align: center;
}
.fp-toast.is-visible {
  opacity: 1;
}
.fp-toast-success {
  background: var(--color-green);
  color: #fff;
}
.fp-toast-error {
  background: var(--color-red);
  color: #fff;
}

/* ===== 共通ユーティリティ (style.css と重複しても害なし、ローカルで安全側) ===== */
.is-hidden {
  display: none !important;
}

/* ===== レスポンシブ ===== */
@media (max-width: 768px) {
  .fp-page {
    padding: 16px 12px 96px;
  }
  .fp-th-role {
    width: 70px;
  }
  .fp-cell-feature {
    padding: 10px 12px;
  }
  .fp-feature-name {
    font-size: 13px;
  }
  .fp-feature-code {
    font-size: 10px;
  }
  .fp-cell {
    padding: 8px 6px;
  }
  .fp-cb-wrap {
    width: 36px;
    height: 36px;
  }
}

/* ===== ダークモード ===== */
[data-theme="dark"] .fp-cell.is-dirty {
  background: rgba(138, 180, 248, 0.16);
}
[data-theme="dark"] .fp-cell.is-locked {
  background: rgba(255, 255, 255, 0.04);
}
[data-theme="dark"] .fp-badge-protected {
  background: rgba(242, 153, 0, 0.22);
  color: #ffc46b;
}
[data-theme="dark"] .fp-cb:disabled:checked + .fp-cb-visual {
  background: var(--color-text-muted);
  border-color: var(--color-text-muted);
}