:root{--bg:#f7f9fc;--card:#fff;--muted:#666}

*{box-sizing:border-box;font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial}
body{margin:12px;background:var(--bg);color:#111}
main{max-width:1100px;margin:0 auto;background:var(--card);padding:14px;border-radius:8px;box-shadow:0 6px 18px rgba(18,22,30,0.06)}
h1{margin:0 0 10px;font-size:18px}
.controls{display:flex;gap:8px;margin-bottom:10px}
input[type=search]{flex:1;padding:6px;border:1px solid #ddd;border-radius:6px}
select{padding:6px;border:1px solid #ddd;border-radius:6px}
.table-wrap{overflow:auto;border-radius:6px}

/* Compact table to avoid horizontal scrolling */
table{width:100%;border-collapse:collapse;table-layout:fixed;font-size:13px}
th,td{padding:6px 8px;border-bottom:1px solid #eee;text-align:left;max-width:160px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
th{background:#fafafa;font-weight:600}
tbody tr:hover{background:#fbfcff}

.muted{color:var(--muted);font-size:12px}

@media (max-width:900px){
	th,td{max-width:120px;font-size:12px;padding:5px}
	input[type=search]{font-size:13px}
}

/* Styling for combined date/time column */
.when-date{font-weight:600;line-height:1.1}
.when-time{color:var(--muted);font-size:12px;line-height:1.1}

.file-meta{margin:8px 0 10px;font-size:13px}

/* Reported at split lines */
.reported-top{font-weight:600;line-height:1.1}
.reported-bottom{color:var(--muted);font-size:12px;line-height:1.1}

/* Highlighting for selected team */
/* Highlighting for selected team: filled = green, empty = red */
.highlight-home-filled{background:#e6ffea}
.highlight-home-empty{background:#ffecec}
.highlight-away-filled{background:#e6ffea}
.highlight-away-empty{background:#ffecec}

/* Center rating columns (spirit / foolishness) */
.rating-cell{ text-align:center }

/* Make check/cross slightly larger for visibility */
.check-cell, .cross-cell{ font-size:1.05em }

/* Choice chips */
.chips{display:flex;gap:8px;margin:10px 0 12px}
.chip{padding:6px 10px;border-radius:999px;border:1px solid #ddd;background:#fff;cursor:pointer}
.chip.active{background:#111;color:#fff;border-color:transparent}
.chip:focus{outline:2px solid #cfe3ff}