/* nface 固有スタイル（common.css の上に薄く乗せる層）
 *
 * ブランド：永賢組レッド #C8102E（NAGAKENロゴ赤）。
 *   ※ 2026-06-05 に nagaken-mock を赤トーンへ統一済み・本オーダーでも赤指定のため踏襲。
 *      設計書v0.2 §11 は「紺 #1e40af」表記だが、直近のモック統一＝赤が正と判断。要・大関さん確認。
 *   ガイドライン §4-2 の意味色（danger/success/warning）は共通値を別途定義。
 *
 * 後で紺へ切替える場合は --brand-primary 系の値を差し替えるだけで済むよう、
 * common.css の --nagaken-* を参照するエイリアスを張る。
 */
:root {
  /* ブランド（common.css の値を参照） */
  --brand-primary: var(--nagaken-primary);
  --brand-primary-hover: var(--nagaken-primary-deep);
  --brand-primary-text: #ffffff;

  /* 意味色（ガイドライン §4-2 共通・全アプリ統一） */
  --ui-danger: #dc2626;
  --ui-success: #16a34a;
  --ui-warning: #f59e0b;
}

html { color-scheme: light; }

/* iOS Safari ダークモードで input 文字色が透ける事故対策（ガイドライン §4-1 必須） */
input, textarea, select {
  color: #111827;
  -webkit-text-fill-color: #111827;
  caret-color: #111827;
}

/* ヘッダ（テナントロゴ表示・§11） */
.nface-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  background: #fff;
  border-bottom: 3px solid var(--brand-primary);
}
.nface-header img.logo { height: 32px; width: auto; }
.nface-header .sys-name {
  font-weight: 700;
  color: var(--nagaken-primary-dark);
  font-size: 15px;
}
.nface-header .spacer { flex: 1; }
.nface-header .user-chip {
  font-size: 13px;
  color: #555;
  background: #f3f4f6;
  padding: 4px 10px;
  border-radius: 999px;
}

/* モック動作中のバナー（本番化したら自動で消える） */
.mock-banner {
  background: var(--nagaken-accent);
  color: #3a2b2d;
  font-size: 12px;
  text-align: center;
  padding: 4px 8px;
  font-weight: 600;
}

/* メニュー（index）カード */
.menu-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
  margin-top: 16px;
}
.menu-card {
  display: block;
  background: #fff;
  border: 1px solid var(--nagaken-border);
  border-radius: 10px;
  padding: 18px 16px;
  text-decoration: none;
  color: var(--nagaken-body);
  transition: box-shadow .15s, transform .15s;
}
.menu-card:hover { box-shadow: 0 4px 14px rgba(var(--nagaken-primary-rgb), .15); transform: translateY(-1px); }
.menu-card .mc-title { font-weight: 700; color: var(--nagaken-primary-dark); font-size: 15px; }
.menu-card .mc-desc { font-size: 12px; color: #777; margin-top: 6px; line-height: 1.6; }
.menu-card .mc-icon { font-size: 24px; }

/* KPI タイル（ダッシュボード） */
.kpi-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 12px 0; }
.kpi-tile { background: #fff; border: 1px solid var(--nagaken-border); border-radius: 10px; padding: 14px; text-align: center; }
.kpi-tile .kpi-num { font-size: 28px; font-weight: 800; color: var(--brand-primary); }
.kpi-tile .kpi-label { font-size: 12px; color: #777; margin-top: 4px; }

/* データテーブル */
.data-table { width: 100%; border-collapse: collapse; font-size: 13px; background: #fff; }
.data-table th, .data-table td { border: 1px solid var(--nagaken-border); padding: 8px 10px; text-align: left; }
.data-table th { background: #faf0f1; color: var(--nagaken-primary-dark); position: sticky; top: 0; }
.data-table tr:hover td { background: #fff8f8; }

/* 22項目補正フォーム */
.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; }
.field-grid .full { grid-column: 1 / -1; }
@media (max-width: 560px) { .field-grid { grid-template-columns: 1fr; } }
.field-grid label { font-size: 12px; color: #555; }
.field-grid label .req { color: #991b1b; }
.field-grid input, .field-grid select { width: 100%; }
.conf-tag { font-size: 10px; padding: 1px 5px; border-radius: 4px; margin-left: 6px; }
.conf-high { background: #dcfce7; color: #166534; }
.conf-mid { background: #fef9c3; color: #854d0e; }
.conf-low, .conf-fail { background: #fee2e2; color: #991b1b; }
.conf-manual { background: #e5e7eb; color: #555; }