/* ============================================================
   Support tickets — customer pages and staff queue
   (owner: public agent). Only theme variables.
   ============================================================ */

/* ── Status and priority pills ────────────────────────────── */
.sup-status, .sup-prio {
    display:       inline-flex;
    align-items:   center;
    gap:           var(--space-1);
    padding:       2px var(--space-2);
    border-radius: var(--radius-full);
    font-size:     var(--font-size-xs);
    font-weight:   var(--font-weight-medium);
    line-height:   1.6;
    white-space:   nowrap;
}
.sup-status::before {
    content:          '';
    width:            6px;
    height:           6px;
    border-radius:    var(--radius-full);
    background-color: currentColor;
}
.sup-status--open             { background-color: var(--color-primary-lighter);  color: var(--color-primary-dark); }
.sup-status--waiting_staff    { background-color: var(--color-warning-bg);       color: var(--color-warning-text); }
/* The one that asks the customer to act: solid, so it stands out in a list. */
.sup-status--waiting_customer { background-color: var(--color-primary);         color: var(--color-text-on-primary); }
.sup-status--resolved         { background-color: var(--color-success-bg);       color: var(--color-success-text); }
.sup-status--closed           { background-color: var(--color-badge-default-bg); color: var(--color-badge-default-text); }

.sup-prio--low    { background-color: transparent; color: var(--color-text-light); border: 1px solid var(--color-border); }
.sup-prio--normal { background-color: var(--color-badge-default-bg); color: var(--color-badge-default-text); }
.sup-prio--high   { background-color: var(--color-warning-bg); color: var(--color-warning-text); }
.sup-prio--urgent { background-color: var(--color-error-bg);   color: var(--color-error-text); font-weight: var(--font-weight-semibold); }

/* ── Customer list ────────────────────────────────────────── */
.sup-list {
    border:           1px solid var(--color-border);
    border-radius:    var(--radius-lg);
    background-color: var(--color-bg-card);
    box-shadow:       var(--shadow-xs);
    overflow:         hidden;
}
.sup-list li + li { border-top: 1px solid var(--color-border); }
.sup-list__item {
    display:     flex;
    align-items: center;
    gap:         var(--space-4);
    padding:     var(--space-4) var(--space-5);
    color:       var(--color-text);
    transition:  background-color var(--transition);
}
.sup-list__item:hover { background-color: var(--color-table-row-hover); color: var(--color-text); }
.sup-list__main    { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.sup-list__subject { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: var(--font-weight-semibold); }
.sup-list__meta    { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); color: var(--color-text-muted); font-size: var(--font-size-xs); }

/* ── New ticket ───────────────────────────────────────────── */
.sup-layout {
    display:               grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap:                   var(--space-6);
    align-items:           start;
}
.sup-form__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.sup-aside__title { margin: 0 0 var(--space-3); font-size: var(--font-size-base); }
.sup-aside__list  { display: flex; flex-direction: column; gap: var(--space-2); padding-left: var(--space-4); list-style: disc; color: var(--color-text-muted); font-size: var(--font-size-sm); }

/* ── Ticket page ──────────────────────────────────────────── */
.sup-head { align-items: flex-start; margin-bottom: var(--space-6); }
.sup-head h1 { overflow-wrap: anywhere; }
.sup-head__meta {
    display:     flex;
    flex-wrap:   wrap;
    align-items: center;
    gap:         var(--space-2) var(--space-3);
    font-size:   var(--font-size-sm) !important;
}
.sup-head__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }

.sup-thread { display: flex; flex-direction: column; gap: var(--space-4); margin-bottom: var(--space-6); }

.sup-msg {
    border:           1px solid var(--color-border);
    border-radius:    var(--radius-lg);
    background-color: var(--color-bg-card);
    box-shadow:       var(--shadow-xs);
}
/* Who wrote it, at a glance: accent edge for staff, muted for the customer,
   warning tint for internal notes (staff pages only). */
.sup-msg--staff    { border-left: 3px solid var(--color-primary); }
.sup-msg--mine,
.sup-msg--customer { border-left: 3px solid var(--color-border-strong); }
.sup-msg--note     { border: 1px dashed var(--color-warning-border); border-left: 3px solid var(--color-warning); background-color: var(--color-warning-bg); }

