/* The Enshrouded pages (/admin, /mod) - only what's theirs; the look is
   resorted-ui (shared/ui/ui.css) and the bots' shared/style.css. */

/* Sign-in and no-access cards (parts.js heroPanel) */
.heim-hero {
  max-width: 760px;
  margin: 20px auto 0;
}
.heim-hero .banner {
  width: min(100%, 520px);
  text-align: left;
}
.heim-hero .rui-cta + .rui-cta {
  margin-top: 10px;
}
.rui-menu svg {
  width: 17px;
  height: 17px;
}
.rui-menu form {
  margin: 0;
}
#who:empty {
  display: none;
}

/* ---- Mod page ---- */
.mod-grid {
  display: grid;
  grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}
@media (max-width: 860px) {
  .mod-grid {
    grid-template-columns: 1fr;
  }
}
.status-head {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 1.1rem;
}
.facts {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 7px 14px;
  margin: 14px 0 0;
  font-size: 0.9rem;
}
.facts dt {
  color: var(--muted);
}
.facts dd {
  margin: 0;
  text-align: right;
  overflow-wrap: anywhere;
}
.player-bar {
  height: 8px;
  border-radius: 99px;
  background: var(--field);
  overflow: hidden;
  margin-top: 12px;
}
.player-bar span {
  display: block;
  height: 100%;
  background: var(--ok);
}
.req {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--field);
  padding: 14px;
  display: grid;
  gap: 10px;
}
.req + .req {
  margin-top: 10px;
}
.req-people {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px;
}
.req-note {
  padding: 9px 12px;
  border-left: 3px solid var(--accent);
  background: var(--card);
  border-radius: 0 8px 8px 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-size: 0.92rem;
}
.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.count {
  display: inline-grid;
  place-items: center;
  min-width: 24px;
  height: 22px;
  padding: 0 7px;
  border-radius: 99px;
  background: var(--accent);
  color: #1b1a14;
  font-size: 0.8rem;
  font-weight: 700;
  margin-left: 6px;
  vertical-align: 2px;
}
details summary {
  cursor: pointer;
  font-weight: 600;
}

/* Long lists on /mod scroll inside the card instead of growing the page. */
.scroll-box {
  display: grid;
  gap: 8px;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 4px;
  scrollbar-width: thin;
  scrollbar-color: var(--line-strong) transparent;
}
.scroll-box .req + .req {
  margin-top: 0;
}

