/* Lorzen Support Tickets v1.2.0
 * Stable Bagisto styling. Loaded as an external asset from the Bagisto layout head.
 * Do not move these rules into inline <style> tags or depend on Tailwind scanning this package.
 */

.lst-wrap,
.lst-wrap *,
.lst-wrap *::before,
.lst-wrap *::after {
    box-sizing: border-box !important;
}

.lst-wrap {
    --lst-primary: #0a49a7;
    --lst-primary-hover: #083c89;
    --lst-text: #111827;
    --lst-muted: #6b7280;
    --lst-border: #e5e7eb;
    --lst-border-strong: #d1d5db;
    --lst-bg: #ffffff;
    --lst-bg-soft: #f9fafb;
    --lst-shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 1px 3px rgba(15, 23, 42, .04);
    width: 100% !important;
    max-width: 1240px !important;
    margin: 0 !important;
    color: var(--lst-text) !important;
    font-family: inherit !important;
    line-height: 1.45 !important;
}

.lst-wrap a {
    color: inherit;
}

.lst-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
    flex-wrap: wrap !important;
    margin: 0 0 22px !important;
}

.lst-title {
    margin: 0 !important;
    color: var(--lst-text) !important;
    font-size: 24px !important;
    font-weight: 600 !important;
    line-height: 1.25 !important;
    letter-spacing: -.01em !important;
}

.lst-sub {
    margin: 6px 0 0 !important;
    color: var(--lst-muted) !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
}

.lst-section-title {
    margin: 22px 0 12px !important;
    color: var(--lst-text) !important;
    font-size: 18px !important;
    font-weight: 600 !important;
}

.lst-card {
    display: block !important;
    width: 100% !important;
    margin: 0 0 16px !important;
    padding: 18px !important;
    overflow: visible !important;
    border: 1px solid var(--lst-border) !important;
    border-radius: 10px !important;
    background: var(--lst-bg) !important;
    box-shadow: var(--lst-shadow) !important;
    color: var(--lst-text) !important;
}

.lst-card-flat {
    padding: 0 !important;
    overflow: hidden !important;
}

.lst-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px !important;
}

.lst-field {
    display: block !important;
    min-width: 0 !important;
}

.lst-field + .lst-field,
.lst-field-spaced {
    margin-top: 16px !important;
}

.lst-grid > .lst-field + .lst-field {
    margin-top: 0 !important;
}

.lst-field label {
    display: block !important;
    margin: 0 0 7px !important;
    color: #374151 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;
}

.lst-field input:not([type="checkbox"]):not([type="radio"]),
.lst-field select,
.lst-field textarea {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 42px !important;
    margin: 0 !important;
    padding: 9px 12px !important;
    border: 1px solid var(--lst-border-strong) !important;
    border-radius: 7px !important;
    outline: none !important;
    background: #fff !important;
    color: var(--lst-text) !important;
    font: inherit !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
    box-shadow: none !important;
    transition: border-color .15s ease, box-shadow .15s ease !important;
}

.lst-field input:not([type="checkbox"]):not([type="radio"]):focus,
.lst-field select:focus,
.lst-field textarea:focus {
    border-color: var(--lst-primary) !important;
    box-shadow: 0 0 0 3px rgba(10, 73, 167, .12) !important;
}

.lst-field textarea {
    min-height: 145px !important;
    resize: vertical !important;
}

.lst-field input[type="file"] {
    padding: 7px !important;
}

.lst-field input[type="file"]::file-selector-button {
    margin-right: 10px !important;
    padding: 7px 10px !important;
    border: 0 !important;
    border-radius: 6px !important;
    background: #eef3fb !important;
    color: #1f2937 !important;
    font-weight: 600 !important;
    cursor: pointer !important;
}

.lst-checkbox {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    min-height: 42px !important;
    margin: 0 !important;
    color: #374151 !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
}

.lst-checkbox input {
    width: 16px !important;
    height: 16px !important;
    min-height: 0 !important;
    margin: 0 !important;
    accent-color: var(--lst-primary) !important;
}

.lst-actions {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
}

.lst-actions form {
    margin: 0 !important;
}

