/* ==========================================================================
   Apollo 青年论坛 — admin surface additions.

   Everything specific to /admin lives here so the public stylesheet stays
   about the public site. Same tokens, same component language as app.css;
   nothing here introduces a second visual system.

   This file is linked on EVERY page (index.html), so every rule below is
   scoped under `.adm`, the wrapper admin.js renders around the admin views.
   Unscoped, short admin class names collide with public ones (`.sm` is also
   the small-button modifier, `.udot` the nav's unread dot) and would restyle
   the public site.

   Gold keeps its one meaning here too: the active tab, the 当期 poster and
   the 当前 event. Counts, unread markers and staff messages use navy.
   ========================================================================== */

/* --------------------------------------------------------------------------
   shell: tighter head, nav that wraps instead of scrolling
   -------------------------------------------------------------------------- */

/* The admin is a work surface; the display head is kept for continuity with
   the rest of the site but sized so the first rows are above the fold. */
.adm .phead { padding-block: 30px 22px; }
.adm .phead .eb { margin-bottom: 12px; }
.adm .phead .dsp { font-size: clamp(34px, 5vw, 56px); }
.adm > .w > section { padding-block: 22px 56px; }

.adm .adminnav {
  display: flex;
  flex-wrap: wrap;
  gap: 0 2px;
  overflow: visible;
  margin-bottom: 22px;
}
.adm .adminnav a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 13px;
  border-bottom: 0;
  margin-bottom: -1px;
}
.adm .adminnav a.on { box-shadow: inset 0 -2px 0 var(--gold); }

/* Count badge: navy, never gold — a count is not "current". */
.adm .adminnav .nb {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--navy-ink);
  color: var(--paper);
  font-family: var(--lat);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}

/* Nine tabs do not fit one row on a phone. Two rows of five, a hairline
   under the first row, the gold bar under whichever tab is open. */
@media (max-width: 640px) {
  .adm .adminnav {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0;
  }
  .adm .adminnav a { padding: 0 2px; gap: 4px; font-size: 13.5px; }
  .adm .adminnav a:nth-child(-n+5) { margin-bottom: 0; box-shadow: inset 0 -1px 0 var(--rule); }
  .adm .adminnav a.on { box-shadow: inset 0 -2px 0 var(--gold); }
}

/* --------------------------------------------------------------------------
   shared bits of the admin views
   -------------------------------------------------------------------------- */

.adm .num { font-family: var(--lat); font-variant-numeric: tabular-nums; }
.adm .subhead { align-items: center; }
.adm .subhead .hint { font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }

.adm .alist { border-top: 1px solid var(--rule); margin-top: 10px; }
.adm .aempty { margin-top: 14px; }

.adm .arow .x { color: var(--muted); font-size: 13.5px; line-height: 1.7; margin: 6px 0 0; }
.adm .qbody { margin: 12px 0 4px; }

/* Gold tag: the current poster / the current event. */
.adm .tag.now { color: var(--gold); border-color: var(--gold); background: color-mix(in srgb, var(--gold) 13%, transparent); }

/* Field label row with something on its right (a character count). */
.adm .field .flab { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; min-width: 0; }
.adm .field .flab > label { font-size: 12px; font-weight: 700; letter-spacing: .09em; color: var(--navy); }
.adm .cnt { font-family: var(--lat); font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.adm .cnt.off { color: var(--navy); font-weight: 700; }

.adm .panel .msg { margin: 14px 0 0; }

/* --------------------------------------------------------------------------
   poster and event rows: a thumbnail column
   -------------------------------------------------------------------------- */

.adm .arow.prow { grid-template-columns: 52px minmax(0, 1fr) auto; }
.adm .arow.erow { grid-template-columns: 40px minmax(0, 1fr) auto; }

.adm .pthumb { display: block; width: 52px; align-self: start; line-height: 0; }
.adm .pthumb img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 78px;
  object-fit: cover;
  object-position: top;
  border-radius: 5px;
  border: 1px solid var(--rule);
  background: #fff;
}
.adm .pthumb.none { height: 69px; border: 1px dashed var(--rule-strong); border-radius: 5px; }
.adm .erow .pthumb { width: 40px; }
.adm .erow .pthumb img { max-height: 56px; }
.adm .erow .pthumb.none { height: 53px; }

