/* ============================================================
   Admin panel stylesheet — the public site's own chrome
   (site/stats/hw.css: palette, metrics, Verdana stack) with the
   site's real art hot-linked from the live halowarsde.com deploy:
   header, nav bar end-caps, content tiles, footer, and every
   in-game asset the JS draws (maps, leaders, marks, ranks, flags,
   gamerpics).  The only art bundled here is the four nav tabs
   under images/nav/ (site/gen_nav_tab.py's ITC Eras model).
   Local-harness note: a screenshot harness rewrites the
   halowarsde.com prefix below to a file:// copy of site/stats/images.
   ============================================================ */

body {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 12px;
  margin: 0;
  color: #CCCCCC;
  background: #000000 url(https://halowarsde.com/images/largeBGimage.jpg) repeat-x fixed right top;
  /* the 2009 layout is authored at 1003px / 10-12px type — same scale-up as the site */
  zoom: 1.2;
}
a { color: #698d73; }

#content { width: 1003px; margin: 0 auto; }

/* ---- header + nav (original art) ---- */
#header {
  height: 348px;
  background: url(https://halowarsde.com/images/HeaderBG_Art.jpg) no-repeat;
  position: relative;
}
#navbar {
  position: relative; top: 305px; height: 30px; width: 100%;
  display: flex; align-items: center; justify-content: center;
  white-space: nowrap;
}
#navbar .navTabs { display: flex; align-items: center; }
#navbar img { border: 0; display: block; }
#navbar a { display: block; }

/* the panel's own marks over the header art: ADMIN tag + session chip, in
   the dark sky top-right where the logo leaves room */
#adminBadge {
  position: absolute; right: 25px; top: 12px;
  font-weight: bold; font-size: 11px; letter-spacing: 3px; color: #FFCC33;
  text-shadow: 0 0 6px #000, 0 0 2px #000;
}
#header .who {
  position: absolute; right: 25px; top: 32px;
  text-align: right; color: #cfe0ee; font-size: 10px;
  text-shadow: 0 0 4px #000, 0 0 2px #000;
}
#header .who b { color: #FFCC33; }
#header .who button { margin-left: 8px; }

/* ---- content shell (original tiles) ---- */
#contentBG { background: url(https://halowarsde.com/images/contentBG_tile.png) repeat-y; }
#contentBody {
  background: url(https://halowarsde.com/images/contentBG.gif) no-repeat;
  padding: 12px 25px 25px 25px; min-height: 800px; color: #CCCCCC;
}
#stats { padding: 10px; font-size: 10px; text-align: left; }

