/* ===========================
   FluentSupport 
   =========================== */

.fs_client_portal,
.fs_customer_portal_mobile {
    font-family: inherit !important;
    color: #0E121B !important;
    background: transparent !important;
}

/* Shell / card */

.fs_create_ticket_container,
.fst_tickets {
    background: #FFFFFF !important;
    border-radius: 26px !important;
    box-shadow: 0 32px 80px rgba(0, 0, 0, 0.35) !important;
    padding: 32px 40px 32px 40px !important;
}

/* Back link */

.fs_back_nav {
    margin-bottom: 24px !important;
}

.fs_back_button {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    box-shadow: none !important;
}

.fs_back_btn {
    color: #FFFFFF !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    letter-spacing: 0.02em !important;
}

/* Heading / header area */

.fs_ticket_header label,
.fs_tickets_header label {
    display: block !important;
    font-size: 20px !important;
    font-weight: 600 !important;
    color: #050B1A !important;
    margin-bottom: 18px !important;
}

/* Action button (Create Ticket) */

.fs_create_ticket_btn,
.fs_create_ticket_button,
.fs_upload_button {
    border-radius: 999px !important;
    padding: 10px 22px !important;
    border: none !important;
    background: #050B1A !important;
    color: #FFFFFF !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.35) !important;
}

.fs_create_ticket_btn span,
.fs_create_ticket_button span,
.fs_upload_button span {
    display: inline-flex !important;
    align-items: center !important;
}

/* Filters row */

.fs_filters_section {
    margin: 12px 0 18px 0 !important;
}

.fs_filter_container {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
}

/* Status buttons */

.fs_button_groups {
    display: inline-flex !important;
    background: #F3F4FF !important;
    border-radius: 999px !important;
    padding: 4px !important;
    gap: 6px !important;
}

.fs_button_groups .status-btn {
    border: none !important;
    border-radius: 999px !important;
    padding: 6px 18px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    background: transparent !important;
    color: #6B7280 !important;
    cursor: pointer !important;
    transition: all 0.15s ease-out !important;
}

.fs_button_groups .status-btn.active,
.fs_button_groups .status-btn:hover {
    background: #1A143C !important;
    color: #FFFFFF !important;
}

/* Sorting icon */

.fs_sorting .el-button {
    border-radius: 999px !important;
    border: none !important;
    background: #F5F7FF !important;
    width: 36px !important;
    height: 36px !important;
    padding: 0 !important;
}

/* Search */

.fs_search_filter .el-input__wrapper {
    border-radius: 999px !important;
    background: #F5F7FF !important;
    border: 1px solid #E5E7F5 !important;
    padding: 0 14px 0 40px !important;
    height: 40px !important;
    box-shadow: none !important;
}

.fs_search_filter .el-input__inner {
    background: transparent !important;
    border: none !important;
    font-size: 13px !important;
    color: #0E121B !important;
}

.fs_search_filter .search-icon {
    width: 16px !important;
    height: 16px !important;
    color: #9CA3AF !important;
}

/* Tickets table */

.el-table {
    border-radius: 18px !important;
    overflow: hidden !important;
    border: 1px solid #E4E7F2 !important;
}

.el-table__header-wrapper .el-table__cell {
    background: #F5F7FA !important;
    color: #4B5563 !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    border-bottom: 1px solid #E4E7F2 !important;
    padding: 10px 20px !important;
}

.el-table__body-wrapper .el-table__cell {
    font-size: 14px !important;
    color: #111827 !important;
    padding: 12px 20px !important;
    border-bottom: 1px solid #EEF0F8 !important;
}

/* Ticket row */

.fs_ticket_row {
    transition: background 0.12s ease-out, box-shadow 0.12s ease-out !important;
}

.fs_ticket_row:hover .el-table__cell {
    background: #F5F3FF !important;
}

/* Ticket conversation */

.fs_ticket_conversation {
    text-decoration: none !important;
}

.fs_ticket_title strong {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #050B1A !important;
}

.fs_ticket_preview {
    margin-top: 4px !important;
    font-size: 13px !important;
    color: #6B7280 !important;
}

/* Status badge */

.fs_status_badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 4px 10px !important;
    border-radius: 999px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
}

.fs_status_badge .fs_status_dot {
    width: 7px !important;
    height: 7px !important;
    border-radius: 999px !important;
    background: #22C55E !important;
}

.fs_status_badge.new {
    background: #F3E8FF !important;
    color: #7C3AED !important;
}

.fs_status_badge.open {
    background: #ECFDF3 !important;
    color: #15803D !important;
}

.fs_status_badge.closed {
    background: #F3F4F6 !important;
    color: #4B5563 !important;
    text-decoration: line-through !important;
}

/* Pagination */

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

.fs_page_text {
    font-size: 12px !important;
    color: #6B7280 !important;
}

.fs_per_page_select .el-select__wrapper {
    border-radius: 999px !important;
    height: 32px !important;
    padding: 0 12px !important;
    border: 1px solid #E5E7F5 !important;
}

.el-pagination .number,
.el-pagination .btn-prev,
.el-pagination .btn-next {
    border-radius: 999px !important;
    background: transparent !important;
    border: none !important;
}

.el-pagination .number.is-active {
    background: #050B1A !important;
    color: #FFFFFF !important;
}

/* Create ticket form */

.fs_ticket_form_container {
    background: #FFFFFF !important;
    border-radius: 24px !important;
    padding: 24px 28px 28px 28px !important;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.22) !important;
}

.fs_ticket_form .el-form-item__label,
.fs_ticket_details_label {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #111827 !important;
}

.fs_ticket_form .el-input__wrapper {
    border-radius: 14px !important;
    border: 1px solid #E5E7F5 !important;
    box-shadow: none !important;
    background: #F9FAFB !important;
}

.fs_ticket_form .el-input__inner {
    font-size: 14px !important;
    background: transparent !important;
    color: #0E121B !important;
}

.wp_vue_editor_wrapper {
    border-radius: 18px !important;
    border: 1px solid #E5E7F5 !important;
    background: #F9FAFB !important;
    padding: 14px 16px !important;
}

.wp_vue_editor_plain {
    width: 100% !important;
    min-height: 140px !important;
    border: none !important;
    background: transparent !important;
    resize: vertical !important;
    font-size: 14px !important;
    color: #0E121B !important;
}

.fs_tk_help {
    font-size: 12px !important;
    color: #6B7280 !important;
    margin-top: 8px !important;
}

/* Uploader */

.fs_upload_instruction {
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #111827 !important;
}

.fs_upload_info {
    font-size: 12px !important;
    color: #6B7280 !important;
    margin-top: 8px !important;
}

/* Priority select */

.fs_ticket_form .el-select__wrapper {
    border-radius: 12px !important;
    border: 1px solid #E5E7F5 !important;
    background: #F9FAFB !important;
}

/* Submit button row */

.fs_submit_button_container .el-form-item__content {
    display: flex !important;
    justify-content: flex-end !important;
    margin-top: 12px !important;
}