/* Ticket Card */
.ticket-card {
    display: flex; /* Ensure both sections (left and right) are displayed in one row */
    background-color: #272A4D; /* Dark blue for non-orange side */
    color: #fff;
    border-radius: 0; /* No border radius for sharp edges */
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    height: 260px; /* Ticket height */
    position: relative;
    width: 100%; /* Container width */
}

.ticket-card:hover {
      transform: translateY(-5px);
}

/* Left Section */
.ticket-left {
    flex: 3; /* Take up 3/4 of the width */
    padding: 1.5rem;
    background-color: #272A4D;
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Spread content evenly */
    gap: 0.5rem; /* Add spacing between elements */
    position: relative;
}

.ticket-status {
    text-align: left;
}

.ticket-title {
    font-size: 2rem; /* Larger font size for subject */
    font-weight: bold;
    color: #fff; /* Ensure contrast */
    text-align: left; /* Align the subject to the left */
    margin: 0; /* Remove unnecessary margins */
    position: absolute; /* Allow precise positioning */
    left: 1.5rem; /* Align with the padding of the left section */
    transform: translateX(75px); /* Adjust for perfect vertical centering */
}

/* Ticket Details */
.ticket-details {
    font-size: 0.9rem;
    color: #d1d5db;
    margin-bottom: 0.5rem;
}

.ticket-details.d-flex {
    display: flex;
    justify-content: space-between; /* Spread "Service" and "Replies" horizontally */
    align-items: center; /* Align vertically */
    margin-top: 0.5rem; /* Add slight spacing above */
}

/* Right Section */
.ticket-right {
    flex: 1; /* Take up 1/4 of the width */
    background-color: #ff6c00; /* Orange for barcode section */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 1rem;
    text-align: center;
    border-left: 2px dashed #fff;
    position: relative; /* Needed for notches */
}

.ticket-id {
    font-size: 1.5rem;
    font-weight: bold;
    margin-bottom: 0.5rem;
}

.ticket-priority {
    font-size: 1rem;
    text-transform: uppercase;
    margin-bottom: 1rem;
}

.barcode {
    width: 80%;
    height: 40px;
    background: repeating-linear-gradient(
        90deg,
        #fff,
        #fff 2px,
        #ff6c00 2px,
        #ff6c00 4px
    );
    margin: 0 auto;
}

.barcode-text {
    font-size: 0.8rem;
    margin-top: 0.5rem;
    color: #fff;
}

/* View Ticket Button */
.ticket-button {
    position: absolute; /* Ensure the button stays at the bottom */
    bottom: 0; /* Align with the bottom edge */
    left: 0;
    width: 100%; /* Stretch across the entire width */
    text-align: center;
    padding: 0.5rem; /* Add padding to prevent overlap with notches */
    background: #007bff; /* Button background color */
    height: 30px;
    line-height: 0;
}

.ticket-button .btn {
    background-color: #007bff;
    font-weight: bold;
    text-align: center;
    color: #fff;
    border: none;
    width: calc(100% - 30px); /* Stretch button to almost full width, leaving padding for notches */
    padding: 0.5rem; /* Reduced padding for a shorter button */
    display: flex; /* Use flex to center text */
    justify-content: center; /* Center text horizontally */
    align-items: center; /* Center text vertically */
    font-size: 1rem; /* Ensure text size is readable */
    height: auto; /* Adjust height dynamically based on content */
    line-height: 0;
}

.ticket-button .btn:hover {
    background-color: #007bff; /* Remove hover effect */
}

/* Notch Styling */
.ticket-card::before,
.ticket-card::after,
.ticket-right::before,
.ticket-right::after,
.ticket-divider::before,
.ticket-divider::after {
    content: '';
    position: absolute;
    width: 30px; /* Diameter of the notch */
    height: 30px; /* Diameter of the notch */
    background-color: #0F1122; /* Match page background color */
    border-radius: 50%; /* Perfect circle for notch */
    z-index: 1;
}

/* Left side notches: Top and Bottom */
.ticket-card::before {
    top: -15px; /* Center the notch vertically */
    left: -15px; /* Center the notch horizontally */
}

.ticket-card::after {
    bottom: -15px; /* Center the notch vertically */
    left: -15px; /* Center the notch horizontally */
}

/* Right side notches: Top and Bottom */
.ticket-right::before {
    top: -15px; /* Center the notch vertically */
    right: -15px; /* Center the notch horizontally */
}

.ticket-right::after {
    bottom: -15px; /* Center the notch vertically */
    right: -15px; /* Center the notch horizontally */
}

/* Dashed line notches: Top and Bottom */
.ticket-divider::before {
    top: -15px; /* Align to the top of the dashed line */
    left: calc(75% - 15px); /* Align to the center of the dashed line */
}

.ticket-divider::after {
    bottom: -15px; /* Align to the bottom of the dashed line */
    left: calc(75% - 15px); /* Align to the center of the dashed line */
}