/* ============================================================
   Match Detail Page Styles
   ============================================================ */

/* Full screen overlay */
#matchDetail {
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: var(--primary);
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    -webkit-overflow-scrolling: touch;
}

#matchDetail.open { transform: translateX(0); }

.md-page { max-width: 700px; margin: 0 auto; padding-bottom: 60px; }

/* Top bar */
.md-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    background: rgba(26, 10, 46, 0.95);
    backdrop-filter: blur(12px);
    z-index: 10;
}

.md-back {
    background: none;
    border: none;
    color: var(--gold);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    padding: 4px 8px;
}

.md-stage { color: var(--text-dim); font-size: 0.85rem; }

/* Header */
.md-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 28px 20px 20px;
    text-align: center;
}

.md-team {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.md-flag { font-size: 3rem; }
.md-name { font-size: 1.1rem; font-weight: 700; }
.md-rank { font-size: 0.75rem; color: var(--text-dim); }

.md-vs {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    min-width: 100px;
}

.md-vs-text {
    font-size: 1.5rem;
    font-weight: 900;
    color: var(--accent);
}

.md-datetime { font-size: 0.75rem; color: var(--gold); }
.md-venue { font-size: 0.7rem; color: var(--text-dim); text-align: center; }

/* Confidence */
.md-confidence {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding: 16px 20px;
    margin: 0 20px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.md-conf-text { text-align: center; }
.md-conf-num { font-size: 2rem; font-weight: 800; color: var(--gold); }
.md-conf-label { font-size: 0.75rem; color: var(--text-dim); }
.md-conf-pick { font-size: 0.9rem; font-weight: 700; color: var(--accent); margin-top: 4px; }

/* Tabs */
.md-tabs {
    display: flex;
    gap: 4px;
    padding: 16px 20px 0;
    border-bottom: 1px solid var(--border);
}

.md-tab {
    flex: 1;
    padding: 10px;
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    color: var(--text-dim);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: 0.2s;
}

.md-tab.active { color: var(--gold); border-bottom-color: var(--gold); }
.md-tab:hover { color: var(--text); }

.md-tab-content { padding: 0 20px 20px; }

/* Sections */
.md-section {
    padding: 20px 0;
    border-bottom: 1px solid var(--border);
}

.md-section:last-child { border-bottom: none; }

.md-section-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--gold);
    margin-bottom: 16px;
}

/* Form badges */
.md-form-row { display: flex; justify-content: space-between; gap: 16px; }
.md-form-team { display: flex; gap: 6px; }

.form-badge {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 700;
    color: #fff;
}

