/* House analytics page. Shares the game's tokens and form styles from styles.css. */

body.admin {
  min-height: 100vh;
  background:
    radial-gradient(circle at 20% 0%, rgba(184, 47, 231, .2), transparent 40%),
    radial-gradient(circle at 90% 10%, rgba(255, 200, 87, .1), transparent 35%),
    #0d0418;
}

.admin-shell {
  width: min(1180px, calc(100% - 24px));
  margin: 0 auto;
  padding: max(14px, env(safe-area-inset-top)) 0 32px;
}

.admin-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 18px;
  margin-bottom: 16px;
}

.admin-title { flex: 1; min-width: 160px; }
.admin-title h1 { margin: 0; font-size: 22px; font-weight: 900; }
.admin-title small { color: var(--faint); font-size: 12px; }
.admin-top .range { margin: 0; min-width: min(100%, 420px); }

.admin-login { margin: 40px auto; }
.admin-login h2 { margin: 0 0 6px; }

#adminBody.loading { opacity: .55; transition: opacity .2s; }

.kpis {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.kpis.small { grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 10px 0; }

.kpi {
  display: grid;
  gap: 4px;
  padding: 14px;
  border: 1px solid rgba(221, 115, 248, .24);
  border-radius: 16px;
  background: linear-gradient(155deg, rgba(39, 12, 52, .92), rgba(16, 5, 26, .95));
}

.kpi small { color: var(--faint); font-size: 10px; font-weight: 900; letter-spacing: .8px; text-transform: uppercase; }
.kpi strong { color: #fff; font-size: 22px; font-weight: 900; font-variant-numeric: tabular-nums; }
.kpi em { color: var(--muted); font-size: 11px; font-style: normal; line-height: 1.4; }
.kpi.good { border-color: rgba(57, 135, 229, .6); }
.kpi.good strong { color: #8fc1ff; }
.kpi.bad { border-color: rgba(230, 103, 103, .6); }
.kpi.bad strong { color: #ffaaaa; }

.admin-panel {
  margin-bottom: 14px;
  padding: 16px;
  border: 1px solid rgba(221, 115, 248, .24);
  border-radius: 18px;
  background: linear-gradient(155deg, rgba(39, 12, 52, .92), rgba(16, 5, 26, .95));
}

.admin-panel .panel-head { margin-bottom: 8px; }
.admin-panel h3 { margin: 14px 0 6px; font-size: 14px; }
.admin-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr)); gap: 14px; }
.admin-grid .admin-panel { margin-bottom: 0; }
.admin-foot { margin-top: 14px; }

.chart { width: 100%; min-height: 60px; }
.chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.chart-empty { margin: 0; padding: 30px 0; color: var(--faint); font-size: 12px; text-align: center; }
.chart .grid { stroke: rgba(255, 255, 255, .07); stroke-width: 1; }
.chart .axis-zero { stroke: rgba(255, 255, 255, .35); stroke-width: 1; }
.chart .tick { fill: #b9a7c2; font-size: 10px; font-family: inherit; }
.chart .tick.strong { fill: #e9dcef; font-weight: 700; }
.chart .value { fill: #fff; font-size: 11px; font-weight: 800; font-family: inherit; }
.chart .series-label { fill: #e9dcef; font-size: 11px; font-weight: 800; font-family: inherit; }
.chart .crosshair { stroke: rgba(255, 255, 255, .35); stroke-width: 1; }
.chart .target { stroke: var(--gold-bright); stroke-width: 1.5; stroke-dasharray: 4 3; }
.chart .hit { cursor: crosshair; }

.legend { display: flex; flex-wrap: wrap; gap: 12px; color: #e9dcef; font-size: 12px; font-weight: 700; }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 12px; height: 3px; border-radius: 2px; }

.chart-tip {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 400;
  max-width: 260px;
  padding: 9px 11px;
  border: 1px solid rgba(255, 213, 110, .5);
  border-radius: 10px;
  color: #f2e7f7;
  background: rgba(20, 6, 32, .97);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .5);
  font-size: 12px;
  line-height: 1.5;
  pointer-events: none;
}

.chart-tip b { display: block; margin-bottom: 2px; color: var(--gold-bright); }
.chart-tip .swatch { display: inline-block; width: 10px; height: 3px; margin-right: 6px; border-radius: 2px; vertical-align: middle; }

.search {
  min-height: 38px;
  min-width: min(100%, 240px);
  padding: 0 12px;
  border: 1px solid rgba(218, 97, 247, .45);
  border-radius: 10px;
  color: var(--text);
  outline: 0;
  background: #140821;
  font: inherit;
  font-size: 13px;
}

.table-wrap { overflow-x: auto; margin-top: 8px; border-radius: 12px; }

.table-wrap table { width: 100%; border-collapse: collapse; font-size: 12px; font-variant-numeric: tabular-nums; }
.table-wrap th, .table-wrap td { padding: 8px 10px; border-bottom: 1px solid rgba(205, 88, 235, .14); text-align: left; white-space: nowrap; }
.table-wrap th { color: var(--faint); font-size: 10px; font-weight: 900; letter-spacing: .6px; text-transform: uppercase; }
.table-wrap th button { padding: 0; border: 0; color: inherit; cursor: pointer; background: none; font: inherit; letter-spacing: inherit; text-transform: inherit; }
.table-wrap th[aria-sort="ascending"], .table-wrap th[aria-sort="descending"] { color: var(--gold-bright); }
.table-wrap .n { text-align: right; }
.table-wrap td small { display: block; color: var(--faint); font-size: 10px; }
.table-wrap td.empty { padding: 18px; color: var(--faint); text-align: center; }
.table-wrap tbody tr[data-player] { cursor: pointer; }
.table-wrap tbody tr[data-player]:hover, .table-wrap tbody tr[data-player]:focus { background: rgba(255, 213, 110, .07); outline: none; }

.drawer-card { width: min(100%, 760px); }

@media (max-width: 600px) {
  .kpi strong { font-size: 18px; }
  .admin-top .range { min-width: 100%; }
}

/* Complaints desk */
.complaints { display: grid; gap: 10px; }
.complaint { padding: 12px; border: 1px solid rgba(255, 200, 87, .2); border-radius: 12px; background: rgba(255, 255, 255, .03); }
.complaint header { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; }
.complaint header small { color: var(--muted); }
.complaint .tag { padding: 1px 8px; border-radius: 999px; font-size: 11px; background: rgba(255, 255, 255, .08); color: var(--muted); }
.complaint .tag.open { color: var(--gold-bright); }
.complaint .tag.resolved { color: #6ff0c2; }
.complaint .who { margin: 6px 0 2px; color: var(--muted); font-size: 13px; }
.complaint .msg { margin: 0 0 8px; white-space: pre-wrap; }
.complaint label { display: grid; gap: 4px; color: var(--muted); font-size: 12px; }
.complaint textarea { width: 100%; padding: 8px 10px; border: 1px solid rgba(255, 255, 255, .16); border-radius: 10px; background: rgba(0, 0, 0, .25); color: inherit; font: inherit; }
.complaint .actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.complaint .actions button { padding: 7px 12px; border: 1px solid rgba(255, 200, 87, .4); border-radius: 999px; background: transparent; color: var(--gold-bright); font: inherit; font-size: 13px; cursor: pointer; }
.complaint .err { color: #ff8a8a; }