.lst-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    min-height: 38px !important;
    margin: 0 !important;
    padding: 9px 14px !important;
    border: 1px solid var(--lst-primary) !important;
    border-radius: 7px !important;
    background: var(--lst-primary) !important;
    color: #fff !important;
    font-family: inherit !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    text-align: center !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    cursor: pointer !important;
    box-shadow: none !important;
    transition: background .15s ease, border-color .15s ease, transform .05s ease !important;
    appearance: none !important;
}

.lst-btn:hover,
.lst-btn:focus {
    border-color: var(--lst-primary-hover) !important;
    background: var(--lst-primary-hover) !important;
    color: #fff !important;
    text-decoration: none !important;
}

.lst-btn:active {
    transform: translateY(1px) !important;
}

.lst-btn-secondary {
    border-color: var(--lst-border-strong) !important;
    background: #fff !important;
    color: #1f2937 !important;
}

.lst-btn-secondary:hover,
.lst-btn-secondary:focus {
    border-color: #9ca3af !important;
    background: #f3f4f6 !important;
    color: #111827 !important;
}

.lst-table-wrap {
    width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
}

.lst-table {
    width: 100% !important;
    min-width: 760px !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    background: #fff !important;
    color: var(--lst-text) !important;
    font-size: 13px !important;
}

.lst-table th,
.lst-table td {
    padding: 12px 14px !important;
    border: 0 !important;
    border-bottom: 1px solid var(--lst-border) !important;
    background: #fff !important;
    color: var(--lst-text) !important;
    text-align: left !important;
    vertical-align: middle !important;
    white-space: normal !important;
}

.lst-table th {
    background: var(--lst-bg-soft) !important;
    color: var(--lst-muted) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: .035em !important;
    line-height: 1.35 !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
}

.lst-table tbody tr:last-child td {
    border-bottom: 0 !important;
}

.lst-table tbody tr:hover td {
    background: #fbfdff !important;
}

.lst-table td a {
    color: var(--lst-primary) !important;
    text-decoration: none !important;
}

.lst-table td a:hover {
    text-decoration: underline !important;
}

.lst-table code {
    display: inline-block !important;
    padding: 2px 6px !important;
    border-radius: 5px !important;
    background: #f3f4f6 !important;
    color: #374151 !important;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace !important;
    font-size: 12px !important;
}

.lst-badge {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 24px !important;
    padding: 4px 9px !important;
    border: 1px solid transparent !important;
    border-radius: 999px !important;
    background: #f3f4f6 !important;
    color: #374151 !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
}

.lst-badge-open {
    border-color: #bfdbfe !important;
    background: #eff6ff !important;
    color: #1d4ed8 !important;
}

.lst-badge-in_progress {
    border-color: #fde68a !important;
    background: #fffbeb !important;
    color: #92400e !important;
}

.lst-badge-awaiting_customer {
    border-color: #ddd6fe !important;
    background: #f5f3ff !important;
    color: #6d28d9 !important;
}

.lst-badge-closed {
    border-color: #d1d5db !important;
    background: #f3f4f6 !important;
    color: #4b5563 !important;
}

.lst-unread {
    display: inline-block !important;
    width: 8px !important;
    height: 8px !important;
    margin-right: 7px !important;
    border-radius: 999px !important;
    background: #dc2626 !important;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, .09) !important;
    vertical-align: middle !important;
}

.lst-message {
    display: block !important;
    width: 100% !important;
    margin: 0 0 12px !important;
    padding: 16px !important;
    border: 1px solid var(--lst-border) !important;
    border-left-width: 4px !important;
    border-radius: 9px !important;
    background: #fff !important;
    color: var(--lst-text) !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .025) !important;
}

.lst-message-admin {
    border-left-color: #111827 !important;
}

.lst-message-head {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    margin: 0 0 9px !important;
    color: var(--lst-muted) !important;
    font-size: 11px !important;
    line-height: 1.35 !important;
}

.lst-message-head strong {
    color: #374151 !important;
    font-weight: 600 !important;
}

.lst-message-text {
    color: var(--lst-text) !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
    overflow-wrap: anywhere !important;
}

.lst-files {
    display: flex !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
    margin-top: 12px !important;
}

.lst-file {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 30px !important;
    padding: 6px 9px !important;
    border: 1px solid var(--lst-border-strong) !important;
    border-radius: 6px !important;
    background: #fff !important;
    color: #374151 !important;
    font-size: 12px !important;
    line-height: 1.2 !important;
    text-decoration: none !important;
}

