/* QMSPress Ticket Caller Styles */

/* Main container for the calling interface */
.qmspress-ticket-calling-wrap {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    max-width: 800px;
    margin: 40px auto;
    padding: 20px;
    background: #ffffff;
    border-radius: 10px;
    border: 1px solid #ccc;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Added subtle shadow */
}

/* Section containing the list */
.qmspress-queue-section {
    border-radius: 8px;
    padding: 15px;
}

/* Title above the list */
.qmspress-section-title {
    font-size: 24px;
    font-weight: 600; /* Slightly bolder */
    color: #333;
    margin-bottom: 25px; /* Increased spacing */
    text-align: center;
}

/* Unordered list holding the tickets */
.qmspress-ticket-calling-list {
    list-style-type: none;
    padding: 0;
    margin: 0; /* Remove default margin */
}

/* Individual list item for each ticket */
.qmspress-ticket-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap; /* Allow wrapping on smaller screens */
    background: #f8f9fa;
    margin: 10px 0;
    padding: 15px 20px; /* Adjusted padding */
    border-radius: 8px;
    border: 1px solid #e9ecef; /* Added subtle border */
    transition: background 0.3s, box-shadow 0.3s;
}

.qmspress-ticket-item:hover {
    background: #e9ecef;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); /* Slight shadow on hover */
}

/* Container for ticket number, folder, name */
.qmspress-ticket-info {
    display: flex;
    flex-direction: column; /* Stack info vertically */
    gap: 5px; /* Space between info items */
    margin-right: 15px; /* Space between info and actions */
    flex-grow: 1; /* Allow info to take available space */
}

/* Styling for ticket number, folder number, and patient name */
.qmspress-ticket-number,
.qmspress-folder-number,
.qmspress-patient-name {
    font-size: 16px; /* Slightly smaller base size */
    color: #495057;
    line-height: 1.4;
}
.qmspress-ticket-number strong,
.qmspress-folder-number strong,
.qmspress-patient-name strong {
     font-weight: 600; /* Make data bold */
     color: #343a40;
}

/* Container for the action buttons */
.qmspress-ticket-actions {
    display: flex;
    gap: 10px;
    flex-shrink: 0; /* Prevent actions from shrinking too much */
}

/* General styling for buttons within actions (targets WP .button class) */
.qmspress-ticket-actions .button {
    padding: 8px 15px; /* Adjusted padding */
    font-size: 14px; /* Adjusted font size */
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s, box-shadow 0.2s;
    text-align: center;
    white-space: nowrap; /* Prevent button text wrapping */
}

/* Specific styling for the Call button */
.qmspress-call-button {
    background-color: #34a853;
    color: #fff;
}

.qmspress-call-button:hover {
    background-color: #0056b3;
    box-shadow: 0 2px 4px rgba(0, 123, 255, 0.3);
}

/* Specific styling for the Served button */
.qmspress-served-button {
    background-color: #28a745;
    color: #fff;
}

.qmspress-served-button:hover {
    background-color: #1e7e34;
     box-shadow: 0 2px 4px rgba(40, 167, 69, 0.3);
}

/* Styling for the 'no tickets' message */
.qmspress-ticket-item.qmspress-no-tickets {
    justify-content: center; /* Center text */
    font-style: italic;
    color: #6c757d;
    background: #f8f9fa;
    border: 1px dashed #ced4da; /* Dashed border */
    padding: 20px;
}
.qmspress-ticket-item.qmspress-no-tickets:hover {
     background: #f8f9fa; /* Disable hover effect */
     box-shadow: none;
}


/* Responsive adjustments */
@media only screen and (max-width: 600px) {
    .qmspress-ticket-calling-wrap {
        padding: 10px; /* Reduced padding on small screens */
        margin: 20px auto;
    }

    .qmspress-section-title {
        font-size: 20px; /* Smaller title */
    }

    .qmspress-ticket-item {
        flex-direction: column; /* Stack info and actions vertically */
        align-items: stretch; /* Stretch items full width */
        padding: 15px;
        /* Removed inline-block and width:100% as flex-direction handles stacking */
         border: 1px solid #e1e2e2; /* Keep border */
    }

    .qmspress-ticket-info {
        margin-right: 0; /* Remove right margin */
        margin-bottom: 15px; /* Add bottom margin */
        align-items: center; /* Center info text */
        text-align: center;
    }

     .qmspress-ticket-number,
     .qmspress-folder-number,
     .qmspress-patient-name {
         font-size: 15px; /* Adjust font size */
     }


    .qmspress-ticket-actions {
        justify-content: center; /* Center buttons */
        width: 100%; /* Make actions take full width */
    }

    .qmspress-ticket-actions .button {
        min-width: 120px; /* Adjusted min-width */
        flex-grow: 1; /* Allow buttons to grow */
    }
}