.sup-msg__head {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             var(--space-3);
    padding:         var(--space-3) var(--space-5) 0;
    color:           var(--color-text-muted);
    font-size:       var(--font-size-xs);
}
.sup-msg__author {
    display:     flex;
    align-items: center;
    flex-wrap:   wrap;
    gap:         var(--space-2);
    color:       var(--color-text);
    font-size:   var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
}
.sup-msg__avatar {
    display:          grid;
    place-items:      center;
    width:            26px;
    height:           26px;
    border-radius:    var(--radius-full);
    background-color: var(--app-avatar-bg);
    color:            var(--app-avatar-text);
}
.sup-msg__body {
    padding:        var(--space-3) var(--space-5) var(--space-4);
    white-space:    pre-wrap;
    overflow-wrap:  anywhere;
    line-height:    1.65;
    font-size:      var(--font-size-sm);
}
.card__body > .sup-msg__body { padding: 0; }

.sup-event {
    display:     flex;
    align-items: center;
    flex-wrap:   wrap;
    gap:         var(--space-2);
    padding:     0 var(--space-5);
    color:       var(--color-text-muted);
    font-size:   var(--font-size-xs);
}
.sup-event time { margin-left: auto; color: var(--color-text-light); }
.sup-event--internal { font-style: italic; }

.sup-reply { margin-bottom: var(--space-6); }

/* ── Staff queue ──────────────────────────────────────────── */
.sup-counters {
    display:               grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap:                   var(--space-3);
    margin-bottom:         var(--space-5);
}
.sup-counter {
    display:          flex;
    flex-direction:   column;
    gap:              2px;
    padding:          var(--space-3) var(--space-4);
    border:           1px solid var(--color-border);
    border-radius:    var(--radius-lg);
    background-color: var(--color-bg-card);
    color:            var(--color-text);
    transition:       border-color var(--transition);
}
.sup-counter:hover, .sup-counter.is-active { border-color: var(--color-primary); color: var(--color-text); }
.sup-counter__n     { font-size: var(--font-size-xl); font-weight: var(--font-weight-bold); line-height: 1.2; }
.sup-counter__label { color: var(--color-text-muted); font-size: var(--font-size-xs); }

.sup-filters { margin-bottom: var(--space-5); overflow: visible; }
.sup-filters__body {
    display:               grid;
    grid-template-columns: minmax(200px, 2fr) repeat(auto-fit, minmax(150px, 1fr));
    gap:                   var(--space-3) var(--space-4);
    align-items:           end;
    padding:               var(--space-4) var(--space-5);
}
.sup-filters .form-group { margin-bottom: 0; }
.sup-filters__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }

.sup-table__id a { font-family: var(--font-family-mono); font-size: var(--font-size-xs); }
.sup-table__subject a { font-weight: var(--font-weight-semibold); color: var(--color-text); }
.sup-table__subject a:hover { color: var(--color-primary); }
.sup-table__sub  { display: block; color: var(--color-text-muted); font-size: var(--font-size-xs); }
.sup-table__date { white-space: nowrap; color: var(--color-text-muted); }

.sup-detail {
    display:               grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap:                   var(--space-6);
    align-items:           start;
}
.sup-dl { display: grid; grid-template-columns: auto 1fr; gap: var(--space-2) var(--space-4); margin: 0; font-size: var(--font-size-sm); }
.sup-dl dt { color: var(--color-text-muted); }
.sup-dl dd { margin: 0; overflow-wrap: anywhere; }

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 999.98px) {
    .sup-layout, .sup-detail { grid-template-columns: 1fr; }
}
@media (max-width: 599.98px) {
    .sup-list__item { flex-direction: column; align-items: flex-start; gap: var(--space-2); }
    .sup-list__subject { white-space: normal; }
    .sup-msg__head, .sup-msg__body { padding-left: var(--space-4); padding-right: var(--space-4); }
    .sup-filters__body { grid-template-columns: 1fr; }
    .sup-form__actions .btn { flex: 1 1 100%; justify-content: center; }
}