.adm .prow .pev { min-width: 0; }
.adm .prow .pdx {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.7;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   poster editor: image column + fields
   -------------------------------------------------------------------------- */

.adm .panel.pedit {
  display: grid;
  grid-template-columns: 216px minmax(0, 1fr);
  gap: 0 26px;
  align-items: start;
  padding: 18px;
}
.adm .pedit .form { border-top: 0; }
.adm .pedit .form > .field:first-child { padding-top: 0; }
.adm .pedit textarea.pdesc { min-height: 104px; }

.adm .pimg { min-width: 0; border-radius: 10px; }
.adm .pimg.over .drop, .adm .pimg.over .pprev { outline: 2px dashed var(--navy); outline-offset: 4px; }

.adm .drop {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  aspect-ratio: 210 / 297; /* A4, the usual poster */
  border: 1px dashed var(--rule-strong);
  border-radius: 10px;
  background: var(--paper);
  text-align: center;
  padding: 16px;
}
.adm .drop:not(.busy) { cursor: pointer; }
.adm .drop:not(.busy):hover { border-color: var(--navy); }
.adm .drop .fmt { font-family: var(--lat); font-size: 11.5px; letter-spacing: .08em; color: var(--muted); }
.adm .drop.busy { color: var(--muted); font-size: 13.5px; letter-spacing: .1em; }

.adm .pprev { display: block; line-height: 0; }
.adm .pprev img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 340px;
  border-radius: 8px;
  border: 1px solid var(--rule);
  background: #fff;
}

.adm .imeta {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 2px 10px;
  margin: 12px 0 0;
  font-size: 12.5px;
  line-height: 1.6;
}
.adm .imeta dt { color: var(--muted); }
.adm .imeta dd { margin: 0; color: var(--ink); }
.adm .pimgacts { margin-top: 10px; }

/* --------------------------------------------------------------------------
   tickets
   -------------------------------------------------------------------------- */

.adm .tfright { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.adm .tcat select, .adm .trafter select {
  width: auto;
  min-height: 34px;
  padding: 4px 30px 4px 11px;
  font-size: 13px;
}

/* The unread dot hangs in the gutter left of the subject, so read and unread
   subjects share one left edge. */
.adm .trow .ttl { position: relative; }
.adm .trow .udot {
  position: absolute;
  left: -15px;
  top: .62em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--navy);
}
.adm .trow.unread .ttl { font-weight: 700; }
.adm .tref { color: var(--navy); text-decoration: none; min-width: 0; }
.adm a.tref:hover, .adm a.tref:focus-visible { text-decoration: underline; }

/* Ticket status chips (.chip.tk-*) are defined once, in app.css, and used by
   both the member's /my/tickets and this admin view, so a status always reads
   the same on both sides. */
.adm .chip.staff { color: var(--navy); border-color: color-mix(in srgb, var(--navy) 45%, var(--rule-strong)); }

.adm .tpanel {
  border: 1px solid var(--rule-strong);
  border-radius: 12px;
  background: var(--surface);
  margin: 12px 0 4px;
  overflow: hidden;
}
.adm .thead {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--rule);
}
.adm .tno { font-size: 12.5px; color: var(--muted); }
.adm .tmsg { padding: 13px 18px; border-bottom: 1px solid var(--rule); }
.adm .tmsg.staff { background: color-mix(in srgb, var(--navy) 6%, var(--surface)); }
.adm .tmh { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; font-size: 12.5px; color: var(--muted); margin-bottom: 4px; }
.adm .tmn { color: var(--ink); font-weight: 700; font-size: 13.5px; }
.adm .tmb { margin: 0; white-space: pre-wrap; font-size: 14.5px; line-height: 1.8; }

