/*
 * Modern Client for Blesta 6 - Support Manager late overrides
 * Loaded after plugin-rendered styles so Support Manager follows the client theme.
 */

/* Ticket summary / metadata card uses Bootstrap's bg-light utility in the plugin. */
#client_ticket_reply .card.bg-light,
#client_ticket_reply .bg-light,
#client_ticket_reply .card.p-3.mb-3.bg-light {
    background: var(--mc-bg-muted) !important;
    color: var(--mc-text) !important;
    border: 1px solid var(--mc-border) !important;
    border-radius: 12px !important;
    box-shadow: none !important;
}

#client_ticket_reply .card.bg-light label,
#client_ticket_reply .card.bg-light p {
    color: var(--mc-text) !important;
}

#client_ticket_reply .card.bg-light label {
    color: var(--mc-text-muted) !important;
    font-weight: 650;
}

#client_ticket_reply .card.bg-light hr {
    border-top-color: var(--mc-border) !important;
}

/*
 * Blesta 6 Support Manager reply markup:
 * .row.ticket-reply > .top-bar + .replier + .response
 */
#client_ticket_reply .row.ticket-reply,
.row.ticket-reply {
    margin: 0 0 18px !important;
    padding: 0 !important;
    overflow: hidden;
    background: var(--mc-bg-elevated) !important;
    color: var(--mc-text) !important;
    border: 1px solid var(--mc-border) !important;
    border-radius: 14px !important;
    box-shadow: var(--mc-shadow-sm);
}

#client_ticket_reply .row.ticket-reply > div.top-bar,
.row.ticket-reply > div.top-bar {
    flex: 0 0 100%;
    max-width: 100%;
    margin: 0 !important;
    padding: 11px 15px !important;
    background: var(--mc-bg-muted) !important;
    color: var(--mc-text-muted) !important;
    border: 0 !important;
    border-bottom: 1px solid var(--mc-border) !important;
    border-radius: 0 !important;
}

#client_ticket_reply .row.ticket-reply > div.top-bar.staff-reply,
.row.ticket-reply > div.top-bar.staff-reply {
    background: var(--mc-accent-soft) !important;
    color: var(--mc-text) !important;
    border-bottom-color: rgba(129, 140, 248, .22) !important;
}

#client_ticket_reply .row.ticket-reply > div.top-bar p,
.row.ticket-reply > div.top-bar p,
#client_ticket_reply .row.ticket-reply > div.top-bar.staff-reply p,
.row.ticket-reply > div.top-bar.staff-reply p {
    margin: 0 !important;
    padding: 0 !important;
    color: inherit !important;
    font-size: .82rem;
    line-height: 1.45;
    font-style: normal !important;
}

/* Replier / avatar column */
#client_ticket_reply .row.ticket-reply > div.replier,
.row.ticket-reply > div.replier {
    padding: 18px 14px !important;
    background: var(--mc-bg-muted) !important;
    color: var(--mc-text-muted) !important;
    border-right: 1px solid var(--mc-border) !important;
    text-align: center;
}

#client_ticket_reply .row.ticket-reply > div.replier img,
.row.ticket-reply > div.replier img,
#client_ticket_reply .row.ticket-reply > div.replier img.w-100,
.row.ticket-reply > div.replier img.w-100 {
    display: block;
    width: 72px !important;
    height: 72px !important;
    max-width: 72px !important;
    min-width: 72px;
    margin: 0 auto 10px !important;
    padding: 2px !important;
    object-fit: cover;
    background: var(--mc-bg-elevated) !important;
    border: 1px solid var(--mc-border-strong) !important;
    border-radius: 50% !important;
    box-shadow: none !important;
}

#client_ticket_reply .row.ticket-reply > div.replier p,
.row.ticket-reply > div.replier p {
    margin: 0 !important;
    color: var(--mc-text-muted) !important;
    line-height: 1.35;
}

#client_ticket_reply .row.ticket-reply > div.replier strong,
.row.ticket-reply > div.replier strong {
    color: var(--mc-heading) !important;
    font-size: .9rem;
}

#client_ticket_reply .row.ticket-reply > div.replier small,
.row.ticket-reply > div.replier small {
    color: var(--mc-text-muted) !important;
}

/* Reply body */
#client_ticket_reply .row.ticket-reply > div.response,
.row.ticket-reply > div.response {
    margin: 0 !important;
    padding: 18px 20px !important;
    background: var(--mc-bg-elevated) !important;
    color: var(--mc-text) !important;
    word-break: break-word;
}

#client_ticket_reply .ticket-reply .response p,
#client_ticket_reply .ticket-reply .response li,
#client_ticket_reply .ticket-reply .response span,
#client_ticket_reply .ticket-reply .response div,
.row.ticket-reply .response p,
.row.ticket-reply .response li {
    color: var(--mc-text) !important;
}

