/* Custom styles for required fields and UX improvements */
.required-label::after {
    content: " *";
    color: #ff0000;
    font-weight: bold;
}

input:required:invalid,
select:required:invalid {
    border-color: #ffcccc;
}

input:required:valid,
select:required:valid {
    border-left: 3px solid #00a65a;
    /* Green indicator for filled required fields */
}

.input-group-addon i.fa-user {
    color: #3c8dbc;
}

/* Make placeholders stand out slightly */
::placeholder {
    color: #a9a9a9 !important;
    font-size: 0.9em;
}

/* Unread notification highlight */
.notification-li.unread {
    background-color: #ecf7ff !important;
    /* Very light blue background */
    border-left: 4px solid #3c8dbc !important;
    box-shadow: inset 0 0 5px rgba(60, 141, 188, 0.1);
}

.notification-li.unread a {
    color: #222 !important;
    font-weight: 700 !important;
}

.notification-li.unread i.notif-icon {
    color: #3c8dbc !important;
    transform: scale(1.1);
}

.notification-li.unread .time {
    color: #3c8dbc !important;
    font-weight: bold;
}

/* Stock Transfer Receive Buttons */
.btn-receive-all.active-selection {
    background-color: #008d4c !important;
    /* Solid Green */
    color: white !important;
    border-color: #008d4c !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

.btn-problem.active-selection {
    background-color: #d73925 !important;
    /* Solid Red */
    color: white !important;
    border-color: #d73925 !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

.product-card.error-highlight {
    border: 2px solid #dd4b39 !important;
    background-color: #fff5f5 !important;
    animation: shake 0.5s;
}

@keyframes shake {

    0%,
    100% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(-5px);
    }

    75% {
        transform: translateX(5px);
    }
}