/**
 * @package     NXSupport
 * @subpackage  com_nxsupport
 * @copyright   Copyright 2026 NexusPlugins
 * @license     GNU General Public License version 3 or later; see LICENSE.txt
 */

.nxsupport-ticket-number,
.nxsupport-ticket-number a {
    font-family: var(--font-family-monospace, monospace);
}

.nxsupport-ticket__header {
    border-bottom: 1px solid var(--border-color, #dee2e6);
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
}

.nxsupport-ticket__header .nxsupport-ticket-number {
    align-items: baseline;
    border-left: .25rem solid var(--template-link-color, #0d6efd);
    display: inline-flex;
    font-size: 1.125rem;
    margin: 0 0 .5rem;
    padding: .2rem 0 .2rem .65rem;
}

.nxsupport-ticket__header .nxsupport-ticket-number span {
    font-family: var(--body-font-family, inherit);
    font-weight: 600;
}

.nxsupport-ticket__header .nxsupport-ticket-number strong {
    font-size: 1.25rem;
    margin-inline-start: .4rem;
}

.nxsupport-ticket__header h1 {
    margin-block: 0 .5rem;
}

.nxsupport-ticket__meta {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
}

.nxsupport-ticket__meta > * + * {
    margin-inline-start: .5rem;
}

.nxsupport-message {
    border-left: .25rem solid var(--body-color, #212529);
    margin-bottom: 1rem;
    padding: 1rem;
}

.nxsupport-message--staff {
    border-left-color: var(--success, #198754);
}

.nxsupport-message__header {
    align-items: baseline;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: .5rem;
}

.nxsupport-message__identity {
    align-items: center;
    display: inline-flex;
    flex-wrap: wrap;
}

.nxsupport-message__identity > * + * {
    margin-inline-start: .5rem;
}

/* Keep foreground/background pairs together, overriding Bootstrap utility colors. */
.nxsupport-ticket .nxsupport-status,
.nxsupport-ticket .nxsupport-message__identity .badge {
    background-color: var(--nxsupport-chip-bg, #eff4ff) !important;
    color: var(--nxsupport-chip-text, #2449a4) !important;
    border: 1px solid var(--nxsupport-chip-border, #d6e2ff);
    border-radius: .25rem;
    display: inline-flex;
    align-items: center;
    padding: .2rem .5rem;
    font-size: .8125rem;
    font-weight: 600;
    line-height: 1.35;
    white-space: normal;
    text-align: start;
}

.nxsupport-ticket .nxsupport-status--awaiting_customer {
    --nxsupport-chip-bg: #e9f6fa;
    --nxsupport-chip-text: #155e75;
    --nxsupport-chip-border: #c5e5ef;
}

.nxsupport-ticket .nxsupport-status--awaiting_support {
    --nxsupport-chip-bg: #fff5df;
    --nxsupport-chip-text: #854d0e;
    --nxsupport-chip-border: #f3dfad;
}

.nxsupport-ticket .nxsupport-status--closed {
    --nxsupport-chip-bg: #f1f3f5;
    --nxsupport-chip-text: #495565;
    --nxsupport-chip-border: #dce1e7;
}

.nxsupport-ticket .nxsupport-message--staff {
    --nxsupport-chip-bg: #eaf7ef;
    --nxsupport-chip-text: #23633e;
    --nxsupport-chip-border: #cce8d6;
}

.nxsupport-message__header time {
    color: var(--text-muted, #6c757d);
    margin-left: auto;
}

.nxsupport-message__body {
    overflow-wrap: anywhere;
}

.nxsupport-attachments {
    margin-bottom: 0;
    margin-top: .75rem;
}

.nxsupport-hp {
    height: 1px;
    left: -10000px;
    overflow: hidden;
    position: absolute;
    top: auto;
    width: 1px;
}

.nxsupport-filters {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.nxsupport-ticket-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: 1.25rem;
}

.nxsupport-ticket-actions form {
    margin-block: 0;
}

.nxsupport-ticket-actions .btn {
    border-radius: .25rem;
    min-height: 44px;
    padding: .6rem 1.1rem;
    font: inherit;
    font-weight: 500;
    line-height: 1.4;
    box-shadow: none;
    transition: background-color .15s ease, border-color .15s ease;
}

.nxsupport-ticket-actions .btn-primary {
    background: #254b87;
    border: 1px solid #254b87;
    color: #fff;
}

.nxsupport-ticket-actions .btn-primary:hover {
    background: #1c3967;
    border-color: #1c3967;
}

.nxsupport-ticket-actions .btn-outline-secondary {
    background: #fff;
    border: 1px solid #8a97aa;
    color: #46546b;
    box-shadow: none;
}

.nxsupport-ticket-actions .btn-outline-secondary:hover {
    background: #f1f3f6;
    border-color: #46546b;
}

.nxsupport-ticket-actions .btn:focus-visible {
    outline: 2px solid #254b87;
    outline-offset: 3px;
}

.nxsupport-form.nxsupport-reply {
    margin-bottom: 0;
}

/* Match the Easy Forms Classic visual language without depending on its assets. */
.nxsupport-form {
    --nxsupport-form-accent: var(--template-link-color, #0d6efd);
    --nxsupport-form-border: var(--template-input-border-color, rgba(0, 0, 0, .42));
    --nxsupport-form-radius: var(--bs-border-radius, var(--template-button-border-radius, 4px));
    margin-block: 1.5rem;
    color: inherit;
    font: inherit;
}

.nxsupport-form .control-group {
    margin-block-end: 1rem;
}

.nxsupport-form .control-label {
    float: none;
    width: auto;
    padding: 0;
}

.nxsupport-form .control-label label {
    display: flex;
    align-items: baseline;
    gap: .35rem;
    margin-block-end: .5rem;
    font-weight: 600;
}

.nxsupport-form .controls {
    margin-inline-start: 0;
    min-width: 0;
}

.nxsupport-form .form-control,
.nxsupport-form .form-select {
    width: 100%;
    max-width: 100%;
    padding: .55rem .65rem;
    border: 1px solid var(--nxsupport-form-border);
    border-radius: var(--nxsupport-form-radius);
    background-color: var(--template-bg-input, var(--cassiopeia-color-bg, #fff));
    color: inherit;
    font: inherit;
    font-size: 1rem;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

.nxsupport-form .form-select {
    -webkit-appearance: none;
    appearance: none;
    padding-inline-end: 2.5rem;
}

.nxsupport-form textarea.form-control {
    min-height: 120px;
    resize: vertical;
}

.nxsupport-form .form-control:focus,
.nxsupport-form .form-select:focus {
    outline: 2px solid transparent;
    border-color: var(--nxsupport-form-accent);
    box-shadow: 0 0 0 .2rem rgba(13, 110, 253, .25);
    box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--nxsupport-form-accent) 25%, transparent);
}

.nxsupport-form .form-control.invalid,
.nxsupport-form .form-select.invalid {
    border-color: var(--template-danger-text, #b71c1c);
}

.nxsupport-form .star,
.nxsupport-form label.invalid {
    color: var(--template-danger-text, #b71c1c);
}

.nxsupport-form .form-text,
.nxsupport-form [id$="-desc"] {
    margin-block-start: .4rem;
    font-size: .875rem;
    color: var(--text-muted, #6c757d);
    overflow-wrap: anywhere;
}

.nxsupport-form .nxsupport-consent {
    display: flex;
    align-items: flex-start;
}

.nxsupport-form .nxsupport-consent .controls {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    min-height: 1.5em;
    margin-inline-end: .6rem;
    order: -1;
}

.nxsupport-form .nxsupport-consent .form-check {
    display: flex;
    min-height: 0;
    padding: 0;
}

.nxsupport-form .nxsupport-consent .form-check-input {
    float: none;
    width: 1.15em;
    height: 1.15em;
    margin: 0;
    border: 2px solid var(--nxsupport-form-border);
    cursor: pointer;
}

.nxsupport-form .nxsupport-consent .form-check-input:checked {
    border-color: var(--nxsupport-form-accent);
    background-color: var(--nxsupport-form-accent);
}

.nxsupport-form .form-check {
    margin: 0;
}

.nxsupport-form input[type="checkbox"] {
    width: 1.08em;
    height: 1.08em;
    accent-color: var(--nxsupport-form-accent);
}

.nxsupport-form .btn-primary {
    padding: .55rem 1.25rem;
    border: 0;
    border-radius: var(--nxsupport-form-radius);
    background: var(--nxsupport-form-accent);
    color: var(--template-text-light, #fff);
    font: inherit;
    font-weight: 600;
    transition: background-color .2s ease-in-out, box-shadow .2s ease-in-out;
}

.nxsupport-form .btn-primary:hover {
    background: color-mix(in srgb, var(--nxsupport-form-accent) 88%, black);
    box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .12);
}

.nxsupport-form .btn-primary:focus-visible,
.nxsupport-form input[type="checkbox"]:focus-visible {
    outline: 2px solid var(--nxsupport-form-accent);
    outline-offset: 3px;
}

.nxsupport-form .btn-primary:disabled {
    opacity: .7;
    cursor: not-allowed;
    box-shadow: none;
}

@media (prefers-reduced-motion: reduce) {
    .nxsupport-ticket-actions .btn,
    .nxsupport-form .form-control,
    .nxsupport-form .form-select,
    .nxsupport-form .btn-primary {
        transition: none;
    }
}

@media (max-width: 575.98px) {
    .nxsupport-message__header time {
        flex-basis: 100%;
        margin-left: 0;
    }
}

.nxsupport-form .nxsupport-consent .control-label label {
    display: block;
    line-height: 1.5;
    margin-block-end: 0;
}