.lst-file:hover {
    background: #f9fafb !important;
    color: #111827 !important;
}

.lst-alert {
    display: block !important;
    width: 100% !important;
    margin: 0 0 16px !important;
    padding: 11px 13px !important;
    border: 1px solid #a7f3d0 !important;
    border-radius: 7px !important;
    background: #ecfdf5 !important;
    color: #065f46 !important;
    font-size: 13px !important;
}

.lst-alert-error {
    border-color: #fecaca !important;
    background: #fef2f2 !important;
    color: #991b1b !important;
}

.lst-error {
    margin-top: 5px !important;
    color: #b91c1c !important;
    font-size: 12px !important;
    line-height: 1.4 !important;
}

.lst-muted {
    color: var(--lst-muted) !important;
}

.lst-stats {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 12px !important;
    margin: 0 0 20px !important;
}

.lst-stat {
    display: block !important;
    min-width: 0 !important;
    padding: 15px 16px !important;
    border: 1px solid var(--lst-border) !important;
    border-radius: 9px !important;
    background: #fff !important;
    box-shadow: var(--lst-shadow) !important;
}

.lst-stat > span {
    display: block !important;
    min-height: 18px !important;
    margin-bottom: 4px !important;
    color: var(--lst-muted) !important;
    font-size: 12px !important;
    font-weight: 500 !important;
}

.lst-stat strong {
    display: block !important;
    color: var(--lst-text) !important;
    font-size: 26px !important;
    font-weight: 600 !important;
    line-height: 1.1 !important;
}

.lst-filter {
    display: grid !important;
    grid-template-columns: minmax(220px, 2fr) repeat(3, minmax(140px, 1fr)) minmax(200px, 1.2fr) !important;
    gap: 12px !important;
    align-items: end !important;
}

.lst-filter > div {
    min-width: 0 !important;
}

.lst-pagination {
    margin-top: 18px !important;
}

.lst-meta {
    display: flex !important;
    align-items: center !important;
    gap: 8px 10px !important;
    flex-wrap: wrap !important;
    color: var(--lst-muted) !important;
    font-size: 12px !important;
    line-height: 1.45 !important;
}

.lst-meta strong {
    color: #374151 !important;
    font-weight: 600 !important;
}

.lst-empty {
    display: block !important;
    width: 100% !important;
    padding: 34px 16px !important;
    border: 1px dashed var(--lst-border-strong) !important;
    border-radius: 9px !important;
    background: #fff !important;
    color: var(--lst-muted) !important;
    font-size: 13px !important;
    text-align: center !important;
}

.lst-admin-columns {
    display: grid !important;
    grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr) !important;
    gap: 18px !important;
    align-items: start !important;
}

.lst-hp {
    position: absolute !important;
    left: -10000px !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
}

.lst-mt-14 { margin-top: 14px !important; }
.lst-mt-16 { margin-top: 16px !important; }
.lst-mt-18 { margin-top: 18px !important; }
.lst-max-850 { max-width: 850px !important; }
.lst-max-900 { max-width: 900px !important; margin-left: auto !important; margin-right: auto !important; }

/* Bagisto dark-mode support. */
.dark .lst-wrap {
    --lst-text: #f3f4f6;
    --lst-muted: #9ca3af;
    --lst-border: #374151;
    --lst-border-strong: #4b5563;
    --lst-bg: #111827;
    --lst-bg-soft: #1f2937;
    --lst-shadow: none;
}

.dark .lst-card,
.dark .lst-stat,
.dark .lst-message,
.dark .lst-table,
.dark .lst-table td,
.dark .lst-empty {
    background: #111827 !important;
    color: #f3f4f6 !important;
}

.dark .lst-table th,
.dark .lst-table tbody tr:hover td {
    background: #1f2937 !important;
}

.dark .lst-field label,
.dark .lst-meta strong,
.dark .lst-message-head strong,
.dark .lst-btn-secondary,
.dark .lst-file {
    color: #e5e7eb !important;
}

.dark .lst-field input:not([type="checkbox"]):not([type="radio"]),
.dark .lst-field select,
.dark .lst-field textarea,
.dark .lst-btn-secondary,
.dark .lst-file {
    border-color: #4b5563 !important;
    background: #1f2937 !important;
    color: #f3f4f6 !important;
}