/* mode band (the site's statsMode strip): breadcrumb + sync-table picker */
.modeTbl {
  width: 100%; border-collapse: collapse; background: #010916;
  border-left: 3px solid #000; border-right: 3px solid #000; border-top: 3px solid #000;
  margin-bottom: 12px;
}
.modeTbl td.statsMode {
  padding: 5px; background-color: #37617a;
  border-left: 10px solid #010916; border-top: 10px solid #010916; border-right: 10px solid #010916;
}
.modeRow { display: flex; align-items: center; }
.modeRow h2 { margin: 0; font-size: 13px; color: #fff; font-weight: bold; flex: 1; }
.platSel label { padding-right: 6px; color: #e8e9eb; font-weight: bold; }
.platSel select { background: #010916; color: #ccc; border: 1px solid #10243a; font-size: 11px; }

/* ---- stats framework (values from the site's layout_thread lineage) ---- */
.panel {
  border: solid 5px #112F61;
  background-color: #000;
  padding: 10px;
  margin-bottom: 15px;
}
.panel .heading {
  font-weight: bold;
  font-size: 13px;
  color: #FFCC33;
  padding: 0 0 8px 0;
}
.panel .note { color: #8fa2b5; font-size: 10px; padding-bottom: 8px; }

table.adminTbl { border-collapse: collapse; width: 100%; font-size: 10px; }
table.adminTbl th {
  background-color: #10243a;
  border-right: 1px solid #000;
  border-bottom: 1px solid #000;
  padding: 5px;
  font-weight: bold;
  color: #e8e9eb;
  text-align: left;
  white-space: nowrap;
}
table.adminTbl td {
  padding: 4px 5px;
  background-color: #212121;
  border-right: 1px solid #000;
  border-bottom: 1px solid #000;
  vertical-align: middle;
}
table.adminTbl tr.alt td { background-color: #111111; }
table.adminTbl tr:hover td { background-color: #10243a; }
table.adminTbl tr.dirty td { background-color: #2a2410; }
table.adminTbl tr.dirty:hover td { background-color: #3a3115; }

/* ---- form controls, kept in-theme ---- */
input, select, button, textarea {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 10px;
  color: #cfe0ee;
  background: #0b1930;
  border: 1px solid #234b63;
  padding: 3px 5px;
}
input:focus, select:focus, textarea:focus { outline: 1px solid #FFCC33; }
button { cursor: pointer; font-weight: bold; }
button:hover { color: #FFCC33; border-color: #37617a; }
button.primary { color: #FFCC33; border-color: #FFCC33; }
button.danger { color: #e08585; border-color: #8a3b3b; }
button.danger:hover { color: #ff9c9c; }
button:disabled { color: #555; border-color: #333; cursor: default; }

input.cell { width: 100%; box-sizing: border-box; background: transparent; border-color: transparent; }
input.cell:hover, input.cell:focus { background: #0b1930; border-color: #234b63; }
input.iso { width: 36px; text-transform: lowercase; }
/* an 18-digit id never fit this column at any width and is read by clicking
   into it, so it gives the space to the gamertag, which IS read at a glance */
input.did { width: 76px; }
/* Twitch took the Notes column (2026-09-11): notes was empty on every row
   and the panel is only 923px wide, so the table has no room for both. */
td.twCell { white-space: nowrap; }
input.tw { width: 78px; }
/* the live channel link: the whole point of storing the name */
a.twLink { color: #c08cff; text-decoration: none; font-size: 11px; line-height: 1; }
a.twLink:hover { color: #dcbcff; }

/* ---- the merged Players table: registry cells beside the two ruling columns ---- */
/* Nine columns in 923px: this table alone runs tighter side padding, or the
   Twitch column pushes it past the frame art.  Games/Voided keep the default. */
table.pTbl th, table.pTbl td { padding-left: 3px; padding-right: 3px; }
table.adminTbl th.act { color: #FFCC33; }        /* Verified / Standing: act on click */
td.tagCell { white-space: nowrap; }
input.cell.tag { width: 100px; color: #cfe0ee; }  /* the site's name colour; pic before, flag after */
td.acts button, td.stCell button { padding: 2px 4px; margin: 1px 0; }
td.stCell { min-width: 120px; }                   /* wraps: chip + buttons, the ban's end below */
.gwBar input[type="text"]#pSearch { width: 150px; }

/* ---- the site's name furniture: flag after, gamerpic before ---- */
.flag { margin-left: 5px; vertical-align: middle; }
.gamerpic { margin-right: 5px; vertical-align: middle; border-radius: 2px; }
.tagFlag { white-space: nowrap; }
.pName { color: #cfe0ee; }
.civ, .res { vertical-align: middle; }

/* ---- chips + result marks ---- */
.chip {
  display: inline-block;
  padding: 1px 6px;
  font-size: 9px;
  font-weight: bold;
  border: 1px solid;
}
.chip.voided { color: #e08585; border-color: #8a3b3b; background: #2a1111; }
.chip.active { color: #9fd39f; border-color: #3b6a3b; background: #112211; }
.chip.restore { color: #9fc3e0; border-color: #37617a; background: #0b1930; }
.chip.purged { color: #d9b0ff; border-color: #6a3b8a; background: #1c1126; }
.chip.unranked { color: #9aa7b4; border-color: #3d4a57; background: #14181c; }
.chip.hidden { color: #b9c3cc; border-color: #4a5a6a; background: #171c22; }
.chip.banned { color: #ff9c9c; border-color: #b03a3a; background: #3a0f0f; }
.chip.lapsed { color: #c9b08a; border-color: #6b5530; background: #2a2010; }
.chip.dll { color: #9fc3e0; border-color: #37617a; background: #0b1930; }   /* runs the stats tool */
td.acts { white-space: nowrap; }
.chip.actor { color: #cfe0ee; border-color: #234b63; background: #05142d; font-weight: normal; }

.mono { font-family: Consolas, monospace; font-size: 10px; color: #8fa2b5; }
.warn { color: #e0b385; }
.err { color: #e08585; }
.ok { color: #9fd39f; }

/* ---- toolbar rows ---- */
.toolbar { display: flex; align-items: center; gap: 8px; padding-bottom: 8px; flex-wrap: wrap; }
.toolbar .spacer { flex: 1; }
.toolbar input.search { width: 200px; }

/* ---- filter bar (the site's gwBar) ---- */
.gwBar { display: flex; flex-wrap: wrap; align-items: center; row-gap: 4px; padding: 2px 0 6px 0; font-size: 10px; color: #cfe0ee; }
.gwGrp { display: inline-flex; align-items: center; margin-left: 10px; }
.gwGrp:first-child { margin-left: 0; }
.gwBar label { padding: 0 4px 0 0; font-weight: bold; }
.gwBar select, .gwBar input[type="text"] { background: #010916; color: #ccc; border: 1px solid #37617a; font-size: 10px; padding: 1px 2px; }
.gwBar input[type="text"] { width: 110px; }
.gwBar .gwClear { height: 18px; padding: 0 8px; margin-left: 10px; font-size: 10px; font-weight: normal; }

/* ---- game rows: map · two line-ups · status · actions ---- */
table.gameTbl { border-collapse: collapse; width: 100%; font-size: 10px; }
table.gameTbl th {
  background-color: #10243a; border-right: 1px solid #000; border-bottom: 1px solid #000;
  padding: 5px; font-weight: bold; color: #e8e9eb; text-align: left;
}
table.gameTbl td {
  padding: 5px; background-color: #212121;
  border-right: 1px solid #000; border-bottom: 1px solid #000; vertical-align: top;
}
table.gameTbl tr.alt td { background-color: #111111; }
table.gameTbl tr.gameRow:hover td { background-color: #10243a; }
table.gameTbl tr.isVoid td { background-color: #1c1010; }
table.gameTbl tr.isVoid.alt td { background-color: #140b0b; }
table.gameTbl tr.isVoid .gMapName, table.gameTbl tr.isVoid .pName { color: #8f8f8f; }
td.gMap { width: 100px; }
.mapArt { display: block; border: 1px solid #000; }
.gMapName { font-weight: bold; color: #e8e9eb; padding-top: 4px; font-size: 10px; }
.gMeta { color: #8fa2b5; font-size: 9px; padding-top: 1px; }
td.gTeam { width: 270px; }
.tHead { display: flex; align-items: center; gap: 6px; font-weight: bold; color: #ccc; font-size: 11px; border-bottom: 1px dashed #555; padding-bottom: 2px; margin-bottom: 3px; }
td.gWin .tHead { color: #FFCC33; }
.pLine { display: flex; align-items: center; gap: 5px; padding: 2px 0; white-space: nowrap; }
.pLine .ldr { border: 1px solid #000; }
td.gStatus { width: 96px; }
.gBy { padding-top: 3px; color: #8fa2b5; font-size: 9px; }
td.gAct { width: 62px; white-space: nowrap; }
td.gAct button { display: block; width: 100%; margin-bottom: 4px; }
tr.gDetail td { background-color: #010916 !important; padding: 10px 14px 14px 14px; }

/* ---- the site's post-game card, verbatim geometry ---- */
.card { border: 1px solid #37617a; background: #010916; padding: 10px; }
.cardInfo { width: 100%; border-collapse: collapse; }
.cardInfo td.cardHead { width: 60px; background-color: #10243a; border-right: 1px solid #000; border-bottom: 1px solid #000; padding: 6px; font-weight: bold; color: #e8e9eb; text-align: right; font-size: 11px; }
.cardInfo td.cardVal { width: 100%; padding: 6px; background-color: #212121; border-right: 1px solid #000; border-bottom: 1px solid #000; font-size: 11px; }
.cardInfo .mapArt { display: inline-block; border: 0; }
.teamTbl { width: 84%; table-layout: fixed; margin: 4px auto 0 auto; border-collapse: collapse; }
.teamHeadCell { border-bottom: dashed 1px #777777; padding: 5px 4px; color: #ccc; font-size: 14px; }
.teamHeadCell img { vertical-align: middle; }
td.portrait { width: 88px; padding-top: 4px; }
td.portrait img { display: block; }
.playerCell { border-right: solid 1px #777777; overflow: hidden; padding: 4px 12px 0 6px; }
.pcName { font-size: 13px; color: #698d73; }
.pcName .pName { color: #698d73; }
.pgLine { padding-top: 4px; padding-bottom: 6px; color: #ccc; font-size: 13px; white-space: nowrap; }
.pgLine img { vertical-align: middle; }
table.numbers { margin-top: 12px; }
.ident { padding-top: 8px; }

/* ruling-log game summary: thumbnail + names */
.logGame { display: flex; align-items: center; gap: 8px; }
.logGame .mapArt { flex: none; }
.logGame b { color: #e8e9eb; }
.vs { color: #666; }

/* ---- modal ---- */
#modalOverlay {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.75);
  display: flex; align-items: center; justify-content: center;
  z-index: 10;
}
#modalOverlay[hidden] { display: none; }
#modalBox {
  width: 640px; max-height: 80vh; overflow-y: auto;
  border: solid 5px #112F61;
  background: #010916;
  padding: 15px;
}
#modalBox .heading { font-weight: bold; font-size: 13px; color: #FFCC33; padding-bottom: 8px; }
#modalBox .note { color: #8fa2b5; font-size: 10px; padding-bottom: 8px; }
#modalBox .actions { padding-top: 12px; text-align: right; }
#modalBox .actions button { margin-left: 8px; }
#modalBox .ldr { vertical-align: middle; }

/* ---- toast ---- */
#toast {
  position: fixed; bottom: 20px; right: 20px;
  background: #0b1930; border: 1px solid #37617a; color: #cfe0ee;
  padding: 8px 14px; font-size: 11px; z-index: 20;
}
#toast[hidden] { display: none; }

/* ---- footer (original art) ---- */
#footer {
  height: 93px;
  background: url(https://halowarsde.com/images/footer.png) no-repeat;
  text-align: center; padding-top: 40px; color: #999999; font-size: 10px; line-height: 1.7;
}
#footer .tiny { color: #555; font-size: 9px; }

/* ---- login page ---- */
body.login { background-attachment: scroll; }
body.login #header { height: 348px; }
.loginWrap { display: flex; justify-content: center; padding: 40px 0 60px 0; }
.loginCard {
  border: solid 5px #112F61;
  background: #010916;
  padding: 30px 40px;
  text-align: center;
  width: 340px;
}
.loginCard .title { font-weight: bold; font-size: 17px; color: #FFCC33; letter-spacing: 1px; }
.loginCard .subtitle { color: #8fa2b5; font-size: 10px; margin: 6px 0 22px 0; }
.loginCard a.discordBtn {
  display: inline-block;
  padding: 8px 22px;
  background: #05142d;
  border: 1px solid #37617a;
  color: #cfe0ee;
  font-weight: bold;
  text-decoration: none;
}
.loginCard a.discordBtn:hover { color: #FFCC33; border-color: #FFCC33; }
.loginCard .fine { color: #556677; font-size: 9px; margin-top: 18px; }