/* =============================================================================
   DEX Portal - Tickets

   The Tickets module reuses the Tasks furniture almost entirely (the table,
   widgets, pickers, status chips), so this file only dresses the few pieces
   that are the ticket panel's own: the record headline and the activity stream.
   ============================================================================= */

/* Page gutters. The tickets pages lay their body straight onto the edge-to-edge
   page surface (the same way the finance pages do), and the finance gutter rules
   only name the finance table ids - so the ticket table, the settings body and
   the automation board come out flush against the sides while the padded header
   above them does not. Give them the same horizontal gutter the header uses. */
#ticketBody,
#ticketSettingsBody {
    padding: 0 var(--gutter) var(--gutter);
    overflow: auto;
}

#ticketAutomationBoardHost {
    padding: 0 var(--gutter) var(--gutter);
}

/* No lift on the ticket record cards. The record-section frame carries a soft
   shadow everywhere else; in the ticket view the border alone reads cleaner. */
.ticket-record .record-section {
    box-shadow: none;
}

.ticket-headline {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 18px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border-subtle, #e6e8ee);
}

.ticket-headline__text {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.ticket-headline__title {
    font-size: 17px;
    font-weight: 600;
    color: var(--text-primary, #0f1115);
    line-height: 1.35;
    word-break: break-word;
}

.ticket-headline__badges {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

/* The title reads as text but is a button: click it and it becomes the input
   that renames the ticket, the same touch-to-edit every field below it uses. */
.ticket-headline__title-edit {
    font-size: 17px;
    font-weight: 600;
    color: var(--text-primary, #0f1115);
    line-height: 1.35;
    word-break: break-word;
    text-align: left;
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    cursor: text;
    border-radius: 6px;
    transition: color 120ms ease;
}

.ticket-headline__title-edit:hover {
    color: var(--accent, #6366f1);
}

.ticket-headline__title-input {
    font-size: 17px;
    font-weight: 600;
    width: 100%;
}

/* A small dot before the status word in the information card, tinted to the
   status colour so the state reads at a glance without a full chip. */
.task-status-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 7px;
    vertical-align: middle;
    flex-shrink: 0;
}

/* The assignee avatars sitting inside the clickable value. */
.task-info__people {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.ticket-history {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ticket-history__item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 12px;
    border: 1px solid var(--border-subtle, #e6e8ee);
    border-radius: 8px;
    background: var(--surface-muted, #f7f8fa);
}

.ticket-history__summary {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary, #0f1115);
}

.ticket-history__meta {
    font-size: 12px;
    color: var(--text-muted, #6b7280);
}


/* -----------------------------------------------------------------------------
   SETTINGS SCREENS

   The ticket settings pages reuse the task-module markup (.record-section,
   .task-form__pair, .form-field, .task-picker). Two things needed fixing:
   the cards carried the lifted drop shadow, and the fields stacked straight
   into the section body with no vertical rhythm, so they read as cramped.

   Match the flat, bordered sheet used across the task module, and give the
   section body one consistent gap so every field, row and picker breathes.
   -------------------------------------------------------------------------- */
.ticket-settings-scope .record-section {
    box-shadow: none;
}

.ticket-settings-scope .record-section__body {
    display: flex;
    flex-direction: column;
    gap: 14px;
}