:root {
  color-scheme: dark;
  --shell: #17171a;
  --nav-rail: #1f1f22;
  --panel: #1c1c20;
  --panel-raised: #202024;
  --text-main: #f2f2f0;
  --text-secondary: #b7b6b0;
  --text-muted: #92918c;
  --accent: #2c8d47;
  --accent-hover: #329b50;
  --border: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.14);
  --radius: 9px;
  --radius-sm: 6px;
  --transition: 120ms ease-in-out;
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.3), 0 4px 16px rgba(0, 0, 0, 0.18);
  --shadow-modal: 0 8px 40px rgba(0, 0, 0, 0.5);
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  overflow: hidden;
  font-family: "Segoe UI", "Inter", system-ui, Arial, sans-serif;
  background: var(--shell);
  color: var(--text-main);
  -webkit-font-smoothing: antialiased;
}

#app { height: 100%; }

/* The page itself never scrolls -- the content area below the top bar
   scrolls internally instead, so the header always stays put. */
.app-frame { display: flex; flex-direction: column; height: 100%; }

h1, h2, h3 { font-weight: 600; margin: 0; }
h2 { font-size: 1.05rem; margin-bottom: 1rem; }
h3 { font-size: 0.9rem; color: var(--text-secondary); margin: 1.5rem 0 0.6rem; }
button { font-weight: 600; }

a { color: var(--accent); }

button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font: inherit;
  font-size: 0.88rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong);
  background: var(--panel-raised);
  color: var(--text-main);
  padding: 0.55rem 0.9rem;
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition), opacity var(--transition), color var(--transition);
}
button:hover { background: #2a2a30; border-color: rgba(255, 255, 255, 0.2); }
button:disabled { opacity: 0.45; cursor: not-allowed; }

button.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
button.primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }

input, select, textarea {
  font: inherit;
  font-size: 0.9rem;
  color: var(--text-main);
  background: var(--shell);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 0.55rem 0.7rem;
  width: 100%;
  transition: border-color var(--transition);
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--accent);
}
input[type="checkbox"] {
  width: 1.05rem;
  height: 1.05rem;
  accent-color: var(--accent);
  cursor: pointer;
}

.card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 1.25rem;
  margin-bottom: 0.75rem;
}

/* --- login screen --- */

.error-shell, .login-shell {
  min-height: 100vh;
  display: grid;
  place-items: center;
}

.error-card, .login-card {
  width: min(26rem, calc(100% - 2rem));
  text-align: center;
  padding: 2.5rem;
}

.error-card p { color: var(--text-secondary); line-height: 1.6; }

.login-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.25rem;
}
.login-mark { height: 9rem; width: auto; max-width: 100%; }
.login-card button.primary { padding: 0.8rem 2.25rem; font-size: 0.95rem; }

/* --- top bar / branding --- */

