/* WCSAM ticket center — Dashboard 3.1.1 */
.ticket-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}
.ticket-summary-card {
    position: relative;
    min-width: 0;
    padding: 1rem 1.1rem;
    overflow: hidden;
    border: 1px solid var(--wcsam-border);
    border-radius: 18px;
    background: var(--wcsam-surface);
    box-shadow: var(--wcsam-shadow);
}
.ticket-summary-card span { display: block; color: var(--wcsam-muted); font-size: .84rem; font-weight: 700; }
.ticket-summary-card strong { display: block; margin-top: .35rem; color: var(--wcsam-text); font-size: 1.65rem; }
.ticket-summary-card > i { position: absolute; inset-inline-end: 1rem; top: 50%; translate: 0 -50%; font-size: 2rem; opacity: .17; }
.ticket-summary-card.is-open > i { color: #2563eb; }
.ticket-summary-card.is-unread > i { color: #d97706; opacity: .28; }
.ticket-summary-card.is-closed > i { color: #059669; }
.ticket-center-panel { overflow: visible; }
.ticket-panel-heading { align-items: center; gap: 1rem; }
.ticket-compose-panel {
    margin-bottom: 1rem;
    padding: 1rem;
    border: 1px solid rgb(var(--wcsam-accent-rgb) / .25);
    border-radius: 18px;
    background: rgb(var(--wcsam-accent-rgb) / .045);
}
.ticket-compose-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.ticket-compose-head div { display: grid; gap: .2rem; }
.ticket-compose-head span { color: var(--wcsam-muted); font-size: .84rem; }
.ticket-compose-actions { display: flex; justify-content: flex-end; gap: .65rem; margin-top: 1rem; }
.ticket-filter-toolbar { grid-template-columns: minmax(220px, 1fr) minmax(150px, auto) minmax(140px, auto) auto auto; margin-bottom: 1rem; }
.ticket-unread-filter { display: inline-flex; align-items: center; justify-content: center; gap: .55rem; min-height: 42px; padding: .55rem .8rem; border: 1px solid var(--wcsam-border); border-radius: 12px; background: var(--wcsam-surface-soft); white-space: nowrap; cursor: pointer; }
.ticket-unread-filter input { width: 1rem; height: 1rem; accent-color: var(--wcsam-accent); }
.ticket-list { display: grid; gap: .85rem; }
.ticket-card { overflow: hidden; border: 1px solid var(--wcsam-border); border-radius: 18px; background: var(--wcsam-surface); transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
.ticket-card:hover { border-color: rgb(var(--wcsam-accent-rgb) / .34); box-shadow: 0 14px 35px rgb(15 23 42 / .08); }
.ticket-card.is-unread { border-inline-start: 4px solid #f59e0b; }
.ticket-card.is-expanded { border-color: rgb(var(--wcsam-accent-rgb) / .46); box-shadow: 0 16px 42px rgb(var(--wcsam-accent-rgb) / .10); }
.ticket-card-summary { width: 100%; display: grid; grid-template-columns: minmax(210px, 1fr) minmax(0, auto) auto; align-items: center; gap: 1rem; padding: 1rem; color: inherit; text-align: start; border: 0; background: transparent; }
.ticket-title-block { min-width: 0; display: grid; gap: .28rem; }
.ticket-title-block strong { overflow-wrap: anywhere; }
.ticket-title-block small { display: inline-flex; align-items: center; gap: .35rem; color: var(--wcsam-muted); }
.ticket-number { width: fit-content; color: var(--wcsam-accent); font-size: .75rem; font-weight: 800; letter-spacing: .02em; }
.ticket-header-badges { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: .45rem; }
.ticket-new-badge, .ticket-priority, .ticket-category, .ticket-message-count { display: inline-flex; align-items: center; gap: .35rem; min-height: 30px; padding: .35rem .58rem; border-radius: 999px; font-size: .76rem; font-weight: 800; white-space: nowrap; }
.ticket-new-badge { color: #92400e; background: #fef3c7; }
.ticket-priority { color: var(--wcsam-muted); background: var(--wcsam-surface-soft); border: 1px solid var(--wcsam-border); }
.ticket-priority.priority-high { color: #b45309; background: #fffbeb; border-color: #fde68a; }
.ticket-priority.priority-urgent { color: #b91c1c; background: #fef2f2; border-color: #fecaca; }
.ticket-category, .ticket-message-count { color: var(--wcsam-muted); background: var(--wcsam-surface-soft); }
.ticket-chevron { font-size: 1.05rem; transition: rotate .2s ease; }
.ticket-card-summary[aria-expanded="true"] .ticket-chevron { rotate: 180deg; }
.ticket-thread { padding: 0 1rem 1rem; border-top: 1px solid var(--wcsam-border); background: color-mix(in srgb, var(--wcsam-surface-soft) 70%, transparent); }
.ticket-thread-placeholder { padding-top: 1rem; }
.ticket-thread-inner { display: grid; gap: 1rem; padding-top: 1rem; }
.ticket-thread-meta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .65rem; }
.ticket-thread-meta > div { min-width: 0; padding: .72rem .85rem; border: 1px solid var(--wcsam-border); border-radius: 13px; background: var(--wcsam-surface); }
.ticket-thread-meta span { display: block; margin-bottom: .25rem; color: var(--wcsam-muted); font-size: .74rem; }
.ticket-thread-meta strong { overflow-wrap: anywhere; font-size: .88rem; }
.ticket-conversation { display: grid; gap: .75rem; }
.ticket-message { width: min(88%, 760px); padding: .9rem 1rem; border: 1px solid var(--wcsam-border); border-radius: 16px; background: var(--wcsam-surface); }
.ticket-message.from-admin { margin-inline-start: auto; border-start-start-radius: 5px; border-color: rgb(var(--wcsam-accent-rgb) / .26); background: rgb(var(--wcsam-accent-rgb) / .07); }
.ticket-message.from-representative { margin-inline-end: auto; border-start-end-radius: 5px; }
.ticket-message-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: .55rem; }
.ticket-message-head strong { display: inline-flex; align-items: center; gap: .4rem; font-size: .84rem; }
.ticket-message-head time { color: var(--wcsam-muted); font-size: .72rem; }
.ticket-message-body { line-height: 1.9; overflow-wrap: anywhere; white-space: normal; }
.ticket-thread-actions { display: flex; justify-content: flex-end; }
.ticket-reply-form { padding: 1rem; border: 1px solid var(--wcsam-border); border-radius: 16px; background: var(--wcsam-surface); }
.ticket-reply-actions { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: .75rem; }
.ticket-reply-actions span { color: var(--wcsam-muted); font-size: .75rem; }
.ticket-pagination { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: 1rem; }
.ticket-pagination span { min-width: 170px; color: var(--wcsam-muted); text-align: center; font-size: .84rem; font-weight: 700; }
:root[data-theme="dark"] .ticket-new-badge { color: #fbbf24; background: rgb(120 53 15 / .42); }
:root[data-theme="dark"] .ticket-priority.priority-high { color: #fbbf24; background: rgb(120 53 15 / .3); border-color: rgb(251 191 36 / .28); }
:root[data-theme="dark"] .ticket-priority.priority-urgent { color: #fb7185; background: rgb(127 29 29 / .3); border-color: rgb(251 113 133 / .27); }
@media (max-width: 1199.98px) {
    .ticket-filter-toolbar { grid-template-columns: minmax(220px, 1fr) repeat(2, minmax(145px, .55fr)); }
    .ticket-unread-filter, #ticketFilterReset { grid-row: 2; }
}
@media (max-width: 767.98px) {
    .ticket-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; }
    .ticket-panel-heading { align-items: stretch; }
    .ticket-panel-heading #ticketComposeToggle { width: 100%; }
    .ticket-filter-toolbar { display: grid; grid-template-columns: 1fr; }
    .ticket-filter-toolbar > * { width: 100%; grid-row: auto; }
    .ticket-card-summary { grid-template-columns: minmax(0, 1fr) auto; gap: .65rem; }
    .ticket-header-badges { grid-column: 1 / -1; justify-content: flex-start; }
    .ticket-thread-meta { grid-template-columns: 1fr; }
    .ticket-message { width: 94%; }
    .ticket-reply-actions { align-items: stretch; flex-direction: column; }
    .ticket-reply-actions .btn { width: 100%; }
    .ticket-pagination { display: grid; grid-template-columns: 1fr 1fr; }
    .ticket-pagination span { grid-column: 1 / -1; grid-row: 1; min-width: 0; }
}
@media (max-width: 420px) {
    .ticket-summary-grid { grid-template-columns: 1fr; }
    .ticket-compose-actions { flex-direction: column-reverse; }
    .ticket-compose-actions .btn { width: 100%; }
}