/*
 * LinkTrack Enterprise support desk UI
 * Dedicated stylesheet introduced in v1.3.2 so support components are not
 * affected by stale or partially cached copies of the main application CSS.
 */

/* Ticket list */
.support-ticket-list {
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden;
}

.support-ticket-row {
    display: flex !important;
    align-items: center !important;
    gap: 1rem !important;
    padding: 1.25rem 1.5rem !important;
    color: inherit !important;
    text-decoration: none !important;
    border-bottom: 1px solid var(--app-border, #e5eaf1) !important;
    transition: background-color .15s ease, color .15s ease;
}

.support-ticket-row:last-child {
    border-bottom: 0 !important;
}

.support-ticket-row:hover,
.support-ticket-row:focus-visible {
    background: #fafbff !important;
    color: inherit !important;
}

.support-ticket-row > * {
    min-width: 0;
}

.support-ticket-symbol {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    flex: 0 0 44px !important;
    border-radius: 13px !important;
    background: #eef0ff !important;
    color: var(--app-primary, #5b5cf0) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
}

.support-ticket-time {
    min-width: 115px;
    font-size: .9rem;
}

/* Customer and staff conversation */
.support-conversation {
    display: flex !important;
    flex-direction: column !important;
    gap: 1.25rem !important;
    width: 100%;
}

.support-conversation .support-message.card {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border-top: 1px solid var(--app-border, #e5eaf1) !important;
    border-right: 1px solid var(--app-border, #e5eaf1) !important;
    border-bottom: 1px solid var(--app-border, #e5eaf1) !important;
    border-radius: 18px !important;
    background: #fff;
    box-shadow: 0 10px 30px rgba(17, 24, 39, .045) !important;
}

.support-conversation .support-message-user {
    border-left: 4px solid #c7cad6 !important;
}

.support-conversation .support-message-staff {
    border-left: 4px solid var(--app-primary, #5b5cf0) !important;
    background: linear-gradient(145deg, #fff, #fafaff) !important;
}

.support-conversation .support-message-internal {
    border-left: 4px solid #f59e0b !important;
    background: #fffbeb !important;
}

.support-message-head {
    display: flex !important;
    align-items: center !important;
    gap: .875rem !important;
    width: 100%;
    padding: 1.15rem 1.35rem !important;
    margin: 0 !important;
    border-bottom: 1px solid var(--app-border, #e5eaf1) !important;
    background: rgba(248, 250, 252, .7);
}

.support-message-staff .support-message-head {
    background: rgba(238, 240, 255, .58);
}

.support-avatar {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    flex: 0 0 42px !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 13px !important;
    background: #e8ebf1 !important;
    color: #475467 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: .95rem !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    text-align: center !important;
    text-transform: uppercase;
}

.support-avatar.staff {
    background: #e9ebff !important;
    color: var(--app-primary, #5b5cf0) !important;
}

.support-message-head > div:last-child {
    min-width: 0;
}

.support-message-head .fw-bold {
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.support-message-body {
    display: block !important;
    width: 100%;
    min-height: 1px;
    padding: 1.35rem !important;
    margin: 0 !important;
    color: var(--app-text, #172033);
    font-size: 1rem;
    line-height: 1.75 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: normal;
}

.support-message-body:empty {
    display: none !important;
}

.support-attachments {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: .65rem !important;
    width: 100%;
    padding: 0 1.35rem 1.35rem !important;
    margin: 0 !important;
}

.support-attachments a {
    display: inline-flex !important;
    align-items: center !important;
    gap: .55rem !important;
    max-width: 100%;
    min-width: 0;
    padding: .65rem .8rem !important;
    border: 1px solid var(--app-border, #e5eaf1) !important;
    border-radius: 10px !important;
    background: #fff !important;
    color: inherit !important;
    text-decoration: none !important;
    box-shadow: 0 2px 6px rgba(17, 24, 39, .025);
}

.support-attachments a:hover,
.support-attachments a:focus-visible {
    border-color: #b7b9ff !important;
    color: var(--app-primary, #5b5cf0) !important;
}

.support-attachments a > i {
    flex: 0 0 auto;
    color: var(--app-primary, #5b5cf0);
}

.support-attachments span {
    display: block;
    max-width: 280px;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.support-attachments small {
    flex: 0 0 auto;
    color: var(--app-muted, #6b7280) !important;
    white-space: nowrap;
}

/* Ticket actions and sidebar */
.support-ticket-actions,
.support-ticket-actions form,
.support-page-actions form {
    margin: 0;
}

.support-ticket-sidebar {
    position: sticky !important;
    top: 104px !important;
}

.support-detail-list {
    margin: 0;
}

.support-detail-list > div {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start;
    gap: 1rem !important;
    padding: .9rem 0 !important;
    border-bottom: 1px solid var(--app-border, #e5eaf1) !important;
}

.support-detail-list > div:last-child {
    border-bottom: 0 !important;
    padding-bottom: 0 !important;
}

.support-detail-list dt {
    color: var(--app-muted, #6b7280) !important;
    font-size: .88rem !important;
    font-weight: 600 !important;
}

.support-detail-list dd {
    margin: 0 !important;
    text-align: right !important;
    font-weight: 600 !important;
    overflow-wrap: anywhere;
}

.support-closed-icon {
    width: 54px !important;
    height: 54px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #dcfce7 !important;
    color: #15803d !important;
    font-size: 1.25rem !important;
}

/* Admin support desk */
.support-admin-snippet {
    max-width: 380px;
}

.support-admin-table td {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
    vertical-align: middle;
}

.support-overdue-row {
    background: rgba(254, 242, 242, .6) !important;
}

.support-canned-select {
    max-width: 320px;
}

.support-event-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 1rem !important;
}

.support-event-list > div {
    display: flex !important;
    gap: .75rem !important;
    position: relative;
}

.support-event-dot {
    width: 10px !important;
    height: 10px !important;
    min-width: 10px !important;
    border-radius: 50% !important;
    background: var(--app-primary, #5b5cf0) !important;
    margin-top: .35rem !important;
    box-shadow: 0 0 0 4px #eef0ff;
}

.admin-nav .badge {
    margin-left: auto;
}

.support-dashboard-ticket {
    display: block !important;
    min-width: 0;
    padding: .85rem 1rem !important;
    border: 1px solid var(--app-border, #e5eaf1) !important;
    border-radius: 12px !important;
    background: #fff !important;
    color: inherit !important;
    text-decoration: none !important;
}

.support-dashboard-ticket:hover,
.support-dashboard-ticket:focus-visible {
    border-color: #b7b9ff !important;
    color: inherit !important;
    box-shadow: 0 8px 22px rgba(17, 24, 39, .06) !important;
}

.font-monospace {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace !important;
}

@media (max-width: 767.98px) {
    .support-ticket-row {
        align-items: flex-start !important;
        padding: 1rem !important;
    }

    .support-ticket-time,
    .support-ticket-row > i:last-child {
        display: none !important;
    }

    .support-ticket-symbol {
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        flex-basis: 38px !important;
    }

    .support-message-head,
    .support-message-body {
        padding: 1rem !important;
    }

    .support-attachments {
        padding: 0 1rem 1rem !important;
    }

    .support-ticket-sidebar {
        position: static !important;
        top: auto !important;
    }

    .support-canned-select {
        max-width: none;
        width: 100%;
    }

    .support-admin-table {
        min-width: 980px;
    }
}

@media (max-width: 575.98px) {
    .support-ticket-row {
        gap: .75rem !important;
    }

    .support-conversation {
        gap: 1rem !important;
    }

    .support-conversation .support-message.card {
        border-radius: 15px !important;
    }

    .support-message-head {
        gap: .7rem !important;
    }

    .support-avatar {
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        flex-basis: 38px !important;
        border-radius: 11px !important;
    }

    .support-message-body {
        font-size: .95rem;
        line-height: 1.65 !important;
    }

    .support-attachments a {
        width: 100%;
    }

    .support-attachments span {
        flex: 1 1 auto;
        max-width: none;
    }

    .support-detail-list > div {
        flex-direction: column !important;
        gap: .3rem !important;
    }

    .support-detail-list dd {
        text-align: left !important;
    }
}