:root {
    --primary-color: #FF8C42; /* Blue */
    --primary-color-dark: #CC6D34; /* Darker blue */
    --secondary-color: #FFC107; /* Light blue */
    --teal-color: #20c997; /* Teal */
    --teal-color-dark: #17a589; /* Darker teal */
    --purple-color: #6f42c1; /* Purple */
    --purple-color-dark: #5a32a3; /* Darker purple */
    --font-size-small: 14px;
    --font-size-large: 16px;
}

/* Responsive font sizes */
html {
    font-size: var(--font-size-small);
}

@media (min-width: 768px) {
    html {
        font-size: var(--font-size-large);
    }
}

/* Body and footer layout */
html {
    position: relative;
    min-height: 100%;
    height: 100%; /* Added for sticky footer */
}

body {
    margin-bottom: 60px; /* Ensure footer doesn't overlap content */
    font-family: "Roboto", sans-serif;
    background-color: #FCF5EB; /* Light background */
    display: flex; /* Added for sticky footer */
    flex-direction: column; /* Added for sticky footer */
    height: 100%; /* Added for sticky footer */
    margin: 0; /* Added for sticky footer */
}

.main-container {
    margin-bottom: 3rem; /* Space below main content */
    flex: 1; /* Added for sticky footer */
}

.footer {
    margin-top: 3rem; /* Space above footer */
    background-color: var(--primary-color-dark);
    color: white;
    padding: 1rem;
    text-align: center;
}

/* Button focus styling */
.btn:focus,
.btn:active:focus,
.btn-link.nav-link:focus,
.form-control:focus,
.form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem var(--primary-color);
}

/* Primary color styling */
.text-primary {
    color: var(--primary-color) !important; 
}
.text-primary-dark {
    color: var(--primary-color-dark) !important;
}


.btn-primary {
    background-color: var(--primary-color);
    color: #fff;
}

    .btn-primary:hover {
        background-color: var(--primary-color-dark);
        color: #fff;
    }

/* Teal color styling */
.text-teal {
    color: var(--teal-color);
}

.btn-teal {
    background-color: var(--teal-color);
    color: #fff;
}

    .btn-teal:hover {
        background-color: var(--teal-color-dark);
        color: #fff;
    }

/* Purple color styling */
.text-purple {
    color: var(--purple-color);
}

.btn-purple {
    background-color: var(--purple-color);
    color: #fff;
}

    .btn-purple:hover {
        background-color: var(--purple-color-dark);
        color: #fff;
    }

/* Table styling */
.table {
    border: 1px solid var(--secondary-color);
    border-radius: 5px;
    background-color: white;
}

.table-hover tbody tr:hover {
    background-color: var(--secondary-color);
}

.table-dark {
    background-color: var(--primary-color);
    color: white;
}

    .table-dark th {
        text-transform: uppercase;
    }

/* Badge styling */
.badge {
    border-radius: 12px;
    padding: 0.5em 0.75em;
    font-size: 0.9rem;
}

.badge-success {
    background-color: #4caf50;
    color: white;
}

.badge-warning {
    background-color: #ffc107;
    color: white;
}

.badge-danger {
    background-color: #f44336;
    color: white;
}

.badge-secondary {
    background-color: #9e9e9e;
    color: white;
}

/* Select2 styling */
.select2-container .select2-selection {
    border: 1px solid var(--secondary-color);
    border-radius: 4px;
    padding: 0.5rem;
}

.select2-container--default .select2-selection--multiple {
    background-color: white;
    border: 1px solid var(--primary-color);
    border-radius: 4px;
}

    .select2-container--default .select2-selection--multiple .select2-selection__choice {
        background-color: var(--primary-color-dark);
        color: white;
        border: none;
        padding: 0.25em 0.5em;
        margin-right: 5px;
    }

/* Pagination styling */
.pagination .page-link {
    color: var(--primary-color);
}

.pagination .page-item.active .page-link {
    background-color: var(--primary-color-dark);
    border-color: var(--primary-color-dark);
    color: white;
}

.pagination .page-item.disabled .page-link {
    background-color: #e0e0e0;
    color: #9e9e9e;
}

.bg-primary {
    background-color: var(--primary-color) !important;
    color: #fff; /* Ensures the text is visible on the background */
}

