/* common.css - 三人行足球分析平台公共样式 */
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  font-size: 12px;
  background-color: #f5f7fa;
}
.main-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 8px 16px 24px 16px;
}
.highlight-score-change {
    background-color: #bbbb22 !important;
    transition: background-color 0s;
}
.analysis-header {
  background: linear-gradient(90deg, #f0f4f8, #ffffff);
  border-radius: 0;
  padding: 12px 20px;
  margin-bottom: 20px;
  border-left: 5px solid rgb(107, 173, 223);
}
.analysis-header h1 {
  margin: 0 0 5px 0;
  font-size: 20px;
  color: #2c3e50;
}
.analysis-header .sub {
  margin: 0;
  border: none;
  padding: 0;
  color: #555;
  font-size: 13px;
}
.filter-bar {
  margin-bottom: 4px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
}
.filter-bar input[type="date"],
.filter-bar input[type="text"] {
  padding: 2px 4px;
  font-size: 12px;
  width: 70px;
}
.filter-bar input[type="date"] {
  width: 110px;
}
.filter-tags {
  margin: 4px 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
  font-size: 12px;
}
.filter-tag {
  background: #e6f0ff;
  padding: 2px 6px;
  border-radius: 10px;
  font-size: 11px;
  display: inline-flex;
  align-items: center;
}
.filter-tag.exact {
  background: #ffe0e0;
}
.filter-tag .remove {
  margin-left: 4px;
  cursor: pointer;
  font-weight: bold;
  color: #c00;
}
.btn {
  padding: 4px 8px;
  font-size: 12px;
  cursor: pointer;
}

.h2h-tooltip {
    pointer-events: none;
}

.pagination {
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
  justify-content: center;
  font-size: 12px;
}
.pagination button {
  padding: 2px 6px;
  font-size: 12px;
}
.datetime-display {
  font-size: 12px;
  color: #333;
  white-space: nowrap;
  margin-left: auto;
  margin-right: 8px;
}
table {
  width: 100%;
  border-collapse: collapse;
  margin: 4px auto;
  table-layout: auto;
  border: 1px solid #e2e8f0;
}
th, td {
  padding: 3px 5px;
  border: 1px solid #e2e8f0;
  text-align: center;
  font-size: 13px;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
}
th {
  background: rgb(107, 173, 223);
  color: #ffffff;
  font-weight: normal;
  white-space: normal;
  word-wrap: break-word;
  vertical-align: middle;
  font-size: 12px;
  padding: 3px 5px;
}
td {
  white-space: nowrap;
  vertical-align: middle;
}
tr:nth-child(even) td {
  background-color: #f2f2f2;
}
tr:nth-child(odd) td {
  background-color: #ffffff;
}
th.filter-icon-col, td.filter-icon-col {
  border: none !important;
  background: transparent !important;
}
.clickable { cursor: pointer !important; }
.clickable:hover { background-color: #f0f7ff; }
.id-time-red { background-color: red !important; color: white !important; }
.col-highlight { background-color: #daeef5 !important; font-weight: bold !important; }
.col-highlight-black { background-color: #daeef5 !important; font-weight: bold !important; color: #000000 !important; }
.status-完 { color: red; }
.status-未 { color: black; }
.status-其他 { color: blue; }
.status-中断 {
    background-color: #9e9e9e;
    color: white;
}
.status-text-firsthalf { color: blue; }
.status-text-secondhalf { color: red; }
.rolling-ball { display: inline-block; font-size: 13px; line-height: 1; vertical-align: middle; animation: roll 1s linear infinite; }
@keyframes roll { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
.blink-comma { display: inline-block; animation: blinkComma 1s step-start infinite; line-height: 1; vertical-align: baseline; }
.comma-sup { position: relative; top: -0.35em; font-size: 1.1em; line-height: 1; }
@keyframes blinkComma { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
.score { color: red; font-weight: bold; font-size: 15px; }
.score-inplay { color: blue; font-weight: bold; font-size: 15px; }
.score-vs { color: black; font-weight: normal; font-size: 13px; }
.score-dash { color: black; font-weight: normal; font-size: 13px; }
.handicap { color: blue; }
.result-胜 { color: red; font-weight: bold; }
.result-平 { color: green; font-weight: bold; }
.result-负 { color: blue; font-weight: bold; }
.goals-2-3 { background-color: rgb(146, 208, 80) !important; color: black; }
.goals-4-6 { background-color: rgb(83, 141, 213) !important; color: white; }
.goals-7-plus { background-color: rgb(112, 48, 160) !important; color: white; }
.let-胜, .rlet-胜 { background-color: rgb(226, 107, 10) !important; color: white; padding: 1px 4px; border-radius: 3px; }
.let-负, .rlet-负 { background-color: rgb(0, 112, 192) !important; color: white; padding: 1px 4px; border-radius: 3px; }
.let-走, .rlet-走 { color: black; }
.over-大 { background-color: orange !important; color: white; padding: 1px 4px; border-radius: 3px; }
.over-小 { color: black; }

/* 下半场结果背景色 */
.half-下半平 { background-color: rgb(62,178,52) !important; color: white; padding: 1px 4px; border-radius: 3px; }
.half-下半胜 { background-color: rgb(178,52,68) !important; color: white; padding: 1px 4px; border-radius: 3px; }
.half-下半负 { background-color: rgb(51,122,183) !important; color: white; padding: 1px 4px; border-radius: 3px; }

/* 半全场背景色 */
.jc-bf-胜-胜, .jc-bf-胜-平, .jc-bf-胜-负 { background-color: rgb(255,153,153) !important; }
.jc-bf-平-胜, .jc-bf-平-平, .jc-bf-平-负 { background-color: rgb(153,253,153) !important; }
.jc-bf-负-胜, .jc-bf-负-平, .jc-bf-负-负 { background-color: rgb(153,153,255) !important; }

.pan-上盘 { background-color: yellow !important; color: red; font-weight: bold; padding: 1px 4px; border-radius: 3px; }
.pan-下盘 { background-color: rgb(0, 176, 80) !important; color: white; font-weight: bold; padding: 1px 4px; border-radius: 3px; }
.pan-走盘 { color: black; font-weight: bold; }
.half-goal-ge1 { background-color: yellow !important; color: black; }
.h2h-tooltip { position: fixed; background: white; border: 0; box-shadow: 2px 2px 8px rgba(0,0,0,0.2); z-index: 10000; max-width: 700px; padding: 0; font-size: 12px; pointer-events: auto; }
.h2h-tooltip table { width: 100%; border-collapse: collapse; margin: 0; font-size: 12px; }
.h2h-tooltip th, .h2h-tooltip td { padding: 2px 3px; border: 1px solid #ddd; text-align: center; white-space: nowrap; }
.h2h-tooltip th { background: rgb(0,102,153); color: white; font-weight: normal; }
.h2h-score { color: red; font-weight: bold; }
.h2h-team-home { color: rgb(204,51,0); font-weight: normal; }
.bottom-bar { margin-top: 10px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.bottom-bar .btn-group { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; justify-content: center; width: 100%; }
.bottom-bar input[type="text"] { padding: 2px 4px; font-size: 12px; width: 70px; }
.copyright { font-size: 11px; color: #888; margin-top: 36px; }
.seo-text { position: absolute; left: -9999px; top: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ========== 列宽定义 ========== */
.col-w10 { width: 10em; min-width: 10em; max-width: 10em; }
.col-w8 { width: 8em; min-width: 8em; max-width: 8em; }
.col-w6 { width: 6em; min-width: 6em; max-width: 6em; }
.col-w5 { width: 5em; min-width: 5em; max-width: 5em; }
.col-w4 { width: 4em; min-width: 4em; max-width: 4em; }
.col-w3_5 { width: 3.5em; min-width: 3.5em; max-width: 3.5em; }
.col-w3 { width: 3em; min-width: 3em; max-width: 3em; }
.col-w2 { width: 2em; min-width: 2em; max-width: 2em; }

/* 底部当前条件左对齐 */
#filterTagsBottom {
    align-self: flex-start;
    width: 100%;
    text-align: left;
}

/* ========== 新增：重置按钮手形 ========== */
.reset-inline { cursor: pointer !important; }