/*!
 * Kendo UI Minimal Styles - Notification Component Only
 * Optimized for login page performance
 */

/* Core widget styles */
.k-widget {
    box-sizing: border-box;
    font-family: "Segoe UI", Arial, sans-serif;
    font-size: 14px;
    line-height: 1.42857143;
    color: #333;
}

/* Popup base styles */
.k-popup {
    position: absolute;
    z-index: 10000;
}

/* Notification specific styles */
.k-notification {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 10000;
    max-width: 300px;
    min-width: 200px;
}

.k-notification-wrap {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    padding: 12px 16px;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    position: relative;
}

.k-notification-content {
    flex: 1;
    margin: 0 8px;
    word-wrap: break-word;
}

/* Icon styles */
.k-icon {
    display: inline-block;
    width: 16px;
    height: 16px;
    background-size: 16px 16px;
    background-repeat: no-repeat;
    background-position: center;
    vertical-align: middle;
}

.k-i-info {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23007acc' d='M8 1a7 7 0 1 0 0 14A7 7 0 0 0 8 1zm0 10.5a.5.5 0 0 1-.5-.5V7a.5.5 0 0 1 1 0v4a.5.5 0 0 1-.5.5zM8 6a.5.5 0 0 1-.5-.5v-1A.5.5 0 0 1 8 4a.5.5 0 0 1 .5.5v1A.5.5 0 0 1 8 6z'/%3E%3C/svg%3E");
}

.k-i-check {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%2300a651' d='M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z'/%3E%3C/svg%3E");
}

.k-i-warning {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23ff9500' d='M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z'/%3E%3C/svg%3E");
}

.k-i-close {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23d32f2f' d='M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.2s;
}

.k-i-close:hover {
    opacity: 1;
}

/* Notification type variations */
.k-notification-wrap[data-type="success"] {
    border-color: #00a651;
    background-color: #f0f8f0;
}

.k-notification-wrap[data-type="error"] {
    border-color: #d32f2f;
    background-color: #ffebee;
}

.k-notification-wrap[data-type="warning"] {
    border-color: #ff9500;
    background-color: #fff8e1;
}

.k-notification-wrap[data-type="info"] {
    border-color: #007acc;
    background-color: #e3f2fd;
}

/* Animation styles */
.k-notification-wrap {
    animation: slideInRight 0.3s ease-out;
}

@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .k-notification {
        left: 10px;
        right: 10px;
        max-width: none;
    }
}