#client_ticket_reply .ticket-reply .response h1,
#client_ticket_reply .ticket-reply .response h2,
#client_ticket_reply .ticket-reply .response h3,
#client_ticket_reply .ticket-reply .response h4,
#client_ticket_reply .ticket-reply .response h5,
#client_ticket_reply .ticket-reply .response h6,
.row.ticket-reply .response h1,
.row.ticket-reply .response h2,
.row.ticket-reply .response h3,
.row.ticket-reply .response h4,
.row.ticket-reply .response h5,
.row.ticket-reply .response h6 {
    color: var(--mc-heading) !important;
    background: transparent !important;
}

#client_ticket_reply .ticket-reply .response a,
.row.ticket-reply .response a {
    color: var(--mc-accent) !important;
}

#client_ticket_reply .ticket-reply .response blockquote,
.row.ticket-reply .response blockquote {
    margin: 1rem 0 !important;
    padding: .75rem 1rem !important;
    color: var(--mc-text-muted) !important;
    background: var(--mc-bg-muted) !important;
    border-left: 4px solid var(--mc-border-strong) !important;
    border-radius: 0 8px 8px 0;
}

#client_ticket_reply .ticket-reply .response hr,
.row.ticket-reply .response hr {
    height: 1px !important;
    background: var(--mc-border) !important;
    border: 0 !important;
}

#client_ticket_reply .ticket-reply .response pre,
#client_ticket_reply .ticket-reply .response code,
.row.ticket-reply .response pre,
.row.ticket-reply .response code {
    color: var(--mc-text) !important;
    background: var(--mc-bg-muted) !important;
    border-color: var(--mc-border) !important;
}

/* Reply attachments */
#client_ticket_reply .ticket-reply .attachments,
.row.ticket-reply .attachments {
    margin: 0 0 12px !important;
    padding: 10px 12px !important;
    background: var(--mc-bg-muted) !important;
    border: 1px solid var(--mc-border) !important;
    border-radius: 9px;
}

#client_ticket_reply .ticket-reply .attachments p,
.row.ticket-reply .attachments p {
    margin: 0 !important;
}

#client_ticket_reply .ticket-reply .attachments a,
.row.ticket-reply .attachments a {
    color: var(--mc-accent) !important;
}

#client_ticket_reply .image-attachments,
.row.ticket-reply .image-attachments {
    margin-top: 16px !important;
    padding-top: 14px !important;
    border-top: 1px solid var(--mc-border) !important;
}

#client_ticket_reply .image-attachments img,
.row.ticket-reply .image-attachments img {
    padding: 3px;
    background: var(--mc-bg-muted) !important;
    border: 1px solid var(--mc-border) !important;
    border-radius: 9px;
}

/* Ticket logs/status changes */
#client_ticket_reply .alert.alert-info,
#client_ticket_reply .marbot10 .alert-info,
#refresh_message .alert {
    color: var(--mc-text) !important;
    background: var(--mc-accent-soft) !important;
    border-color: rgba(129, 140, 248, .24) !important;
}

#client_ticket_reply .alert.alert-info p,
#client_ticket_reply .alert.alert-info em,
#refresh_message .alert p {
    color: inherit !important;
    text-shadow: none !important;
}

/* Reply form and recipients, including plugin-injected Bootstrap light utilities. */
#client_ticket_reply #create_ticket .btn-light,
#client_ticket_reply #create_ticket .card,
#client_ticket_reply #recipients-section .card,
#client_ticket_reply #recipients-section .card-body {
    border-color: var(--mc-border) !important;
}

#client_ticket_reply #create_ticket .btn-light {
    color: var(--mc-text) !important;
    background: var(--mc-bg-muted) !important;
}

#client_ticket_reply #create_ticket .btn-light:hover,
#client_ticket_reply #create_ticket .btn-light:focus {
    color: var(--mc-heading) !important;
    background: var(--mc-accent-soft) !important;
    border-color: var(--mc-accent) !important;
}

/* Support Manager attachment lightbox */
#attachment-lightbox.support_manager_modal {
    background: rgba(0, 0, 0, .82) !important;
}

#attachment-lightbox .modal-content,
#attachment-lightbox .slides,
#attachment-lightbox .slides.bg-light {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* Keep Bootstrap helper classes from forcing light surfaces inside Support Manager. */
html[data-client-theme="dark"] #client_ticket_reply .bg-light,
html[data-client-theme="dark"] #client_ticket_reply .btn-light {
    color: var(--mc-text) !important;
    background-color: var(--mc-bg-muted) !important;
}

@media (max-width: 767.98px) {
    #client_ticket_reply .row.ticket-reply > div.replier,
    .row.ticket-reply > div.replier {
        border-right: 0 !important;
        border-bottom: 1px solid var(--mc-border) !important;
        padding: 14px 10px !important;
    }

    #client_ticket_reply .row.ticket-reply > div.replier img,
    .row.ticket-reply > div.replier img,
    #client_ticket_reply .row.ticket-reply > div.replier img.w-100,
    .row.ticket-reply > div.replier img.w-100 {
        width: 54px !important;
        height: 54px !important;
        max-width: 54px !important;
        min-width: 54px;
    }

    #client_ticket_reply .row.ticket-reply > div.response,
    .row.ticket-reply > div.response {
        padding: 14px !important;
    }
}