/* ---- Admin page ---- */
.server-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}
.server-card {
  display: grid;
  gap: 4px;
  justify-items: start;
  text-align: left;
  padding: 14px 16px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--card);
  cursor: pointer;
}
.server-card > .row {
  width: 100%;
}
.server-card:hover {
  background: var(--card-hover);
}
.server-card.on {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent) inset;
}
.admin-grid {
  display: grid;
  grid-template-columns: minmax(0, 380px) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  margin-bottom: 16px;
}
.admin-grid > div > .card + .card {
  margin-top: 16px;
}
@media (max-width: 900px) {
  .admin-grid {
    grid-template-columns: 1fr;
  }
}
.console {
  height: min(70vh, 640px);
  overflow: auto;
  overscroll-behavior: contain;
  background: var(--field);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 12px;
  font: 12px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  scrollbar-width: thin;
  scrollbar-color: var(--line-strong) transparent;
}
.log-line {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: #c9ccd8;
}
.log-line.hi {
  color: var(--text);
  font-weight: 600;
}
.log-line.heim {
  color: var(--accent);
}
.log-line.err {
  color: var(--bad);
}
.log-time {
  color: var(--muted);
  margin-right: 8px;
  user-select: none;
}
.hp {
  display: inline-block;
  width: 60px;
  height: 6px;
  border-radius: 99px;
  background: var(--field);
  overflow: hidden;
  margin-left: 10px;
  vertical-align: 2px;
}
.hp span {
  display: block;
  height: 100%;
}
.feed {
  display: grid;
  gap: 6px;
  max-height: 560px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--line-strong) transparent;
}
.feed-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 9px 12px;
  border-radius: 8px;
  background: var(--field);
  border-left: 3px solid var(--line-strong);
}
.feed-item.ok { border-left-color: var(--ok); }
.feed-item.bad { border-left-color: var(--bad); }
.feed-item.warn { border-left-color: var(--warn); }
.feed-item.gold { border-left-color: #c7a24b; }
.feed-item.info { border-left-color: #5865f2; }
.feed-meta {
  text-align: right;
  white-space: nowrap;
}
#app > .card,
#app > div > .card {
  margin-bottom: 16px;
}
.tags {
  display: inline-flex;
  gap: 5px;
  margin-left: 8px;
  vertical-align: 1px;
}
.list-item.offline .name-line {
  color: var(--muted);
}
.log-line.cmd {
  color: var(--accent);
  font-weight: 600;
  margin-top: 4px;
}
.log-line.out {
  color: var(--text);
  padding-left: 14px;
}
/* Players on /admin: full width, tags and buttons on the right, profiles expand. */
.admin-grid + .card {
  margin-top: 0;
}
.player-list {
  display: grid;
  gap: 6px;
}
.player {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--field);
}
.player.open {
  border-color: var(--line-strong);
}
.player-main {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 13px;
  min-width: 0;
}
.player-main.clickable {
  cursor: pointer;
}
.player-main.clickable:hover {
  background: var(--card-hover);
  border-radius: 10px;
}
.player-main .grow {
  min-width: 0;
}
.player-main .sub-line {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.player.offline .name-line {
  color: var(--muted);
}
.chev {
  width: 12px;
  color: var(--muted);
  font-size: 0.8rem;
}
.player-side {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
  flex-shrink: 0;
}
.player-side .tags {
  display: flex;
  gap: 5px;
  margin: 0;
}
@media (max-width: 700px) {
  .player-main {
    flex-wrap: wrap;
  }
  .player-side {
    width: 100%;
    justify-content: space-between;
  }
}
.profile {
  display: grid;
  gap: 12px;
  padding: 4px 16px 14px 50px;
  border-top: 1px solid var(--line);
  padding-top: 12px;
}
.pfacts {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px 16px;
}
.pfact > div {
  overflow-wrap: anywhere;
}
/* /mod: players and events span the page under the status and requests. */
.mod-grid + .card,
.mod-wide {
  margin-top: 16px;
}

/* Cards side by side end on the same line (no gaps under the shorter one). */
.admin-grid,
.mod-grid {
  align-items: stretch;
}
/* /admin: the info card sets the row's height; the console fills the rest of it. */
.admin-grid > div:first-child {
  display: flex;
  flex-direction: column;
  /* Enough room for a useful console even when the info card is short. */
  min-height: 420px;
}
.admin-grid > div:first-child > .card {
  flex: 1;
}
.admin-grid > div:last-child {
  position: relative;
}
.admin-grid > div:last-child > .card {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
}
.admin-grid .console {
  flex: 1;
  height: auto;
  min-height: 0;
}
@media (max-width: 900px) {
  .admin-grid > div:first-child {
    min-height: 0;
  }
  .admin-grid > div:last-child > .card {
    position: static;
  }
  .admin-grid .console {
    flex: none;
    height: min(60vh, 520px);
  }
}
/* /mod: the status card keeps its own height and sets the row's; pending requests and
   recent decisions share the space beside it, each scrolling inside its card. */
.mod-grid > aside {
  min-height: 420px;
}
.mod-grid > aside > .card {
  height: 100%;
}
.mod-side {
  position: relative;
}
.mod-side-inner {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.mod-side-inner > .card {
  margin: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.mod-side-inner > .card:first-child {
  flex: 1 1 0;
}
.mod-side-inner > .card.collapsible {
  flex: 0 0 auto;
}
/* Opened, recent decisions get half the height. */
.mod-side-inner > .card.collapsible.open {
  flex: 1 1 0;
}
.side-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  margin-top: 12px;
}
.side-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--line-strong) transparent;
  padding-right: 4px;
}
.side-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  text-align: left;
}
.side-toggle h2 {
  margin: 0;
}
@media (max-width: 860px) {
  .mod-grid > aside {
    min-height: 0;
  }
  .mod-side-inner {
    position: static;
  }
  .mod-side-inner > .card {
    overflow: visible;
  }
  .side-scroll {
    overflow: visible;
  }
}
/* Beside the status card the cards themselves scroll, so their lists don't (one scrollbar). */
@media (min-width: 861px) {
  .mod-side-inner .scroll-box {
    max-height: none !important;
    overflow: visible;
  }
}

/* Players: the accounts of one person */
.acct-line {
  white-space: normal !important;
}
.acct-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-right: 10px;
}
.acct-pic {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  object-fit: cover;
}
span.acct-pic {
  display: none;
}
.pic-none {
  display: inline-grid;
  place-items: center;
  font-size: 0.66rem;
  font-weight: 700;
  color: var(--muted);
  background: var(--card);
}
.acct-list {
  display: grid;
  gap: 6px;
}
.acct {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border-radius: 8px;
  background: var(--card);
}
.acct .grow {
  min-width: 0;
}
.acct .tags {
  display: flex;
  gap: 5px;
}


