/* Horizontal color picker (QR Generator) */
.custom-color-picker {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Vertical color picker (CSV Table) */
.csv-color-picker {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
}

/* Common circle styles */
.color-circle-wrapper {
    position: relative;
    width: 40px;
    height: 40px;
}

.color-circle,
.csv-color-circle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid #dee2e6;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: border-color 0.2s;
}

.color-circle:hover,
.csv-color-circle:hover {
    border-color: #adb5bd;
}

.color-circle input[type="color"],
.csv-color-circle input[type="color"] {
    position: absolute;
    width: 200%;
    height: 200%;
    top: -50%;
    left: -50%;
    border: none;
    cursor: pointer;
    opacity: 0;
}

/* Hex input styles */
.hex-input,
.csv-hex-input {
    font-family: monospace;
    text-transform: uppercase;
    border: 1px solid #dee2e6;
    border-radius: 0.25rem;
}

.hex-input {
    width: 90px;
    padding: 0.375rem 0.5rem;
}

.csv-hex-input {
    width: 70px;
    font-size: 0.75rem;
    padding: 0.15rem 0.25rem;
    text-align: center;
}

.hex-input:focus,
.csv-hex-input:focus {
    outline: none;
    border-color: #86b7fe;
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
}