/* General Kendo Grid Styles */
.k-grid {
    border: 1px solid #e0e0e0;
    font-size: 14px;
    color: #333333; /* Charcoal for text */
    border-radius: 5px; /* Rounded corners */
}

.k-grid-header {
    background-color: #e0a6ad; /* Muted pink for headers */
    font-weight: bold;
    color: white;
    text-transform: uppercase; /* Make header text uppercase for readability */
}

.k-grid-content tr:nth-child(even) {
    background-color: #f7f7f7; /* Off-white for alternating rows */
}

.k-grid-content tr:hover {
    background-color: #d89099; /* Highlight row on hover */
}

/* Specific Styles for Details Button */
.k-grid .details-btn {
    background-color: #4a90e2; /* Blue background to stand out */
    color: white; /* White text for contrast */
    border-radius: 5px; /* Rounded corners for a modern look */
    padding: 6px 12px; /* Adjusted padding for consistent button size */
    font-size: 14px; /* Match grid font size */
    border: none; /* Remove default border */
    cursor: pointer; /* Pointer cursor for interactivity */
}

.k-grid .details-btn:hover {
    background-color: #003f8a; /* Darker blue on hover */
    transform: scale(1.05); /* Slight zoom effect on hover */
    color: white;
}

/* Specific Styles for Kendo Window (Pop-Up Modal) */
.k-window {
    border: 1px solid rgba(222, 155, 155, 0.6); /* Soft pink border to match theme */
    box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.2); /* Enhanced depth */
    border-radius: 10px; /* Consistent rounded corners */
    overflow: hidden;
}

.k-window-titlebar {
    background-color: rgba(222, 155, 155, 0.9); /* Stronger pink for header */
    color: #ffffff; /* White text */
    font-family: "Merriweather", serif; /* Elegant serif font */
    font-weight: bold;
    font-size: 16px;
    padding: 10px;
    border-bottom: 1px solid rgba(222, 155, 155, 1);
}

.k-window-content {
    font-family: "Lato", Arial, sans-serif;
    font-size: 14px;
    color: #333333;
    background-color: #ffffff;
    padding: 20px;
    line-height: 1.8;
    border-radius: 0 0 10px 10px;
    box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.1);
}

.k-button {
    background-image: none !important;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .k-window {
        width: 90% !important;
    }

    .k-window-content {
        padding: 15px;
    }
}