/* Custom scrollbar styling to fit the dark theme beautifully */
.custom-scrollbar::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.custom-scrollbar::-webkit-scrollbar-track {
    background: #0f172a; /* slate-900 */ 
    border-radius: 4px;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background: #334155; /* slate-700 */
    border-radius: 4px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: #475569; /* slate-600 */
}

/* Custom Checkbox colors (since Tailwind forms plugin isn't active via standard CDN) */
[type="checkbox"].form-checkbox {
    appearance: none;
    -webkit-appearance: none;
    background-color: transparent;
    margin: 0;
    width: 1rem;
    height: 1rem;
    border: 1px solid #334155; /* border-slate-700 */
    border-radius: 0.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

[type="checkbox"].form-checkbox:checked {
    background-color: #10b981; /* bg-brand-500 */
    border-color: #10b981;
}

[type="checkbox"].form-checkbox:checked::before {
    content: "";
    width: 0.65em;
    height: 0.65em;
    transform: scale(1);
    box-shadow: inset 1em 1em white;
    transform-origin: bottom left;
    clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
}

/* Preview Table Styling Overrides */
#preview-table th {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #1e293b; /* border-slate-800 */
    border-right: 1px solid #1e293b;
    white-space: nowrap;
}

#preview-table td {
    padding: 0.5rem 1rem;
    border-bottom: 1px solid #1e293b;
    border-right: 1px solid #1e293b;
    white-space: nowrap;
    color: #cbd5e1; /* text-slate-300 */
}

#preview-table tr:hover td {
    background-color: #0f172a; /* hover:bg-slate-900 */
}

/* Column mapping card transitions */
.mapping-card {
    transition: all 0.2s ease-in-out;
}
.mapping-card.excluded {
    opacity: 0.5;
    background-color: #020617; /* bg-slate-950 */
    border-color: #1e293b; /* border-slate-800 */
}