/* =====================================================================
   nizukuri-design リファレンス実装のコンポーネント CSS（DADS 準拠 v2）
   tokens.css とセットで読み込む。アプリへコピーして流用してよい。
   寸法はすべてトークン参照。密度（comfortable / dense）の切替は
   tokens.css 側だけで行うので、このファイルにメディアクエリを足さない。
   例外: スマホ幅（768px 未満）のテーブルのカード変形のみ。
   ===================================================================== */

/* ----- レイアウト ----- */
.nz-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--header-height);
  padding: 0 var(--content-padding);
  box-sizing: border-box;
  background: var(--color-surface);
  border-bottom: 3px solid var(--theme);
}
.nz-logo { width: var(--logo-size); height: var(--logo-size); display: block; flex-shrink: 0; }
.nz-app-name { font-size: var(--text-xl); font-weight: bold; }
.nz-user { margin-left: auto; color: var(--color-text-muted); }
.nz-main {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: var(--space-6) var(--content-padding);
}
.nz-main-narrow { max-width: var(--content-narrow); }
.nz-footer {
  padding: var(--space-3) var(--content-padding);
  border-top: 1px solid var(--color-border-light);
  background: var(--color-surface);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}
.nz-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-card);
  padding: var(--card-padding);
}
.nz-page-title { font-size: var(--text-2xl); font-weight: bold; line-height: 1.4; margin: 0 0 var(--space-4); }
.nz-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-3); margin-bottom: var(--space-4); }
.nz-toolbar .nz-page-title { margin: 0; }
.nz-toolbar-end { margin-left: auto; display: flex; gap: var(--space-2); }

/* ----- ボタン（DADS: lg/md = comfortable、sm = dense） ----- */
.nz-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  box-sizing: border-box;
  min-height: var(--button-height);
  min-width: 80px;
  padding: 0 var(--button-padding-x);
  font-family: inherit;
  font-size: var(--button-font);
  font-weight: bold;
  line-height: 1;
  letter-spacing: 0.02em;
  border: var(--border-width) solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.15s, background-color 0.15s;
}
/* 高さが 44px 未満のとき、当たり判定を上下に広げる（DADS sm と同じ手法） */
.nz-btn::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: var(--touch-min);
  transform: translateY(-50%);
}
.nz-btn:hover { text-decoration: underline; text-underline-offset: 3px; }
.nz-btn:active { transform: translateY(2px); } /* 遊び心: 押し込み */
.nz-btn-primary { background: var(--theme); color: #fff; }
.nz-btn-primary:hover { background: var(--theme-hover); }
.nz-btn-secondary {
  background: var(--color-surface);
  color: var(--theme);
  border-color: var(--theme);
}
.nz-btn-secondary:hover { background: var(--color-bg); color: var(--theme-hover); border-color: var(--theme-hover); }
.nz-btn-danger { background: var(--color-error); color: #fff; }
.nz-btn-block { display: flex; width: 100%; }
/* 表の行内ボタン（DADS xs 相当）。行どうしで当たり判定が重なるので拡張しない */
.nz-btn-inline {
  min-height: var(--button-height-inline);
  min-width: 0;
  padding: 0 var(--space-2);
  font-size: var(--text-sm);
}
.nz-btn-inline::after { content: none; }

/* ----- リンク（DADS: 下線必須） ----- */
a { color: var(--theme); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--theme-hover); text-decoration-thickness: 3px; }
a.nz-btn { text-decoration: none; }
a.nz-btn-primary, a.nz-btn-danger { color: #fff; }

/* ----- フォーム ----- */
/* 項目はグリッド。dense ではラベル左・入力右の横並びになる（列数は tokens.css が決める） */
.nz-field {
  display: grid;
  grid-template-columns: var(--field-columns);
  align-items: center;
  column-gap: var(--space-4);
  row-gap: var(--field-label-gap);
  margin-bottom: var(--field-gap);
}
.nz-field > :not(.nz-label) { grid-column: var(--field-message-column); }
.nz-field-stack { grid-template-columns: 1fr; row-gap: var(--space-2); }
.nz-field-stack > :not(.nz-label) { grid-column: 1; }
.nz-label { display: block; font-size: var(--text-base); font-weight: bold; }
.nz-required, .nz-optional { font-size: var(--text-sm); font-weight: normal; margin-left: var(--space-1); white-space: nowrap; }
.nz-required { color: var(--color-error); }
.nz-optional { color: var(--color-text-muted); }
.nz-input, .nz-select {
  width: 100%;
  box-sizing: border-box;
  height: var(--input-height);
  font-family: inherit;
  font-size: var(--input-font);
  padding: 0 var(--space-3);
  color: var(--color-text);
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius);
}
.nz-input:hover, .nz-select:hover { border-color: #000; }
.nz-input.is-error, .nz-select.is-error { border-color: var(--color-error); }
.nz-help { margin: 0; color: var(--color-text-muted); font-size: var(--text-sm); }
.nz-error-message {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  margin: 0;
  color: var(--color-error);
  font-weight: bold;
}
.nz-error-message svg { flex-shrink: 0; }
.nz-form-actions { display: flex; gap: var(--space-3); margin-top: var(--space-6); }

/* ----- アラート ----- */
.nz-alert {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border: 1px solid;
  border-radius: var(--radius);
  margin-bottom: var(--space-4);
}
.nz-alert svg { flex-shrink: 0; margin-top: 2px; }
.nz-alert-error { background: var(--color-error-bg); border-color: var(--color-error); color: var(--color-error-text); }
.nz-alert-success { background: var(--color-success-bg); border-color: var(--color-success); color: var(--color-success-text); }
.nz-alert-warning { background: var(--color-warning-bg); border-color: var(--color-warning); color: var(--color-warning-text); }
.nz-alert-info { background: var(--color-info-bg); border-color: var(--color-info); color: var(--color-info-text); }

/* ----- 状態バッジ（色 + 記号 + 文字） ----- */
.nz-badge {
  display: inline-block;
  padding: 2px var(--space-2);
  border: 1px solid;
  border-radius: 999px;
  font-size: var(--text-sm);
  font-weight: bold;
  line-height: 1.4;
  white-space: nowrap;
}
.nz-badge-success { background: var(--color-success-bg); color: var(--color-success-text); border-color: var(--color-success-border); }
.nz-badge-warning { background: var(--color-warning-bg); color: var(--color-warning-text); border-color: var(--color-warning-border); }
.nz-badge-error { background: var(--color-error-bg); color: var(--color-error-text); border-color: var(--color-error-border); }

/* ----- テーブル（DADS: ヘッダー灰 + 黒下線、縞、行 hover） ----- */
.nz-table-wrap { overflow-x: auto; }
.nz-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--color-surface);
  line-height: var(--line-height-table);
}
.nz-table th {
  text-align: left;
  padding: var(--table-cell-y) var(--table-cell-x);
  background: var(--color-table-head);
  color: var(--color-text);
  border-bottom: 1px solid #000;
  font-weight: bold;
  white-space: nowrap;
}
.nz-table td { padding: var(--table-cell-y) var(--table-cell-x); border-bottom: 1px solid var(--color-table-border); }
.nz-table tbody tr:nth-child(even) { background: var(--color-bg); }
.nz-table tbody tr:hover { background: var(--theme-tint); }
.nz-table .nz-num { text-align: right; font-variant-numeric: tabular-nums; }
/* 行内のボタン・バッジがセルの上下余白に食い込み、行の高さを押し広げないようにする */
.nz-table td > .nz-btn-inline,
.nz-table td > .nz-badge { margin-block: calc(var(--space-1) * -1); vertical-align: middle; }

