/* Global Neumorphic Modal Stylesheet */

.neu-modal-content {
    background: #e0e5ec !important;
    border-radius: 28px !important;
    border: 1px solid rgba(255, 255, 255, 0.8) !important;
    padding: 10px;
}

.neu-modal-header {
    border-bottom: 2px solid rgba(163, 177, 198, 0.25) !important;
    padding: 16px 20px !important;
}

.neu-modal-title {
    font-size: 18px;
    font-weight: 800;
    color: #274217;
    display: flex;
    align-items: center;
    gap: 10px;
}

.neu-modal-body {
    padding: 20px !important;
}

.neu-form-group {
    margin-bottom: 18px;
}

.neu-form-label {
    font-size: 12px;
    font-weight: 800;
    color: #3a4756;
    margin-bottom: 6px;
    display: block;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.neu-form-input,
.neu-form-select {
    width: 100%;
    background: #e0e5ec;
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 14px;
    padding: 12px 16px;
    font-size: 13px;
    font-weight: 600;
    color: #3a4756;
    outline: none;
    box-shadow:
        inset 3px 3px 6px rgba(163, 177, 198, 0.7),
        inset -3px -3px 6px rgba(255, 255, 255, 0.8);
}

.neu-form-input:focus,
.neu-form-select:focus {
    box-shadow:
        inset 4px 4px 8px rgba(100, 164, 61, 0.3),
        inset -4px -4px 8px rgba(255, 255, 255, 0.9),
        0 0 0 2px rgba(100, 164, 61, 0.4);
}

.neu-modal-footer {
    border-top: 2px solid rgba(163, 177, 198, 0.25) !important;
    padding: 16px 20px !important;
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

.btn-neu-modal-cancel {
    background: #e0e5ec;
    border: none;
    border-radius: 50px;
    padding: 10px 20px;
    font-size: 13px;
    font-weight: 700;
    color: #7b889b;
    box-shadow:
        4px 4px 8px rgba(163, 177, 198, 0.6),
        -4px -4px 8px rgba(255, 255, 255, 0.8);
    cursor: pointer;
}

.btn-neu-modal-save {
    background: linear-gradient(135deg, #64A43D 0%, #3C6324 100%);
    border: none;
    border-radius: 50px;
    padding: 10px 24px;
    font-size: 13px;
    font-weight: 700;
    color: #ffffff;
    box-shadow:
        4px 4px 10px rgba(60, 99, 36, 0.4),
        -2px -2px 6px rgba(255, 255, 255, 0.6);
    cursor: pointer;
}

/* Neumorphic Modal Close Button Styling */
.neu-modal-content .btn-close,
.modal-content .btn-close {
    background: #e0e5ec url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%237b889b'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") center/10px auto no-repeat !important;
    border-radius: 50% !important;
    width: 32px !important;
    height: 32px !important;
    padding: 0 !important;
    opacity: 1 !important;
    border: none !important;
    box-shadow: 
        4px 4px 8px rgba(163, 177, 198, 0.6),
        -4px -4px 8px rgba(255, 255, 255, 0.8) !important;
    transition: all 0.2s ease !important;
}

.neu-modal-content .btn-close:hover,
.modal-content .btn-close:hover {
    color: #dc2626 !important;
    box-shadow: 
        5px 5px 10px rgba(163, 177, 198, 0.7),
        -5px -5px 10px rgba(255, 255, 255, 0.9) !important;
    transform: scale(1.05);
}

.neu-modal-content .btn-close:active,
.modal-content .btn-close:active {
    box-shadow: 
        inset 2px 2px 4px rgba(163, 177, 198, 0.7),
        inset -2px -2px 4px rgba(255, 255, 255, 0.7) !important;
    transform: scale(0.95);
}