/* ============================================================
   newsprint.css — BoatRace App ニュースプリントテーマ
   Tailwind の上から重ねる形で適用します
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700;900&display=swap');

/* ---- 基本トークン ---- */
:root {
  --np-bg-page:   #ede8df;
  --np-bg-card:   #f8f4ec;
  --np-bg-header: #1c2b4a;
  --np-bg-thead:  #3a2e1e;
  --np-thead-txt: #f0e8d8;
  --np-border:    #c4ae8a;
  --np-text:      #1a1208;
  --np-text-sub:  #5c4a2a;
  --np-text-mute: #8a7258;
  --np-accent:    #c8102e;
  --np-row-alt:   #f0ebe0;
  --np-row-hover: #e8e0d0;
}

/* ---- 全体 ---- */
body {
  font-family: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Hiragino Sans',
               'Yu Gothic UI', 'Meiryo UI', sans-serif !important;
  background: var(--np-bg-page) !important;
  color: var(--np-text) !important;
}

/* Tailwind の blue グラデーション背景を上書き */
.bg-gradient-to-br,
.from-blue-50,
.via-white,
.to-blue-50 {
  background: var(--np-bg-page) !important;
}

/* ============================================================
   ヘッダー・ナビゲーション
   ============================================================ */
header.np-header {
  background: var(--np-bg-header) !important;
  border-bottom: none !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3) !important;
}

/* ブランドロゴ */
.np-brand-link {
  color: #fff !important;
  font-size: 18px !important;
  font-weight: 900 !important;
  letter-spacing: 0.03em;
  display: flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
}
.np-brand-link:hover { color: #fff !important; opacity: 0.9; }
.np-brand-accent { color: var(--np-accent); }

/* デスクトップ ナビリンク */
.np-nav-item {
  color: rgba(255,255,255,0.75) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  padding: 0 14px !important;
  height: 52px !important;
  display: inline-flex !important;
  align-items: center !important;
  border-bottom: 3px solid transparent !important;
  transition: all 0.15s !important;
  border-radius: 0 !important;
  background: transparent !important;
}
.np-nav-item:hover {
  color: #fff !important;
  background: rgba(255,255,255,0.07) !important;
  border-bottom-color: rgba(255,255,255,0.3) !important;
}
.np-nav-item.active,
.np-nav-item.np-active {
  color: #fff !important;
  border-bottom-color: var(--np-accent) !important;
  background: rgba(200,16,46,0.1) !important;
}

/* ドロップダウンメニュー */
.np-dropdown-menu {
  background: var(--np-bg-header) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.3) !important;
  border-radius: 3px !important;
}
.np-dropdown-item {
  color: rgba(255,255,255,0.8) !important;
  font-size: 12px !important;
  padding: 8px 16px !important;
}
.np-dropdown-item:hover {
  background: rgba(255,255,255,0.1) !important;
  color: #fff !important;
}

