/* ===========================================================================
   MVR 18.6.0 — MODERATION TABLE + SIDEBAR
   Load LAST on bans / kicks / warns, and on every page for the sidebar.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   FILTER BAR
   --------------------------------------------------------------------------- */
.mvr-modbar{
  display:flex;
  align-items:center;
  gap:12px;
  margin:0 0 14px;
  flex-wrap:wrap;
}

.mvr-modtabs{
  display:inline-flex;
  padding:3px;
  background:var(--mvr-surface-14);
  border:1px solid var(--mvr-surface-22);
  border-radius:10px;
  gap:2px;
}

.mvr-modtab{
  padding:7px 16px;
  font-size:12px;
  font-weight:600;
  color:var(--mvr-line-9);
  background:none;
  border:0;
  border-radius:7px;
  cursor:pointer;
  transition:background .12s ease,color .12s ease;
}
.mvr-modtab:hover{ color:var(--mvr-text-13); }
.mvr-modtab.active{ background:#1b3050; color:var(--mvr-text-1); }

.mvr-viewtoggle{
  margin-left:auto;
  background:var(--mvr-surface-15);
  border:1px solid var(--mvr-surface-26);
}

.mvr-modcounts{ font-size:12px; color:var(--mvr-line-9); }

.mvr-emptynote{
  padding:22px;
  margin-bottom:14px;
  font-size:13px;
  color:var(--mvr-text-27);
  text-align:center;
  background:var(--mvr-surface-14);
  border:1px dashed var(--mvr-accent-12);
  border-radius:12px;
}

/* ---------------------------------------------------------------------------
   TABLE VIEW
   The same cards, laid out as rows. Converting rather than re-rendering keeps
   every existing search, paging and evidence handler working.
   --------------------------------------------------------------------------- */
#mgGrid.mvr-table{
  display:block;
  background:var(--mvr-surface-14);
  border:1px solid var(--mvr-surface-22);
  border-radius:12px;
  overflow:hidden;
}

/* Column header, drawn with ::before so no markup change is needed. */
#mgGrid.mvr-table::before{
  content:'Player / Reason' ' ';
  display:block;
  padding:12px 16px;
  font-size:11px;
  font-weight:700;
  letter-spacing:.5px;
  text-transform:uppercase;
  color:var(--mvr-line-15);
  background:#0c1729;
  border-bottom:1px solid var(--mvr-surface-22);
}

#mgGrid.mvr-table .mg-card{
  display:grid;
  grid-template-columns:minmax(0,2.4fr) 92px minmax(0,1fr) 132px;
  align-items:center;
  gap:14px;
  padding:11px 16px;
  margin:0;
  background:none;
  border:0;
  border-bottom:1px solid var(--mvr-surface-52);
  border-radius:0;
  transition:background .12s ease;
}
#mgGrid.mvr-table .mg-card:last-child{ border-bottom:0; }
#mgGrid.mvr-table .mg-card:hover{ background:var(--mvr-surface-15); }

/* Name and id share the first column. */
#mgGrid.mvr-table .mg-head{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
  grid-column:1;
  grid-row:1;
}
#mgGrid.mvr-table .mg-name{
  font-size:13px;
  font-weight:600;
  color:var(--mvr-text-66);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
#mgGrid.mvr-table .mg-id{
  flex:0 0 auto;
  padding:2px 7px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:10.5px;
  color:var(--mvr-accent-18);
  background:var(--mvr-surface-87);
  border:1px solid var(--mvr-accent-12);
  border-radius:5px;
}

/* Detection and reason sit under the name, still in column 1. */
#mgGrid.mvr-table .mg-detection{
  grid-column:1;
  grid-row:2;
  margin:2px 0 0;
  font-size:10px;
  font-weight:700;
  letter-spacing:.4px;
  text-transform:uppercase;
  color:var(--mvr-accent-19);
}
#mgGrid.mvr-table .mg-reason{
  grid-column:1;
  grid-row:3;
  margin:2px 0 0;
  font-size:12px;
  line-height:1.4;
  color:#a9bdd6;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

/* Evidence becomes a thumbnail instead of a large empty rectangle. */
#mgGrid.mvr-table .mg-shot{
  grid-column:2;
  grid-row:1 / span 3;
  width:88px;
  height:52px;
  min-height:0;
  margin:0;
  border-radius:6px;
  overflow:hidden;
  background:var(--mvr-surface-16);
  border:1px solid var(--mvr-surface-17);
}
#mgGrid.mvr-table .mg-shot img,
#mgGrid.mvr-table .mg-shot video{
  width:100%;height:100%;
  object-fit:cover;
  display:block;
}