.dark .lst-btn-secondary:hover,
.dark .lst-file:hover {
    background: #374151 !important;
    color: #fff !important;
}

.dark .lst-table code {
    background: #1f2937 !important;
    color: #e5e7eb !important;
}

@media (max-width: 1100px) {
    .lst-filter {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .lst-stats {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 900px) {
    .lst-grid,
    .lst-admin-columns {
        grid-template-columns: 1fr !important;
    }

    .lst-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 640px) {
    .lst-header {
        align-items: stretch !important;
        margin-bottom: 16px !important;
    }

    .lst-header > * {
        width: 100% !important;
    }

    .lst-actions {
        width: 100% !important;
    }

    .lst-actions .lst-btn {
        flex: 1 1 auto !important;
    }

    .lst-title {
        font-size: 20px !important;
    }

    .lst-card {
        padding: 14px !important;
        border-radius: 8px !important;
    }

    .lst-filter,
    .lst-stats {
        grid-template-columns: 1fr !important;
    }

    .lst-message-head {
        align-items: flex-start !important;
        flex-direction: column !important;
        gap: 4px !important;
    }
}

/* v1.2.0 conversation, internal workflow and product support additions */
.lst-section-title-top {
    margin-top: 0 !important;
}

.lst-conversation {
    display: flex !important;
    width: 100% !important;
    flex-direction: column !important;
    gap: 10px !important;
    padding: 18px !important;
    border: 1px solid var(--lst-border) !important;
    border-radius: 12px !important;
    background: #f4f7fa !important;
}

.lst-conversation .lst-message {
    width: auto !important;
    max-width: min(78%, 760px) !important;
    margin: 0 !important;
    padding: 11px 13px !important;
    border: 1px solid transparent !important;
    border-left-width: 1px !important;
    border-radius: 14px !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .08) !important;
}

.lst-conversation .lst-message-customer {
    align-self: flex-end !important;
    border-color: #bfdbfe !important;
    border-bottom-right-radius: 4px !important;
    background: #dbeafe !important;
}

.lst-conversation .lst-message-admin {
    align-self: flex-start !important;
    border-color: #e5e7eb !important;
    border-bottom-left-radius: 4px !important;
    background: #fff !important;
}

.lst-conversation .lst-message-internal {
    align-self: center !important;
    width: 92% !important;
    max-width: 920px !important;
    border: 1px dashed #f59e0b !important;
    border-radius: 10px !important;
    background: #fffbeb !important;
    box-shadow: none !important;
}

.lst-conversation .lst-message-internal .lst-message-head strong {
    color: #92400e !important;
}

.lst-conversation .lst-message-head {
    margin-bottom: 5px !important;
}

.lst-conversation .lst-message-text {
    line-height: 1.5 !important;
}

.lst-note-card {
    border-color: #fcd34d !important;
    background: #fffbeb !important;
}

.lst-note-card .lst-field textarea {
    border-color: #fbbf24 !important;
    background: #fffdf5 !important;
}

.lst-btn-note {
    border-color: #d97706 !important;
    background: #d97706 !important;
}

.lst-btn-note:hover,
.lst-btn-note:focus {
    border-color: #b45309 !important;
    background: #b45309 !important;
}

.lst-btn-danger {
    border-color: #dc2626 !important;
    background: #dc2626 !important;
}

.lst-btn-danger:hover,
.lst-btn-danger:focus {
    border-color: #b91c1c !important;
    background: #b91c1c !important;
}

.lst-timer-card {
    overflow: hidden !important;
}

.lst-timer-total,
.lst-timer-live {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    padding: 10px 0 !important;
    color: var(--lst-muted) !important;
    font-size: 12px !important;
}

.lst-timer-total strong,
.lst-timer-live strong {
    color: var(--lst-text) !important;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace !important;
    font-size: 16px !important;
    font-weight: 700 !important;
}

.lst-timer-live {
    justify-content: flex-start !important;
    padding: 9px 10px !important;
    border-radius: 8px !important;
    background: #ecfdf5 !important;
    color: #047857 !important;
}

.lst-timer-live strong {
    margin-left: auto !important;
    color: #065f46 !important;
}

.lst-timer-dot {
    width: 9px !important;
    height: 9px !important;
    flex: 0 0 9px !important;
    border-radius: 999px !important;
    background: #10b981 !important;
    box-shadow: 0 0 0 4px rgba(16, 185, 129, .12) !important;
}

.lst-time-details summary {
    cursor: pointer !important;
    color: var(--lst-muted) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
}

.lst-time-list {
    display: grid !important;
    gap: 0 !important;
    margin-top: 8px !important;
    border-top: 1px solid var(--lst-border) !important;
}

.lst-time-list > div {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    padding: 8px 0 !important;
    border-bottom: 1px solid var(--lst-border) !important;
    font-size: 12px !important;
}

.lst-time-list span {
    display: grid !important;
    gap: 2px !important;
    color: #374151 !important;
}

.lst-time-list small {
    color: var(--lst-muted) !important;
    font-size: 10px !important;
}

.lst-time-list strong {
    color: var(--lst-text) !important;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace !important;
}

.lst-linked-product {
    margin-top: 16px !important;
    padding: 10px 12px !important;
    border: 1px solid #bfdbfe !important;
    border-radius: 8px !important;
    background: #eff6ff !important;
    color: #1e3a8a !important;
    font-size: 13px !important;
}

.lst-product-support-action {
    width: 100% !important;
    margin-top: 10px !important;
}

.lst-product-support-link {
    display: flex !important;
    width: 100% !important;
    min-height: 44px !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 10px 16px !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 8px !important;
    background: #fff !important;
    color: #0f172a !important;
    font-family: inherit !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    text-decoration: none !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04) !important;
    transition: border-color .15s ease, background .15s ease !important;
}

