/* 1. CARD CONTAINER: Balanced spacing and dividers */
.zohodesk-portal [class*="TicketListItem__ticketCard"],
[class*="ticketCard"] {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important; 
    border-bottom: 2px solid #cbd5e0 !important;
    padding: 25px 20px !important;
    margin: 0 !important;
    background-color: #ffffff !important;
    transition: all 0.2s ease-in-out !important;
}

/* 2. THE RIGHT-SIDE WRAPPER: Vertical alignment for Icon + Status */
[class*="TicketListItem__rightContent"] {
    display: flex !important;
    flex-direction: column !important; 
    align-items: center !important;    
    min-width: 110px !important; /* Slightly wider to accommodate longer statuses */
}

/* 3. STATUS BUBBLE: No-wrap fix and centered alignment */
.zohodesk-portal .TicketListItem__ticketStatus,
[class*="ticketStatus"] {
    display: inline-block !important;
    margin-top: 8px !important; 
    padding: 6px 14px !important;
    border-radius: 50px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    text-align: center !important;
    
    /* PREVENT TEXT WRAPPING */
    white-space: nowrap !important; 
    width: auto !important;
}

/* 4. STATUS COLORS */
/* OPEN - Espresso Orange */
[class*="status-open"], [class*="open"] {
    background-color: #fdf2ed !important;
    color: #e46317 !important;
    border: 1px solid #e46317 !important;
}

/* CLOSED - Professional Grey */
[class*="status-closed"], [class*="closed"] {
    background-color: #f1f5f9 !important;
    color: #64748b !important;
    border: 1px solid #cbd5e0 !important;
}

/* 5. HOVER & TITLE FINISHING */
.zohodesk-portal [class*="TicketListItem__ticketCard"]:hover {
    background-color: #fdf2ed !important;
    border-bottom-color: #e46317 !important;
}

.TicketListItem__ticketCardTitle {
    color: #1a202c !important;
    font-weight: 600 !important;
    max-width: 75% !important;
}