/* The empty state was a third of every card. It is now two words. */
#mgGrid.mvr-table .mg-shot-empty{
  display:flex;
  align-items:center;
  justify-content:center;
  border-style:dashed;
  font-size:0;
}
#mgGrid.mvr-table .mg-shot-empty::after{
  content:'No evidence';
  font-size:10px;
  color:var(--mvr-line-33);
}

#mgGrid.mvr-table .mg-clipbadge{
  position:absolute;
  bottom:3px; right:3px;
  padding:1px 5px;
  font-size:8px;
  border-radius:4px;
}
#mgGrid.mvr-table .mg-shot{ position:relative; }
#mgGrid.mvr-table .mg-scrub-wrap{ display:none; }

/* Date column. */
#mgGrid.mvr-table .mg-foot{
  grid-column:3;
  grid-row:1 / span 3;
  display:flex;
  flex-direction:column;
  gap:2px;
  font-size:11.5px;
  color:var(--mvr-text-27);
  border:0;
  padding:0;
  margin:0;
}

/* Status column: lifted block collapses to a compact badge. */
#mgGrid.mvr-table .mg-lift{
  grid-column:4;
  grid-row:1 / span 3;
  padding:7px 9px;
  margin:0;
  font-size:10.5px;
  line-height:1.4;
  background:var(--mvr-surface-55);
  border:1px solid var(--mvr-accent-39);
  border-radius:7px;
}
#mgGrid.mvr-table .mg-lift-top{ display:flex; flex-direction:column; gap:2px; }
#mgGrid.mvr-table .mg-lift em{ display:none; }   /* "No lift reason was given" */

/* Active records get a Permanent pill in the same column. */
#mgGrid.mvr-table .mg-card:not(:has(.mg-lift))::after{
  content:'Permanent';
  grid-column:4;
  grid-row:1 / span 3;
  justify-self:start;
  padding:4px 10px;
  font-size:10.5px;
  font-weight:600;
  color:var(--mvr-accent-19);
  background:var(--mvr-surface-85);
  border:1px solid var(--mvr-accent-38);
  border-radius:999px;
}

#mgGrid.mvr-table .mg-badge{ flex:0 0 auto; }
#mgGrid.mvr-table .mg-actions{ grid-column:4; grid-row:1 / span 3; justify-self:end; }

@media (max-width:900px){
  #mgGrid.mvr-table .mg-card{
    grid-template-columns:minmax(0,1fr) 72px;
  }
  #mgGrid.mvr-table .mg-foot,
  #mgGrid.mvr-table .mg-lift{ grid-column:1; grid-row:auto; }
  #mgGrid.mvr-table::before{ content:'Records'; }
}

/* ---------------------------------------------------------------------------
   SIDEBAR
   Lighter and more compact: smaller rows, clearer grouping, and an active
   marker that reads at a glance.
   --------------------------------------------------------------------------- */
.sidebar{
  --sb-item-h:34px;
  font-size:13px;
}

.sidebar .navgroup,
.sidebar .nav-section{
  margin:14px 0 6px;
  padding:0 14px;
  font-size:10px;
  font-weight:700;
  letter-spacing:.7px;
  text-transform:uppercase;
  color:var(--mvr-line-33);
}

.sidebar a,
.sidebar .navlink{
  display:flex;
  align-items:center;
  gap:10px;
  min-height:var(--sb-item-h);
  margin:1px 8px;
  padding:0 10px;
  font-size:13px;
  font-weight:500;
  color:#9fb3cc;
  border-radius:7px;
  text-decoration:none;
  transition:background .12s ease,color .12s ease;
}

.sidebar a:hover,
.sidebar .navlink:hover{
  background:var(--mvr-surface-52);
  color:var(--mvr-text-66);
}

.sidebar a.active,
.sidebar .navlink.active,
.sidebar a[aria-current="page"]{
  position:relative;
  background:var(--mvr-surface-53);
  color:var(--mvr-text-1);
  font-weight:600;
}

/* A left marker reads faster than colour alone. */
.sidebar a.active::before,
.sidebar .navlink.active::before,
.sidebar a[aria-current="page"]::before{
  content:'';
  position:absolute;
  left:-8px; top:50%;
  transform:translateY(-50%);
  width:3px; height:18px;
  background:#4f8ff7;
  border-radius:0 3px 3px 0;
}

.sidebar svg,
.sidebar .icon{
  flex:0 0 auto;
  width:15px; height:15px;
  opacity:.75;
}
.sidebar a:hover svg,
.sidebar a.active svg{ opacity:1; }

[dir="rtl"] .sidebar a.active::before,
[dir="rtl"] .sidebar .navlink.active::before{
  left:auto; right:-8px;
  border-radius:3px 0 0 3px;
}