/* Modified 2026-10-28: Add unread badges to the existing Events navigation buttons. */
.app-header .imagesMenu .tickets-count {
    position: absolute;
    top: 2px;
    right: 4px;
    min-width: 16px;
    padding: 1px 4px;
    box-sizing: border-box;
    border-radius: 10px;
    background: #ba3c42;
    color: #fff;
    font: bold 10px/14px Arial, sans-serif;
}
.app-header .imagesMenu .tickets-count[hidden] { display: none; }
/* Modified 2026-10-28: Show unread message counts as red badges in ticket rows. */
.tickets-page .ticket-unread-count {
    display: inline-block;
    min-width: 18px;
    padding: 1px 5px;
    box-sizing: border-box;
    border-radius: 10px;
    background: #ba3c42;
    color: #fff;
    text-align: center;
    font: bold 11px/16px Arial, sans-serif;
}
/* Modified 2026-10-28: Keep the unread badge column compact without a wide text heading. */
.tickets-page .tickets-list table[activetable] [fieldname="UNREAD_COUNT"] {
    width: 24px;
    min-width: 24px;
    padding-left: 4px;
    padding-right: 4px;
    text-align: center;
}
.tickets-page .tickets-list table[activetable] thead [fieldname="UNREAD_COUNT"] > span { display: none; }

