/* ==========================================================================
   My tickets ([nsrl_tickets] page) — the sender's side of a support ticket
   Path:   assets/public/css/pages/tickets.css   (uses assets/common/css/public/tokens.css)
   Script: assets/public/js/ui/tickets.js
   ========================================================================== */

.nsrl-tickets {
  --tk-green: var(--nsrl-color-green-900, #0b3d24);
  --tk-green-2: var(--nsrl-color-green-800, #12532f);
  --tk-green-soft: var(--nsrl-color-green-100, #e3efe7);
  --tk-ok: var(--nsrl-color-green-700, #1b6b40);
  --tk-teal: var(--nsrl-color-teal-700, #087f87);
  --tk-teal-ink: var(--nsrl-color-teal-800, #065f65);
  --tk-teal-soft: var(--nsrl-color-teal-100, #dff4f4);
  --tk-teal-wash: var(--nsrl-color-teal-50, #f0fafa);
  --tk-gold-ink: var(--nsrl-color-gold-800, #7a5d08);
  --tk-gold-soft: var(--nsrl-color-gold-100, #f8efd2);
  --tk-ink: var(--nsrl-color-ink, #101a15);
  --tk-text: var(--nsrl-color-slate, #46544c);
  --tk-muted: var(--nsrl-color-muted, #6b7a72);
  --tk-line: var(--nsrl-color-line, #dbe4de);
  --tk-mist: var(--nsrl-color-mist, #f4f7f5);
  --tk-danger: var(--nsrl-color-red-700, #b42318);
  box-sizing: border-box;
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  padding: 40px 20px 64px;
  color: var(--tk-text);
  font-family: var(--nsrl-font, "DM Sans", sans-serif);
  font-size: 15px;
  line-height: 1.6;
}
.nsrl-tickets *, .nsrl-tickets *::before, .nsrl-tickets *::after { box-sizing: border-box; }
.nsrl-tickets [hidden] { display: none !important; }
.nsrl-tickets svg { width: 1.15em; height: 1.15em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.nsrl-tickets a:not(.nsrl-tk-btn) { color: var(--tk-teal-ink); text-underline-offset: 3px; }
.nsrl-tickets__loading, .nsrl-tickets__error { padding: 48px 0; text-align: center; color: var(--tk-muted); }
.nsrl-tickets__error { color: var(--tk-danger); }
.nsrl-tk-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
.nsrl-tk-trap { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }

/* ---------- Cards, type, buttons, fields ---------- */
.nsrl-tk-card { background: #fff; border: 1px solid var(--tk-line); border-radius: 16px; padding: 24px; }
.nsrl-tk-card--narrow { max-width: 480px; margin: 24px auto; padding: 32px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.nsrl-tk-card--narrow p { margin: 0; }
.nsrl-tk-card--flush { padding: 0; overflow: hidden; }
.nsrl-tk-h1 { margin: 0; font-size: clamp(26px, 1.4rem + 1vw, 36px); line-height: 1.15; color: var(--tk-green); }
.nsrl-tk-h1--sm { font-size: clamp(20px, 1.1rem + .4vw, 24px); line-height: 1.3; }
.nsrl-tk-eyebrow { margin: 0 0 6px; font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--tk-teal); }
.nsrl-tk-muted { margin: 4px 0 0; color: var(--tk-muted); }
.nsrl-tk-fine { margin: 0; font-size: 13px; color: var(--tk-muted); }
.nsrl-tk-badge { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; background: var(--tk-teal-soft); color: var(--tk-teal); font-size: 22px; }
.nsrl-tk-badge--ok { border-radius: 50%; background: var(--tk-green-soft); color: var(--tk-ok); }
.nsrl-tk-notice { width: 100%; margin: 0; padding: 10px 14px; border-radius: 10px; background: var(--tk-gold-soft); color: var(--tk-gold-ink); font-size: 14px; text-align: left; }

.nsrl-tk-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 22px;
  border-radius: 10px; border: 1.5px solid transparent; font-family: inherit; font-size: 15px; font-weight: 600; line-height: 1; cursor: pointer; text-decoration: none;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.nsrl-tk-btn--primary { background: var(--tk-green); color: #fff; }
.nsrl-tk-btn--primary:hover { background: var(--tk-green-2); color: #fff; }
.nsrl-tk-btn--primary:disabled { background: #e4ede5; color: var(--tk-muted); cursor: not-allowed; }
.nsrl-tk-btn--ok { background: #fff; color: var(--tk-ok); border-color: var(--tk-ok); }
.nsrl-tk-btn--ok:hover { background: var(--tk-green-soft); }
.nsrl-tk-btn--ghost { background: transparent; color: var(--tk-green); }
.nsrl-tk-btn--ghost:hover { background: var(--tk-green-soft); }
.nsrl-tk-btn:focus-visible, .nsrl-tk-link:focus-visible, .nsrl-tk-back:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(8, 127, 135, .35); border-radius: 10px; }
.nsrl-tk-btn.is-busy { opacity: .7; cursor: progress; }
/* Link-buttons keep their own colour: the theme's link colour (blue, also :visited / :hover) must not reach them */
.nsrl-tickets a.nsrl-tk-btn.nsrl-tk-btn--primary, .nsrl-tickets a.nsrl-tk-btn.nsrl-tk-btn--primary:is(:link, :visited, :hover, :focus, :active) { color: #fff; text-decoration: none; }
.nsrl-tickets a.nsrl-tk-btn.nsrl-tk-btn--ghost, .nsrl-tickets a.nsrl-tk-btn.nsrl-tk-btn--ghost:is(:link, :visited, :hover, :focus, :active) { color: var(--tk-green); text-decoration: none; }
.nsrl-tickets a.nsrl-tk-btn.nsrl-tk-btn--ok, .nsrl-tickets a.nsrl-tk-btn.nsrl-tk-btn--ok:is(:link, :visited, :hover, :focus, :active) { color: var(--tk-ok); text-decoration: none; }
.nsrl-tk-link { padding: 0; border: 0; background: none; color: var(--tk-teal-ink); font: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

.nsrl-tk-form { width: 100%; display: flex; flex-direction: column; gap: 8px; text-align: left; }
.nsrl-tk-label { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--tk-text); }
.nsrl-tk-label::after { content: "*"; margin-left: 3px; color: var(--tk-danger); }
.nsrl-tk-input {
  width: 100%; min-height: 46px; padding: 11px 14px; border: 1.5px solid var(--tk-line); border-radius: 10px;
  background: #fff; color: var(--tk-ink); font-family: inherit; font-size: 15px; line-height: 1.45; outline: none;
}
.nsrl-tk-input:focus { border-color: var(--tk-teal); box-shadow: 0 0 0 3px rgba(8, 127, 135, .18); }
.nsrl-tk-input[aria-invalid="true"] { border-color: var(--tk-danger); }
.nsrl-tk-field-error { margin: 0; font-size: 13px; color: var(--tk-danger); }
.nsrl-tk-form .nsrl-tk-btn { margin-top: 6px; }
@supports (-webkit-touch-callout: none) { .nsrl-tk-input { font-size: 16px; } }

/* ---------- List ---------- */
.nsrl-tk-head { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
.nsrl-tk-head__txt { flex: 1 1 300px; min-width: 0; }
.nsrl-tk-who { margin: 6px 0 0; font-size: 14px; color: var(--tk-muted); overflow-wrap: anywhere; }
.nsrl-tk-tools { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.nsrl-tk-tools__q { flex: 1 1 280px; width: auto; }
.nsrl-tk-tools__lbl { font-weight: 600; color: var(--tk-ink); }
.nsrl-tk-tools select { width: auto; min-width: 170px; }
.nsrl-tk-scroll { overflow-x: auto; }
.nsrl-tk-table { width: 100%; border-collapse: collapse; font-size: 14.5px; margin: 0; }
.nsrl-tk-table th { padding: 14px 16px; text-align: left; font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--tk-text); background: var(--tk-mist); border: 0; border-bottom: 1px solid var(--tk-line); white-space: nowrap; }
.nsrl-tk-table td { padding: 16px; border: 0; border-bottom: 1px solid var(--tk-line); vertical-align: top; }
.nsrl-tk-table tbody tr:last-child td { border-bottom: 0; }
.nsrl-tk-table tbody tr:hover { background: #f2f7f3; }
.nsrl-tk-table__subj { min-width: 240px; }
.nsrl-tickets .nsrl-tk-table__subj a { font-weight: 600; color: var(--tk-green); text-decoration: none; }
.nsrl-tickets .nsrl-tk-table__subj a:hover { text-decoration: underline; }
.nsrl-tk-num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.nsrl-tk-nowrap { white-space: nowrap; }
.nsrl-tk-empty { margin: 0; padding: 28px; text-align: center; color: var(--tk-muted); }
.nsrl-tickets > .nsrl-tk-fine { margin-top: 14px; }

.nsrl-tk-pill { display: inline-flex; align-items: center; height: 26px; padding: 0 11px; border-radius: 999px; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; background: #eef1ef; color: var(--tk-text); }
.nsrl-tk-pill.is-pending { background: var(--tk-gold-soft); color: var(--tk-gold-ink); }
.nsrl-tk-pill.is-open { background: var(--tk-teal-soft); color: var(--tk-teal-ink); }
.nsrl-tk-pill.is-solved { background: var(--tk-green-soft); color: var(--tk-ok); }

/* ---------- One ticket ---------- */
.nsrl-tk-ticket { max-width: 860px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; }
.nsrl-tickets .nsrl-tk-back { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-weight: 600; color: var(--tk-text); text-decoration: none; }
.nsrl-tickets .nsrl-tk-back:hover { color: var(--tk-green); }
.nsrl-tk-summary__top { display: flex; gap: 16px; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; }
.nsrl-tk-summary__top > div { flex: 1 1 280px; min-width: 0; overflow-wrap: anywhere; }
.nsrl-tk-meta { margin: 18px 0 0; padding-top: 16px; border-top: 1px solid var(--tk-line); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.nsrl-tk-meta dt { font-size: 12.5px; color: var(--tk-muted); }
.nsrl-tk-meta dd { margin: 2px 0 0; font-weight: 700; color: var(--tk-ink); }
.nsrl-tk-banner { display: flex; gap: 10px; align-items: flex-start; margin: 0; padding: 14px 16px; border-radius: 12px; }
.nsrl-tk-banner svg { margin-top: 3px; }
.nsrl-tk-banner.is-solved { background: var(--tk-green-soft); color: var(--tk-green-2); }
.nsrl-tk-banner.is-closed { background: #eef1ef; color: var(--tk-text); }

.nsrl-tk-thread { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 14px; }
.nsrl-tk-msg { display: flex; gap: 14px; margin: 0; padding: 20px; border-radius: 16px; border: 1px solid var(--tk-line); background: #fff; }
.nsrl-tk-msg.is-me { background: var(--tk-teal-wash); border-color: #bfe6e7; }
.nsrl-tk-avatar { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; color: #fff; background: var(--tk-green); }
.nsrl-tk-msg.is-me .nsrl-tk-avatar { background: var(--tk-teal); }
.nsrl-tk-msg__body { flex: 1; min-width: 0; }
.nsrl-tk-msg__head { margin: 0; display: flex; gap: 10px; flex-wrap: wrap; align-items: baseline; }
.nsrl-tk-msg__head b { color: var(--tk-ink); overflow-wrap: anywhere; }
.nsrl-tk-msg__head span, .nsrl-tk-msg__head time { font-size: 13px; color: var(--tk-muted); }
.nsrl-tk-msg__head time { margin-left: auto; }
.nsrl-tk-msg__text { margin: 8px 0 0; white-space: pre-line; color: #26332c; overflow-wrap: anywhere; }

.nsrl-tk-reply { display: flex; flex-direction: column; gap: 12px; }
.nsrl-tk-reply__title { font-size: 18px; font-weight: 700; color: var(--tk-green); }
.nsrl-tk-reply__text { min-height: 140px; resize: vertical; }
.nsrl-tk-reply__acts { display: flex; gap: 10px; flex-wrap: wrap; }
.nsrl-tk-reply__send { flex: 1 1 240px; }

@media (max-width: 640px) {
  .nsrl-tickets { padding: 28px 16px 48px; }
  .nsrl-tk-card { padding: 18px; }
  .nsrl-tk-card--narrow { padding: 24px 18px; }
  .nsrl-tk-meta { grid-template-columns: minmax(0, 1fr); }
  .nsrl-tk-head .nsrl-tk-btn, .nsrl-tk-reply__acts .nsrl-tk-btn { width: 100%; }
  .nsrl-tk-msg { padding: 16px; gap: 10px; }
  .nsrl-tk-avatar { width: 32px; height: 32px; font-size: 13px; }
  .nsrl-tk-msg__head time { margin-left: 0; width: 100%; }
}