/* ============================================================================
   Ticket thread — the single ticket page, and the public link to it.

   Everything here is scoped under .dk-ticket-view. The client area already
   has a .ticket-info and a .ticket-status meaning something else on the
   support list page, so unscoped names on this page would collide with
   those rather than describe it.

   Colours come from the theme tokens, so dark mode needs no rules of its own.
   ========================================================================= */

/* ---------------------------------------------------------------------------
   Room to breathe between the parts of the page.
   ------------------------------------------------------------------------ */

.dk-ticket-view .panel_s {
    margin-bottom: 1.25rem;
}

.dk-ticket-view .dk-section-title {
    margin: 0 0 0.75rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-heading, #1a1a1a);
}

/* The sidebar stays with the conversation on a narrow screen instead of
   leaving a gap where the columns stack. */
@media (max-width: 991px) {
    .dk-ticket-view .ticket-info {
        margin-bottom: 1.5rem;
    }
}

/* ---------------------------------------------------------------------------
   One message.
   ------------------------------------------------------------------------ */

.dk-ticket-view .dk-message {
    border: 1px solid var(--border-color, #e0e0e0);
    border-radius: var(--radius-md, 10px);
    background: var(--bg-card, #fff);
    overflow: hidden;
}

.dk-ticket-view .dk-message + .dk-message {
    margin-top: 1.25rem;
}

/* Staff and customer read differently at a glance — a single edge, not a
   full colour wash, which stays legible in both themes. */
.dk-ticket-view .dk-message {
    border-left: 3px solid var(--primary-color, #00e58d);
}

.dk-ticket-view .dk-message.dk-message-staff {
    border-left-color: var(--info-color, #64b5f6);
}

.dk-ticket-view .dk-message-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.5rem;
    padding: 0.75rem 1.15rem;
    border-bottom: 1px solid var(--border-light, #ececec);
    background: var(--bg-elevated, #fafafa);
}

.dk-ticket-view .dk-message-author {
    font-weight: 600;
    color: var(--text-heading, #1a1a1a);
}

.dk-ticket-view .dk-message-role {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 0.1rem 0.5rem;
    border-radius: var(--radius-full, 999px);
    background: var(--info-tint, rgba(100, 181, 246, 0.1));
    color: var(--info-color, #64b5f6);
}

.dk-ticket-view .dk-message-date {
    margin-left: auto;
    font-size: 0.8rem;
    color: var(--text-muted, #6c757d);
}

.dk-ticket-view .dk-message-body {
    padding: 1.15rem;
    color: var(--text-main, #333);
    line-height: 1.6;
}

.dk-ticket-view .dk-message-body > *:last-child {
    margin-bottom: 0;
}

/* ---------------------------------------------------------------------------
   Whatever the message body happens to contain.

   Message HTML is written by people, pasted from mail clients and editors,
   so it arrives with images at their camera size, tables wider than the
   column and unbroken URLs. Each is contained rather than allowed to widen
   the page.
   ------------------------------------------------------------------------ */

.dk-ticket-view .dk-message-body img,
.dk-ticket-view .dk-attachment img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-sm, 6px);
}

.dk-ticket-view .dk-message-body {
    overflow-wrap: anywhere;
}

.dk-ticket-view .dk-message-body table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
}

.dk-ticket-view .dk-message-body pre {
    max-width: 100%;
    overflow-x: auto;
    white-space: pre-wrap;
}

/* ---------------------------------------------------------------------------
   Attachments — a list, rather than files separated by horizontal rules.
   ------------------------------------------------------------------------ */

.dk-ticket-view .dk-attachments {
    margin-top: 1rem;
    padding-top: 0.9rem;
    border-top: 1px solid var(--border-light, #ececec);
}

.dk-ticket-view .dk-attachments-title {
    margin: 0 0 0.6rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted, #6c757d);
}

.dk-ticket-view .dk-attachment {
    display: block;
    margin-bottom: 0.75rem;
}

.dk-ticket-view .dk-attachment:last-child {
    margin-bottom: 0;
}

.dk-ticket-view .dk-attachment-link {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.35rem 0.7rem;
    border: 1px solid var(--border-color, #e0e0e0);
    border-radius: var(--radius-sm, 6px);
    color: var(--text-main, #333);
    text-decoration: none;
    word-break: break-all;
}

.dk-ticket-view .dk-attachment-link:hover,
.dk-ticket-view .dk-attachment-link:focus {
    border-color: var(--primary-color, #00e58d);
    color: var(--text-heading, #1a1a1a);
    text-decoration: none;
}

/* The preview sits under its own link, capped so a screenshot cannot push
   the column wider than the page. */
.dk-ticket-view .dk-attachment-preview {
    display: block;
    margin-top: 0.5rem;
    max-width: 100%;
    max-height: 420px;
    width: auto;
    border: 1px solid var(--border-light, #ececec);
}

/* ---------------------------------------------------------------------------
   History.
   ------------------------------------------------------------------------ */

.dk-ticket-view .dk-timeline {
    margin: 0;
    padding: 0 0 0 1.1rem;
    list-style: none;
    border-left: 2px solid var(--border-light, #ececec);
}

.dk-ticket-view .dk-timeline-item {
    position: relative;
    padding-bottom: 0.9rem;
}

.dk-ticket-view .dk-timeline-item:last-child {
    padding-bottom: 0;
}

.dk-ticket-view .dk-timeline-item::before {
    content: '';
    position: absolute;
    left: -1.45rem;
    top: 0.35rem;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--border-color, #e0e0e0);
}

.dk-ticket-view .dk-timeline-item:last-child::before {
    background: var(--primary-color, #00e58d);
}

.dk-ticket-view .dk-timeline-label {
    display: block;
    font-size: 0.875rem;
    color: var(--text-main, #333);
}

.dk-ticket-view .dk-timeline-date {
    display: block;
    font-size: 0.78rem;
    color: var(--text-muted, #6c757d);
}

/* ============================================================================
   The customer's tickets list — summary strip and age chips.

   Same file as the thread because it is the same feature seen from one step
   back, and one stylesheet for tickets is easier to keep coherent than two.
   ========================================================================= */

.dk-tickets-summary {
    padding: 0;
}

.dk-summary-strip {
    display: flex;
    flex-wrap: wrap;
}

.dk-summary-item {
    flex: 1 1 auto;
    min-width: 120px;
    padding: 0.9rem 1.15rem;
    border-right: 1px solid var(--border-light, #ececec);
    color: var(--text-main, #333);
    text-decoration: none;
    transition: background 0.15s ease;
}

.dk-summary-item:last-child {
    border-right: 0;
}

.dk-summary-item:hover,
.dk-summary-item:focus {
    background: var(--bg-elevated, #fafafa);
    text-decoration: none;
    color: var(--text-main, #333);
}

/* The count on screen is the one the list is showing — the selected cut is
   marked so the two are never read as disagreeing. */
.dk-summary-item.is-active {
    background: var(--primary-tint, rgba(0, 229, 141, 0.1));
    box-shadow: inset 0 -2px 0 var(--primary-color, #00e58d);
}

.dk-summary-count {
    display: block;
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--text-heading, #1a1a1a);
}

.dk-summary-label {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.8rem;
    font-weight: 500;
}

/* How long a ticket has been waiting. Colour carries the urgency, so the
   figure does not have to be read to know whether it matters. */
.dk-age-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.78rem;
    font-weight: 600;
    white-space: nowrap;
}

.tickets-table th.sortable {
    cursor: pointer;
    user-select: none;
}

.tickets-table th.sortable.asc::after  { content: ' \25B2'; font-size: 0.7em; }
.tickets-table th.sortable.desc::after { content: ' \25BC'; font-size: 0.7em; }

@media (max-width: 767px) {
    .dk-summary-item {
        min-width: 50%;
        border-bottom: 1px solid var(--border-light, #ececec);
    }
}

/* ---------------------------------------------------------------------------
   Whose turn it is.

   The tickets that cannot move until the customer answers are the ones this
   page exists to surface, so they carry an edge and their own count in the
   strip. Everything else is deliberately quieter.
   ------------------------------------------------------------------------ */

.dk-owner {
    display: inline-block;
    padding: 0.15rem 0.55rem;
    border-radius: var(--radius-full, 999px);
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}

.dk-owner-you {
    background: var(--warning-tint, rgba(255, 183, 77, 0.1));
    color: #a16207;
}

.dk-owner-team {
    background: var(--info-tint, rgba(100, 181, 246, 0.1));
    color: #1d4ed8;
}

.tickets-table tr.dk-awaiting-you > td:first-child {
    box-shadow: inset 3px 0 0 #f59e0b;
}

.tickets-table tr.dk-awaiting-you {
    background: rgba(245, 158, 11, 0.05);
}

.ticket-item.dk-awaiting-you .ticket-card {
    border-left: 3px solid #f59e0b;
}

.dk-summary-item.dk-summary-you .dk-summary-count,
.dk-summary-item.dk-summary-you .dk-summary-label {
    color: #a16207;
}

.dk-summary-item.dk-summary-you.is-active {
    background: var(--warning-tint, rgba(255, 183, 77, 0.1));
    box-shadow: inset 0 -2px 0 #f59e0b;
}

/* The date a ticket was raised, and how long ago that was. */
.dk-opened-age {
    display: block;
    color: var(--text-muted, #6c757d);
    font-size: 0.75rem;
}

/* Finished tickets: present, counted, and set apart from the live ones. */
.dk-summary-item.dk-summary-closed {
    opacity: 0.75;
}

.dk-summary-item.dk-summary-closed.is-active {
    opacity: 1;
    background: var(--bg-elevated, #fafafa);
    box-shadow: inset 0 -2px 0 var(--text-muted, #6c757d);
}

/* Module headings inside the tickets table. Set apart from the rows so the
   list reads as sections rather than as one long run of tickets. */
.tickets-table tr.dk-group-row td {
    padding: 0.65rem 0.75rem 0.5rem;
    background: var(--bg-elevated, #fafafa);
    border-top: 2px solid var(--border-color, #e0e0e0);
    border-bottom: 1px solid var(--border-light, #ececec);
}

.tickets-table tr.dk-group-row:first-child td {
    border-top: 0;
}

.dk-group-name {
    font-weight: 700;
    color: var(--text-heading, #1a1a1a);
    letter-spacing: 0.01em;
}

.dk-group-count {
    color: var(--text-muted, #6c757d);
    font-size: 0.85em;
}

#group-modulo-btn:not(.active) {
    opacity: 0.6;
}