.form-W { background: #2ecc71; }
.form-D { background: #f39c12; }
.form-L { background: #e74c3c; }

/* Stat compare bars */
.stat-compare {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.sc-val {
    width: 40px;
    text-align: center;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-dim);
}

.sc-val.sc-better { color: var(--success); font-weight: 800; }

.sc-bar-wrap {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 4px;
}

.sc-label {
    font-size: 0.7rem;
    color: var(--text-dim);
    min-width: 65px;
    text-align: center;
    flex-shrink: 0;
}

.sc-bar-left, .sc-bar-right {
    flex: 1;
    height: 6px;
    background: rgba(255,255,255,0.08);
    border-radius: 3px;
    overflow: hidden;
}

.sc-bar-left { direction: rtl; }

.sc-fill-left, .sc-fill-right {
    height: 100%;
    border-radius: 3px;
    background: rgba(255,255,255,0.25);
    transition: width 0.8s ease;
}

.sc-fill-win { background: var(--success) !important; }

/* H2H */
.md-h2h-summary {
    display: flex;
    justify-content: space-around;
    margin-bottom: 12px;
}

.h2h-wins { font-weight: 700; font-size: 0.9rem; }
.h2h-draws { color: var(--text-dim); font-size: 0.9rem; }

.md-h2h-list { display: flex; flex-direction: column; gap: 6px; }

.h2h-match {
    display: flex;
    justify-content: space-between;
    padding: 8px 12px;
    background: var(--surface);
    border-radius: 6px;
    font-size: 0.85rem;
}

.h2h-date { color: var(--text-dim); }
.h2h-result { font-weight: 700; }
.h2h-result.win-a { color: var(--success); }
.h2h-result.win-b { color: var(--accent); }
.h2h-result.draw-r { color: var(--gold); }

/* Tactics */
.md-tactics-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.md-tactic-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 16px;
}

.tactic-team { font-weight: 700; font-size: 0.95rem; margin-bottom: 10px; }
.tactic-info { font-size: 0.8rem; color: var(--text-dim); margin-bottom: 4px; }
.tactic-info b { color: var(--text); }
.tactic-injury { font-size: 0.75rem; color: var(--accent); margin-top: 8px; }
.tactic-healthy { font-size: 0.75rem; color: var(--success); margin-top: 8px; }
.tactic-motivation { font-size: 0.75rem; color: var(--gold); margin-top: 6px; font-style: italic; }

/* Odds */
.odds-row {
    display: flex;
    gap: 8px;
}

.odds-item {
    flex: 1;
    text-align: center;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 16px 8px;
}

.odds-label { font-size: 0.8rem; color: var(--text-dim); margin-bottom: 6px; }
.odds-val { font-size: 1.5rem; font-weight: 800; color: var(--gold); }
.odds-prob { font-size: 0.8rem; color: var(--text-dim); margin-top: 4px; }

/* Kelly */
.kelly-row { display: flex; gap: 8px; }

.kelly-item {
    flex: 1;
    display: flex;
    justify-content: space-between;
    padding: 12px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 0.85rem;
}

.kelly-item.kelly-good { border-color: rgba(46, 204, 113, 0.4); }
.kelly-item.kelly-bad { border-color: rgba(231, 76, 60, 0.3); }
.kelly-val { font-weight: 700; }
.kelly-good .kelly-val { color: var(--success); }
.kelly-bad .kelly-val { color: var(--accent); }
.kelly-hint { font-size: 0.7rem; color: var(--text-dim); margin-top: 8px; text-align: center; }

/* Asian Handicap */
.ah-display {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 20px;
    background: var(--surface);
    border-radius: var(--radius-sm);
    margin-bottom: 8px;
}

.ah-team { font-weight: 600; font-size: 0.9rem; }

.ah-line {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--gold);
    background: rgba(255, 215, 0, 0.1);
    padding: 6px 16px;
    border-radius: 8px;
}

.ah-water {
    display: flex;
    justify-content: space-around;
    font-size: 0.8rem;
    color: var(--text-dim);
}

/* Over/Under */
.ou-display {
    display: flex;
    justify-content: space-around;
    padding: 16px;
    background: var(--surface);
    border-radius: var(--radius-sm);
    margin-bottom: 12px;
}

.ou-line { font-weight: 700; color: var(--gold); }
.ou-expected { color: var(--text-dim); font-size: 0.85rem; }

.ou-bars { display: flex; flex-direction: column; gap: 8px; }

.ou-bar-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ou-label { width: 40px; font-size: 0.8rem; color: var(--text-dim); }

.ou-bar {
    flex: 1;
    height: 8px;
    background: rgba(255,255,255,0.08);
    border-radius: 4px;
    overflow: hidden;
}

.ou-fill { height: 100%; border-radius: 4px; transition: width 0.8s ease; }
.ou-over { background: linear-gradient(90deg, #e74c3c, #f39c12); }
.ou-under { background: linear-gradient(90deg, #2ecc71, #27ae60); }
.ou-pct { width: 40px; font-size: 0.8rem; font-weight: 700; text-align: right; }

.ou-expect-row {
    display: flex;
    justify-content: space-around;
    margin-top: 12px;
    font-size: 0.8rem;
    color: var(--text-dim);
}

/* Value bet */
.value-bet {
    padding: 16px;
    border-radius: var(--radius-sm);
    text-align: center;
    font-weight: 600;
    font-size: 0.9rem;
}

.value-found { background: rgba(46, 204, 113, 0.15); border: 1px solid rgba(46, 204, 113, 0.3); color: var(--success); }
.value-none { background: var(--surface); border: 1px solid var(--border); color: var(--text-dim); }

/* WDL bars */
.wdl-bars { display: flex; flex-direction: column; gap: 10px; }

.wdl-item { display: flex; flex-direction: column; gap: 4px; }
.wdl-label { font-size: 0.8rem; font-weight: 600; }

.wdl-bar-wrap {
    height: 10px;
    background: rgba(255,255,255,0.08);
    border-radius: 5px;
    overflow: hidden;
}

.wdl-fill { height: 100%; border-radius: 5px; transition: width 0.8s ease; }
.wdl-home { background: linear-gradient(90deg, #2ecc71, #27ae60); }
.wdl-draw { background: linear-gradient(90deg, #f39c12, #e67e22); }
.wdl-away { background: linear-gradient(90deg, #e74c3c, #c0392b); }

.pred-recommend {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
    padding: 12px 16px;
    background: rgba(46, 204, 113, 0.1);
    border: 1px solid rgba(46, 204, 113, 0.3);
    border-radius: var(--radius-sm);
}

.pred-rec-label { font-size: 0.85rem; color: var(--text-dim); }
.pred-rec-pick { font-size: 1rem; font-weight: 800; color: var(--success); }
.pred-reasoning { font-size: 0.8rem; color: var(--text-dim); margin-top: 8px; line-height: 1.6; }

/* AH recommend */
.ah-recommend, .ou-recommend {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 16px;
    text-align: center;
}

.ah-rec-line { font-size: 0.85rem; color: var(--text-dim); margin-bottom: 6px; }
.ah-rec-pick { font-size: 1.1rem; font-weight: 700; color: var(--gold); }
.ah-rec-reason { font-size: 0.8rem; color: var(--text-dim); margin-top: 6px; }

.ou-rec-pick { font-size: 1.1rem; font-weight: 700; color: var(--gold); margin-bottom: 6px; }
.ou-rec-detail { font-size: 0.8rem; color: var(--text-dim); }

/* Score grid */
.score-grid { display: flex; gap: 8px; flex-wrap: wrap; }

.score-item {
    flex: 1;
    min-width: 60px;
    text-align: center;
    padding: 12px 8px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
}

.score-item.score-top { border-color: var(--gold); background: rgba(255, 215, 0, 0.08); }
.score-val { display: block; font-size: 1.2rem; font-weight: 800; }
.score-top .score-val { color: var(--gold); }
.score-prob { font-size: 0.7rem; color: var(--text-dim); }

/* HTFT */
.htft-grid { display: flex; gap: 8px; flex-wrap: wrap; }

.htft-item {
    flex: 1;
    min-width: 55px;
    text-align: center;
    padding: 10px 6px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
}

.htft-item.htft-top { border-color: var(--gold); background: rgba(255, 215, 0, 0.08); }
.htft-label { display: block; font-size: 0.85rem; font-weight: 700; }
.htft-top .htft-label { color: var(--gold); }
.htft-prob { font-size: 0.7rem; color: var(--text-dim); }

/* Risk */
.risk-list { display: flex; flex-direction: column; gap: 8px; }

.risk-item {
    padding: 10px 14px;
    background: rgba(231, 76, 60, 0.08);
    border: 1px solid rgba(231, 76, 60, 0.2);
    border-radius: 6px;
    font-size: 0.85rem;
    color: #e8a0a0;
}

/* ---- Mobile responsive ---- */
@media (max-width: 768px) {
    .md-tactics-grid { grid-template-columns: 1fr; }
    .md-header { gap: 8px; padding: 20px 12px 16px; }
    .md-flag { font-size: 2.2rem; }
    .md-name { font-size: 0.95rem; }
    .md-vs-text { font-size: 1.2rem; }
    .md-vs { min-width: 70px; }
    .md-confidence { margin: 0 12px; gap: 14px; padding: 14px; }
    .md-tab-content { padding: 0 12px 20px; }
    .odds-row { flex-direction: column; }
    .kelly-row { flex-direction: column; }
    .sc-label { min-width: 55px; font-size: 0.65rem; }
    .sc-val { width: 32px; font-size: 0.75rem; }
}

html.touch-device .md-tactics-grid { grid-template-columns: 1fr !important; }
html.touch-device .odds-row { flex-direction: column !important; }
html.touch-device .kelly-row { flex-direction: column !important; }

/* Make schedule items clickable */
.schedule-item.clickable { cursor: pointer; }
.schedule-item.clickable:hover { border-color: var(--gold); background: rgba(255, 215, 0, 0.05); }
.schedule-item.clickable::after {
    content: '→';
    color: var(--gold);
    font-weight: 700;
    font-size: 1rem;
}