.lst-product-support-link > span {
    display: inline-flex !important;
    width: 20px !important;
    height: 20px !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 999px !important;
    background: #e8eef8 !important;
    color: #0a49a7 !important;
    font-size: 12px !important;
    font-weight: 800 !important;
}

.lst-product-support-link:hover,
.lst-product-support-link:focus {
    border-color: #94a3b8 !important;
    background: #f8fafc !important;
    color: #0f172a !important;
    text-decoration: none !important;
}

.dark .lst-conversation {
    border-color: #374151 !important;
    background: #0f172a !important;
}

.dark .lst-conversation .lst-message-customer {
    border-color: #1d4ed8 !important;
    background: #172554 !important;
}

.dark .lst-conversation .lst-message-admin {
    border-color: #374151 !important;
    background: #1f2937 !important;
}

.dark .lst-conversation .lst-message-internal,
.dark .lst-note-card {
    border-color: #92400e !important;
    background: #451a03 !important;
}

.dark .lst-note-card .lst-field textarea {
    border-color: #92400e !important;
    background: #292524 !important;
}

.dark .lst-timer-live {
    background: #052e2b !important;
    color: #6ee7b7 !important;
}

.dark .lst-timer-live strong {
    color: #a7f3d0 !important;
}

.dark .lst-time-list span {
    color: #e5e7eb !important;
}

.dark .lst-linked-product {
    border-color: #1d4ed8 !important;
    background: #172554 !important;
    color: #bfdbfe !important;
}

.dark .lst-product-support-link {
    border-color: #475569 !important;
    background: #111827 !important;
    color: #f8fafc !important;
}

.dark .lst-product-support-link:hover,
.dark .lst-product-support-link:focus {
    background: #1f2937 !important;
}

@media (max-width: 640px) {
    .lst-conversation {
        padding: 12px !important;
    }

    .lst-conversation .lst-message {
        max-width: 90% !important;
    }

    .lst-conversation .lst-message-internal {
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* In the admin conversation the staff side is mirrored: customer left, staff right. */
.lst-admin-conversation .lst-message-customer {
    align-self: flex-start !important;
    border-color: #e5e7eb !important;
    border-bottom-left-radius: 4px !important;
    border-bottom-right-radius: 14px !important;
    background: #fff !important;
}

.lst-admin-conversation .lst-message-admin {
    align-self: flex-end !important;
    border-color: #bfdbfe !important;
    border-bottom-left-radius: 14px !important;
    border-bottom-right-radius: 4px !important;
    background: #dbeafe !important;
}

.dark .lst-admin-conversation .lst-message-customer {
    border-color: #374151 !important;
    background: #1f2937 !important;
}

.dark .lst-admin-conversation .lst-message-admin {
    border-color: #1d4ed8 !important;
    background: #172554 !important;
}