/* スマホ幅（DADS ブレークポイント 768px 未満）: カード型に組み替え（td に data-label 必須） */
@media (max-width: 767px) {
  .nz-table thead { display: none; }
  .nz-table, .nz-table tbody, .nz-table tr, .nz-table td {
    display: block;
    width: 100%;
    box-sizing: border-box;
  }
  .nz-table tr {
    background: var(--color-surface);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius);
    margin-bottom: var(--space-3);
    padding: var(--space-2) 0;
  }
  .nz-table tbody tr:nth-child(even) { background: var(--color-surface); }
  .nz-table td { border: none; padding: var(--space-1) var(--space-4); }
  .nz-table .nz-num { text-align: left; }
  .nz-table td::before {
    content: attr(data-label);
    display: inline-block;
    min-width: 6em;
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    font-weight: bold;
  }
}

/* ----- 空状態（遊び心の許可場所） ----- */
.nz-empty {
  text-align: center;
  padding: var(--space-12) var(--space-4);
  color: var(--color-text-muted);
}
.nz-empty svg { color: var(--color-border-light); margin-bottom: var(--space-3); }

/* ----- ローディング（遊び心: トラックが行き来する） ----- */
.nz-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-12) var(--space-4);
  color: var(--color-text-muted);
}
.nz-loading .nz-truck { color: var(--theme); animation: nz-drive 1.2s ease-in-out infinite alternate; }
@keyframes nz-drive {
  from { transform: translateX(-16px); }
  to { transform: translateX(16px); }
}

/* ----- 完了チェック（遊び心: ポンと弾む） ----- */
.nz-done-check {
  width: 72px;
  height: 72px;
  margin: 0 auto var(--space-4);
  border-radius: 50%;
  background: var(--color-success);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: nz-pop 0.3s ease-out;
}
@keyframes nz-pop {
  0% { transform: scale(0); }
  70% { transform: scale(1.15); }
  100% { transform: scale(1); }
}