.top-bar {
  display: flex;
  align-items: center;
  gap: 2rem;
  padding: 1.35rem 2rem;
  background: var(--nav-rail);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.brand { display: flex; align-items: center; gap: 1.1rem; }
.brand-mark { height: 2.6rem; width: auto; flex-shrink: 0; }
.brand-text { font-weight: 600; font-size: 1.5rem; letter-spacing: -0.01em; white-space: nowrap; }

.tab-nav { display: flex; gap: 0.4rem; flex: 1; }
.tab-nav button {
  background: transparent;
  border-color: transparent;
  color: var(--text-secondary);
  white-space: nowrap;
}
.tab-nav button:hover { background: var(--panel); color: var(--text-main); }
.tab-nav button.active { background: var(--panel); border-color: var(--border-strong); color: var(--text-main); }

.session-meta {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  color: var(--text-secondary);
  font-size: 0.85rem;
  white-space: nowrap;
}
.session-chip {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.4rem 1rem 0.4rem 0.4rem;
  background: var(--panel-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.session-info { display: flex; flex-direction: column; gap: 0.3rem; align-items: flex-start; }
.session-name { color: var(--text-main); font-weight: 600; font-size: 0.85rem; line-height: 1; }
.avatar-sm { width: 2.1rem; height: 2.1rem; }
.avatar-sm.avatar-fallback .fa-icon { width: 1rem; height: 1rem; }

.pill.tier-admin { border-color: var(--accent); color: var(--accent); background: rgba(44, 141, 71, 0.1); }
.pill.tier-moderator { border-color: #5b8dd9; color: #8fb3ec; background: rgba(91, 141, 217, 0.12); }

/* --- centered content --- */

main.content {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  max-width: 74rem;
  margin: 0 auto;
  padding: 1rem 1.5rem;
  width: 100%;
}

/* --- filter / form grids --- */

.filter-grid {
  display: grid;
  grid-template-columns: 7rem 7rem 1fr 1.2fr 10.5rem 10.5rem auto;
  gap: 1rem;
  align-items: end;
}
@media (max-width: 1100px) {
  .filter-grid { grid-template-columns: repeat(3, 1fr); }
}

.field { display: flex; flex-direction: column; gap: 0.4rem; min-width: 0; }
.field label {
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.card-narrow { max-width: 34rem; margin-left: auto; margin-right: auto; }
form.mod-form { display: grid; gap: 0.85rem; }

/* --- tables --- */

/* Safety net: table-layout:fixed does not shrink columns to fit a
   container -- if fixed column widths ever sum to more than the available
   space again, this scrolls horizontally within the card instead of
   overflowing the page. */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; table-layout: fixed; }
/* min-width is the floor that actually matters for the wide, many-column
   tables (chat log search/conversation, recent actions): table-layout:fixed
   ignores min-width on individual cells when computing column widths (they
   only look at the explicit column widths above), so the one flexible,
   unwidthed column per table would otherwise get squeezed to nothing on a
   narrow viewport instead of the table-wrap scrollbar kicking in. Forcing
   the table itself to never shrink below this is what makes that happen.
   Deliberately NOT applied to every table -- the smaller modal tables
   (infraction history, evidence viewer, ...) have far fewer/narrower
   columns and don't need it; forcing them to 60rem inside a 60rem-capped
   modal was what caused the spurious horizontal scrollbars there. */
.table-floor { min-width: 60rem; }
th, td {
  text-align: left;
  padding: 0.5rem 0.9rem;
  border-bottom: 1px solid var(--border);
  font-size: 0.88rem;
  vertical-align: middle;
  overflow-wrap: anywhere;
}
th {
  color: var(--text-muted);
  font-weight: 600;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding-top: 0;
  padding-bottom: 0.7rem;
}
tbody tr { transition: background var(--transition); }
tr:hover td { background: rgba(255, 255, 255, 0.025); }

.col-check { width: 2.75rem; }
.col-time { width: 13rem; }
.col-narrow { width: 6rem; }
.col-medium { width: 10rem; }
.col-action { width: 5.5rem; text-align: center; }
.col-check, td.col-action { text-align: center; }
/* Discord snowflakes are always ~17-19 digits -- every real account name is
   one, so this needs to comfortably fit that without wrapping. */
.col-id { width: 13rem; }
.col-id, td.col-id {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Chat messages / descriptions can be arbitrarily long -- truncate to keep
   every row a single, predictable line height (full text on hover via the
   cell's title attribute) rather than letting one long message grow that
   row and push later rows out of view. */
.col-flex, td.col-flex {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.col-by { width: 6rem; }
/* Description deliberately has no fixed width -- it's the one flexible
   column that absorbs whatever space the fixed-width columns don't use.
   table-layout:fixed does NOT shrink columns to fit a container; if the
   fixed widths summed to more than the available space, the table would
   just grow past its container instead (that was the previous bug here). */
.col-evidence { width: 7rem; }
.col-status { width: 10rem; }
.col-status .pill { white-space: normal; text-align: left; }

.pill {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.65rem;
  border-radius: 4px;
  font-size: 0.72rem;
  font-weight: 600;
  border: 1px solid var(--border-strong);
  color: var(--text-secondary);
  white-space: nowrap;
}
.pill.pending { color: #d8b84a; border-color: rgba(216, 184, 74, 0.4); background: rgba(216, 184, 74, 0.08); }
.pill.applied { color: var(--accent); border-color: var(--accent); background: rgba(44, 141, 71, 0.1); }
.pill.failed { color: #e0837a; border-color: rgba(224, 131, 122, 0.4); background: rgba(224, 131, 122, 0.08); }

.icon-action-button {
  width: 2.1rem;
  height: 2.1rem;
  padding: 0;
  background: transparent;
  border-color: var(--border-strong);
  color: var(--text-secondary);
}
.icon-action-button:hover { color: var(--accent); border-color: var(--accent); background: rgba(44, 141, 71, 0.08); }
.icon-action-button .fa-icon { margin: 0; }
.icon-action-button.is-pinned { color: var(--accent); border-color: var(--accent); background: rgba(44, 141, 71, 0.1); }
.icon-action-button.is-pinned:hover { color: #e0837a; border-color: #e0837a; background: rgba(224, 131, 122, 0.1); }
/* Evidence-locked pins stay green on hover (no "click to unpin" hint,
   since clicking does nothing) and show a not-allowed cursor instead. */
.icon-action-button.is-locked, .icon-action-button.is-locked:hover {
  cursor: not-allowed;
  color: var(--accent);
  border-color: var(--accent);
  background: rgba(44, 141, 71, 0.1);
}

.muted { color: var(--text-muted); font-size: 0.85rem; }
.error { color: #e0837a; font-size: 0.85rem; }

.link-button {
  background: none;
  border: none;
  padding: 0;
  color: var(--text-main);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--border-strong);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}
.link-button:hover { color: var(--accent); text-decoration-color: var(--accent); }

.toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
}

.table-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--border);
}

/* Faint per-room tint so messages belonging to the same ranch/race room are
   visually groupable at a glance; hue only, kept low-saturation to stay
   inside the monochrome palette. Left border gives a clearer anchor than
   the tint alone. */
tr.room-color-0 td { background: hsla(0, 55%, 55%, 0.05); }
tr.room-color-0 td:first-child { border-left: 3px solid hsla(0, 55%, 55%, 0.5); }
tr.room-color-1 td { background: hsla(45, 55%, 55%, 0.05); }
tr.room-color-1 td:first-child { border-left: 3px solid hsla(45, 55%, 55%, 0.5); }
tr.room-color-2 td { background: hsla(200, 55%, 55%, 0.05); }
tr.room-color-2 td:first-child { border-left: 3px solid hsla(200, 55%, 55%, 0.5); }
tr.room-color-3 td { background: hsla(265, 55%, 60%, 0.05); }
tr.room-color-3 td:first-child { border-left: 3px solid hsla(265, 55%, 60%, 0.5); }
tr.room-color-4 td { background: hsla(320, 55%, 55%, 0.05); }
tr.room-color-4 td:first-child { border-left: 3px solid hsla(320, 55%, 55%, 0.5); }
tr.room-color-5 td { background: hsla(160, 45%, 45%, 0.06); }
tr.room-color-5 td:first-child { border-left: 3px solid hsla(160, 45%, 45%, 0.5); }

/* --- icons (inlined Font Awesome, see app.js) --- */

.fa-icon {
  width: 0.95em;
  height: 0.95em;
  fill: currentColor;
  flex-shrink: 0;
}

/* --- evidence basket + attached-evidence list --- */

.evidence-basket { border-color: var(--accent); }
.evidence-basket .toolbar { color: var(--text-secondary); }
.evidence-basket .fa-icon { color: var(--accent); }

.evidence-list {
  list-style: none;
  margin: 0.75rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.4rem;
  max-height: 14rem;
  overflow-y: auto;
  font-size: 0.85rem;
  color: var(--text-secondary);
}
.evidence-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.5rem 0.5rem 0.5rem 0.7rem;
  background: var(--shell);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.evidence-list li > span:first-child { min-width: 0; overflow-wrap: anywhere; }
.evidence-list .icon-action-button { width: 1.8rem; height: 1.8rem; flex-shrink: 0; }

/* --- modal (player history / evidence viewer) --- */

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  z-index: 10;
}
.modal {
  width: min(60rem, 100%);
  max-height: 85vh;
  overflow-y: auto;
  box-shadow: var(--shadow-modal);
}
.modal-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border);
}
.modal-header h2 { flex: 1; }
.modal-header-titles { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.3rem; }

.identity-lines { margin: 0; display: grid; gap: 0.3rem; }
.identity-lines > div { display: flex; align-items: baseline; gap: 0.6rem; }
.identity-lines dt {
  margin: 0;
  width: 4.5rem;
  flex-shrink: 0;
  color: var(--text-muted);
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.identity-lines dd { margin: 0; color: var(--text-secondary); font-size: 0.85rem; }

.modal-actions { display: flex; justify-content: flex-end; margin-bottom: 1.25rem; }
.avatar {
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  flex-shrink: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar.avatar-fallback { background: var(--panel-raised); border: 1px solid var(--border-strong); color: var(--text-muted); }
.avatar.avatar-fallback .fa-icon { width: 1.3rem; height: 1.3rem; }