/* ============================================
   Iwaki Pharma Board (IPB) - Custom styles
   ============================================ */

:root {
  --brand-blue:   #1E5AAA;
  --brand-orange: #F4A340;
  --brand-green:  #3DA968;
  --brand-red:    #E0524A;
  --brand-text:   #2C3E50;
  --brand-border: #E5E7EB;
}

html, body {
  background: #FFFFFF;
  color: var(--brand-text);
  font-family: "Noto Sans JP", system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.font-num {
  font-family: "Inter", "Noto Sans JP", sans-serif;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

/* スクロールバー */
.scrollbar-thin::-webkit-scrollbar { height: 8px; width: 8px; }
.scrollbar-thin::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
.scrollbar-thin::-webkit-scrollbar-track { background: transparent; }

/* テーブル */
.ipb-table { border-collapse: separate; border-spacing: 0; width: 100%; }
.ipb-table thead th {
  background: #F8FAFC;
  color: var(--brand-text);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.02em;
  padding: 12px 10px;
  border-bottom: 2px solid var(--brand-border);
  white-space: nowrap;
}
.ipb-table tbody td {
  padding: 10px;
  border-bottom: 1px solid var(--brand-border);
  font-size: 13px;
  white-space: nowrap;
}
.ipb-table tbody tr:hover { background: #F9FAFB; }
.ipb-table .num { font-family: "Inter", sans-serif; font-variant-numeric: tabular-nums; text-align: right; }

/* 入力フィールド */
.ipb-input {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--brand-border);
  border-radius: 6px;
  font-size: 13px;
  background: #fff;
  transition: border-color .15s, box-shadow .15s;
  font-family: "Inter", "Noto Sans JP", sans-serif;
}
.ipb-input:focus {
  outline: none;
  border-color: var(--brand-blue);
  box-shadow: 0 0 0 3px rgba(30,90,170,0.12);
}

/* ボタン */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 10px 16px; border-radius: 8px; font-weight: 600;
  font-size: 14px; transition: transform .08s, box-shadow .15s, background .15s;
  cursor: pointer; user-select: none; border: 1px solid transparent;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--brand-blue); color: #fff; }
.btn-primary:hover { background: #194e94; }
.btn-secondary { background: #fff; color: var(--brand-text); border-color: var(--brand-border); }
.btn-secondary:hover { background: #F8FAFC; }
.btn-success { background: var(--brand-green); color: #fff; }
.btn-success:hover { background: #339058; }
.btn-warn { background: var(--brand-orange); color: #fff; }
.btn-warn:hover { background: #e09232; }
.btn-danger { background: #fff; color: var(--brand-red); border-color: #FCA5A5; }
.btn-danger:hover { background: #FEF2F2; }

/* KPIカード */
.kpi-card {
  background: #fff;
  border: 1px solid var(--brand-border);
  border-radius: 12px;
  padding: 20px 22px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.02);
  display: flex; flex-direction: column; gap: 6px;
  position: relative; overflow: hidden;
}
.kpi-card::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: var(--brand-blue);
}
.kpi-card.kpi-up::before    { background: var(--brand-green); }
.kpi-card.kpi-down::before  { background: var(--brand-red); }

.kpi-label { font-size: 13px; color: #64748B; font-weight: 500; }
.kpi-value { font-size: 40px; line-height: 1.1; font-weight: 800; font-family: "Inter", sans-serif; }
.kpi-sub   { font-size: 13px; font-weight: 600; }

.kpi-up    .kpi-value, .kpi-up   .kpi-sub { color: var(--brand-green); }
.kpi-down  .kpi-value, .kpi-down .kpi-sub { color: var(--brand-red); }

/* カード */
.dash-card {
  background: #fff;
  border: 1px solid var(--brand-border);
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.02);
}
.dash-card-title {
  font-size: 14px; font-weight: 700; color: var(--brand-text);
  display: flex; align-items: center; gap: 8px; margin-bottom: 12px;
}
.dash-card-title .badge {
  display: inline-flex; width: 22px; height: 22px; border-radius: 6px;
  background: var(--brand-blue); color: #fff; font-size: 12px;
  align-items: center; justify-content: center; font-weight: 700;
}

/* ローディング */
.loading-overlay {
  position: fixed; inset: 0; background: rgba(255,255,255,0.85);
  display: flex; align-items: center; justify-content: center; z-index: 9999;
  font-size: 16px; font-weight: 600; color: var(--brand-text);
}

/* 印刷対応 */
@media print {
  body { background: #fff; }
  .no-print { display: none !important; }
  .dashboard-area { box-shadow: none !important; }
  .dash-card { break-inside: avoid; box-shadow: none !important; }
  @page { size: A3 landscape; margin: 10mm; }
}

/* トースト */
.toast {
  position: fixed; bottom: 24px; right: 24px; z-index: 10000;
  background: var(--brand-text); color: #fff;
  padding: 12px 18px; border-radius: 8px; font-size: 14px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.15);
  animation: slidein .25s ease;
}
@keyframes slidein {
  from { transform: translateY(8px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}

/* recharts ラベルフォント */
.recharts-text, .recharts-cartesian-axis-tick-value {
  font-family: "Inter", "Noto Sans JP", sans-serif !important;
  font-size: 12px;
  fill: #64748B;
}
.recharts-legend-item-text {
  font-family: "Noto Sans JP", sans-serif !important;
  color: var(--brand-text) !important;
  font-size: 13px !important;
}
.recharts-tooltip-wrapper {
  font-family: "Noto Sans JP", sans-serif !important;
}

/* タブボタン */
.tab-btn {
  display: inline-flex; align-items: center;
  padding: 8px 14px; border-radius: 8px;
  font-size: 13px; font-weight: 600;
  color: var(--brand-text);
  background: #fff;
  border: 1px solid var(--brand-border);
  cursor: pointer;
  white-space: nowrap;
  transition: all .15s ease;
}
.tab-btn:hover {
  background: #F8FAFC;
  border-color: #CBD5E1;
}
.tab-btn-active {
  background: var(--brand-blue) !important;
  color: #fff !important;
  border-color: var(--brand-blue) !important;
  box-shadow: 0 2px 8px rgba(30,90,170,0.25);
}
.tab-btn-company.tab-btn-active {
  background: var(--brand-orange) !important;
  border-color: var(--brand-orange) !important;
  box-shadow: 0 2px 8px rgba(244,163,64,0.3);
}
.tab-btn-all.tab-btn-active {
  background: var(--brand-green) !important;
  border-color: var(--brand-green) !important;
  box-shadow: 0 2px 8px rgba(61,169,104,0.3);
}

/* ===== モード切替（単独 / 比較） ===== */
.mode-switch {
  display: inline-flex;
  background: #F1F5F9;
  border: 1px solid var(--brand-border);
  border-radius: 10px;
  padding: 3px;
  gap: 2px;
}
.mode-btn {
  padding: 7px 14px;
  border-radius: 7px;
  font-size: 13px;
  font-weight: 600;
  color: #64748B;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: all .15s;
  white-space: nowrap;
}
.mode-btn:hover { color: var(--brand-text); }
.mode-btn-active {
  background: #fff;
  color: var(--brand-blue) !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

/* ===== 比較チップ（チェックボックス代替） ===== */
.compare-chip {
  display: inline-flex; align-items: center;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 12px; font-weight: 600;
  color: #64748B;
  background: #fff;
  border: 1px solid var(--brand-border);
  cursor: pointer;
  white-space: nowrap;
  transition: all .15s ease;
  user-select: none;
}
.compare-chip:hover { border-color: #94A3B8; background: #F8FAFC; }
.compare-chip-active {
  font-weight: 700;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.series-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  margin-right: 6px;
  flex-shrink: 0;
}

/* ===== AI 総評パネル ===== */
.ai-insight {
  background: linear-gradient(135deg, #FAFBFF 0%, #FFFFFF 60%);
  position: relative;
  overflow: hidden;
}
.ai-insight::after {
  content: "";
  position: absolute;
  top: -40px; right: -40px;
  width: 180px; height: 180px;
  background: radial-gradient(circle, rgba(124,58,237,0.06) 0%, transparent 70%);
  pointer-events: none;
}
.ai-headline {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.55;
  margin: 8px 0 4px;
  letter-spacing: 0.01em;
}
.ai-tag {
  display: inline-flex; align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px; font-weight: 700;
  border: 1px solid;
}
.ai-body p {
  position: relative;
  padding-left: 32px;
}
.ai-num {
  position: absolute;
  left: 0; top: 1px;
  display: inline-flex;
  width: 22px; height: 22px;
  border-radius: 6px;
  background: #EEF2F7;
  color: var(--brand-text);
  font-size: 11px;
  font-weight: 800;
  align-items: center; justify-content: center;
  font-family: "Inter", sans-serif;
}

/* 印刷時もAI総評は表示 */
@media print {
  .ai-insight { background: #fff !important; }
  .ai-insight::after { display: none; }
}

/* =====================================================================
   AI 総評（OpenAI連携） - ストリーミング表示
   ===================================================================== */
.ai-llm-body {
  margin-top: 8px;
}
.ai-llm-meta {
  font-size: 11px;
  color: #64748B;
  font-weight: 600;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 4px;
}
.ai-md {
  font-size: 13.5px;
  line-height: 1.85;
  color: var(--brand-text);
  font-family: "Noto Sans JP", sans-serif;
}
.ai-md-h2 {
  font-size: 14px;
  font-weight: 800;
  color: #1E5AAA;
  margin: 16px 0 6px;
  padding-left: 10px;
  border-left: 4px solid #7C3AED;
  letter-spacing: 0.02em;
}
.ai-md-p {
  margin: 0 0 10px;
  text-align: justify;
}
.ai-md-p:first-of-type {
  font-weight: 700;
  font-size: 14.5px;
  color: #1E5AAA;
  background: linear-gradient(90deg, rgba(124,58,237,0.06), rgba(30,90,170,0.04));
  padding: 10px 14px;
  border-radius: 8px;
  border-left: 3px solid #7C3AED;
}
.ai-cursor {
  display: inline-block;
  color: #7C3AED;
  font-weight: 900;
  animation: ai-blink 1s steps(2, start) infinite;
  margin-left: 2px;
}
@keyframes ai-blink {
  to { visibility: hidden; }
}
.ai-llm-loading {
  margin: 12px 0;
}
.ai-llm-bar {
  width: 100%;
  height: 4px;
  background: #EEF2F7;
  border-radius: 999px;
  overflow: hidden;
  position: relative;
}
.ai-llm-bar > span {
  position: absolute;
  height: 100%;
  width: 35%;
  background: linear-gradient(90deg, #7C3AED, #1E5AAA);
  border-radius: 999px;
  animation: ai-bar-slide 1.4s ease-in-out infinite;
}
@keyframes ai-bar-slide {
  0%   { left: -35%; }
  100% { left: 100%; }
}

@media print {
  .ai-llm-body .no-print, .ai-cursor { display: none !important; }
}