/*
  tungaloy-theme.css
  - 既存のフォーム構成・HTMLは変更せず、見た目だけをタンガロイ調に統一
  - 必要最低限のクラスを上書き。main.css より後に読み込む前提
*/

:root {
  --brand-primary: #c4001a; /* Tungaloy red (approx) */
  --brand-primary-dark: #990014;
  --brand-accent: #222;     /* 深めのグレー/黒基調 */
  --brand-bg: #f6f6f7;      /* ごく薄いグレー */
  --brand-surface: #ffffff; /* 面 */
  --brand-border: #e3e3e6;
  --brand-text: #2a2a2a;
  --brand-muted: #6b6b6b;
  --focus-ring: rgba(196, 0, 26, 0.35);
}

/* ベース */
body {
  color: var(--brand-text) !important;
  background: var(--brand-bg) !important;
}

.container { padding-top: 12px; }

/* ヘッダー */
header.app-header {
  background: linear-gradient(180deg, #fff, #f7f7f8) !important;
  border: 1px solid var(--brand-border) !important;
  border-radius: 8px !important;
  padding: 18px 20px !important;
}
header.app-header h1 {
  color: var(--brand-accent) !important;
  font-weight: 700 !important;
  letter-spacing: 0.3px;
}
.version-info { color: var(--brand-muted) !important; }

/* カード */
.card {
  background: var(--brand-surface) !important;
  border: 1px solid var(--brand-border) !important;
  border-radius: 10px !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.06) !important;
}
.card-header {
  background: #fff !important;
  border-bottom: 1px solid var(--brand-border) !important;
  padding: 14px 16px !important;
}
.card-header h2 { 
  margin: 0; 
  font-size: 18px !important; 
  color: var(--brand-accent) !important; 
  border: none !important; 
}
.card-body { padding: 18px !important; }

/* フォーム要素 */
label { color: var(--brand-accent) !important; }
.form-control,
input[type="text"],
input[type="number"],
select {
  border: 1px solid var(--brand-border) !important;
  border-radius: 6px !important;
  padding: 10px 12px !important;
  background: #f4f4f6 !important; /* 薄いグレー背景 */
  transition: background .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.form-control:focus,
input[type="text"]:focus,
input[type="number"]:focus,
select:focus {
  border-color: var(--brand-primary) !important;
  box-shadow: 0 0 0 3px var(--focus-ring) !important;
  background: #fff !important; /* フォーカス時は白で際立たせる */
}

/* 範囲スライダも背景統一 */
input[type="range"] {
  width: 100%;
  accent-color: var(--brand-primary);
}

/* 入力グループ（label+input）の微調整 */
.form-group label { font-weight: 600; letter-spacing: .3px; }

/* セクション見出し (カード内 h2 / タブ内 h2) に赤下線を付与 */
.card-header h2,
h2.section-heading,
.input-section h2,
.output-section h2 {
  position: relative;
  padding-bottom: 6px !important;
  margin-bottom: 14px !important;
}
.card-header h2::after,
h2.section-heading::after,
.input-section h2::after,
.output-section h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 72px; /* 長さはデザイン画像に合わせて調整可 */
  height: 3px;
  background: var(--brand-primary);
  border-radius: 2px;
}

/* 小さい補助見出し (h3) 用: 細いライン */
h3 { position: relative; padding-bottom:4px; margin-bottom:10px; }
h3::after { content:""; position:absolute; left:0; bottom:0; width:48px; height:2px; background:var(--brand-primary); border-radius:2px; }

/* Machine Type Cards */
.machine-type-cards {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 6px;
}
.machine-card {
  background: #f4f4f6;
  border: 2px solid transparent;
  border-radius: 10px;
  padding: 10px 14px 12px;
  width: 180px;
  cursor: pointer;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.machine-card:hover {
  background: #fff;
  border-color: var(--brand-border);
}
.machine-card[aria-selected="true"] {
  border-color: var(--brand-primary);
  background: #fff;
  box-shadow: 0 0 0 3px var(--focus-ring);
}
.machine-card:focus { outline: none; box-shadow: 0 0 0 3px var(--focus-ring); }
.machine-card .machine-img { max-width: 120px; height: auto; display:block; margin: 4px auto 8px; }
.machine-card .machine-label { font-size: 13px; font-weight:600; color: var(--brand-accent); line-height:1.3; }

/* ボタン */
button,
.btn { 
  border-radius: 999px !important; 
  font-weight: 600 !important; 
}
.btn-primary,
#calculate-btn,
#pdf-download-btn {
  background: var(--brand-primary) !important;
  color: #fff !important;
}
.btn-primary:hover,
#calculate-btn:hover,
#pdf-download-btn:hover {
  background: var(--brand-primary-dark) !important;
}
.btn-danger,
#reset-btn { background: #555 !important; }
#reset-btn:hover { background: #333 !important; }

/* 言語切替ボタン */
.lang-btn { border: 1px solid var(--brand-border) !important; background: #fff !important; color: var(--brand-accent) !important; }
.lang-btn:hover { background: #fafafa !important; }
.lang-btn.active { background: var(--brand-primary) !important; color: #fff !important; border-color: var(--brand-primary) !important; }

/* ラジオ・チェック */
.radio-group label { color: var(--brand-text) !important; }
.radio-group input { accent-color: var(--brand-primary); }

/* タブボタン（開発用結果） */
.tab-buttons { gap: 8px !important; }
.tab-btn {
  border: 1px solid var(--brand-border) !important;
  background: #fff !important;
  color: var(--brand-accent) !important;
  padding: 8px 12px !important;
  border-radius: 999px !important;
  transition: all .2s ease !important;
}
.tab-btn:hover { border-color: var(--brand-primary) !important; color: var(--brand-primary) !important; }
.tab-btn.active { background: var(--brand-primary) !important; color: #fff !important; border-color: var(--brand-primary) !important; }

/* タブナビゲーション補助ボタン */
.tab-nav-btn { background: var(--brand-primary) !important; color: #fff !important; }
.tab-nav-btn:hover { background: var(--brand-primary-dark) !important; }

/* ドライバーリスト/プレビュー */
.driver-list { border-color: var(--brand-border) !important; }
.driver-list-item:hover,
.driver-list-item[aria-selected="true"] { background: #fff4f5 !important; }
.driver-preview-panel { border-color: var(--brand-border) !important; background: #fcfcfd !important; }

/* 選択状態の見た目強化（チェックマーク・左線） */
.driver-list-item.selected {
  position: relative;
  background: #fff0f2 !important;
  border-left: 4px solid var(--brand-primary);
}
.driver-list-item.selected::after {
  content: '✅';
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
}

/* 表 */
th { background: #fafafa !important; color: var(--brand-accent) !important; }
tr:nth-child(even) { background: #fcfcfd !important; }

/* エラー/バリデーション */
.has-error { border-color: var(--brand-primary) !important; background: #fff6f7 !important; }
.field-error-message { color: var(--brand-primary) !important; }
.error-display { background: #fff0f1 !important; color: #9a0013 !important; border-color: #f3c2c9 !important; }

/* PDF セクション */
.pdf-export-section { background: #fff !important; border-top: 1px solid var(--brand-border) !important; }
#pdf-progress { color: var(--brand-muted) !important; }

/* 図面プレビュー枠の強調は維持（headerの赤に合わせて微調整可） */
#drawingCanvas { border-color: #2a2a2a !important; }

/* 小さな余白/タイポ調整 */
.section-title { border-bottom: 2px solid var(--brand-primary) !important; }
#page-title { color: var(--brand-accent) !important; }
#page-description { color: var(--brand-muted) !important; }