/* The few pieces the control panel needs that the website's styles.css and portal.css do not already have.
   Everything is built from the website's own tokens (--surface, --line, --accent ...), so it follows both themes. */

.menu-toggle[hidden] { display: none; }

/* The website's menu is a drop-down up to 760px and a side menu from 1000px. In between it is a row, which the
   website's few links fit and the panel's fifteen do not: they ran off the side of the page. So the panel keeps the
   drop-down (the website's own rules, repeated for this range) until the side menu takes over. */
@media (min-width: 761px) and (max-width: 999px) {
  .menu-toggle { display: block; }
  .nav-links { position: absolute; top: 88px; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; background: var(--bg); border-bottom: 1px solid var(--line); padding: .25rem 24px 1.25rem; display: none; }
  .nav-links.open { display: flex; }
  .nav-links a:not(.btn) { padding: .85rem 0; border-bottom: 1px solid var(--line); }
  .nav-links[data-account-nav] a[aria-current="page"] { box-shadow: none; padding-bottom: .85rem; font-weight: 600; }
  .nav-foot { flex-direction: column; align-items: stretch; gap: 0; }
  .nav-user-text small { display: block; }
  .nav-links a.nav-user { padding: .9rem 0 .4rem; border-bottom: 0; }
}
/* The drop-down hangs from a top bar that stays on screen. Taller than the screen, its last links could never be
   reached, so it scrolls inside itself. */
@media (max-width: 999px) {
  .nav-links.open { max-height: calc(100dvh - 88px); overflow-y: auto; overscroll-behavior: contain; }
}

/* A table's hidden "Actions" heading is absolutely placed, so it escaped the scrolling wrapper and made the whole page
   scroll sideways on a phone. As the heading's containing block, the wrapper clips it like everything else in the table. */
.table-wrap { position: relative; }

/* A settings form: two columns of fields, like the website's promo-code form; long fields span both. */
.settings { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.35rem 2.25rem; align-items: start; }
.settings > .wide { grid-column: 1 / -1; }
@media (max-width: 760px) { .settings { grid-template-columns: minmax(0, 1fr); } }
.box textarea { width: 100%; }
/* The website's field look for the one control it has no rule for. */
.box input[type="color"] { width: 4.5rem; height: 44px; padding: .25rem; border: 1.5px solid var(--line-2); border-radius: var(--radius-btn); background: var(--field); cursor: pointer; }

/* The website's on/off list has two switches per row (email and Discord); the panel's settings have one. */
.pref-row.single { grid-template-columns: minmax(0, 1fr) 5rem; }

/* The embed builder: the message, a bar of buttons, the embed's card, and a preview. The card is twelve columns wide
   and each control says how many it takes; the builder measures itself, not the window, to know when to stack them.
   --bar is the embed's color, set by app.js: it edges the card as it edges the embed in Discord. */
.embed-builder { container-type: inline-size; display: grid; gap: 1rem; min-width: 0; }
.embed-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
.embed-bar .push { margin-left: auto; }
.embed-bar input[type="color"] { width: 2.75rem; height: 36px; }
.embed-card { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: .85rem; padding: 1rem; border: 1px solid var(--line); border-left: 4px solid var(--bar); border-radius: var(--radius-btn); }
.eb-cell { display: grid; gap: .3rem; align-content: start; min-width: 0; }
.eb-cell input[type="text"], .eb-cell textarea, .eb-add { width: 100%; }
.eb-3 { grid-column: span 3; }
.eb-4 { grid-column: span 4; }
.eb-5 { grid-column: span 5; }
.eb-6 { grid-column: span 6; }
.eb-9 { grid-column: span 9; }
.eb-12, .embed-fields { grid-column: 1 / -1; }
label.eb-cell { display: flex; align-self: start; min-height: 44px; } /* the tick box sits level with the fields beside it */
.embed-fields { display: grid; gap: .6rem; }
.embed-field { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: .6rem .85rem; align-items: center; padding: .75rem; border: 1px solid var(--line); border-radius: var(--radius-btn); }
.embed-field textarea { grid-column: 1 / -1; }
.embed-side { display: grid; gap: .5rem; min-width: 0; }
.settings[hidden], .embed-card[hidden], .embed-fields[hidden], .embed-bar [hidden] { display: none; }
@container (max-width: 640px) {
  .embed-card > * { grid-column: 1 / -1; }
  .embed-field { grid-template-columns: minmax(0, 1fr) auto; }
  .embed-field input[type="text"] { grid-column: 1 / -1; }
}

/* The preview: a mock of the message in Discord. Like the website's Discord mocks, these are Discord's own dark
   colours, not ours, so it looks the same in both themes. --bar is the embed's color, set by app.js. */
.dc { max-width: 40rem; display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); gap: .7rem; padding: .85rem; border-radius: var(--radius-btn); background: #313338; color: #dbdee1; font-size: .875rem; line-height: 1.4; overflow-wrap: break-word; }
.dc-avatar { width: 2.25rem; height: 2.25rem; border-radius: 50%; }
.dc-body { display: grid; gap: .3rem; min-width: 0; }
.dc-name, .dc-title, .dc-author, .dc b { font-weight: 600; color: #f2f3f5; }
.dc-name span { margin-left: .4rem; padding: .1rem .3rem; border-radius: 3px; background: #5865f2; color: #fff; font-size: .62rem; vertical-align: .1em; }
.dc-text { white-space: pre-wrap; }
.dc-note { color: #949ba4; font-style: italic; }
.dc-embed { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .75rem; padding: .6rem .8rem .8rem .75rem; border-left: 4px solid var(--bar); border-radius: 4px; background: #2b2d31; }
.dc-main { display: grid; gap: .5rem; min-width: 0; }
.dc-author, .dc-foot { display: flex; align-items: center; gap: .45rem; font-size: .8rem; }
.dc-foot { font-size: .75rem; color: #b5bac1; }
.dc i { flex: none; width: 1.4rem; height: 1.4rem; border-radius: 50%; background: #4e5058; } /* an icon the panel does not load */
.dc-foot i { width: 1.1rem; height: 1.1rem; }
.dc-title { font-size: 1rem; }
.dc-link { color: #00a8fc; }
.dc-fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr)); gap: .5rem; white-space: pre-wrap; }
.dc-fields > div { grid-column: 1 / -1; }
.dc-fields > .inline { grid-column: auto; }
.dc b { display: block; font-size: .8rem; }
.dc-pic { display: grid; place-items: center; min-height: 6rem; padding: .5rem; border: 1px dashed #4e5058; border-radius: 4px; color: #b5bac1; font: .7rem var(--mono); text-align: center; }
.dc-thumb { align-self: start; width: 4rem; height: 4rem; min-height: 0; padding: .15rem; font-size: .6rem; }
/* A button that shares a row with a field (Remove this trigger) lines up with the field, at the far side. */
.settings > .row-actions:not(.wide) { align-self: end; justify-content: flex-end; }

/* A list editor (ticket types, role buttons) sits between two parts of a box, and a box can hold several forms. */
.box > .table-wrap + .box-body, .box > .box-body + .box-body { border-top: 1px solid var(--line); }
.table .row-actions { justify-content: flex-end; }
.table .col-narrow { width: 9rem; }
.table .col-mid { width: 30%; }
.table .cell-text { white-space: pre-wrap; overflow-wrap: anywhere; max-width: 60ch; }

/* The website's to-do and "latest" rows are buttons. Here they are links (they open Discord or another page) or,
   for moderation cases, plain rows with nothing to open. */
a.todo, a.latest-row { text-decoration: none; }
div.latest-row { cursor: default; }
div.latest-row:hover { background: none; }