/* Mobile-first shared styles for AISAI.M.LEAGUE */

/* Base */
html { box-sizing: border-box; }
*, *::before, *::after { box-sizing: inherit; }
body {
  margin: 0;
  color: #222;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

main { padding: 12px; padding-top: 70px; }
a { text-decoration:none; }
input, select {  color: black; background-color: white; }
h1,h2,h3 { text-align: center; }

/* Layout helpers */
.container { max-width: 960px; margin: 0 auto; }
.page-title { font-size: 1.25rem; font-weight: 700; text-align: center; margin: 16px 0; }

/* Cards */
.table-container, .card, .form-container, .charts-container .chart-card {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.06);
}
.table-container { margin-bottom: 16px; overflow: hidden; }
.table-wrapper { overflow-x: auto; padding: 12px; }

/* Tables */
table { border-collapse: separate; border-spacing: 0; width: 100%; }
.score-table th, .score-table td, .history-table th, .history-table td, .result-table th, .result-table td {
  padding: 10px 8px; text-align: center; font-size: 0.95rem;
}
.score-table th, .history-table th, .result-table th { background: #e9ecef; font-weight: 700; }
.score-table td, .history-table td, .result-table td { border-bottom: 1px solid #eef0f2; }
.history-table .red-text, .result-table .red-text { color: #e74c3c; }

/* Buttons */
.btn, .select-button, .action-button, .submit-button, .toggle-button, .direction-button, .sound-button {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 10px 16px; border-radius: 8px; border: none;
  font-size: 1rem; font-weight: 700; cursor: pointer;
  transition: background-color .2s ease, transform .06s ease, box-shadow .2s ease;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}
.btn:active, .select-button:active, .action-button:active, .submit-button:active, .direction-button:active, .sound-button:active {
  transform: translateY(1px);
}
.btn-primary, .submit-button { background:#009944; color:#fff; }
.btn-primary:hover, .submit-button:hover { background:#007a37; }
.btn-danger, .delete-button { background:#e74c3c; color:#fff; }
.btn-danger:hover, .delete-button:hover { background:#c0392b; }
.btn-secondary { background:#f0f0f0; color:#333; }
.select-button-container { text-align: center; }
.select-button { width: 200px; margin: 6px 0; background:#fff; color:#009944; border:1px solid #dbe5df; }
.direction-button { background:#f7f7f7; border:1px solid #ddd; margin-right:8px; }
.direction-button.selected { background:#1e90ff; color:#fff; border-color:#1e90ff; }
.action-button { color:#fff; }
.edit-button { background:#2ecc71; }
.edit-button:hover { background:#27ae60; }
.delete-button { background:#e74c3c; }
.delete-button:hover { background:#c0392b; }

/* Forms */
.form-container { padding: 16px; }
.registration-form, .player-selection-form { display: flex; flex-direction: column; gap: 12px; }
.form-group { display: flex; flex-direction: column; gap: 6px; }
.input, select.input, .year-select, .player-select, .play_date, input[type="number"], input[type="tel"], input[type="text"], textarea {
  padding: 3px; border:1px solid #dfe3e6; border-radius: 8px; font-size: 1rem; width: 100%;
}
.year-select { width: 100px; }
.player-select { width: 200px; }
.year-select, .player-select { background:#fff; }
.date-inputs { display: flex; align-items: center; gap: 8px; }

/* Charts */
.charts-container { display:grid; grid-template-columns: 1fr; gap: 12px; margin: 12px 0; }
.charts-container .chart-card { padding: 12px; }
.charts-container .chart-card h3 { text-align:center; color:#009944; margin: 4px 0 10px; }
.chart-wrapper { display:flex; justify-content:center; height:280px; position:relative; }
canvas { max-width:100%; height:auto; }

/* Badge */
.page-title { margin-top: 16px; }
.divider { border: none; border-top: 1px solid #eee; margin: 16px 0; }
.success-message { background:#d4edda; color:#155724; border:1px solid #c3e6cb; padding:10px 12px; border-radius:6px; text-align:center; }
.badge-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 10px; }
.badge-item { display:flex; flex-direction:column; align-items:center; gap:4px; padding:10px; background:#f9f9f9; border:1px solid #ddd; border-radius:8px; }
.badge-button { padding:0; border:2px solid transparent; border-radius:10px; background:transparent; cursor:pointer; }
.badge-button.selected .badge-item { border-color:#28a745; box-shadow:0 0 10px rgba(40,167,69,.3); position:relative; }
.badge-button.selected .badge-item::after { content:'✔'; position:absolute; top:4px; right:6px; background:#28a745; color:#fff; font-size:10px; width:16px; height:16px; border-radius:50%; display:flex; align-items:center; justify-content:center; }

/* Pagination */
.pagination, .pagination-nav { text-align:center; margin: 12px 0; }
.page-link { display:inline-block; padding:6px 10px; margin:0 3px; border:1px solid #ddd; background:#f8f8f8; color:#333; text-decoration:none; border-radius:6px; }
.page-link.active { background:#4CAF50; color:#fff; border-color:#4CAF50; }

/* Admin add button */
.add-button {
    background: rgba(255,255,255,0.2);
    color: #fff;
    border: none;
    padding: 6px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9rem;
    transition: background-color 0.2s ease;
}
.add-button:hover {
    background: rgba(255,255,255,0.3);
}



/* Rank circles */
.rank-column { position:relative; display:flex; justify-content:center; align-items:center; height:100%; }
.rank-icon { width:22px; height:22px; display:flex; align-items:center; justify-content:center; border-radius:50%; font-size:.9rem; }
.rank-1{ background:#c1ab05; }
.rank-2{ background:#eaecec; }
.rank-3{ background:#eaecec; }
.rank-4{ background:#fff; }

/* iPhone (375px - 414px) */
@media (max-width: 414px) {
  main { padding: 8px; padding-top: 70px; }
  .page-title { font-size: 1.1rem; margin: 16px 0; }
  .table-wrapper { padding: 8px; }
  .score-table th, .score-table td, .history-table th, .history-table td, .result-table th, .result-table td {
    padding: 8px 4px; font-size: 0.85rem;
  }
  .btn, .select-button, .action-button, .submit-button, .direction-button, .sound-button {
    min-height: 48px; padding: 12px 16px; font-size: 1rem;
  }
  .charts-container .chart-wrapper { height: 240px; }
  .sound-button { font-size: 1.2rem; padding: 16px; }
  .badge-grid { grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); gap: 8px; }
  .rank-icon { width: 20px; height: 20px; font-size: 0.8rem; }
}

/* PC (768px and above) */
@media (min-width: 768px) {
  main { padding: 20px; padding-top: 70px; }
  .page-title { font-size: 1.5rem; margin: 24px 0; }
  .table-wrapper { padding: 16px; }
  .score-table th, .score-table td, .history-table th, .history-table td, .result-table th, .result-table td {
    padding: 12px 10px; font-size: 1rem;
  }
  .btn, .select-button, .action-button, .submit-button, .direction-button, .sound-button {
    min-height: 40px; padding: 8px 16px; font-size: 0.95rem;
  }
  .charts-container { grid-template-columns: repeat(2, 1fr); }
  .charts-container .chart-wrapper { height: 320px; }
  .sound-button { font-size: 1rem; padding: 12px; }
  .badge-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 12px; }
  .rank-icon { width: 24px; height: 24px; font-size: 1rem; }
  
  /* PC特有のホバー効果 */
  .btn:hover, .select-button:hover, .action-button:hover, .submit-button:hover, .direction-button:hover, .sound-button:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  }
  .input:hover, select.input:hover, .year-select:hover, .player-select:hover {
    border-color: #009944;
  }
}