/* ---- Phones ---- */
@media (max-width: 860px) {
  /* /mod: the requests column is an ordinary column again (no fixed height to share). */
  .mod-side-inner > .card,
  .mod-side-inner > .card:first-child,
  .mod-side-inner > .card.collapsible.open {
    flex: none;
    display: block;
    overflow: visible;
  }
  .mod-side-inner .scroll-box {
    max-height: 520px !important;
    overflow-y: auto;
  }
}
@media (max-width: 700px) {
  /* Players: name and accounts on top, tags and buttons wrap underneath. */
  .player-main {
    flex-wrap: wrap;
  }
  .player-main .grow {
    flex: 1 1 180px;
  }
  .player-main .sub-line,
  .acct-line {
    white-space: normal;
  }
  .player-side {
    width: 100%;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 8px;
  }
  .player-side .tags,
  .acct .tags {
    flex-wrap: wrap;
  }
  .acct {
    flex-wrap: wrap;
  }
  .profile {
    padding-left: 14px;
  }
  .pfacts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .req-people {
    grid-template-columns: 1fr;
  }
  .feed-item {
    flex-wrap: wrap;
  }
  .feed-meta {
    text-align: left;
    width: 100%;
  }
}
.pic-none {
  overflow: hidden;
  font-size: 0.58rem;
  flex-shrink: 0;
}
@media (max-width: 700px) {
  /* Full names on small screens (account rows, the /whitelist accounts). */
  .acct .name-line,
  .account .name-line {
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .acct .sub-line {
    overflow-wrap: anywhere;
    white-space: normal;
  }
}

/* ---- The daily restart, in the server's status card ---- */
.schedule {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  display: grid;
  gap: 4px;
}
.schedule h3 {
  margin: 0;
  font-size: 0.95rem;
}
.schedule form {
  gap: 12px;
}
.schedule textarea,
.schedule input {
  font-weight: 400;
}
.sched-grid {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 10px;
}
.sched-grid.wide {
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
.schedule input[type='time'] {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--field);
  color: inherit;
  font: inherit;
}
@media (max-width: 560px) {
  .sched-grid {
    grid-template-columns: 1fr;
  }
}

/* ---- Backups: the list to roll the world back to, grouped by day ---- */
.bk-list {
  max-height: 340px;
  overflow-y: auto;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--field);
}
.bk-day {
  position: sticky;
  top: -4px;
  z-index: 1;
  padding: 9px 10px 5px;
  background: var(--field);
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.bk-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  border-radius: 9px;
  cursor: pointer;
  font-weight: 400;
}
.bk-row:hover {
  background: var(--card2);
}
.bk-row.on {
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 50%, transparent);
}
/* The radio stays for the keyboard (arrow keys), but the row is what shows. */
.bk-row input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.bk-row:has(input:focus-visible) {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}
.bk-time {
  min-width: 3.2em;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.bk-row .grow {
  display: grid;
  min-width: 0;
}
.bk-kind {
  font-size: 0.9rem;
}

/* ---- Enshrouded: waiting changes, groups and passwords, settings ---- */



/* Changes waiting for a restart (/admin status) */
.pending-box {
  margin-top: 12px;
  padding: 12px 14px;
  border: 1px solid color-mix(in srgb, var(--warn) 45%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--warn) 8%, transparent);
}

/* Groups and passwords, server, game settings, bans (/admin) */
.config-cards {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 16px 0;
}
.config-cards > .card {
  margin: 0;
}
.config-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.config-pair > .card {
  margin: 0;
}
@media (max-width: 900px) {
  .config-pair {
    grid-template-columns: 1fr;
  }
}
.grp-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 12px;
}
.grp {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--field);
}
.grp.edit {
  grid-column: 1 / -1;
}
.grp-fields {
  display: grid;
  grid-template-columns: minmax(140px, 1fr) minmax(220px, 2fr) 120px;
  gap: 10px;
}
@media (max-width: 700px) {
  .grp-fields {
    grid-template-columns: 1fr;
  }
}
.grp-perms {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
}
.grp .btn.danger {
  align-self: flex-start;
}
label.chip.check {
  gap: 6px;
  cursor: pointer;
  padding-right: 10px;
}
.gs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px 14px;
  align-items: end;
}
.ban {
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
}
.ban:last-child {
  border-bottom: 0;
}
.log-line.warn {
  color: var(--warn);
}