/* Ticket-app additions on top of the Tabuk site's design system (tabuk.css tokens: --brand, --navy, --ink, --muted,
   --line, --wash, --tint, --sand, --r, --r-sm, --pill). Pages use the site's own components (page-hero, sec, wrap,
   contact-grid, card static, field + .ferr, info-li, icon-tile, map-embed, btn); this file only adds what tickets need. */

/* form card (same padding as the site's contact form card) */
.tk-card { padding: 32px; }
.tk-card__t { font-weight: 700; margin-bottom: 4px; }
.tk-card__d { margin-bottom: 20px; }
.tk-form { display: flex; flex-direction: column; gap: 16px; }
.tk-g { gap: 16px; }
.tk-req { color: #B3261E; }
.tk-help { font-size: .8rem; color: var(--muted); margin: -4px 0 0; }
.tk-help--after { margin-top: 16px; }
.tk-hint { font-size: .74rem; color: var(--muted); }
.field input[readonly] { background: var(--wash); color: var(--muted); cursor: default; }
.field input[type="file"] { padding: 9px 12px; cursor: pointer; }
.tk-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: 4px; }
.tk-link { color: var(--brand); font-weight: 700; }
.tk-link:hover { color: var(--brand-strong); text-decoration: underline; }
.tk-block { width: 100%; justify-content: center; }
.tk-side { display: flex; flex-direction: column; gap: 22px; }
.tk-info { padding: 24px 26px; }
.tk-info .info-li span { display: block; color: var(--muted); font-size: .9rem; }
.tk-closed { color: var(--warn) !important; font-size: .8rem !important; margin-top: 4px; }
.tk-narrow { max-width: 560px; margin-inline: auto; }
.tk-wrap { max-width: 920px; }
.tk-gap { margin-top: 20px; }
.tk-muted { color: var(--muted); }
.tk-small { font-size: .8rem; }

/* flash messages */
.alert { border-radius: var(--r-sm); padding: 12px 16px; margin-bottom: 16px; font-size: .9rem; font-weight: 600; }
.alert--ok { background: var(--green-bg); color: var(--green); border: 1px solid color-mix(in srgb, var(--green) 25%, transparent); }
.alert--err { background: #FCECEA; color: #B3261E; border: 1px solid #F2C7C2; }
.alert .list-plain { margin: 0; padding-inline-start: 18px; list-style: disc; }

/* ticket thread */
.tk-thread { display: grid; gap: 12px; margin-bottom: 22px; }
.tk-msg { border: 1px solid var(--line); border-radius: var(--r); padding: 16px 20px; background: var(--surface); }
.tk-msg--agent { background: var(--tint); border-color: var(--navy-200); }
.tk-msg__meta { display: flex; flex-wrap: wrap; gap: 10px; font-size: .8rem; color: var(--muted); margin-bottom: 6px; }
.tk-msg__meta strong { color: var(--ink); }
.tk-msg__body { word-wrap: break-word; line-height: 1.9; }
.tk-msg__body p { margin: 0 0 .5rem; }
.tk-msg__body p:last-child { margin-bottom: 0; }
.tk-msg__body ul, .tk-msg__body ol { margin: .3rem 0 .5rem; padding-inline-start: 1.4rem; }
.tk-files { list-style: none; padding: 0; margin: 10px 0 0; display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: .84rem; }
.tk-files a { color: var(--brand); font-weight: 600; }
.tk-files li::before { content: '📎 '; }

/* badges, chips, meta */
.tk-badge { display: inline-block; padding: 2px 11px; border-radius: var(--pill); font-size: .72rem; font-weight: 700; line-height: 1.7; vertical-align: middle; }
.tk-badge--open { background: var(--brand-50); color: var(--brand); }
.tk-badge--in_progress { background: var(--sand-50); color: var(--sand-deep); }
.tk-badge--waiting { background: #EFEAF8; color: #5B3FA0; }
.tk-badge--resolved { background: var(--green-bg); color: var(--green); }
.tk-badge--closed { background: var(--wash); color: var(--muted); border: 1px solid var(--line); }
.tk-badge--new { background: #B3261E; color: #fff; }
.tk-badge--rate { background: var(--sand-50); color: var(--sand-deep); }
.tk-chip { display: inline-flex; align-items: center; gap: 6px; font-size: .84rem; }
.tk-chip i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.tk-mono { font-family: ui-monospace, Consolas, monospace; letter-spacing: .03em; font-weight: 700; color: var(--navy); }
.tk-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; font-size: .84rem; }
.tk-meta--hero { margin-top: 10px; position: relative; }

/* my tickets */
.tk-list { display: grid; gap: 12px; margin-bottom: 18px; }
.tk-row { display: flex; justify-content: space-between; gap: 16px; padding: 18px 22px; color: inherit; }
.tk-row:hover { border-color: var(--brand) !important; }
.tk-row.is-unread { border-inline-start: 4px solid #B3261E; }
.tk-row__subject { font-weight: 700; margin-top: 6px; color: var(--ink); }
.tk-row__side { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; white-space: nowrap; }
.tk-empty { text-align: center; display: grid; gap: 14px; justify-items: center; padding: 44px 20px; }
.pager { display: flex; justify-content: center; align-items: center; gap: 14px; }
.pager a { color: var(--brand); font-weight: 700; }
.pager .is-disabled { opacity: .5; pointer-events: none; }

/* rating stars (DOM order 5→1, row reversed) */
.tk-stars { display: flex; flex-direction: row-reverse; justify-content: flex-end; gap: 4px; font-size: 30px; }
.tk-stars label { cursor: pointer; }
.tk-stars input { display: none; }
.tk-stars span { color: var(--line); transition: color .1s; }
.tk-stars label:hover span, .tk-stars label:hover ~ label span,
.tk-stars label:has(input:checked) span, .tk-stars label:has(input:checked) ~ label span { color: var(--sand); }
.tk-stars-static { color: var(--sand); letter-spacing: .1em; }

@media (max-width: 900px) {
    .tk-card { padding: 22px 18px; }
}
@media (max-width: 640px) {
    .tk-row { flex-direction: column; }
    .tk-row__side { flex-direction: row; align-items: center; }
}

/* ticket meta inside the navy page hero (site page hero v2) */
.page-hero .tk-mono { color: #fff; }
.page-hero .tk-muted { color: var(--hero-muted); }
.page-hero .tk-chip { color: #DCE9F4; }