﻿/* ===== Custom Gradient Backgrounds for Modals ===== */

/* Primary (Blue) */
.bg-gradient-primary {
    background: linear-gradient(135deg, #0d6efd, #0a58ca);
}

/* Success (Green) */
.bg-gradient-success {
    background: linear-gradient(135deg, #198754, #146c43);
}

/* Info (Teal/Blue) */
.bg-gradient-info {
    background: linear-gradient(135deg, #0dcaf0, #0aa2c0);
}

/* Warning (Yellow/Orange) */
.bg-gradient-warning {
    background: linear-gradient(135deg, #ffc107, #d39e00);
}

/* Danger (Red) */
.bg-gradient-danger {
    background: linear-gradient(135deg, #dc3545, #a71d2a);
}

/* Secondary (Gray) */
.bg-gradient-secondary {
    background: linear-gradient(135deg, #6c757d, #495057);
}

/* Dark (Black/Gray) */
.bg-gradient-dark {
    background: linear-gradient(135deg, #212529, #000000);
}

/* Transparent blur effect for headers */
.backdrop-blur {
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.table-column-1 {
    width: 50px;
}

.table-column-2 {
    width: 150px;
}

.table-column-3 {
    width: 150px;
}

.table-column-4 {
    width: 150px;
}

.table-column-5 {
    width: 400px;
    color:blue;
    font-size:larger;
}

.table-column-6 {
    width: 100px;
}

.table-column-7 {
    width: 150px;
}
/* Professional row highlight */
#itemsTable tr.active-row {
    background-color: #0d6efd !important; /* Bootstrap primary */
    color: #fff !important;
    font-weight: 600;
    cursor: pointer;
}

    #itemsTable tr.active-row td {
        border-top: 2px solid #0a58ca;
        border-bottom: 2px solid #0a58ca;
    }
.input-error {
    border: 2px solid #dc3545 !important; /* Bootstrap danger red */
    background-color: #f8d7da !important; /* Soft red background */
    color: #721c24 !important; /* Dark red text for contrast */
    animation: shake 0.3s ease-in-out;
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25); /* Subtle glow */
}

@keyframes shake {
    0% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(-4px);
    }

    50% {
        transform: translateX(4px);
    }

    75% {
        transform: translateX(-4px);
    }

    100% {
        transform: translateX(0);
    }
}