/* Modified 2026-10-28: Keep the queue and conversation side by side with horizontal scrolling on narrow screens. */
.tickets-page:has(.tickets-workspace) { width: 100vw; max-width: 100vw; overflow-x: auto; }
/* Modified 2026-10-28: Size the workspace to the viewport even when the absolutely positioned page body shrinks to its contents. */
html body .tickets-page:has(.tickets-workspace) { box-sizing: border-box; width: 100vw; max-width: 100vw; }
.tickets-workspace { display: grid; grid-template-columns: minmax(580px, 40%) minmax(680px, 1fr); gap: 16px; min-width: 1276px; }
.tickets-list { min-width: 0; overflow-x: auto; }
.tickets-list table[activetable] tbody tr[fid] { cursor: pointer; }
.ticket-panel { box-sizing: border-box; width: 100%; height: calc(100vh - 220px); min-height: 600px; border: 1px solid #34404d; border-radius: 6px; background: #171e26; }

/* Modified 2026-10-28: Keep conversation content inside the existing page and form layout. */
.tickets-page { padding: 16px; }
.ticket-message { margin: 16px 0; padding: 12px 0; border-bottom: 1px solid #34404d; }
.ticket-message-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.ticket-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.ticket-actions form { margin: 0; }
/* Modified 2026-10-28: Match ticket forms to the existing dark dialog palette and provide a spacious message editor. */
/* Modified 2026-10-28: Fill the available page width instead of shrinking the ticket form to its contents. */
.tickets-page { box-sizing: border-box; width: 100%; max-width: none; color: #dce5ee; font: 13px/1.5 Arial, sans-serif; }
.tickets-page > form { display: block; box-sizing: border-box; width: 100%; max-width: none; }
.tickets-page .db_fieldsarea {
    box-sizing: border-box;
    width: 100%;
    max-width: none;
    padding: 16px;
    border: 1px solid #34404d;
    border-radius: 6px;
    background: #11161d;
}
.tickets-page .db_fieldsarea > table { width: 100%; table-layout: fixed; border-spacing: 0 10px; background: transparent; }
.tickets-page .db_fieldsarea > table > tbody > tr > td { padding: 0; background: transparent; vertical-align: top; }
.tickets-page .db_fieldsarea > table > tbody > tr > td:first-child { width: 180px; padding: 8px 16px 0 0; color: #95a5b6; }
.tickets-page input[type="text"],
.tickets-page select,
.tickets-page textarea {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 8px 10px;
    border: 1px solid #34404d;
    border-radius: 4px;
    background: #1a222d;
    color: #dce5ee;
    font: 13px/1.5 Arial, sans-serif;
}
.tickets-page textarea { min-height: 220px; height: 220px; resize: vertical; }
/* Modified 2026-10-28: Override the legacy 25px control height so selected text fits inside the padded fields. */
.tickets-page input[type="text"],
.tickets-page select { height: 38px; min-height: 38px; }
.tickets-page select { padding: 6px 10px; color-scheme: dark; }
.tickets-page select option { background: #1a222d; color: #dce5ee; }
.tickets-page input[type="file"] { max-width: 100%; margin: 0; padding: 6px 0; font: inherit; }
.tickets-page input[type="text"]:focus,
.tickets-page select:focus,
.tickets-page textarea:focus { outline: 1px solid #8096ac; border-color: #8096ac; }
.tickets-page .db_buttonsarea { border-color: #34404d; padding-top: 12px; }
/* Modified 2026-10-28: Apply the site button palette and readable sizing to ticket actions and the attachment picker. */
.tickets-page input[type="button"],
.tickets-page input[type="submit"],
.tickets-page button,
.tickets-page input[type="file"]::file-selector-button {
    box-sizing: border-box;
    min-height: 36px;
    height: auto;
    padding: 8px 16px;
    border: 1px solid var(--shell-button-border, #405162);
    border-radius: 4px;
    background: var(--shell-button-background, #25323f);
    color: var(--shell-button-text, #dce9f2);
    font: 600 13px/18px Arial, sans-serif;
    cursor: pointer;
}
.tickets-page input[type="file"]::file-selector-button { margin-right: 10px; }
.tickets-page input[type="button"]:hover,
.tickets-page input[type="submit"]:hover,
.tickets-page button:hover,
.tickets-page input[type="file"]::file-selector-button:hover {
    background: var(--shell-button-hover, #334858);
    border-color: var(--shell-button-hover-border, #6c8b9d);
}
/* Modified 2026-10-28: Highlight ticket creation and reply submission with the existing site accent. */
.tickets-page #send_ticket,
.tickets-page #send_reply { background: var(--shell-accent, #00a8e0); border-color: var(--shell-accent, #00a8e0); color: var(--shell-accent-button-text, #092b3a); }
.tickets-page #send_ticket:hover,
.tickets-page #send_reply:hover { background: var(--shell-accent-light, #70d0f0); border-color: var(--shell-accent-light, #70d0f0); }
/* Modified 2026-10-28: Keep status action forms compact and hide panels containing only hidden action fields. */
.tickets-page .ticket-actions { margin: 12px 0 16px; align-items: center; }
.tickets-page .ticket-actions form { display: block; width: auto; min-width: 0; margin: 0; padding: 0; }
.tickets-page .ticket-actions .db_fieldsarea { display: none; }
.tickets-page .ticket-actions .db_buttonsarea { margin: 0; padding: 0; border: 0; }
.tickets-page .ticket-actions input[type="submit"] { margin: 0; }
/* Modified 2026-10-28: Present conversation messages as readable dark cards with a distinct author and timestamp. */
.tickets-page .ticket-message {
    box-sizing: border-box;
    width: 100%;
    margin: 12px 0;
    padding: 16px;
    border: 1px solid #34404d;
    border-radius: 6px;
    background: #11161d;
    color: #dce5ee;
}
.tickets-page .ticket-message > p:first-child { margin: 0 0 12px; color: #95a5b6; }
.tickets-page .ticket-message strong { color: var(--shell-accent-light, #70d0f0); font-weight: 600; }
.tickets-page .ticket-message-text { color: #dce5ee; line-height: 1.6; }
.tickets-page .ticket-message a { color: var(--shell-accent-light, #70d0f0); }
/* Modified 2026-10-28: Keep attachment previews within the form and conversation width. */
.tickets-page .ticket-previews { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 12px; }
.tickets-page .ticket-previews figure { margin: 0; max-width: 240px; }
.tickets-page .ticket-previews img { display: block; max-width: 100%; max-height: 180px; object-fit: contain; border: 1px solid #34404d; border-radius: 4px; }
.tickets-page .ticket-previews figcaption { margin-top: 4px; overflow-wrap: anywhere; color: #95a5b6; }
.tickets-page .ticket-attachment-image { display: block; max-width: 100%; max-height: 480px; width: auto; height: auto; margin-top: 12px; border: 1px solid #34404d; border-radius: 4px; }
.tickets-page .ticket-message a { overflow-wrap: anywhere; }
/* Modified 2026-10-28: Stack ticket labels and fields on narrow screens without horizontal overflow. */
@media (max-width: 640px) {
    .tickets-page .db_fieldsarea > table,
    .tickets-page .db_fieldsarea > table > tbody,
    .tickets-page .db_fieldsarea > table > tbody > tr,
    .tickets-page .db_fieldsarea > table > tbody > tr > td { display: block; width: auto; }
    .tickets-page .db_fieldsarea > table > tbody > tr > td:first-child { width: auto; padding: 10px 0 4px; text-align: left; white-space: normal; }
}