/* Simple modern UI inspired by Hudl aesthetics (no branding assets) */
	:root {
  --bg: #0f1115;
  --panel: #171a21;
  --text: #e6e8ec;
  --muted: #9aa4b2;
  --accent: #ff6a13; /* vibrant orange */
  --accent-2: #ff8a4c;
  --success: #28a745;
  --danger: #d81b60; /* magenta */
  --warn: #ffc107;
  --border: #242835;

	  /* Tables: white background + gray zebra striping. */
	  --table-bg: #ffffff;
	  --table-text: #111827;
	  --table-border: #d0d7de;
	  --row-odd: #f3f4f6;
	  --row-even: #e5e7eb;
	  --row-hover: #dbeafe; /* subtle light-blue highlight */
	  --thead-bg: #f8fafc;
	  --thead-text: #1f2937;
	}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  line-height: 1.5;
}

.site-header {
  background: #0c0e13;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 50;
}
.nav-wrap { display: flex; align-items: center; justify-content: space-between; padding: 0.75rem 1.25rem; max-width: 1200px; margin: 0 auto; }
.brand { display: inline-flex; align-items: center; gap: .5rem; text-decoration: none; }
.brand-badge { width: 28px; height: 28px; border-radius: 6px; background: linear-gradient(135deg, var(--accent), var(--accent-2)); display: inline-block; }
.brand-title { color: var(--text); font-weight: 700; letter-spacing: .4px; }

.nav-links a { color: var(--muted); text-decoration: none; margin-left: 1rem; font-weight: 600; }
.nav-links a:hover { color: var(--text); }

.container { max-width: 1500px; margin: 0 auto; padding: 1.25rem; }
.hero { padding: 3rem 0 2rem; text-align: center; }
.hero h1 { font-size: 2.1rem; margin: 0 0 .5rem; }
.hero p { color: var(--muted); margin: 0 0 1rem; }

