/* ==========================================================
   MonoPixel – podpora (support.monopixel.cz), navazuje na style.css
   ========================================================== */
.sp { display: flex; flex-direction: column; min-height: 100vh; }
.sp main { flex: 1; }

.sp-brand { display: flex; align-items: center; gap: 10px; }
.sp-brand span {
  padding: 3px 8px;
  font: .7rem var(--pixel); text-transform: uppercase; color: var(--navy-900);
  background: var(--sky-300); border-radius: 4px;
}
.sp-nav-site { font-size: .9rem !important; color: rgba(255,255,255,.5) !important; }
.nav-count {
  display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; margin-left: 2px;
  font-size: .75rem; font-weight: 800; color: #fff; background: #ff5d6c; border-radius: 10px;
}

.sp-hero { padding-bottom: 72px; }
.sp-section { padding: 48px 0 88px; }
.sp-flash { margin-top: 24px; }
.sp-flash .alert { margin: 0; }
.sp-footer { padding-top: 0; }
.sp-footer .footer__bottom { border-top: 0; }
.sp-footer a { color: rgba(255,255,255,.75); }
.sp-footer a:hover { color: #fff; }

.sp-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.sp-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.sp-bar h1, .sp-bar h2 { margin: 0; font-size: 1.6rem; font-weight: 800; }
.sp-bar small { font-size: 1rem; font-weight: 600; color: var(--muted); }
.sp-note { margin: 18px 0 0; color: var(--muted); font-size: .95rem; text-align: center; }
.sp-back { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 16px; font-weight: 600; }
.sp-back svg { width: 18px; height: 18px; }

.sp-empty { padding: 48px 24px; text-align: center; background: var(--surface); border: 2px dashed var(--border); border-radius: var(--radius); }
.sp-empty img { margin: 0 auto 14px; border-radius: 8px; image-rendering: pixelated; }
.sp-empty p { color: var(--muted); }

/* úvod pro nepřihlášené */
.sp-welcome { display: grid; grid-template-columns: 1fr 1.2fr; gap: 40px; align-items: center; }
.sp-welcome p { color: var(--muted); margin-bottom: 24px; }
.sp-cats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sp-cats li { display: grid; padding: 14px 16px; background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--blue-500); border-radius: 10px; }
.sp-cats span { font-size: .88rem; color: var(--muted); }
@media (max-width: 820px) { .sp-welcome { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .sp-cats { grid-template-columns: 1fr; } }

/* ---------- stavy a štítky ---------- */
.st, .chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 10px; white-space: nowrap;
  font-size: .78rem; font-weight: 700;
  border-radius: 999px;
}
.st--open     { color: #0b4fc0; background: #e3eeff; }
.st--answered { color: #0d6b36; background: #e2f7ea; }
.st--closed   { color: #5a6b8c; background: #edf1f7; }
.chip { color: var(--muted); background: var(--bg); border: 1px solid var(--border); }
.chip svg { width: 13px; height: 13px; }
.chip--urgent { color: #fff; background: #e5384d; border-color: #e5384d; }
.chip--internal { color: #8a5a00; background: #fff4d6; border-color: #f5d98a; }

/* ---------- seznam ticketů ---------- */
.tlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.tlist__item a {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 18px;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.tlist__item a:hover { border-color: #b9d4ff; box-shadow: var(--shadow); transform: translateY(-1px); }
.tlist__item img { flex: none; border-radius: 6px; image-rendering: pixelated; }
.tlist__main { flex: 1; min-width: 0; display: grid; gap: 2px; }
.tlist__main strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tlist__meta { font-size: .86rem; color: var(--muted); }
.tlist__meta b { color: var(--text); font-weight: 600; }
.tlist__time { flex: none; font-size: .85rem; color: var(--muted); }
.tlist__new { flex: none; font-size: .8rem; font-weight: 800; color: var(--blue-600); }
.tlist__item.is-unread a { border-left: 4px solid var(--blue-500); }
.tlist__item.is-urgent a { border-left: 4px solid #e5384d; }
.tlist__item.is-closed a { opacity: .7; }
@media (max-width: 640px) {
  .tlist__item a { flex-wrap: wrap; gap: 8px 12px; }
  .tlist__main { flex-basis: calc(100% - 60px); }
  .tlist--queue .tlist__time { margin-left: 48px; }
  .tlist__item a > .st { margin-left: auto; }
}

/* ---------- formuláře ---------- */
.sp-form { display: grid; gap: 22px; padding: 28px; }
.sp-form fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.sp-form legend { margin-bottom: 8px; padding: 0; }
.field textarea, .field select, .reply textarea, .qsearch input, .qsearch select {
  width: 100%;
  padding: 13px 14px;
  font: 500 1rem/1.5 var(--font); color: var(--text);
  background: var(--bg);
  border: 2px solid var(--border);
  border-radius: 10px;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.field textarea, .reply textarea { resize: vertical; min-height: 120px; }
.field textarea:focus, .field select:focus, .reply textarea:focus, .qsearch input:focus, .qsearch select:focus {
  outline: 0; background: #fff; border-color: var(--blue-500); box-shadow: 0 0 0 4px rgba(30,136,255,.15);
}
.field__label small { font-weight: 500; color: var(--muted); }
.field__hint { font-size: .85rem; color: var(--muted); }
.sp-form__foot { display: flex; justify-content: flex-end; gap: 12px; flex-wrap: wrap; }
.sp-template { justify-self: start; padding: 0; font: 600 .88rem var(--font); color: var(--blue-600); background: none; border: 0; cursor: pointer; }
.sp-template:hover { text-decoration: underline; }

.cat-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.cat-pick__item { position: relative; cursor: pointer; }
.cat-pick__item input { position: absolute; opacity: 0; }
.cat-pick__item span {
  display: grid; gap: 2px; height: 100%;
  padding: 12px 14px;
  background: var(--bg);
  border: 2px solid var(--border);
  border-radius: 10px;
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.cat-pick__item small { font-size: .82rem; color: var(--muted); line-height: 1.35; }
.cat-pick__item:hover span { border-color: #b9d4ff; }
.cat-pick__item input:checked + span { background: var(--sky-100); border-color: var(--blue-500); box-shadow: 0 0 0 3px rgba(30,136,255,.15); }
.cat-pick__item input:focus-visible + span { outline: 3px solid var(--blue-500); outline-offset: 2px; }

/* výběr obrázků */
.files { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; cursor: pointer; }
.files input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.files__btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 14px;
  font-weight: 600; font-size: .92rem; color: var(--blue-600);
  background: var(--surface); border: 2px dashed #b9d4ff; border-radius: 10px;
  transition: border-color .15s, background .15s;
}
.files__btn svg { width: 18px; height: 18px; }
.files:hover .files__btn, .files input:focus-visible + .files__btn { border-color: var(--blue-500); background: var(--sky-100); }
.files__list { display: flex; flex-wrap: wrap; gap: 6px; }
.files__list img { width: 44px; height: 44px; object-fit: cover; border-radius: 6px; border: 1px solid var(--border); }
.files__list .is-error { font-size: .85rem; font-weight: 600; color: #a3162a; }

/* ---------- detail ticketu ---------- */
.sp-ticket__grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 24px; align-items: start; }
@media (max-width: 900px) { .sp-ticket__grid { grid-template-columns: 1fr; } .sp-side { order: -1; } }

.thead { padding: 22px 24px; margin-bottom: 20px; }
.thead__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.thead h1 { font-size: clamp(1.3rem, 3vw, 1.7rem); font-weight: 800; margin: 0 0 6px; overflow-wrap: anywhere; }
.thead h1 span { color: var(--muted); font-weight: 600; }
.thead__meta { margin: 0; font-size: .92rem; color: var(--muted); }
.thead__meta strong { color: var(--text); }

.thread { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 14px; }
.msg { display: flex; gap: 12px; align-items: flex-start; }
.msg__head { flex: none; width: 40px; height: 40px; border-radius: 8px; image-rendering: pixelated; }
.msg__box {
  flex: 1; min-width: 0;
  padding: 14px 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px 14px 14px 14px;
}
.msg--staff .msg__box { background: linear-gradient(180deg, #f2f8ff, #fff 60%); border-color: #b9d4ff; border-left: 4px solid var(--blue-500); }
.msg--internal .msg__box { background: #fffaeb; border: 1px dashed #f0c95a; border-left: 4px solid #f0b429; }
.msg__top { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 6px; }
.msg__top time { margin-left: auto; font-size: .82rem; color: var(--muted); }
.msg__top .rank-chip { font-size: .72rem; }
.msg__body { overflow-wrap: anywhere; }
.msg__body a { text-decoration: underline; }
.msg__files { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.msg__files img { width: 140px; height: 100px; object-fit: cover; border-radius: 8px; border: 1px solid var(--border); transition: transform .15s; }
.msg__files a:hover img { transform: scale(1.03); }

.msg-sys { display: flex; justify-content: center; }
.msg-sys span { padding: 4px 12px; font-size: .84rem; color: var(--muted); background: var(--bg); border: 1px solid var(--border); border-radius: 999px; text-align: center; }
.msg-sys--internal span { background: #fffaeb; border-color: #f5d98a; }

.reply { padding: 16px; }
.reply textarea { background: var(--surface); }
.reply__warn { margin: 0 0 10px; font-size: .9rem; font-weight: 600; color: #8a5a00; }
.reply__foot { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 12px; }
.reply__internal { font-size: .9rem; }
.reply__btns { display: flex; gap: 8px; margin-left: auto; }
.reply.is-internal { background: #fffaeb; border-color: #f0c95a; }
@media (max-width: 560px) { .files--inline .files__btn span { display: none; } .reply__btns { width: 100%; } .reply__btns .btn { flex: 1; } }

.sp-closed { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding: 18px 20px; }
.sp-closed p { margin: 0; }
.sp-close { margin-top: 12px; text-align: center; }
.link-btn { padding: 0; font: 600 .92rem var(--font); color: var(--muted); background: none; border: 0; cursor: pointer; text-decoration: underline; }
.link-btn:hover { color: var(--blue-600); }
.link-btn--danger:hover { color: #c8102e; }

/* panel A-Teamu */
.sp-side { display: grid; gap: 14px; position: sticky; top: calc(var(--nav-h) + 16px); }
.side-player { display: flex; gap: 14px; align-items: center; padding: 16px; }
.side-player img { border-radius: 8px; image-rendering: pixelated; }
.side-player div { display: grid; justify-items: start; gap: 4px; min-width: 0; }
.side-player strong { font-size: 1.1rem; overflow-wrap: anywhere; }
.side-player a { font-size: .9rem; font-weight: 600; }
.side-muted { font-size: .88rem; color: var(--muted); }
.side-actions { display: grid; gap: 10px; padding: 18px; }
.side-actions h3 { margin: 0 0 2px; font-size: 1rem; }
.side-actions form { margin: 0; }
.side-actions .link-btn { margin-top: 4px; }
.side-tip { margin: 0; padding: 0 4px; }

/* ---------- fronta ---------- */
.qsearch { display: flex; gap: 8px; flex-wrap: wrap; }
.qsearch select { width: auto; padding: 9px 12px; }
.qsearch input { width: 260px; padding: 9px 12px; }
@media (max-width: 640px) { .qsearch, .qsearch input, .qsearch select { width: 100%; } }
.qtabs { display: flex; gap: 4px; margin-bottom: 16px; overflow-x: auto; border-bottom: 2px solid var(--border); }
.qtabs a {
  flex: none; display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 14px; margin-bottom: -2px;
  font-weight: 600; color: var(--muted);
  border-bottom: 3px solid transparent;
}
.qtabs a:hover { color: var(--text); }
.qtabs a.is-active { color: var(--blue-600); border-bottom-color: var(--blue-500); }
.qtabs span { padding: 0 7px; font-size: .78rem; font-weight: 800; color: var(--blue-700); background: var(--sky-100); border-radius: 999px; }
.qpages { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 20px; color: var(--muted); }