/* PlayPort control panel - the tidy pass (Nov 2026).
   Loaded after app.css and the inline blocks in index.html, so it only adjusts what is
   already there: no markup, routes or scripts depend on it, and removing the <link>
   gives back the panel exactly as it was. Colour themes keep working because every
   colour here comes from the theme variables app.css already sets.

   What it fixes:
   - The sidebar ran out of room at laptop height: ten 44px nav rows plus the callout,
     two theme rows and the user card pushed Settings under the fold of a scrolling nav.
     Rows are 34px now and the bottom of the sidebar is one compact block.
   - The search placeholder ran into the Ctrl K hint.
   - The signed-in card squeezed the role into the Sign out button.
   - Stat cards were tall boxes with the number in the top third. */

/* ------------------------------------------------------------------ sidebar */
/* Desktop only: under 851px app.css turns the sidebar into a tile grid of its own. */
@media (min-width: 851px) {
#side { gap: 0; }
#side .brand { padding-bottom: 6px; }
.sidesearch { margin: 4px 2px 10px; }
.sidesearch .field { padding-right: 52px !important; width: 100%; box-sizing: border-box; }
.sidesearch kbd { opacity: .7; }

#side .navlabel {
  margin: 12px 10px 4px !important;
  font-size: 10px !important;
  letter-spacing: .14em !important;
  opacity: .55;
}
#nav { gap: 1px !important; padding-bottom: 6px; }
#nav > a {
  min-height: 34px !important;
  height: 34px;
  padding: 0 10px !important;
  gap: 10px !important;
  border-radius: 9px !important;
  font-size: 13.5px !important;
  font-weight: 550 !important;
}
#nav > a > .navicon { width: 17px !important; height: 17px !important; flex-basis: 17px !important; opacity: .85; }
#nav > a.on > .navicon { opacity: 1; }

/* The bottom block: status, colours and the account, stacked tight under one rule. */
#side .sidecallout {
  margin: 8px 2px 6px !important;
  padding: 7px 10px !important;
  min-height: 0 !important;
  border-radius: 10px !important;
}
#side .sidecallout b { font-size: 12px; }
#side .sidecallout small { font-size: 10.5px; opacity: .7; }
#side .themecontrol {
  margin: 0 4px 4px !important;
  min-height: 28px;
  font-size: 11.5px !important;
}
#side .themecontrol select { height: 28px; padding-top: 0; padding-bottom: 0; font-size: 12.5px; }

#sideuser {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 10px;
  margin-top: 6px !important;
  padding: 8px 10px !important;
}
#sideuser > b { grid-column: 1; grid-row: 1; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#sideuser > span { grid-column: 1; grid-row: 2; font-size: 10.5px; text-transform: uppercase; letter-spacing: .1em; opacity: .6; }
#sideuser > button { grid-column: 2; grid-row: 1 / span 2; margin: 0 !important; }
}

/* ------------------------------------------------------------- page header */
.crumb { letter-spacing: -.01em; }

/* -------------------------------------------------------------- stat cards */
#statcards > .card {
  display: flex !important;
  flex-direction: column;
  justify-content: flex-start;
  gap: 10px;
  min-height: 92px;
  padding: 12px 14px 12px !important;
}
#statcards > .card .k { font-size: 10.5px !important; letter-spacing: .14em !important; opacity: .7; }
#statcards > .card .v {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 28px !important;
  font-weight: 700;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
#statcards > .card .v small {
  font-size: 11.5px !important;
  font-weight: 500;
  letter-spacing: 0;
  opacity: .6;
}

/* ------------------------------------------------------------------ tables */
#view table td { font-variant-numeric: tabular-nums; }
#view table td.actions { white-space: nowrap; }
#view table td.actions .btn + .btn { margin-left: 4px; }

/* The Game Servers table is the one table whose cells are rewritten while somebody is looking at it:
   the panel re-reads every server on a two second poll, so CPU and RAM go from `0% · 0 MB` to
   `37% · 12345 MB` and back. With the browser's automatic table layout, a wider number widens its
   column and pushes the columns beside it sideways - measured on a real table, a single changed CPU
   value moved the Actions column 9px and resized all six headers, so a running server made the whole
   table twitch twice a second. Fixed widths take the numbers out of the layout: the columns stay put
   and only their text changes. The name column has no width of its own and takes what is left, and
   the status note is clipped to its cell (its whole sentence is still in the hover title), because
   a message that appears and disappears is the other thing that would resize that column. */
#ilist table, #dinst table { table-layout: fixed; width: 100%; min-width: 900px; }
#ilist table th:nth-child(2), #dinst table th:nth-child(2) { width: 170px; }
#ilist table th:nth-child(3), #dinst table th:nth-child(3) { width: 80px; }
#ilist table th:nth-child(4), #dinst table th:nth-child(4) { width: 110px; }
#ilist table th:nth-child(5), #dinst table th:nth-child(5) { width: 150px; }
#ilist table th:nth-child(6), #dinst table th:nth-child(6) { width: 210px; }
#ilist table td:nth-child(n+2), #dinst table td:nth-child(n+2) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#ilist table td:nth-child(2) .note, #dinst table td:nth-child(2) .note { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ------------------------------------------------------------- short screens */
@media (min-width: 851px) and (max-height: 760px) {
  #nav > a { min-height: 30px !important; height: 30px; }
  #side .sidecallout { display: none !important; }
}