/* 認証エリア */
.np-auth-text { color: rgba(255,255,255,0.7) !important; font-size: 12px !important; }
.np-auth-link { color: rgba(255,255,255,0.6) !important; font-size: 12px !important; }
.np-auth-link:hover { color: #ff8888 !important; }

/* モバイルメニューボタン */
.np-hamburger-btn { color: #fff !important; }

/* モバイルメニュー */
.np-mobile-menu {
  background: var(--np-bg-header) !important;
  border-top: 1px solid rgba(255,255,255,0.1) !important;
}
.np-mobile-link {
  color: rgba(255,255,255,0.8) !important;
  font-size: 13px !important;
  padding: 10px 16px !important;
  display: block;
  border-bottom: 1px solid rgba(255,255,255,0.07) !important;
}
.np-mobile-link:hover { background: rgba(255,255,255,0.08) !important; color: #fff !important; }
.np-mobile-link.np-active { color: #fff !important; background: rgba(200,16,46,0.2) !important; }

/* ============================================================
   パンくずリスト
   ============================================================ */
.np-breadcrumb {
  background: var(--np-bg-card) !important;
  border-bottom: 1px solid var(--np-border) !important;
  padding: 6px 0 !important;
  font-size: 11px !important;
  color: var(--np-text-mute) !important;
}
.np-breadcrumb a { color: var(--np-text-sub) !important; }
.np-breadcrumb a:hover { color: var(--np-accent) !important; }

/* ============================================================
   メインコンテンツエリア
   ============================================================ */
main.np-main {
  background: var(--np-bg-page) !important;
  padding-top: 20px !important;
  padding-bottom: 48px !important;
}

/* コンテンツ白カードを newsprint カードに */
main.np-main > .bg-white {
  background: var(--np-bg-card) !important;
  border: 1px solid var(--np-border) !important;
  border-radius: 4px !important;
  box-shadow: none !important;
}

/* ============================================================
   テーブル共通オーバーライド
   ============================================================ */
.np-table-override thead tr {
  background: var(--np-bg-thead) !important;
}
.np-table-override thead th {
  color: var(--np-thead-txt) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  border-color: rgba(255,255,255,0.1) !important;
}
.np-table-override tbody tr {
  border-bottom: 1px solid var(--np-border) !important;
  background: var(--np-bg-card) !important;
}
.np-table-override tbody tr:nth-child(even) { background: var(--np-row-alt) !important; }
.np-table-override tbody tr:hover { background: var(--np-row-hover) !important; }

/* ============================================================
   カード・ボックス
   ============================================================ */
.bg-white {
  background: var(--np-bg-card) !important;
}
.border-blue-200, .border-gray-200 {
  border-color: var(--np-border) !important;
}
.shadow-md, .shadow-sm, .shadow-lg {
  box-shadow: 0 1px 4px rgba(0,0,0,0.08) !important;
}

/* グラデーションヘッダー (blue) → ネイビー */
.bg-gradient-to-r.from-blue-500,
.bg-gradient-to-r.from-blue-600 {
  background: var(--np-bg-header) !important;
  background-image: none !important;
}

/* ============================================================
   ボタン
   ============================================================ */
.np-btn-np {
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: 3px;
  border: 1px solid var(--np-border);
  background: var(--np-bg-card);
  color: var(--np-text-sub);
  cursor: pointer;
  transition: all 0.12s;
}
.np-btn-np:hover { background: var(--np-row-hover); }
.np-btn-np.primary { background: var(--np-accent); color: #fff; border-color: var(--np-accent); }
.np-btn-np.primary:hover { background: #aa0020; }

/* blue ボタンを newsprint 風に */
.bg-blue-500, .bg-blue-600 { background-color: var(--np-bg-header) !important; }
.hover\:bg-blue-600:hover, .hover\:bg-blue-700:hover { background-color: #142240 !important; }
.text-blue-600 { color: var(--np-accent) !important; }
.text-blue-700, .text-blue-800 { color: var(--np-bg-header) !important; }
.border-blue-300, .border-blue-200 { border-color: var(--np-border) !important; }
.bg-blue-50 { background-color: var(--np-row-alt) !important; }
.bg-blue-100 { background-color: #e8e0d0 !important; }
.text-blue-100 { color: rgba(255,255,255,0.7) !important; }

/* ============================================================
   フッター
   ============================================================ */
footer.np-footer {
  background: var(--np-bg-header) !important;
  border-top: none !important;
  margin-top: 0 !important;
}
footer.np-footer * { color: rgba(255,255,255,0.65) !important; }
footer.np-footer a:hover { color: #fff !important; }
footer.np-footer .border-t { border-color: rgba(255,255,255,0.12) !important; }

/* ============================================================
   アラート
   ============================================================ */
.alert-info  { background: #f0f4ff !important; border-color: var(--np-bg-header) !important; color: var(--np-bg-header) !important; }
.alert-error { background: #fff0f0 !important; border-color: var(--np-accent) !important; color: #7a0010 !important; }

/* ============================================================
   スクロールバー
   ============================================================ */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--np-bg-page); }
::-webkit-scrollbar-thumb { background: var(--np-border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #a08060; }

/* ============================================================
   出走表 詳細ビュー（race detail）
   ============================================================ */

/* ---- レースタブバー（1R〜12R） ---- */
#raceTabsNav {
  background: var(--np-bg-card) !important;
  border-bottom: 2px solid var(--np-border) !important;
  scrollbar-width: thin;
  scrollbar-color: var(--np-border) var(--np-bg-page);
}
#raceTabsNav::-webkit-scrollbar { height: 4px; }
#raceTabsNav::-webkit-scrollbar-thumb { background: var(--np-border); }

#raceTabsNav button[data-race-tab] {
  background: transparent !important;
  color: var(--np-text-mute) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  padding: 6px 12px !important;
  border: none !important;
  border-bottom: 3px solid transparent !important;
  transition: all 0.15s !important;
  font-feature-settings: "tnum" !important;
}
#raceTabsNav button[data-race-tab]:hover {
  color: var(--np-text) !important;
  background: var(--np-row-alt) !important;
}
/* アクティブタブ */
#raceTabsNav button[data-race-tab].active-race-tab {
  color: var(--np-accent) !important;
  border-bottom-color: var(--np-accent) !important;
  background: transparent !important;
}

/* ---- レースカードヘッダー ---- */
.race-card > div:first-child,
.race-card .from-blue-500,
.race-card .bg-gradient-to-r {
  background: var(--np-bg-header) !important;
  background-image: none !important;
}
.race-card .text-blue-100 { color: rgba(255,255,255,0.65) !important; }

/* ---- コンテンツタブ（出走表 / 今節成績 / 枠番別 / ...） ---- */
.race-card [data-tab] {
  font-size: 11px !important;
  font-weight: 600 !important;
  color: var(--np-text-mute) !important;
  border-bottom: 2px solid transparent !important;
  padding: 8px 14px !important;
  transition: all 0.12s !important;
}
.race-card [data-tab]:hover {
  color: var(--np-text) !important;
  background: var(--np-row-alt) !important;
}
.race-card [data-tab].border-b-2.border-blue-500,
.race-card [data-tab][style*="border-blue"] {
  color: var(--np-accent) !important;
  border-bottom-color: var(--np-accent) !important;
}
/* タブコンテナボーダー */
.race-card .border-b.border-blue-200,
.race-card .flex.border-b {
  border-bottom-color: var(--np-border) !important;
  background: var(--np-bg-card) !important;
}

/* ---- 出走表テーブル thead ---- */
.race-card table thead tr {
  background: var(--np-bg-thead) !important;
}
.race-card table thead th {
  color: var(--np-thead-txt) !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  border-right: 1px solid rgba(255,255,255,0.1) !important;
  background: transparent !important;
}
/* blue-100 thead (既存テーブル) */
.race-card .bg-blue-100 {
  background: var(--np-bg-thead) !important;
}
.race-card .text-blue-600 { color: var(--np-thead-txt) !important; }

/* ---- 出走表テーブル tbody ---- */
.race-card table tbody tr {
  border-bottom: 1px solid var(--np-border) !important;
  background: var(--np-bg-card) !important;
}
.race-card table tbody tr:nth-child(even) {
  background: var(--np-row-alt) !important;
}
.race-card table tbody tr:hover {
  background: var(--np-row-hover) !important;
}

/* ---- ランキング色（そのまま維持するため上書きしない） ---- */

/* ---- チップ・バッジ ---- */
.race-card .bg-blue-50 { background: #e8e4dc !important; }
.race-card .text-blue-700 { color: var(--np-bg-header) !important; }

/* ---- ST ツールチップ ---- */
.st-tooltip-content {
  background: var(--np-bg-card) !important;
  border: 1px solid var(--np-border) !important;
  border-radius: 4px !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.15) !important;
}
.st-tooltip::after { border-top-color: var(--np-border) !important; }
.st-tooltip::before { border-top-color: var(--np-bg-card) !important; }
.st-tooltip.show-below::after { border-bottom-color: var(--np-border) !important; }
.st-tooltip.show-below::before { border-bottom-color: var(--np-bg-card) !important; }
.st-tooltip .text-blue-700 { color: var(--np-bg-header) !important; }
.st-tooltip .bg-blue-50 { background: var(--np-row-alt) !important; }
.st-tooltip .text-blue-600 { color: var(--np-text-sub) !important; }
.st-tooltip .text-blue-500 { color: var(--np-text-mute) !important; }
.st-tooltip .border-gray-200 { border-color: var(--np-border) !important; }

/* ---- レースカード全体 ---- */
.race-card {
  background: var(--np-bg-card) !important;
  border: 1px solid var(--np-border) !important;
  border-radius: 4px !important;
  box-shadow: none !important;
  margin-bottom: 12px !important;
}

/* ---- 戻るボタン・場所タイトル ---- */
#backButton {
  font-family: inherit !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  padding: 5px 14px !important;
  border: 1px solid var(--np-border) !important;
  border-radius: 3px !important;
  background: var(--np-bg-card) !important;
  color: var(--np-text-sub) !important;
  cursor: pointer !important;
}
#backButton:hover { background: var(--np-row-hover) !important; }

#raceLocationTitle {
  font-size: 17px !important;
  font-weight: 900 !important;
  color: var(--np-text) !important;
  border-left: 4px solid var(--np-accent) !important;
  padding-left: 10px !important;
  text-align: left !important;
}

/* ---- 会場一覧カード ---- */
#venueList > * {
  transition: box-shadow 0.12s !important;
}
#venueList > *:hover {
  box-shadow: 0 2px 8px rgba(0,0,0,0.15) !important;
}

/* ---- タイムラインテーブル ---- */
#timelineContent table thead tr { background: var(--np-bg-thead) !important; }
#timelineContent table thead th { color: var(--np-thead-txt) !important; font-size: 10px !important; }
#timelineContent table tbody tr { border-bottom: 1px solid var(--np-border) !important; }
#timelineContent table tbody tr:hover { background: var(--np-row-hover) !important; cursor: pointer; }

/* ---- ローディングスピナー ---- */
.border-t-blue-600 { border-top-color: var(--np-bg-header) !important; }
.border-blue-200  { border-color: var(--np-border) !important; }

/* ---- レース情報バー風の表示 ---- */
.race-card h2.text-xl {
  font-size: 15px !important;
  font-weight: 900 !important;
}