/* public/css/styles.css */
:root { --bg:#0b0c10; --fg:#e8e8e8; --acc:#66fcf1; --card:#1f2833; }
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial}
.container{max-width:980px;margin:0 auto;padding:16px}
.site-header{background:#111;border-bottom:1px solid #333}
.site-header h1{margin:0;font-size:20px}
.site-header a{color:var(--fg);text-decoration:none;margin-right:12px}
.site-header nav a{opacity:.9}
.card{background:var(--card);padding:16px;border-radius:12px;box-shadow:0 6px 24px rgba(0,0,0,.2);margin:16px 0}
input,select,button,textarea{width:100%;padding:10px;border-radius:8px;border:1px solid #444;background:#0f1318;color:var(--fg)}
@media print {
  select {
    background: #fff !important;
    color: #000 !important;
    border: 1px solid #444 !important;
  }
}
button{cursor:pointer;background:var(--acc);color:#000;border:none;font-weight:700}
table{width:100%;border-collapse:collapse}
th,td{padding:8px;border-bottom:1px solid #333;text-align:left}
a.btn{display:inline-block;padding:8px 12px;border-radius:8px;background:var(--acc);color:#000;text-decoration:none;font-weight:700}
.form-grid{display:grid;gap:12px}
@media(min-width:640px){.form-grid{grid-template-columns:1fr 1fr}}
.chart-box{background:#0f1318;border-radius:12px;padding:16px}

/* スコア欄だけスピンボタンを消す */
input[type="number"].no-spin::-webkit-outer-spin-button,
input[type="number"].no-spin::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
  margin: 0 !important;
}
input[type="number"].no-spin {
  appearance: textfield !important;
  -moz-appearance: textfield !important;
}

/* 参加メンバー選択のレイアウト修正 */
.participants-grid .participant-item{
  display: flex;
  align-items: center;
  gap: 8px;
}

/* チェックボックスは幅を自動に（共通の input{width:100%} を打ち消す） */
.participants-grid input[type="checkbox"]{
  width: auto !important;
  min-width: auto;
  flex: 0 0 auto;
  margin: 0;
}

/* 名前は残り幅いっぱいに広げる */
.participants-grid .participant-name{
  flex: 1 1 auto;
  min-width: 0;
  /* 1行で省略したい場合は以下をON
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  */
}

/* ===== 印刷用 ===== */
@media print {
  @page {
    size: A4 portrait;     /* A4 縦固定 */
    margin: 8mm;           /* 余白はお好みで */
  }

  /* 背景・文字色を白黒ベースに */
  :root { color-scheme: light; }
  html, body {
    background: #fff !important;
    color: #000 !important;
    width: 210mm; height: 297mm;   /* A4寸法 */
    overflow: hidden;              /* 2ページ目に流れ出さない */
  }

  /* このIDで囲んだ範囲を縮小して必ず1枚に収める */
  #print-container {
    transform: scale(0.85);        /* 縮小率調整 */
    transform-origin: top left;    /* 左上基準で縮小 */
    width: calc(210mm / 0.85);     /* scale補正：横幅を逆数で広げるのがコツ */
  }

  /* 枠や影をシンプルに */
  .card {
    box-shadow: none !important;
    background: #fff !important;
    border: 0 !important;
    padding: 0 !important;
    margin: 0 0 12px 0 !important;
  }

  /* ヘッダー／ナビ／ボタン類／不要要素は非表示 */
  .site-header,
  nav,
  .btn,
  .no-print,
  .form-grid > .card:has(form), /* 入力フォームカードを隠したい時 */
  form[action],                 /* 送信フォーム全般を隠したい時 */
  .alert {
    display: none !important;
  }

  /* メイン余白を小さく */
  .site-main {
    padding: 0 !important;
  }

  /* テーブルは枠線を印刷用に */
  table {
    border: 1px solid #000;
    border-collapse: collapse;
    width: 100% !important;
    font-size: 11px; /* 小さめに調整 */
  }
  table thead th {
    background: #fff !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  table th, table td {
    border: 1px solid #000;
    padding: 4px;
  }
  th, td { padding: 4px 6px !important; font-size: 11px !important; }

  /* 改ページ制御（長表で行途中で切れにくく） */
  tr, img, canvas { break-inside: avoid; page-break-inside: avoid; }
  .page-break { break-after: page; page-break-after: always; }

  /* Chart.js キャンバスは高さを抑える（必要なら数値を調整） */
  canvas { max-height: 110mm !important; width: 100% !important; }

  /* リンクURLの後置テキストを消す */
  a[href]:after { content: "" !important; }

  /* グリッドは単純化（詰まり過ぎ防止） */
  .form-grid { gap: 8px !important; }

  /* グラフ（Chart.js）…印刷するならサイズ抑制、不要なら display:none に */
  .chart-card canvas {
    width: 100% !important;
    height: 180px !important;   /* 好みで調整。不要なら display:none; */
  }

  /* リーダーボード・個人成績タイトルを少し強調 */
  h2, h3 { margin: 8px 0 !important; }
}

/* 画面では隠すが印刷では出す場合に使うユーティリティ */
.print-only { display: none; }
@media print { .print-only { display: block; } }

/* ========== スコア閾値ハイライト（画面＆印刷） ========== */
.score-hi1 { background: #ff99c2 !important; } /* 淡いピンク */
.score-hi2 { background: #f52779 !important; } /* 濃いピンク */
.score-cell { transition: background-color .15s ease-in-out; }

/* 印刷時にも色が出るように */
@media print {
  .score-hi1, .score-hi2 {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}

.total-hi {
  background: #07abfd !important; /* 水色背景 */
}

@media print {
  .total-hi {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}

/* Chart.js の無限拡張防止用コンテナ */
.chart-box {
  position: relative;
  height: 320px;       /* 表示時の固定高さ */
  max-height: 320px;
  width: 100%;
  overflow: hidden;    /* 念のため */
}

/* コンテナ基準で100%フィット（重要：!important で上書き） */
.chart-box > canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
}

/* 印刷時は少し低めに */
@media print {
  .chart-box {
    height: 180px;
    max-height: 180px;
  }
  .card, .chart-box {
    background: #fff !important;
    color: #000 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}