/* Custom border styling for input fields */
.form-control {
    border: 2px solid var(--primary-color, #0d6efd); /* Default to Bootstrap primary color */
    border-radius: 4px;
    transition: border-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

 

/* Custom border styling for the color picker */
input[type="color"] {
    border: 2px solid var(--primary-color, #0d6efd);
    border-radius: 4px;
    padding: 0;
    height: 40px; /* Adjust height to align with other inputs */
    width: 60px; /* Adjust width for a compact look */
    cursor: pointer;
}

    /* Change border color on hover for the color picker */
    input[type="color"]:hover {
        border-color: var(--secondary-color, #6610f2);
    }

/* Preview box */
#colorPreview {
    border: 2px solid var(--primary-color, #0d6efd);
}

/* Completely reset focus styles */
input:focus,
textarea:focus,
select:focus,
button:focus {
    outline: none; /* Removes browser's default outline */
    box-shadow: none; /* Removes any shadow effect */
    border-color: var(--primary-color, #0d6efd); /* Ensures consistent border color */
}

/* Custom focused border for form controls */
.form-control:focus {
    border-color: var(--secondary-color, #6610f2); /* Custom border color */
    box-shadow: 0 0 0 4px rgba(102, 16, 242, 0.25); /* Optional glow effect */
    outline: none; /* Ensure no outline appears */
}

/* For color pickers */
input[type="color"]:focus {
    border-color: var(--secondary-color, #6610f2); /* Custom border color */
    box-shadow: none; /* Removes shadow if present */
}

/* Fix for Filter Button Text */
.card-header .btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem; /* Adds space between icon and text */
}

/* Align the card header button for filters */
.card-header button span {
    margin-left: 5px; /* Proper spacing for text */
}

/* Fix for Inputs in the Filters Section */
.form-control {
    border: 2px solid var(--primary-color, #0d6efd);
    border-radius: 4px;
    transition: border-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    height: 40px; /* Standardize input height */
}


.draggable {
    cursor: move;
    user-select: none;
    background-color: #f8f9fa;
    border: 1px solid #ced4da;
    margin-bottom: 5px;
    padding: 8px;
    text-align: center;
}

    .draggable.dragging {
        opacity: 0.5;
    }

.drop-zone {
    min-height: 40px;
    border: 2px dashed #ced4da;
    background-color: #e9ecef;
    margin-top: 10px;
    text-align: center;
    padding: 5px;
    transition: background-color 0.3s ease;
}

    .drop-zone.over {
        background-color: #d4edda;
    }

.mapping-target h6 {
    margin-bottom: 5px;
    color: #6c757d;
}



 

/* This will visually disable the column */
.draggable.disabled {
    opacity: 0.5; /* Fade the column to show it's mapped */
    pointer-events: none; /* Prevent interaction */
    cursor: not-allowed; /* Change cursor to indicate it's not interactable */
}

/* Optional: Add a custom background color to indicate a mapped column in the drop zone */
.mapped {
    background-color: #e0f7fa; /* Light blue for mapped columns */
    border: 2px solid #00796b; /* Green border */
}


/* Visual effect for used columns in Colonnes Excel */
.draggable.used {
    opacity: 0.5; /* Dim the column to show it's been used */
    background-color: #f0f0f0; /* Light gray background */
    cursor: not-allowed; /* Change the cursor to indicate it's used */
    pointer-events: none; /* Optionally disable interactions for the used columns */
}

    /* Optional: Add a small icon or text to show the column has been used */
    .draggable.used::after {
        content: " ✔"; /* Optional: Add a checkmark to indicate the column is used */
        color: green; /* Green checkmark */
        font-weight: bold; /* Bold checkmark */
    }

/* Visual effect for the drop zone when a column is mapped */
.mapped {
    background-color: #e0f7fa; /* Light blue background for mapped columns */
    border: 2px solid #00796b; /* Green border to indicate mapped status */
    opacity: 0.7; /* Optional: Fade to show it's mapped */
}

.used {
    opacity: 0.5;
    pointer-events: none;
}



.form-floating label {
    color: #6c757d; /* Default label color */
    transition: color 0.2s ease-in-out, transform 0.2s ease-in-out;
}

.form-floating .form-control:focus ~ label {
    color: var(--primary-color); /* Change label color when focused */
    font-weight: bold; /* Optional for emphasis */
}

.form-floating .form-control::placeholder {
    color: transparent; /* Hide placeholder when not focused */
}

.form-floating .form-control {
    border-radius: 8px;
    border: 1px solid #ced4da;
    padding: 10px 20px;
    height: 58px;
    transition: box-shadow 0.2s ease-in-out;
}

    .form-floating .form-control:focus {
        box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem var(--primary-color);
        border-color: transparent; /* Make the border transparent */
        outline: none; /* Remove any default outline */
    }

.border-primary {
    border-color: var(--primary-color) !important;
}

/* Drag-and-drop hover state */
.border-success {
    border-color: #28a745 !important; /* Green for success */
    background-color: rgba(40, 167, 69, 0.1); /* Light green background */
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

#dropzone {
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

    #dropzone.border-success {
        border-color: var(--primary-color);
        background-color: rgba(40, 167, 69, 0.1); /* Light green */
    }

#dropzoneText {
    font-size: 1rem;
    transition: color 0.3s ease;
}


/* Cyan color styling */
.text-cyan {
    color: #00bcd4;
}

.btn-cyan {
    background-color: #00bcd4;
    color: #fff;
}

    .btn-cyan:hover {
        background-color: #008ba3;
        color: #fff;
    }

/* Amber color styling */
.text-amber {
    color: #ffc107;
}

.btn-amber {
    background-color: #ffc107;
    color: #fff;
}

    .btn-amber:hover {
        background-color: #ffa000;
        color: #fff;
    }
/* Lime color styling */
.text-lime {
    color: #cddc39;
}

.btn-lime {
    background-color: #cddc39;
    color: #fff;
}

    .btn-lime:hover {
        background-color: #afb42b;
        color: #fff;
    }

/* Brown color styling */
.text-brown {
    color: #795548;
}

.btn-brown {
    background-color: #795548;
    color: #fff;
}

    .btn-brown:hover {
        background-color: #6d4c41;
        color: #fff;
    }