/* Ticket-app additions on top of the SIS site's design system (redesign.css tokens: --border, --r-lg, --fs-*, --brand-*). */

/* Landing: contact channels + map on the start side (right in Arabic), form on the end side. */
.tk-contact { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 28px; align-items: start; }
.tk-contact__info { display: grid; gap: 14px; }
.tk-contact__info .rd-card { margin: 0; }
.tk-ico { width: 56px; height: 56px; margin: 0; flex: 0 0 auto; }
.tk-map { border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--border); }
.tk-form-card { background: #fff; }
.tk-narrow { max-width: 560px; margin-inline: auto; }
.tk-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.tk-help { font-size: var(--fs-sm); color: var(--text-muted); margin: -6px 0 18px; }
/* a signed-in requester's identity fields: filled in, visibly locked */
.rd-input[readonly] { background: var(--surface-2, #f6f8fa); color: var(--text-muted); cursor: default; }
.tk-form-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: 6px; }
.tk-identity { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px 16px; background: var(--surface-2, #f6f8fa); border: 1px solid var(--border); border-radius: var(--r-md); padding: 12px 16px; margin-bottom: 20px; }
.tk-identity__k { display: block; font-size: var(--fs-xs); color: var(--text-muted); }
.rd-input[type="file"] { padding: 9px 12px; }

/* Flash messages (bootstrap .alert base + our tones) */
.alert--ok { background: #e6f8ee; color: #166534; border: 1px solid #bbf7d0; border-radius: var(--r-md); padding: 12px 16px; margin-bottom: 16px; }
.alert--err { background: #fee2e2; color: #991b1b; border: 1px solid #fecaca; border-radius: var(--r-md); padding: 12px 16px; margin-bottom: 16px; }
.alert .list-plain { margin: 0; padding-inline-start: 18px; }

/* Ticket thread */
.tk-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 16px; }
.tk-thread { display: grid; gap: 12px; margin-bottom: 20px; }
.tk-msg { border: 1px solid var(--border); border-radius: var(--r-md); padding: 14px 18px; background: #fff; }
.tk-msg--agent { background: var(--brand-primary-50, #eef6fa); border-color: var(--brand-primary-100, #d5e8f1); }
.tk-msg__meta { display: flex; flex-wrap: wrap; gap: 10px; font-size: var(--fs-sm); color: var(--text-muted); margin-bottom: 6px; }
.tk-msg__meta strong { color: var(--text); }
.tk-msg__body { word-wrap: break-word; }
.tk-files { list-style: none; padding: 0; margin: 8px 0 0; display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: var(--fs-sm); }
.tk-files li::before { content: '📎 '; }

/* Badges, chips, misc */
.tk-badge { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: var(--fs-xs); font-weight: 700; line-height: 1.6; vertical-align: middle; }
.tk-badge--open { background: #dbeafe; color: #1e40af; }
.tk-badge--in_progress { background: #fef3c7; color: #b45309; }
.tk-badge--waiting { background: #ede9fe; color: #6d28d9; }
.tk-badge--resolved { background: #dcfce7; color: #15803d; }
.tk-badge--closed { background: #e5e7eb; color: #374151; }
.tk-badge--new { background: #b91c1c; color: #fff; }
.tk-chip { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-sm); }
.tk-chip i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.tk-chip--onbrand { color: inherit; }
.tk-mono { font-family: ui-monospace, Consolas, monospace; letter-spacing: .03em; }
.tk-small { font-size: var(--fs-sm); }
.tk-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; font-size: var(--fs-sm); }

/* My tickets list */
.tk-list { display: grid; gap: 12px; margin-bottom: 16px; }
.tk-row { display: flex; justify-content: space-between; gap: 16px; color: inherit; text-decoration: none; margin: 0; }
.tk-row:hover { border-color: var(--brand-primary-300, #9cc3d6); text-decoration: none; }
.tk-row.is-unread { border-inline-start: 4px solid #b91c1c; }
.tk-row__subject { font-weight: 700; margin-top: 4px; }
.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: 40px 20px; }
.pager { display: flex; justify-content: center; align-items: center; gap: 14px; }
.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; margin-bottom: 10px; }
.tk-stars label { cursor: pointer; }
.tk-stars input { display: none; }
.tk-stars span { color: #d1d5db; 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: #f59e0b; }
.tk-stars-static { color: #f59e0b; letter-spacing: .1em; }

@media (max-width: 991px) {
    .tk-contact { grid-template-columns: 1fr; }
    .tk-contact__form { order: -1; }
}
@media (max-width: 640px) {
    .tk-grid-2 { grid-template-columns: 1fr; }
    .tk-row { flex-direction: column; }
    .tk-row__side { flex-direction: row; align-items: center; }
}
.tk-toolbar--head { align-items: flex-start; margin-bottom: 20px; }
.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-badge--rate { background: #fef3c7; color: #b45309; }

.tk-oh-closed { color: #b45309; margin-top: 4px; }