.adm .treplybox { padding: 14px 18px 16px; }
.adm .treplybox textarea.treply { min-height: 92px; }
.adm .trbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 18px; margin-top: 10px; }
.adm .trstat, .adm .trsend { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.adm .trsend { margin-left: auto; }
.adm .lbl { font-size: 12px; font-weight: 700; letter-spacing: .09em; color: var(--navy); white-space: nowrap; }
.adm .trafter { display: inline-flex; align-items: center; gap: 8px; }
.adm .tpanel > .msg { margin: 0 18px 16px; }

/* Segmented status control: the pressed segment is the ticket's status. */
.adm .seg { display: inline-flex; border: 1px solid var(--rule-strong); border-radius: 8px; overflow: hidden; max-width: 100%; }
.adm .seg button {
  font-family: var(--sc);
  font-size: 12.5px;
  min-height: 32px;
  padding: 0 11px;
  border: 0;
  border-left: 1px solid var(--rule-strong);
  background: var(--surface);
  color: var(--muted);
  cursor: pointer;
  white-space: nowrap;
}
.adm .seg button:first-child { border-left: 0; }
.adm .seg button:hover:not([aria-disabled="true"]), .adm .seg button:focus-visible { color: var(--ink); }
.adm .seg button.on { background: var(--navy-ink); color: var(--paper); font-weight: 700; }
.adm .seg button[aria-disabled="true"] { cursor: progress; }
.adm .seg button.on:hover, .adm .seg button.on:focus-visible { color: var(--paper); }
.adm .seg button:focus-visible { outline-offset: -3px; }

/* --------------------------------------------------------------------------
   comments
   -------------------------------------------------------------------------- */

.adm .crow .chead { margin-bottom: 4px; align-items: baseline; }
.adm .cname { color: var(--ink); font-weight: 700; font-size: 13.5px; }
.adm .cre { margin: 0 0 2px; font-size: 12.5px; color: var(--navy); }
.adm .cbody { margin: 0; white-space: pre-wrap; font-size: 14.5px; line-height: 1.8; max-width: 46em; }
.adm .cart { display: inline-block; margin-top: 6px; font-size: 12.5px; color: var(--muted); text-decoration: none; }
.adm .cart:hover, .adm .cart:focus-visible { color: var(--navy); text-decoration: underline; }
.adm .crow.hid .cbody { color: var(--muted); }

/* --------------------------------------------------------------------------
   events: 接龙 settings, linked poster, sign-up list
   -------------------------------------------------------------------------- */

.adm .grid3 { display: grid; grid-template-columns: 150px 150px minmax(0, 1fr); gap: 0 26px; }
.adm .evposter { display: inline-block; line-height: 0; }
.adm .evposter img {
  display: block;
  width: 88px;
  height: auto;
  max-height: 132px;
  object-fit: cover;
  object-position: top;
  border-radius: 6px;
  border: 1px solid var(--rule);
  background: #fff;
}

.adm .slist {
  border: 1px solid var(--rule-strong);
  border-radius: 12px;
  background: var(--surface);
  padding: 12px 18px 6px;
  margin: 12px 0 4px;
}
.adm .slist .msg { margin: 10px 0 0; }
.adm .slhead { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding-bottom: 9px; border-bottom: 1px solid var(--rule); }
.adm .slhead .eb { margin: 0; }
.adm .slhead .num { font-size: 13px; font-weight: 700; }
.adm .slprompt { color: var(--muted); font-size: 13px; min-width: 0; }
.adm .srows { list-style: none; margin: 0; padding: 0; }
.adm .srow {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto auto;
  gap: 2px 14px;
  align-items: baseline;
  padding: 9px 0;
  border-bottom: 1px solid var(--rule);
}
.adm .srow:last-child { border-bottom: 0; }
.adm .sno { font-family: var(--lat); font-size: 12px; font-weight: 700; color: var(--navy); font-variant-numeric: tabular-nums; }
.adm .smain { min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 10px; }
.adm .sname { font-weight: 500; }
.adm .smail, .adm .stime { font-size: 12.5px; color: var(--muted); }
.adm .snote { flex-basis: 100%; margin: 2px 0 0; font-size: 13.5px; line-height: 1.7; color: var(--muted); white-space: pre-wrap; }
.adm .slnone { margin: 10px 0 8px; color: var(--muted); font-size: 13.5px; }

/* --------------------------------------------------------------------------
   users
   -------------------------------------------------------------------------- */

.adm .uctl { display: flex; gap: 8px; min-width: 0; }
.adm .uctl select { width: 108px; }

/* --------------------------------------------------------------------------
   responsive
   -------------------------------------------------------------------------- */

@media (max-width: 960px) {
  .adm .grid3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .adm .grid3 > :last-child { grid-column: 1 / -1; }
}

@media (max-width: 760px) {
  .adm .panel.pedit { grid-template-columns: minmax(0, 1fr); padding: 14px 14px 16px; }
  .adm .pimg { margin-bottom: 14px; }
  .adm .drop { aspect-ratio: auto; min-height: 150px; }
  .adm .pprev img { max-height: 280px; }
  .adm .tfright { margin-left: 0; }
}

@media (max-width: 560px) {
  /* app.css collapses .arow to one column here; rows with a thumbnail keep
     it beside the text and put their actions under the text instead. */
  .adm .arow.prow { grid-template-columns: 52px minmax(0, 1fr); }
  .adm .arow.erow { grid-template-columns: 40px minmax(0, 1fr); }
  .adm .arow.prow .acts, .adm .arow.erow .acts { grid-column: 2; }

  /* Row actions are text links; give them a finger-sized hit area. */
  .adm .arow .acts .tlink { padding: 8px 6px; }
  .adm .arow .acts { gap: 2px 8px; margin-left: -6px; }

  /* A ticket row has one short action; it stays top-right instead of taking a line. */
  .adm .arow.trow { grid-template-columns: minmax(0, 1fr) auto; }
  .adm .arow.trow .acts { margin-left: 0; }

  .adm .seg button { min-height: 40px; padding: 0 10px; }
  .adm .tmsg, .adm .treplybox, .adm .thead { padding-inline: 14px; }
  .adm .tpanel > .msg { margin-inline: 14px; }
  .adm .trsend { width: 100%; }
  .adm .trsend .btn { margin-left: auto; }

  .adm .srow { grid-template-columns: 24px minmax(0, 1fr) auto; }
  .adm .srow .stime { grid-column: 2; grid-row: 2; }
  .adm .slist { padding-inline: 14px; }
}