@charset "UTF-8";

/* General Styles */
body {
    background-color: #f0f4fc; /* Light blue background */
    font-family: 'Poppins', sans-serif; /* Modern font */
}

/* Color Picker Styles */
.input-group.color .input-group-btn i {
    position: absolute;
    display: block;
    cursor: pointer;
    width: 20px;
    height: 20px;
    right: 10px; /* Adjusted for better spacing */
}

.colorpicker.dropdown-menu {
    padding: 10px; /* Increased padding for usability */
    border-radius: 8px; /* Rounded corners */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Soft shadow */
}

/* Date Picker Styles */
.datepicker.dropdown-menu {
    padding: 10px;
    border-radius: 8px; /* Rounded corners */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Soft shadow */
}

.datepicker .active {
    background-color: #4b8df8 !important; /* Active date color */
    color: #fff; /* White text */
}

.datepicker .active:hover {
    background-color: #2678fc !important; /* Darker on hover */
}

/* Modal Styles */
.modal-open .datepicker, .modal-open .colorpicker {
    z-index: 10055 !important; /* Ensure modals stay on top */
}

/* Data Table Styles */
table.dataTable thead th {
    border-bottom: 2px solid #e7ecf1; /* Light blue for header */
    color: #333;
    font-weight: 600;
}

table.dataTable td {
    background: #fbfcfd !important; /* Light background for cells */
}

/* Button Styles */
.bootstrap-select .btn {
    border-color: #c2cad8; /* Light border */
}

.bootstrap-select.open .btn {
    border-color: #007bff; /* Blue when open */
}

/* Toast Notifications */
.toast {
    background-color: #343a40; /* Dark background */
}

.toast-success {
    background-color: #51c751; /* Green for success */
}

.toast-error {
    background-color: #e74c3c; /* Red for error */
}

.toast-info {
    background-color: #3498db; /* Blue for info */
}

.toast-warning {
    background-color: #f39c12; /* Orange for warning */
}

/* Editable Input Styles */
.md-input {
    padding: 8px; /* Increased padding */
    border-radius: 4px; /* Rounded corners */
}

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