/* The admin panel (#adminDialog), opened by "!admin".
 *
 * Sized and positioned like the replay browser next door, because it is the same kind of thing: a
 * centred overlay holding one scrolling list. z-index sits BELOW #confirmActionDialog (300) so the
 * delete confirmation lands on top of this rather than behind it. */

#adminDialog {
    position: absolute;
    left: 50%;
    margin-left: -470px;
    top: 120px;
    width: 940px;
    height: 640px;
    border-radius: 15px;
    box-shadow: 0px 0px 15px 5px black;
    padding: 14px 18px;
    z-index: 200;
    overflow: hidden;
    display: none;
    box-sizing: border-box;
}

.adminTitle {
    height: 34px;
    font-size: 26px;
    text-align: center;
}

/* Tabs, not two dialogs: the panel keeps one title, one filter, one message line and one pair of
   buttons, and only the list between them changes. */
.adminTabs {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-bottom: 8px;
}

.adminTab {
    padding: 4px 24px;
    font-size: 15px;
    cursor: pointer;
    opacity: 0.65;
}

/* The active tab is the one that does NOT look like a button waiting to be pressed. */
.adminTabActive {
    opacity: 1;
    font-weight: bold;
}

.adminFilter {
    width: 100%;
    box-sizing: border-box;
    padding: 5px 8px;
    margin-bottom: 6px;
    font-size: 16px;
    text-align: center;
}

/* Reserves its line whether or not there is a message, so the list below does not jump up and down
   as actions succeed and fail. */
.adminMessage {
    min-height: 20px;
    font-size: 15px;
    text-align: center;
}

/* One grid shared by the header and every row, so the columns cannot drift apart. */
.adminListHead,
.adminRow {
    display: grid;
    grid-template-columns: 1fr 70px 70px 130px 200px 190px;
    column-gap: 10px;
    align-items: center;
}

.adminListHead {
    font-size: 15px;
    opacity: 0.75;
    padding: 0px 6px 4px 6px;
    border-bottom: 1px solid rgba(128, 128, 128, 0.45);
}

/* Fills what the fixed-height dialog has left once the title, tab strip, filter, message line,
   column header and buttons have taken theirs. Shared by both tabs' lists so switching tabs does
   not resize the panel. */
.adminList {
    height: 418px;
    overflow-y: auto;
    overflow-x: hidden;
}

.adminRow {
    padding: 5px 6px;
    border-bottom: 1px solid rgba(128, 128, 128, 0.22);
}

.adminRow:hover {
    background-color: rgba(128, 128, 128, 0.12);
}

/* The name is server-built HTML in the player's own colour, so it needs no colour of its own. */
.adminName {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.adminWhen {
    font-size: 14px;
    opacity: 0.8;
    white-space: nowrap;
}

.adminActions {
    display: flex;
    gap: 6px;
    justify-content: flex-end;
}

.adminActions input[type="button"] {
    padding: 2px 10px;
    cursor: pointer;
}

/* A disabled Delete is still shown (its tooltip carries the reason), so it has to READ as disabled
   rather than merely not respond to clicks. */
.adminActions input[type="button"]:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.adminLocked   { color: #d9534f; }
.adminUnlocked { color: #5cb85c; }

/* Small, quiet markers beside the status word — they qualify it rather than compete with it. */
.adminBadge,
.adminOnline,
.adminInGame {
    font-size: 13px;
    opacity: 0.85;
}

.adminBadge { color: #f0ad4e; }
.adminOnline { color: dodgerblue; }

/* The one marker here that is a warning rather than a fact: acting on this row reaches other
 * players' game, so it is the colour the rest of the app uses for attacks. */
.adminInGame { color: #d9534f; }

/* Live games ---------------------------------------------------------------
   Its own grid: the columns carry different things from the accounts list (a whole seat list rather
   than one name), so sharing that grid would only force both to compromise. */
.adminGamesHead,
.adminGameRow {
    display: grid;
    grid-template-columns: 185px 1fr 95px 95px 110px 150px;
    column-gap: 10px;
    align-items: center;
}

.adminGamesHead {
    font-size: 15px;
    opacity: 0.75;
    padding: 0px 6px 4px 6px;
    border-bottom: 1px solid rgba(128, 128, 128, 0.45);
}

.adminGameRow {
    padding: 6px;
    border-bottom: 1px solid rgba(128, 128, 128, 0.22);
}

.adminGameRow:hover {
    background-color: rgba(128, 128, 128, 0.12);
}

/* Idle past the client-side warning threshold. A tint, not a verdict: it draws the eye down the
   list to the rows worth reading, and changes nothing about what the buttons will do. */
.adminGameIdle {
    background-color: rgba(217, 83, 79, 0.14);
}

.adminGameIdle:hover {
    background-color: rgba(217, 83, 79, 0.22);
}

.adminGameName {
    white-space: nowrap;
}

.adminGameId {
    font-weight: bold;
}

/* The second line of a cell — the qualifier under the thing itself (difficulty under the game type,
   whose turn it is under the turn number). */
.adminGameSub {
    font-size: 13px;
    opacity: 0.7;
}

.adminGamePlayers {
    font-size: 14px;
    overflow: hidden;
}

.adminGameSeats {
    font-size: 13px;
    opacity: 0.85;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.adminGameTurn {
    white-space: nowrap;
}

.adminGameWaiting {
    font-size: 13px;
    color: #f0ad4e;
}

/* Seat states, in the order they matter to somebody deciding whether a game is dead: a connected
   human is why you would leave it alone; the rest are why you would not. */
.adminSeatHere { color: #5cb85c; }
.adminSeatAway { color: #d9534f; }
.adminSeatGone { opacity: 0.55; text-decoration: line-through; }
.adminSeatAI   { opacity: 0.7; }

.adminEmpty {
    padding: 24px;
    text-align: center;
    opacity: 0.7;
}

.adminButtons {
    height: 40px;
    padding-top: 8px;
    text-align: center;
}

.adminButtons input[type="button"] {
    padding: 4px 22px;
    margin: 0px 6px;
    cursor: pointer;
}