/* The bot's cabinet, on top of the admin's admin.css (cards, tabs, badges, notices, buttons). */
.narrow-card { max-width: 32rem; }
.tabs { justify-content: flex-start; align-items: flex-end; } /* Pico's nav spreads its children; three tabs belong on the left */
.switch-row { margin-bottom: 0.3rem; }
.switch-row span { font-weight: 600; }

.account { display: flex; align-items: center; gap: 0.8rem; margin-bottom: 0.8rem; }
.account strong { overflow-wrap: anywhere; }
.avatar-img { border-radius: 50%; object-fit: cover; flex: none; }
.avatar.big { width: 3.5rem; height: 3.5rem; font-size: 1.3rem; flex: none; }

.steps ol { padding-left: 1.2rem; }
.steps li { margin-bottom: 0.4rem; }
.more { margin-top: 1rem; }
.more > summary { cursor: pointer; }

/* Settings: one row per parameter, the changed ones marked on the left. */
.filter { margin-bottom: var(--pico-spacing); }
fieldset.plain { border: 0; padding: 0; margin: 0; min-width: 0; } /* a fieldset is as wide as its widest content by default: the economy's tables scroll inside their own box instead */
.group { border: 1px solid var(--pico-muted-border-color); border-radius: var(--pico-border-radius); padding: 0 1rem; margin-bottom: 0.8rem; background: var(--pico-card-background-color); }
.group > summary { padding: 0.8rem 0; }
.group[open] > summary { border-bottom: 1px solid var(--pico-muted-border-color); margin-bottom: 0.8rem; }
.setting { padding: 0.2rem 0 0.2rem 0.7rem; margin-bottom: 0.6rem; border-left: 3px solid transparent; }
.setting.changed { border-left-color: var(--pico-primary); }
.setting label { margin-bottom: 0.2rem; }
.setting input:not([type='checkbox']), .setting textarea { margin-bottom: 0.2rem; }
.setting textarea { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 0.9em; }
.setting .meta { gap: 0.6rem; margin: 0; }
.setting .meta > * { margin: 0; }
.setting small.err { color: var(--pico-del-color); display: block; margin: 0 0 0.2rem; }
.key { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 0.85em; overflow-wrap: anywhere; }
.sub { display: block; color: var(--pico-muted-color); font-size: 0.8rem; margin: 0 0 0.25rem; }
.json { max-height: 12rem; overflow: auto; margin: 0 0 0.2rem; padding: 0.5rem 0.7rem; font-size: 0.8em; }
.say { font-size: 0.85rem; }

/* The economy's tables (payouts, jackpots, perks): compact cells, sideways scroll on a phone. */
.econ { margin-bottom: 1rem; }
.econ h4 { margin: 0 0 0.2rem; font-size: 1rem; }
.econ table { font-size: 0.85rem; }
.econ th, .econ td { padding: 0.25rem 0.4rem; white-space: nowrap; }
.econ td input[type='number'], .econ td input[type='text'] { margin: 0; padding: 0.25rem 0.4rem; height: auto; min-width: 5rem; width: 7rem; }
.econ td input.wide { width: 16rem; }
.econ td input[type='checkbox'] { margin: 0; }
.econ .cell.changed input { border-color: var(--pico-primary); }
.econ small.err { color: var(--pico-del-color); display: block; margin: 0 0 0.2rem; }
details:not(.group) > textarea { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 0.8em; }

/* The journal: wide tables scroll sideways instead of widening the page. */
.scroll { overflow-x: auto; margin: 0; }
.scroll table { font-size: 0.85rem; }
.scroll td.wrap { white-space: normal; min-width: 8rem; overflow-wrap: anywhere; }

/* A confirmation: the whole screen, its card in the middle. Pico's `width: inherit` would take the width of the page's container. */
dialog[open] { position: fixed; inset: 0; margin: 0; width: 100vw; height: 100vh; max-width: none; max-height: none; overflow-y: auto; }
dialog article { width: min(34rem, calc(100vw - 2rem)); margin: auto; }

/* Players: the bot sorts by a column title (a plain button inside the th), pages below the table. */
.players th { white-space: nowrap; }
.players td { white-space: nowrap; }
button.sort { all: unset; cursor: pointer; font-weight: 600; }
button.sort:focus-visible { outline: 2px solid var(--pico-primary); outline-offset: 2px; }
.pager { display: flex; flex-wrap: wrap; gap: 0.3rem; align-items: center; justify-content: flex-start; }
.pager button { margin: 0; min-width: 2.4rem; }
.pager .gap { padding: 0 0.3rem; color: var(--pico-muted-color); }