/* 16.10 | Approved monitor-player modal.
   Isolated to the table with tbody[id^="server-players"].
   Neutral uninterrupted graphite, no alternating stripes or painted Nick column.
   Sticky Number + Nick only on phones; horizontal scroll for the remaining columns. */

/* Desktop + mobile shared base: a single subtle gradient per row (not per cell). */
html body .modal:has(tbody[id^="server-players"]) table.am-monitor-scroll[class] {
  display:table!important;
  border-collapse:separate!important;
  border-spacing:0!important;
  width:100%!important;
  background:#121922!important;
  color:#cdd4dc!important;
}
html body .modal:has(tbody[id^="server-players"]) table.am-monitor-scroll[class] > thead > tr {
  background:linear-gradient(180deg,#26313b 0%,#1a242e 100%)!important;
}
html body .modal:has(tbody[id^="server-players"]) table.am-monitor-scroll[class] > thead > tr > :is(th,td):nth-child(n) {
  background:transparent!important;
  background-image:none!important;
  border:0!important;
  border-bottom:1px solid rgba(195,205,215,.22)!important;
  color:#edcc88!important;
  box-shadow:none!important;
  padding:11px 9px!important;
  font-weight:700!important;
  vertical-align:middle!important;
}
html body .modal:has(tbody[id^="server-players"]) table.am-monitor-scroll[class] > tbody[id^="server-players"] > tr {
  background:linear-gradient(100deg,#19222b 0%,#171f28 52%,#131b24 100%)!important;
}
html body .modal:has(tbody[id^="server-players"]) table.am-monitor-scroll[class] > tbody[id^="server-players"] > tr:nth-child(even),
html body .modal:has(tbody[id^="server-players"]) table.am-monitor-scroll[class] > tbody[id^="server-players"] > tr:nth-child(odd) {
  background:linear-gradient(100deg,#19222b 0%,#171f28 52%,#131b24 100%)!important;
}
html body .modal:has(tbody[id^="server-players"]) table.am-monitor-scroll[class] > tbody[id^="server-players"] > tr > td:not([colspan]):nth-child(n) {
  background:transparent!important;
  background-image:none!important;
  border:0!important;
  border-bottom:1px solid rgba(191,202,212,.13)!important;
  box-shadow:none!important;
  color:inherit;
  padding:6px 9px!important;
  vertical-align:middle!important;
}
html body .modal:has(tbody[id^="server-players"]) table.am-monitor-scroll[class] > tbody[id^="server-players"] > tr:hover {
  background:linear-gradient(100deg,#1e2832 0%,#19232d 52%,#151e28 100%)!important;
}
/* Preserve profile group nick colour, do not force link or inner span colours. */
html body .modal:has(tbody[id^="server-players"]) table.am-monitor-scroll[class] > tbody > tr > td:nth-child(2) {
  background:transparent!important;
  background-image:none!important;
  box-shadow:none!important;
}
/* Fixed proportions only on DESKTOP; no sticky columns. */
@media (min-width:651px) {
  html body .modal:has(tbody[id^="server-players"]) .table-responsive.am-monitor-scroll-wrap {
    width:100%!important;max-width:100%!important;overflow-x:auto!important;
  }
  html body .modal:has(tbody[id^="server-players"]) table.am-monitor-scroll.am-monitor-has-actions[class] {
    min-width:620px!important;max-width:none!important;table-layout:fixed!important;
  }
  html body .modal:has(tbody[id^="server-players"]) table.am-monitor-scroll.am-monitor-has-actions[class] tr > :is(th,td):nth-child(1) {width:5%!important;text-align:center!important}
  html body .modal:has(tbody[id^="server-players"]) table.am-monitor-scroll.am-monitor-has-actions[class] tr > :is(th,td):nth-child(2) {width:26%!important}
  html body .modal:has(tbody[id^="server-players"]) table.am-monitor-scroll.am-monitor-has-actions[class] tr > :is(th,td):nth-child(3) {width:10%!important;text-align:center!important}
  html body .modal:has(tbody[id^="server-players"]) table.am-monitor-scroll.am-monitor-has-actions[class] tr > :is(th,td):nth-child(4) {width:29%!important;text-align:right!important;white-space:nowrap!important}
  html body .modal:has(tbody[id^="server-players"]) table.am-monitor-scroll.am-monitor-has-actions[class] tr > :is(th,td):nth-child(5) {width:30%!important}
  html body .modal:has(tbody[id^="server-players"]) table.am-monitor-scroll[class] tr > :is(th,td):nth-child(-n+2) {
    position:static!important;left:auto!important;right:auto!important;box-shadow:none!important;
  }
  html body .modal:has(tbody[id^="server-players"]) table.am-monitor-scroll[class] > tbody > tr > td:nth-child(2) a {
    display:flex!important;align-items:center!important;gap:6px!important;
    white-space:nowrap!important;overflow:hidden!important;max-width:100%!important;min-width:0!important;
  }
  html body .modal:has(tbody[id^="server-players"]) table.am-monitor-scroll[class] > tbody > tr > td:nth-child(2) a :is(i,span) {
    min-width:0!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;
  }
}
/* Right-aligned "Время" heading and time values; centred Actions heading. */
html body .modal:has(tbody[id^="server-players"]) table.am-monitor-scroll[class] > thead > tr > :is(th,td):nth-child(4),
html body .modal:has(tbody[id^="server-players"]) table.am-monitor-scroll[class] > tbody > tr > td:nth-child(4) {
  text-align:right!important;
}
html body .modal:has(tbody[id^="server-players"]) table.am-monitor-scroll[class] > thead > tr > :is(th,td):nth-child(5) {
  text-align:center!important;
}
/* Two controls share the actions cell evenly with matching outer gutters. */
html body .modal:has(tbody[id^="server-players"]) table.am-monitor-scroll.am-monitor-has-actions[class] td:nth-child(5) > .input-group,
html body .modal:has(tbody[id^="server-players"]) table.am-monitor-scroll.am-monitor-has-actions[class] td:nth-child(5) .am-monitor-action-details > .input-group {
  display:grid!important;
  grid-template-columns:minmax(0,1fr) minmax(0,.94fr)!important;
  column-gap:7px!important;row-gap:0!important;
  align-items:stretch!important;
  width:100%!important;min-width:0!important;max-width:100%!important;
  padding:0!important;margin:0!important;
}
html body .modal:has(tbody[id^="server-players"]) table.am-monitor-scroll.am-monitor-has-actions[class] td:nth-child(5) .input-group > .input-group-prepend {
  grid-column:2!important;grid-row:1!important;
  width:100%!important;min-width:0!important;max-width:100%!important;
  height:auto!important;margin:0!important;padding:0!important;display:block!important;
}
html body .modal:has(tbody[id^="server-players"]) table.am-monitor-scroll.am-monitor-has-actions[class] td:nth-child(5) .input-group > :is(select,.am-dark-select-host,.stats-sort-control) {
  grid-column:1!important;grid-row:1!important;
  width:100%!important;min-width:0!important;max-width:100%!important;
  height:36px!important;min-height:36px!important;margin:0!important;flex:none!important;
}
html body .modal:has(tbody[id^="server-players"]) table.am-monitor-scroll.am-monitor-has-actions[class] td:nth-child(5) :is(.input-group-prepend > .btn, .am-dark-select-button, select) {
  box-sizing:border-box!important;width:100%!important;max-width:100%!important;
  min-width:0!important;height:36px!important;min-height:36px!important;
  margin:0!important;border-radius:6px!important;
  font-size:12px!important;line-height:1.2!important;white-space:nowrap!important;
}
html body .modal:has(tbody[id^="server-players"]) table.am-monitor-scroll.am-monitor-has-actions[class] td:nth-child(5) .input-group-prepend > .btn {
  background:#18212b!important;border:1px solid #a18a5e!important;
  color:#f0d18e!important;padding:4px 7px!important;font-weight:600!important;
}
/* Phones: restore pinned NUMBER + NICK and horizontal scrolling from the 14.10 design.
   All five columns remain present; no vertical action buttons. */
@media (max-width:650px) {
  /* Mobile columns must add up to the width of the actual content.
     On a 320px device the actions cell fits beside the frozen number + nick
     when the user scrolls to the rightmost edge. */
  html body .modal:has(tbody[id^="server-players"]) {
    --am-players-num-w:29px;
    --am-players-nick-w:clamp(96px,30vw,118px);
    --am-players-frags-w:52px;
    --am-players-time-w:clamp(118px,37vw,155px);
    --am-players-actions-w:clamp(145px,45vw,183px);
    --am-players-table-w:calc(var(--am-players-num-w) + var(--am-players-nick-w) + var(--am-players-frags-w) + var(--am-players-time-w) + var(--am-players-actions-w));
  }
  html body .modal:has(tbody[id^="server-players"]) .modal-dialog {
    max-width:calc(100vw - 16px)!important;width:calc(100vw - 16px)!important;
    margin:8px auto!important;
  }
  html body .modal:has(tbody[id^="server-players"]) .modal-body {padding:10px!important;overflow-x:hidden!important}
  html body .modal:has(tbody[id^="server-players"]) .table-responsive.am-monitor-scroll-wrap {
    display:block!important;max-width:100%!important;width:100%!important;
    overflow-x:auto!important;overflow-y:hidden!important;
    touch-action:pan-x pan-y!important;
    overscroll-behavior-x:contain!important;
    -webkit-overflow-scrolling:touch;
  }
  html body .modal:has(tbody[id^="server-players"]) table.am-monitor-scroll[class],
  html.am-mobile-layout body .modal:has(tbody[id^="server-players"]) table.am-monitor-scroll.am-monitor-has-actions[class] {
    display:table!important;table-layout:fixed!important;
    width:max(100%,var(--am-players-table-w))!important;
    min-width:var(--am-players-table-w)!important;max-width:none!important;
    transform:none!important;margin:0!important;
  }
  html body .modal:has(tbody[id^="server-players"]) table.am-monitor-scroll[class] > thead {display:table-header-group!important}
  html body .modal:has(tbody[id^="server-players"]) table.am-monitor-scroll[class] > tbody {display:table-row-group!important}
  html body .modal:has(tbody[id^="server-players"]) table.am-monitor-scroll[class] > :is(thead,tbody) > tr {display:table-row!important}
  html body .modal:has(tbody[id^="server-players"]) table.am-monitor-scroll[class] > :is(thead,tbody) > tr > :is(th,td):not([colspan]) {
    display:table-cell!important;vertical-align:middle!important;
    box-sizing:border-box!important;font-size:12px!important;
    padding:6px 5px!important;
    white-space:nowrap!important;
    overflow-wrap:normal!important;
  }
  html body .modal:has(tbody[id^="server-players"]) table.am-monitor-scroll[class] tr > :is(th,td):nth-child(1):not([colspan]) {
    display:table-cell!important;width:var(--am-players-num-w)!important;
    min-width:var(--am-players-num-w)!important;max-width:var(--am-players-num-w)!important;
  }
  html body .modal:has(tbody[id^="server-players"]) table.am-monitor-scroll[class] tr > :is(th,td):nth-child(2) {
    width:var(--am-players-nick-w)!important;min-width:var(--am-players-nick-w)!important;max-width:var(--am-players-nick-w)!important;
    padding-left:5px!important;overflow:hidden!important;
  }
  html body .modal:has(tbody[id^="server-players"]) table.am-monitor-scroll[class] tr > :is(th,td):nth-child(3) {width:var(--am-players-frags-w)!important;min-width:var(--am-players-frags-w)!important;max-width:var(--am-players-frags-w)!important;text-align:center!important}
  html body .modal:has(tbody[id^="server-players"]) table.am-monitor-scroll[class] tr > :is(th,td):nth-child(4) {width:var(--am-players-time-w)!important;min-width:var(--am-players-time-w)!important;max-width:var(--am-players-time-w)!important;text-align:right!important}
  html body .modal:has(tbody[id^="server-players"]) table.am-monitor-scroll[class] tr > :is(th,td):nth-child(5) {width:var(--am-players-actions-w)!important;min-width:var(--am-players-actions-w)!important;max-width:var(--am-players-actions-w)!important}
  /* Sticky only on mobile, background is deliberately similar to row start, no coloured Nick stripe. */
  html body .modal:has(tbody[id^="server-players"]) table.am-monitor-scroll[class] > thead > tr > :is(th,td):nth-child(1),
  html body .modal:has(tbody[id^="server-players"]) table.am-monitor-scroll[class] > tbody > tr > td:nth-child(1):not([colspan]) {
    position:sticky!important;left:0!important;right:auto!important;z-index:5!important;
    background:#19222b!important;box-shadow:none!important;
  }
  html body .modal:has(tbody[id^="server-players"]) table.am-monitor-scroll[class] > thead > tr > :is(th,td):nth-child(2),
  html body .modal:has(tbody[id^="server-players"]) table.am-monitor-scroll[class] > tbody > tr > td:nth-child(2):not([colspan]) {
    position:sticky!important;left:var(--am-players-num-w)!important;right:auto!important;z-index:5!important;
    background:#19222b!important;box-shadow:3px 0 5px -5px rgba(0,0,0,.6)!important;
  }
  html body .modal:has(tbody[id^="server-players"]) table.am-monitor-scroll[class] > thead > tr > :is(th,td):nth-child(-n+2) {
    z-index:7!important;background:#26313b!important;
  }
  html body .modal:has(tbody[id^="server-players"]) table.am-monitor-scroll[class] > tbody > tr:hover > td:nth-child(-n+2):not([colspan]) {background:#1e2832!important}
  html body .modal:has(tbody[id^="server-players"]) table.am-monitor-scroll[class] > tbody > tr > td:nth-child(2) a {
    display:flex!important;flex-direction:row!important;align-items:center!important;gap:5px!important;
    width:100%!important;min-width:0!important;max-width:100%!important;
    white-space:nowrap!important;overflow:hidden!important;
  }
  html body .modal:has(tbody[id^="server-players"]) table.am-monitor-scroll[class] > tbody > tr > td:nth-child(2) a > img {
    width:23px!important;height:23px!important;flex:0 0 23px!important;margin:0!important;
  }
  html body .modal:has(tbody[id^="server-players"]) table.am-monitor-scroll[class] > tbody > tr > td:nth-child(2) a :is(i,span) {
    display:block!important;min-width:0!important;max-width:100%!important;
    white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;
    overflow-wrap:normal!important;word-break:normal!important;
  }
  /* Existing mobile-layout.js wraps actions in details; reveal its content in a single row. */
  html body .modal:has(tbody[id^="server-players"]) table.am-monitor-scroll[class] .am-monitor-action-details {
    display:block!important;min-width:0!important;width:100%!important;padding:0!important;
  }
  html body .modal:has(tbody[id^="server-players"]) table.am-monitor-scroll[class] .am-monitor-action-details > summary {display:none!important}
  html body .modal:has(tbody[id^="server-players"]) table.am-monitor-scroll[class] td:nth-child(5) .am-monitor-action-details > .input-group {
    display:grid!important;grid-template-columns:minmax(0,.41fr) minmax(0,.59fr)!important;
    gap:5px!important;margin:0!important;width:100%!important;
  }
  html body .modal:has(tbody[id^="server-players"]) table.am-monitor-scroll[class] td:nth-child(5) .am-monitor-action-details > .input-group > :is(.input-group-prepend,.am-dark-select-host,.stats-sort-control,select) {
    min-height:0!important;height:34px!important;min-width:0!important;
    max-width:100%!important;margin:0!important;flex:none!important;
  }
  html body .modal:has(tbody[id^="server-players"]) table.am-monitor-scroll[class] td:nth-child(5) :is(.am-dark-select-button,.input-group-prepend > .btn) {
    min-width:0!important;width:100%!important;height:34px!important;min-height:34px!important;
    font-size:11px!important;padding:4px 3px!important;
  }
  html body .modal:has(tbody[id^="server-players"]) table.am-monitor-scroll[class] td:nth-child(5) .input-group-prepend > .btn {
    white-space:nowrap!important;text-overflow:clip!important;
  }
}

/* Last mobile-specific overrides: right-aligned time survives the legacy 14.10 rules. */
@media (max-width:650px) {
  html body .modal:has(tbody[id^="server-players"]) table.am-monitor-scroll.am-monitor-has-actions[class] > thead > tr > :is(th,td):nth-child(4),
  html body .modal:has(tbody[id^="server-players"]) table.am-monitor-scroll.am-monitor-has-actions[class] > tbody[id^="server-players"] > tr > td:nth-child(4) {
    text-align:right!important;
  }
  html body .modal:has(tbody[id^="server-players"]) table.am-monitor-scroll.am-monitor-has-actions[class] > tbody[id^="server-players"] > tr > td:nth-child(2) a :is(i,span) {
    overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;max-width:100%!important;
  }
}

/* The old theme paints sticky cells transparent. Override its extra selectors
   so horizontally scrolling values NEVER show through the pinned name. */
@media (max-width:650px) {
 html body .modal:has(tbody[id^="server-players"]) table.am-monitor-scroll.am-monitor-has-actions[class] > tbody[id^="server-players"] > tr > td:first-child:not([colspan]),
 html body .modal:has(tbody[id^="server-players"]) table.am-monitor-scroll.am-monitor-has-actions[class] > tbody[id^="server-players"] > tr > td:nth-child(2):not([colspan]) {
   background-color:#19222b!important;background-image:none!important;
   isolation:isolate!important;z-index:20!important;
 }
 html body .modal:has(tbody[id^="server-players"]) table.am-monitor-scroll.am-monitor-has-actions[class] > thead > tr > :is(th,td):nth-child(-n+2) {
   background-color:#26313b!important;background-image:none!important;z-index:22!important;
 }
}
/* During orientation changes mobile-layout may leave the actions wrapped in details.
   Its summary is not an additional action and must not take up a desktop row. */
html body .modal:has(tbody[id^="server-players"]) table.am-monitor-scroll[class] .am-monitor-action-details > summary {
  display:none!important;
}

/* Final mobile geometry: no reserved blank area around the two controls.
   The visible custom select button inherits the exact compact width of its grid cell. */
@media (max-width:650px) {
  html body .modal:has(tbody[id^="server-players"]) table.am-monitor-scroll.am-monitor-has-actions[class] > tbody[id^="server-players"] > tr > td:nth-child(5):not([colspan]) {
    padding:6px 4px!important;
  }
  html body .modal:has(tbody[id^="server-players"]) table.am-monitor-scroll.am-monitor-has-actions[class] td:nth-child(5) .am-monitor-action-details > .input-group {
    grid-template-columns:minmax(0,.41fr) minmax(0,.59fr)!important;
    gap:4px!important;
  }
  html body .modal:has(tbody[id^="server-players"]) table.am-monitor-scroll.am-monitor-has-actions[class] td:nth-child(5) .input-group > .input-group-prepend,
  html body .modal:has(tbody[id^="server-players"]) table.am-monitor-scroll.am-monitor-has-actions[class] td:nth-child(5) .input-group > :is(.stats-sort-control,.am-dark-select-host,select) {
    min-width:0!important;width:100%!important;max-width:100%!important;height:34px!important;min-height:34px!important;
  }
  html body .modal:has(tbody[id^="server-players"]) table.am-monitor-scroll.am-monitor-has-actions[class] td:nth-child(5) :is(.am-dark-select-button,.input-group-prepend > .btn,select) {
    font-size:11px!important;min-width:0!important;max-width:100%!important;
    height:34px!important;min-height:34px!important;padding:4px 3px!important;
    overflow:hidden!important;white-space:nowrap!important;
  }
  html body .modal:has(tbody[id^="server-players"]) table.am-monitor-scroll.am-monitor-has-actions[class] td:nth-child(5) .am-dark-select-button {
    padding-right:14px!important;padding-left:5px!important;text-align:left!important;
  }
  html body .modal:has(tbody[id^="server-players"]) table.am-monitor-scroll.am-monitor-has-actions[class] td:nth-child(5) .am-dark-select-button::after {
    right:4px!important;
  }
  html body .modal:has(tbody[id^="server-players"]) table.am-monitor-scroll.am-monitor-has-actions[class] td:nth-child(5) .input-group-prepend > .btn {
    font-weight:600!important;
  }
  html body .modal:has(tbody[id^="server-players"]) .table-responsive.am-monitor-scroll-wrap {
    padding:0!important;margin:0!important;
    scrollbar-width:thin!important;
  }
}


/* Players-only iPhone Safari viewport fix (16.10).
   A mobile Safari visual viewport may not equal the layout viewport / 100vw,
   particularly after pinch-zoom. The JS provides the actual visible CSS-pixel
   rectangle, replacing prior competing 100vw and screen.width calculations.
   Modal container is aligned to visual viewport; dialog has symmetric 8px gutters. */
@media (max-width: 650px) {
  html body .modal.am-monitor-viewport:has(tbody[id^="server-players"]),
  html body .modal.am-monitor-viewport.am-monitor-dialog {
    position: fixed !important;
    inset: auto !important;
    left: var(--am-players-vp-left, 0px) !important;
    top: var(--am-players-vp-top, 0px) !important;
    right: auto !important;
    bottom: auto !important;
    width: var(--am-players-vp-width, 100vw) !important;
    max-width: none !important;
    height: var(--am-players-vp-height, 100dvh) !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    transform: none !important;
    box-sizing: border-box !important;
  }
  html body .modal.am-monitor-viewport:has(tbody[id^="server-players"]) > .modal-dialog,
  html body .modal.am-monitor-viewport.am-monitor-dialog > .modal-dialog,
  html body .modal.am-monitor-viewport.am-zoom-aware:has(tbody[id^="server-players"]) > .modal-dialog {
    box-sizing: border-box !important;
    position: relative !important;
    inset: auto !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    width: calc(100% - 16px) !important;
    min-width: 0 !important;
    max-width: calc(100% - 16px) !important;
    margin: 8px auto !important;
    padding: 0 !important;
    transform: none !important;
    transform-origin: center top !important;
    transition: none !important;
  }
  /* Extra subtle separator on the frozen Nick column. */
  html body .modal:has(tbody[id^="server-players"]) table.am-monitor-scroll.am-monitor-has-actions[class] > :is(thead, tbody) > tr > :is(th, td):nth-child(2):not([colspan]) {
    box-shadow: inset -1px 0 0 rgba(225,194,137,.27) !important;
  }
  /* Harmonious, low-contrast vertical dividers for the other columns. */
  html body .modal:has(tbody[id^="server-players"]) table.am-monitor-scroll.am-monitor-has-actions[class] > :is(thead,tbody) > tr > :is(th,td):not([colspan]):nth-child(1),
  html body .modal:has(tbody[id^="server-players"]) table.am-monitor-scroll.am-monitor-has-actions[class] > :is(thead,tbody) > tr > :is(th,td):not([colspan]):nth-child(3),
  html body .modal:has(tbody[id^="server-players"]) table.am-monitor-scroll.am-monitor-has-actions[class] > :is(thead,tbody) > tr > :is(th,td):not([colspan]):nth-child(4) {
    box-shadow: inset -1px 0 0 rgba(225,194,137,.18) !important;
  }
}