.btn { display: inline-block; background: #1f2430; color: var(--text); border: 1px solid var(--border); padding: .6rem 1rem; border-radius: 8px; text-decoration: none; font-weight: 700; transition: .15s; }
.btn:hover { filter: brightness(1.1); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #101114; }
.btn.secondary { background: #1c212c; }
.btn.danger { background: var(--danger); border-color: var(--danger); color: #101114; }

/* In tables (white background), render "secondary" buttons as slightly darker than the row background. */
table a.btn.secondary, table button.btn.secondary {
  background: rgba(0, 0, 0, 0.06);
  border-color: rgba(0, 0, 0, 0.14);
  color: var(--table-text);
}
table a.btn.secondary:hover, table button.btn.secondary:hover {
  background: rgba(0, 0, 0, 0.09);
}

.grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.card { background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 1rem; }
.card h3 { margin: 0 0 .5rem; }

form { margin: 1rem 0; }
.form-row { display: flex; flex-direction: column; gap: .5rem; margin-bottom: .75rem; }
input[type=text], input[type=password], input[type=email], input[type=file], select, input[type=number], input[type=datetime-local] {
  background: #12151c; color: var(--text);
  border: 1px solid var(--border); border-radius: 8px; padding: .6rem .75rem; width: 100%;
}
button { cursor: pointer; }

.flash { padding: .65rem .9rem; border-radius: 10px; margin: .5rem 0; font-weight: 600; }
.flash.error { background: #31161a; border: 1px solid #4a1a22; color: #ffb3be; }
.flash.success { background: #14291d; border: 1px solid #1f3b2a; color: #abf5c0; }

table { width: 100%; border-collapse: collapse; background: var(--table-bg); color: var(--table-text); border: 1px solid var(--table-border); border-radius: 12px; overflow: hidden; }
th, td { padding: .75rem 1rem; border-bottom: 1px solid var(--table-border); border-right: 1px solid var(--table-border); text-align: left; }
th:last-child, td:last-child { border-right: none; }
tbody tr:last-child td { border-bottom: none; }
thead th { background: var(--thead-bg); color: var(--thead-text); font-weight: 800; }
tbody tr:nth-child(odd) { background: var(--row-odd); }
tbody tr:nth-child(even) { background: var(--row-even); }
	/* Row hover highlight (apply to cells so it doesn't conflict with sticky/frozen columns). */
	tbody tr:hover td { background: var(--row-hover); }
	tbody tr:hover td.sticky-col { background: var(--row-hover); }

/* Clamp header label height to <= 2 lines (wrapping allowed, but no tall header rows). */
.th-clamp {
  white-space: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-height: 1.15;
  max-width: 22ch;
}

/* Keep date/time fields readable and non-wrapping */
td, th { vertical-align: top; }
td { overflow-wrap: anywhere; }
td.nowrap, th.nowrap { white-space: nowrap; }

/* Utility: prevent column text wrapping for wide tables (use with overflow-x:auto wrappers). */
.table-nowrap { width: max-content; min-width: 100%; }
.table-nowrap th, .table-nowrap td { white-space: nowrap; }
.table-nowrap th .th-clamp { white-space: normal; }

/* Horizontal scroll wrapper for wide tables */
.table-scroll { overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch; position: relative; }

/* Scrollable viewport for very tall tables (e.g., game events). */
.table-scroll-y { overflow-y: auto; max-height: 50vh; position: relative; }
.table-scroll-y thead th { position: sticky; top: 0; z-index: 4; }

/* Sortable tables */
.table-sortable th { cursor: pointer; user-select: none; }
.table-sortable th.sorted-asc::after { content: " ▲"; font-size: .85em; color: var(--muted); }
.table-sortable th.sorted-desc::after { content: " ▼"; font-size: .85em; color: var(--muted); }

/* Allow newline rendering inside specific cells even in nowrap tables */
td.cell-pre { white-space: pre-line !important; }

/* Tables that should never wrap cell content (used with JS fit scaling). */
.table-never-wrap th, .table-never-wrap td { white-space: nowrap !important; }
.table-never-wrap td { overflow-wrap: normal !important; word-break: normal !important; }

/* Freeze left columns (JS sets left offsets; CSS provides layering + row-matched backgrounds) */
table[data-freeze-cols] { border-collapse: separate; border-spacing: 0; overflow: visible; }
th.sticky-col, td.sticky-col { position: sticky; left: 0; z-index: 3; }
thead th.sticky-col { background: var(--thead-bg); z-index: 6; }
tbody tr:nth-child(odd) td.sticky-col { background: var(--row-odd); }
tbody tr:nth-child(even) td.sticky-col { background: var(--row-even); }
td.sticky-col, th.sticky-col { box-shadow: 1px 0 0 var(--table-border); }

.status-badge { display: inline-block; padding: .2rem .5rem; border-radius: 999px; font-size: .8rem; font-weight: 800; }
.status-COMPLETED { background: rgba(40,167,69,.15); color: #7bdfa1; border: 1px solid rgba(40,167,69,.3); }
.status-RUNNING, .status-SUBMITTED, .status-PENDING { background: rgba(255,106,19,.15); color: #ffb58a; border: 1px solid rgba(255,106,19,.35); }
.status-FAILED, .status-CANCELLED, .status-TIMEOUT { background: rgba(220,53,69,.12); color: #ff9aa7; border: 1px solid rgba(220,53,69,.3); }

.muted { color: var(--muted); }
.spacer { height: 1rem; }

/* Game events timeline */
.events-timeline {
  background: #12151c;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: .75rem;
  margin: .75rem 0;
}
.events-timeline-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}
.events-timeline-legend {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem .75rem;
  justify-content: flex-end;
}
.events-timeline-legend-item {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  color: var(--muted);
  font-size: .85rem;
  white-space: nowrap;
}
.events-timeline-legend-item svg {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
}
.events-timeline-wrap {
  position: relative;
  overflow-x: auto;
  max-width: 100%;
  -webkit-overflow-scrolling: touch;
  padding-top: .35rem;
}
.events-timeline-svg {
  display: block;
}

.events-timeline-tooltip {
  position: absolute;
  z-index: 20;
  max-width: min(420px, 92vw);
  background: rgba(12, 14, 19, 0.96);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 10px;
  padding: .55rem .65rem;
  box-shadow: 0 10px 28px rgba(0,0,0,0.45);
  color: var(--text);
  pointer-events: none;
}
.events-timeline-tooltip-header {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin-bottom: .15rem;
}
.events-timeline-tooltip-icon {
  width: 52px;
  height: 52px;
  flex: 0 0 auto;
}
.events-timeline-tooltip-title {
  font-weight: 800;
}
.events-timeline-tooltip-meta {
  color: var(--muted);
  font-size: .85rem;
  margin-bottom: .35rem;
}
.events-timeline-tooltip-line {
  color: rgba(230,232,236,0.9);
  font-size: .85rem;
}
.events-timeline-tooltip-pre {
  white-space: pre-line;
}

/* Mobile: tables should scroll horizontally instead of wrapping each cell into unreadable columns. */
@media (max-width: 720px), (pointer: coarse) and (max-width: 980px) {
  body { font-size: 14px; }
  .container { padding: .75rem; }
  .nav-wrap { padding: .6rem .85rem; }
  .nav-links { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: flex-end; }
  .nav-links a { margin-left: 0; }
  .hero { padding: 1.75rem 0 1.25rem; }
  .hero h1 { font-size: 1.6rem; }
  .btn { padding: .42rem .6rem; font-size: .92rem; }
  .card { padding: .85rem; }

  th, td { padding: .5rem .55rem; font-size: .84rem; }

  /* Make all tables horizontally scrollable on small screens. */
  table {
    display: block;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }
  table th, table td { white-space: nowrap; }
  table td { overflow-wrap: normal; word-break: normal; }

  /* If a table is already wrapped in an explicit scroll container, keep scrolling on the wrapper
     so sticky/frozen columns work reliably. */
  .table-scroll > table,
  .table-scroll-y > table {
    display: table;
    overflow-x: visible;
    overflow-y: visible;
    white-space: nowrap;
    width: max-content;
    min-width: 100%;
  }

  /* Additionally scale down scrollable tables based on JS-computed --mobile-table-scale. */
  table.table-mobile-scale th,
  table.table-mobile-scale td {
    font-size: calc(.84rem * var(--mobile-table-scale, 1));
    padding: calc(.5rem * var(--mobile-table-scale, 1)) calc(.55rem * var(--mobile-table-scale, 1));
  }
  table.table-mobile-scale img {
    width: calc(22px * var(--mobile-table-scale, 1)) !important;
    height: calc(22px * var(--mobile-table-scale, 1)) !important;
  }
  table.table-mobile-scale a.btn,
  table.table-mobile-scale button.btn {
    font-size: calc(.92rem * var(--mobile-table-scale, 1));
    padding: calc(.42rem * var(--mobile-table-scale, 1)) calc(.6rem * var(--mobile-table-scale, 1));
  }

  /* Opt-out for small tables that should fit on mobile without scrolling. */
  table.table-no-scroll-mobile {
    display: table;
    width: max-content;
    max-width: none;
    overflow-x: visible;
    white-space: normal;
  }
  table.table-no-scroll-mobile th,
  table.table-no-scroll-mobile td {
    white-space: nowrap;
  }
  /* Use JS to scale these tables to fit; keep them nowrap for readability. */
  .table-fit-wrap table.table-no-scroll-mobile th,
  .table-fit-wrap table.table-no-scroll-mobile td {
    white-space: nowrap !important;
  }
  table.table-no-scroll-mobile a.btn.secondary {
    padding: .3rem .45rem;
    font-size: .9em;
  }
  table.table-no-scroll-mobile img {
    width: 22px !important;
    height: 22px !important;
  }
  .table-fit-wrap { width: 100%; max-width: 100%; overflow: hidden; }

  .events-timeline { padding: .65rem; }
  .events-timeline-legend-item { font-size: .82rem; }
  .events-timeline-legend-item svg { width: 22px; height: 22px; }
}

@media (max-width: 420px) {
  body { font-size: 13px; }
  th, td { padding: .45rem .5rem; font-size: .8rem; }
  .btn { padding: .38rem .55rem; font-size: .9rem; }
}