/* MapleVerse Test Portal — candy skin on top of style.css (v16 Portal×Toybox).
   Everything here namespace-prefixed tp- except the shared chip/badge sets. */

/* ── Severity chips ─────────────────────────────────────────────────── */
.sev-chip {
  display: inline-block; padding: 2px 9px; border: 2px solid #2c2648;
  border-radius: 9px; font: 700 9px Fredoka, Verdana, sans-serif;
  letter-spacing: 1px; color: #fff; text-shadow: 1px 1px 0 rgba(44,38,72,.3);
  white-space: nowrap;
}
.sev-low      { background: #6cc24a; }
.sev-medium   { background: #ffab2e; }
.sev-high     { background: #ff7a2e; }
.sev-critical { background: #ff5a5a; }
.sev-none     { background: #d8d3e6; color: #6b6478; text-shadow: none; }

/* ── Status badges ──────────────────────────────────────────────────── */
.st-badge {
  display: inline-block; padding: 2px 9px; border: 2px solid #2c2648;
  border-radius: 9px; font: 700 9px Fredoka, Verdana, sans-serif;
  letter-spacing: 1px; color: #fff; text-shadow: 1px 1px 0 rgba(44,38,72,.3);
  white-space: nowrap;
}
.st-open         { background: #2f9fe0; }
.st-confirmed    { background: #7a5cff; }
.st-in_progress  { background: #ffab2e; }
.st-fixed        { background: #58c15c; }
.st-wont_fix     { background: #9a93b5; }
.st-duplicate    { background: #c98ce8; }
.st-cannot_repro { background: #8fa8c8; }

.cat-tag {
  display: inline-block; padding: 1px 8px; margin-right: 3px;
  background: #fff3d6; border: 2px solid #2c2648; border-radius: 8px;
  font: 600 9px Fredoka, Verdana, sans-serif; color: #8a5a00; letter-spacing: .5px;
}

/* ── Sidebar bits ───────────────────────────────────────────────────── */
.tp-nav { list-style: none; margin: 0; padding: 0; }
.tp-nav li { margin: 3px 0; }
.tp-nav a { color: #3a3550; }
.tp-nav a:hover { color: #f2711c; }
.tp-stats { list-style: none; margin: 0; padding: 0; }
.tp-stats li {
  display: flex; justify-content: space-between; align-items: center;
  margin: 4px 0; gap: 6px;
}
.tp-stats li a:hover { text-decoration: none; filter: brightness(1.08); }
.tp-stats li b { color: #2c2648; }

/* ── List page ──────────────────────────────────────────────────────── */
.tp-cta { margin-left: auto; }
.tp-filterbar { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.tp-chip {
  display: inline-block; padding: 3px 10px; border: 2px solid #2c2648;
  border-radius: 10px; background: #fff; color: #4a4560;
  font: 600 10px Fredoka, Verdana, sans-serif; letter-spacing: .5px;
}
.tp-chip b { opacity: .75; font-weight: 700; }
.tp-chip:hover { text-decoration: none; background: #fffbea; }
.tp-chip.on { background: #2c2648; color: #fff; }
.tp-chip.st-open.on         { background: #2f9fe0; }
.tp-chip.st-confirmed.on    { background: #7a5cff; }
.tp-chip.st-in_progress.on  { background: #ffab2e; }
.tp-chip.st-fixed.on        { background: #58c15c; }
.tp-chip.st-wont_fix.on     { background: #9a93b5; }
.tp-chip.st-duplicate.on    { background: #c98ce8; }
.tp-chip.st-cannot_repro.on { background: #8fa8c8; }

.tp-searchbar { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.tp-searchbar input[type=text] {
  flex: 1 1 180px; font: 12px Verdana, sans-serif; padding: 6px 9px;
  border: 2px solid #2c2648; border-radius: 9px; background: #fdfcf8;
}
.tp-searchbar select {
  font: 11px Verdana, sans-serif; padding: 6px;
  border: 2px solid #2c2648; border-radius: 9px; background: #fdfcf8;
}
.tp-searchbtn { margin-top: 0; padding: 6px 16px; }

.tp-table .tp-th-id { width: 52px; }
.tp-table .tp-th-mid { width: 86px; text-align: center; }
.tp-table .tp-th-last { width: 110px; }
.tp-id { color: #8a93a8; font: 700 11px Fredoka, Verdana, sans-serif; }
.tp-mid { text-align: center; }
.tp-votes { font: 700 12px Fredoka, Verdana, sans-serif; color: #d85a10; }
.tp-camera { font-size: 11px; color: #8a93a8; }

.tp-empty { text-align: center; padding: 26px 10px; color: #6b6478; }
.tp-empty img { image-rendering: pixelated; margin-bottom: 8px; }

.tp-howto { display: flex; gap: 14px; flex-wrap: wrap; }
.tp-howstep {
  flex: 1 1 30%; min-width: 180px; background: #fffdf4;
  border: 3px solid #2c2648; border-radius: 14px; padding: 12px;
  box-shadow: 0 3px 0 rgba(44,38,72,.18); line-height: 1.6;
}
.tp-hownum {
  display: inline-block; width: 26px; height: 26px; line-height: 22px;
  text-align: center; background: #ffd23f; border: 2px solid #2c2648;
  border-radius: 50%; font: 700 13px Fredoka, Verdana, sans-serif;
  color: #2c2648; margin-right: 6px;
}

/* ── Report form ────────────────────────────────────────────────────── */
.tp-req {
  font: 700 8px Fredoka, Verdana, sans-serif; letter-spacing: 1px;
  color: #fff; background: #ff5aa0; border: 2px solid #2c2648;
  border-radius: 7px; padding: 1px 6px; vertical-align: 2px;
}
.tp-opt {
  font: 600 8px Fredoka, Verdana, sans-serif; letter-spacing: 1px;
  color: #8a93a8; vertical-align: 2px;
}
.fform select {
  font: 12px Verdana, sans-serif; padding: 7px 9px;
  border: 2px solid #2c2648; border-radius: 9px; background: #fdfcf8;
}
.tp-similar {
  margin: 6px 0 2px; padding: 8px 11px; background: #fff8e0;
  border: 2px dashed #d8a930; border-radius: 11px; font-size: 11px;
}
.tp-similar ul { margin: 5px 0 0; padding: 0; list-style: none; }
.tp-similar li { margin: 4px 0; display: flex; align-items: center; gap: 6px; }
.tp-similar a { color: #3a3550; font-weight: bold; }
.tp-similar a:hover { color: #f2711c; }

.tp-sevpick { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 4px; }
.tp-sevopt { cursor: pointer; }
.tp-sevopt input { position: absolute; opacity: 0; width: 0; height: 0; }
.tp-sevopt span {
  display: inline-block; padding: 5px 12px; border: 2px solid #2c2648;
  border-radius: 10px; background: #fff; color: #6b6478;
  font: 700 10px Fredoka, Verdana, sans-serif; letter-spacing: 1px;
}
.tp-sevopt input:focus-visible + span { outline: 2px solid #2f9fe0; }
.tp-sevopt.sev-none     input:checked + span { background: #d8d3e6; color: #2c2648; }
.tp-sevopt.sev-low      input:checked + span { background: #6cc24a; color: #fff; text-shadow: 1px 1px 0 rgba(44,38,72,.3); }
.tp-sevopt.sev-medium   input:checked + span { background: #ffab2e; color: #fff; text-shadow: 1px 1px 0 rgba(44,38,72,.3); }
.tp-sevopt.sev-high     input:checked + span { background: #ff7a2e; color: #fff; text-shadow: 1px 1px 0 rgba(44,38,72,.3); }
.tp-sevopt.sev-critical input:checked + span { background: #ff5a5a; color: #fff; text-shadow: 1px 1px 0 rgba(44,38,72,.3); }
.tp-sevhint { color: #8a93a8; font-size: 10px; margin-bottom: 4px; }

.tp-drop {
  margin-top: 2px; padding: 18px 14px; text-align: center; cursor: pointer;
  background: #f7fbff; border: 3px dashed #2c2648; border-radius: 14px;
  transition: background .15s, border-color .15s;
  position: relative;
}
.tp-drop:hover, .tp-drop.hot { background: #fff8e0; border-color: #f2801c; }
.tp-drop.full { opacity: .55; }
.tp-drop img { image-rendering: pixelated; vertical-align: middle; margin-right: 12px; }
.tp-drop-text { display: inline-block; text-align: left; vertical-align: middle; line-height: 1.7; color: #4a4560; }
.tp-browse {
  border: 0; padding: 0; background: none; color: #f2711c; font: inherit;
  text-decoration: underline; cursor: pointer;
}
.tp-drop-note {
  position: absolute; left: 50%; transform: translateX(-50%); bottom: -11px;
  background: #2c2648; color: #ffd23f; padding: 3px 12px; border-radius: 9px;
  font: 700 10px Fredoka, Verdana, sans-serif; white-space: nowrap;
}
.tp-previews { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.tp-thumb {
  position: relative; border: 3px solid #2c2648; border-radius: 11px;
  overflow: hidden; background: #fff; box-shadow: 0 3px 0 rgba(44,38,72,.18);
}
.tp-thumb img { display: block; width: 132px; height: 92px; object-fit: cover; }
.tp-thumb-x {
  position: absolute; top: 3px; right: 3px; width: 22px; height: 22px;
  border: 2px solid #2c2648; border-radius: 8px; background: #ff5a5a;
  color: #fff; font: 700 11px Verdana, sans-serif; cursor: pointer; line-height: 1;
}
.tp-thumb-kb {
  position: absolute; left: 3px; bottom: 3px; background: rgba(44,38,72,.82);
  color: #fff; font: 600 8px Fredoka, Verdana, sans-serif; padding: 1px 6px;
  border-radius: 6px;
}
.tp-envrow { font-weight: normal !important; color: #6b6478 !important; }
.tp-envrow input { vertical-align: -2px; margin-right: 5px; }
.tp-inlinebtn { display: inline-block; text-decoration: none; margin-top: 0; }
.tp-inlinebtn:hover { text-decoration: none; color: #fff; }

/* ── View page ──────────────────────────────────────────────────────── */
.tp-vhead { flex-wrap: wrap; }
.tp-id-big {
  font: 700 14px Fredoka, Verdana, sans-serif; color: #fff;
  background: #2c2648; border-radius: 9px; padding: 2px 9px;
}
.tp-vtitle { flex: 1; min-width: 200px; }
.tp-vmeta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px; }
.tp-vby { color: #8a93a8; font-size: 11px; }
.tp-vbody {
  background: #fff; border: 3px solid #2c2648; border-radius: 13px;
  padding: 13px 15px; line-height: 1.75; margin-bottom: 12px;
  box-shadow: 0 3px 0 rgba(44,38,72,.15); word-wrap: break-word;
}
.tp-shots { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 12px; }
.tp-shot {
  display: block; border: 3px solid #2c2648; border-radius: 12px;
  overflow: hidden; box-shadow: 0 4px 0 rgba(44,38,72,.2); background: #fff;
}
.tp-shot img { display: block; width: 218px; height: 150px; object-fit: cover; transition: transform .15s; }
.tp-shot:hover img { transform: scale(1.05); }
/* Screenshots attached to a comment: same treatment, smaller so they read as
   part of the reply rather than competing with the report's own shots. */
.tp-shots-sm { margin-top: 9px; gap: 8px; }
.tp-shots-sm .tp-shot { border-width: 2px; box-shadow: 0 3px 0 rgba(44,38,72,.16); }
.tp-shots-sm .tp-shot img { width: 132px; height: 92px; }
.tp-drop-sm { padding: 11px 12px; }
.tp-drop-sm .tp-drop-text { font-size: 11px; line-height: 1.6; }
.tp-env { margin: 6px 0 12px; color: #6b6478; font-size: 11px; }
.tp-env summary { cursor: pointer; font-weight: bold; }
.tp-env code { display: block; margin-top: 5px; word-break: break-all; background: #f4f1e8; border-radius: 8px; padding: 7px 9px; }

.tp-voterow { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.tp-votebtn {
  padding: 8px 18px; background: linear-gradient(180deg, #ffe27a, #ffc22e);
  border: 3px solid #2c2648; border-radius: 12px; cursor: pointer;
  font: 700 12px Fredoka, Verdana, sans-serif; color: #6b4a00; letter-spacing: 1px;
  box-shadow: 0 3px 0 rgba(44,38,72,.25);
}
.tp-votebtn:hover { filter: brightness(1.06); }
.tp-votebtn.on { background: linear-gradient(180deg, #8fe08b, #58c15c); color: #fff; text-shadow: 1px 1px 0 rgba(44,38,72,.3); }
.tp-votebtn.off { cursor: default; opacity: .8; display: inline-block; }
.tp-votehint { color: #8a93a8; font-size: 10px; }

.tp-adminbox {
  margin-top: 14px; padding: 10px 12px; background: #f2edff;
  border: 3px solid #2c2648; border-radius: 13px;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.tp-adminbox > b { font: 700 11px Fredoka, Verdana, sans-serif; color: #4a2c8a; letter-spacing: 1px; }
.tp-admin-inline { display: inline-flex; align-items: center; gap: 6px; margin: 0; }
.tp-admin-inline select, .tp-admin-inline input[type=text] {
  font: 11px Verdana, sans-serif; padding: 5px 7px;
  border: 2px solid #2c2648; border-radius: 8px; background: #fff;
}
.tp-minibtn { margin-top: 0; padding: 5px 12px; font-size: 10px; }
.tp-danger { background: linear-gradient(180deg, #ff9a9a, #f25252); }
.tp-adminlink { margin-left: auto; font: 600 10px Fredoka, Verdana, sans-serif; }
.tp-adminbadge {
  font: 700 8px Fredoka, Verdana, sans-serif; letter-spacing: 1px;
  color: #fff; background: #7a5cff; border: 2px solid #2c2648;
  border-radius: 7px; padding: 1px 6px; margin-left: 4px;
}
.tp-cdel { display: inline; margin-left: 6px; }
.tp-cdel button {
  border: 0; background: none; color: #c05a5a; cursor: pointer;
  font-size: 10px; padding: 0 2px;
}
.tp-cdel button:hover { color: #ff2e2e; }

/* Comment editing — the pencil sits beside the delete X and matches its weight, so
   the two read as one control group rather than the edit shouting over the delete. */
.tp-cedit {
  border: 0; background: none; color: #8a93a8; cursor: pointer;
  font-size: 11px; padding: 0 2px; margin-left: 6px;
}
.tp-cedit:hover { color: #4a90d9; }
/* "edited" is a quiet fact, not a warning — a comment changed after people replied
   to it should say so, but it should not compete with the author's name. */
.tp-edited { color: #8a93a8; font-style: italic; }
.tp-ceditform { margin-top: 8px; }
.tp-ceditform textarea { width: 100%; min-height: 140px; resize: vertical; }
.tp-ceditrow { display: flex; gap: 8px; align-items: center; margin-top: 6px; }
.fbtn-ghost { background: none; border: 1px solid #4a5460; color: #8a93a8; }
.fbtn-ghost:hover { border-color: #8a93a8; color: #cfd6e4; }

#tp-lightbox {
  position: fixed; inset: 0; z-index: 9999; background: rgba(44,38,72,.88);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; cursor: zoom-out; padding: 20px;
}
#tp-lightbox[hidden] { display: none; }
#tp-lightbox img {
  max-width: 94%; max-height: 86%; border: 4px solid #fff;
  border-radius: 10px; box-shadow: 0 12px 40px rgba(0,0,0,.5);
  image-rendering: pixelated;
}
#tp-lightbox span { color: #cfc7e8; font: 600 11px Fredoka, Verdana, sans-serif; }

/* ── Admin dashboard ────────────────────────────────────────────────── */
.tp-tiles { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 10px; }
.tp-tile {
  flex: 1 1 100px; min-width: 92px; text-align: center; padding: 9px 6px;
  background: #fff; border: 3px solid #2c2648; border-radius: 13px;
  box-shadow: 0 3px 0 rgba(44,38,72,.18); color: #4a4560;
}
.tp-tile b { display: block; font: 700 20px Fredoka, Verdana, sans-serif; color: #2c2648; }
.tp-tile span { font: 600 8px Fredoka, Verdana, sans-serif; letter-spacing: 1px; color: #8a93a8; }
a.tp-tile:hover { text-decoration: none; background: #fffbea; }
.tp-tile.on { outline: 3px solid #f2801c; }
.st-tile-open b         { color: #2f9fe0; }
.st-tile-confirmed b    { color: #7a5cff; }
.st-tile-in_progress b  { color: #e8951c; }
.st-tile-fixed b        { color: #58c15c; }
.st-tile-wont_fix b     { color: #9a93b5; }
.st-tile-duplicate b    { color: #c98ce8; }
.st-tile-cannot_repro b { color: #8fa8c8; }
.tp-sevrow { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-bottom: 12px; color: #4a4560; }
.tp-clearf { margin-left: auto; font: 600 10px Fredoka, Verdana, sans-serif; }
.tp-admintable .tp-actions { white-space: nowrap; }
.tp-admintable .tp-actions form { margin: 2px 4px 2px 0; }
.tp-adminlist { list-style: none; margin: 0; padding: 0; }
.tp-adminlist li { display: flex; align-items: center; gap: 10px; margin: 5px 0; }

/* ── Small screens ──────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .tp-table .tp-th-last, .tp-table .flast { display: none; }
  .tp-shot img { width: 46vw; height: 32vw; }
  .tp-shots-sm .tp-shot img { width: 40vw; height: 28vw; }
  .tp-drop img { display: none; }
  .tp-howstep { flex-basis: 100%; }
}